StatisticController.js

'use strict';

var directivesModule = require('../_index.js');
var $ = require('jquery');
var _ = require('underscore');


/**
 * @ngInject
 */
function StatisticController($scope, $log, $interval, $timeout, $element, Constants, FakeDataService) {

  /* -------------------------------------  */
  /* -------- Private Variables ----------  */
  /* -------------------------- ----------  */

  // Generate a unique ID on the .rtd-chart <div>, and grab that ID
  // so we know on what DOM element to call the chart constructor fn
  var chartContainerId = '#' + $($element).find('.rtd-chart').attr('id', _.uniqueId('chart_'))[0].id;

  //grab the corresponding kpi indicator element to set the correct colour code, probably eventually will need to have a few different indicators
  var kpiIndicator = $(chartContainerId).find('.kpi-indicator');
  var kpiIndicatorProperty = Constants.statisticDefaults.background;
  var kpiIndicatorWarning = Constants.statisticDefaults.warning;
  var kpiIndicatorNormal = Constants.statisticDefaults.normal;

  // How long to initially wait to display the graph
  var gridsterInitTimeoutWait = Constants.gridsterConfig.baseOptions.initFlushWait;

  // Shortcut variable for the data of the chart ( a single stat number), to be cloned and re-appled later ??

  // Container object for the chart
  var chart = null;

  // Interval from the widget config determining how often to update the chart
  var refreshInterval = $scope.widget.config.refreshRate.interval;

  // Events definitions we need to listen for
   var updateOnEvents = ['update-pulse-' + refreshInterval];


  /* -------------------------------------  */
  /* ----- Scope (Public) Variables ------  */
  /* -------------------------- ----------  */

  // Whether or not the chart is hidden
  $scope.loading = true;

  /* -------------------------------------  */
  /* ---------- Scope Functions ----------  */
  /* -------------------------- ----------  */

  // Chart initialization function
  $scope.initialize = function() {
    chart =  $scope.widget.chart;
    $scope.updateIndicator();
    $timeout(function() {
      $scope.loading = false;
    }, gridsterInitTimeoutWait);
  };

  $scope.updateIndicator = function() {
    var kpiVal = chart.data;
    var hasIndicator = chart.indicator; 
    var threshold = chart.indicator.threshold;

    if (hasIndicator && threshold) {
      $log.info('-- INFO -- \'' + chartContainerId + '\'updating indicator ' + kpiIndicator + ' for kpi value: ' + chart.data);
      if (kpiVal <= threshold) {  
        $(kpiIndicator).css(kpiIndicatorProperty, kpiIndicatorNormal);
      } else {
        $(kpiIndicator).css(kpiIndicatorProperty, kpiIndicatorWarning);
      }
    }
  };

  // Function to append new data to the end of the chart (using FakeDataService for now)
  $scope.poll = function() {
    $log.info('-- INFO -- \'' + chartContainerId + '\' got a ' + refreshInterval + 's update event! Polling server for new stat...');
    chart.data = FakeDataService.generateRandomStatisticValues(100);
    $scope.updateIndicator();
  };

  // Function to re-initialize the chart based on new settings from the config panel
  $scope.reInitialize = function() {};


  /* -------------------------------------  */
  /* ---------- Scope Watchers -----------  */
  /* -------------------------- ----------  */
  $scope.$watch('loading', function (newV, oldV) {
    if (oldV === newV) { return; }
  });


  /* -------------------------------------  */
  /* ------ Scope Event Listeners --------  */
  /* -------------------------- ----------  */

  // Poll the server for new data whenever one of these events is fired
  _.each(updateOnEvents, function(e) {
    $scope.$on(e, $scope.poll);
  });


  /* -------------------------------------  */
  /* -------------- Setup ----------------  */
  /* -------------------------- ----------  */
  $scope.initialize();

}

directivesModule.controller('StatisticController', StatisticController);