greenhouse-MyController/www/controllers/adf-widgets/adf-myc-smg/adf-myc-sensors-mixed-graph.js

/*
 * Copyright 2015-2018 Jeeva Kandasamy (jkandasa@gmail.com)
 * and other contributors as indicated by the @author tags.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
// don't forget to declare this service module as a dependency in your main app constructor!
//http://js2.coffee/#coffee2js
//https://coderwall.com/p/r_bvhg/angular-ui-bootstrap-alert-service-for-angular-js

'use strict';

angular.module('adf.widget.myc-sensors-mixed-graph', [])
  .config(function(dashboardProvider){
    dashboardProvider
      .widget('mycSensorsMixedGraph', {
        title: 'Mixed sensors graph',
        description: 'Different type of sensors mixed graphical view [refer document]',
        templateUrl: 'controllers/adf-widgets/adf-myc-smg/view.html?mcv=29',
        controller: 'mycSensorsMixedGraphController',
        controllerAs: 'mycSensorsMixedGraph',
        config: {
          useInteractiveGuideline:false,
          enableUniqueName:false,
          chartInterpolate:"linear",
          variableId:[],
          variableType:[],
          chartFromTimestamp:'3600000',
          refreshTime:30,
          marginTop:5,
          marginRight:20,
          marginBottom:60,
          marginLeft:65,
        },
        edit: {
          templateUrl: 'controllers/adf-widgets/adf-myc-smg/edit.html?mcv=29',
          controller: 'mycSensorsMixedGraphEditController',
          controllerAs: 'mycSensorsMixedGraphEdit',
        }
      });
  })
  .controller('mycSensorsMixedGraphController', function($scope, $interval, config, mchelper, $filter, MetricsFactory, CommonServices){
    var mycSensorsMixedGraph = this;
    mycSensorsMixedGraph.showLoading = true;
    mycSensorsMixedGraph.showError = false;
    mycSensorsMixedGraph.isSyncing = false;

    CommonServices.updateGraphMarginDefault(config);

    mycSensorsMixedGraph.chartOptions = {
        chart: {
            type: 'multiChart',
            noErrorCheck: true,
            height: 225,
            margin : {
                top: config.marginTop,
                right: config.marginRight,
                bottom: config.marginBottom,
                left: config.marginLeft,
            },
            color: d3.scale.category10().range(),
            duration: 500,
            noData: $filter('translate')('NO_DATA_AVAILABLE'),

            //x: function(d,i){return d[0];},
            //y: function(d,i){return d[1];},
            clipEdge: false,
            useVoronoi: !config.useInteractiveGuideline,
            useInteractiveGuideline: config.useInteractiveGuideline,

            xAxis: {
                showMaxMin: false,
                tickFormat: function(d) {
                    return d3.time.format('hh:mm a')(new Date(d))
                },
                //axisLabel: 'Timestamp',
                rotateLabels: -20
            },
            yAxis1: {
               axisLabelDistance: -10,
                //axisLabel: ''
            },
            yAxis2: {
                axisLabelDistance: -10,
                //axisLabel: ''
            },
        },
          title: {
            enable: false,
            text: 'Title'
        }
    };

    mycSensorsMixedGraph.chartTimeFormat = mchelper.cfg.dateFormat;


    function updateChart(){
      mycSensorsMixedGraph.isSyncing = true;
      MetricsFactory.getMetricsData({"variableId":config.variableId, "chartType":"multiChart", "start": new Date().getTime() - config.chartFromTimestamp, "enableDetailedKey": config.enableUniqueName === undefined ? false : config.enableUniqueName}, function(resource){
        if(resource.length > 0){
           mycSensorsMixedGraph.chartData = resource[0].chartData;
          //Update display time format
          mycSensorsMixedGraph.chartTimeFormat = resource[0].timeFormat;
          mycSensorsMixedGraph.chartOptions.chart.xAxis.tickFormat = function(d) {return $filter('date')(d, mycSensorsMixedGraph.chartTimeFormat, mchelper.cfg.timezone)};
          mycSensorsMixedGraph.chartOptions.chart.interpolate = config.chartInterpolate;

          if(resource[0].unit === ''){
            mycSensorsMixedGraph.chartOptions.chart.yAxis1.tickFormat = function(d){return d3.format('.0f')(d);};
          }else{
            //Not displaying properly axis unit, there is an issue
            if(config.useInteractiveGuideline){
              mycSensorsMixedGraph.chartOptions.chart.yAxis1.tickFormat = function(d){return d3.format('.02f')(d) + ' ' + resource[0].unit;};
            }else{
              mycSensorsMixedGraph.chartOptions.chart.yAxis1.tickFormat = function(d){return d3.format('.02f')(d)};
            }
          }

          if(resource[0].unit2 === ''){
            mycSensorsMixedGraph.chartOptions.chart.yAxis2.tickFormat = function(d){return d3.format('.0f')(d);};
          }else{
            mycSensorsMixedGraph.chartOptions.chart.yAxis2.tickFormat = function(d){return d3.format('.02f')(d) + ' ' + resource[0].unit2;};
          }

        }else{
          if(config.variableId.length !== 0){
            mycSensorsMixedGraph.showError = true;
          }
        }
        mycSensorsMixedGraph.isSyncing = false;
        if(mycSensorsMixedGraph.showLoading){
          mycSensorsMixedGraph.showLoading = false;
        }
      });
    }

    function updateVariables(){
      if(mycSensorsMixedGraph.isSyncing){
        return;
      }else if(config.variableId.length !== 0){
        updateChart();
      }
    }

    //load graph initially
    updateVariables();

    // refresh every second
    var promise = $interval(updateChart, config.refreshTime*1000);

    // cancel interval on scope destroy
    $scope.$on('$destroy', function(){
      $interval.cancel(promise);
    });


  }).controller('mycSensorsMixedGraphEditController', function($scope, $interval, config, mchelper, $filter, TypesFactory, CommonServices){
    var mycSensorsMixedGraphEdit = this;

    mycSensorsMixedGraphEdit.onVariableTypeChange = function(){
      if(config.variableType.length > 0){
        TypesFactory.getSensorVariables({"variableType":config.variableType}, function(response){
          mycSensorsMixedGraphEdit.variables = response;
          var newVariableId = [];
          response.forEach(function(item) {
            if(config.variableId.indexOf(item.id.toString()) !== -1){
              newVariableId.push(item.id.toString());
            }
          });
          config.variableId = newVariableId;
        });
      }else{
        mycSensorsMixedGraphEdit.variables = {};
        config.variableId = [];
      }
    };

    //Pre load
    mycSensorsMixedGraphEdit.cs = CommonServices;
    //Load variable types
    mycSensorsMixedGraphEdit.variableTypes = TypesFactory.getSensorVariableTypes({"metricType":["Double","Binary","Counter"]});
    if(config.variableType.length > 0){
      var variableIdRef = config.variableId;
      mycSensorsMixedGraphEdit.onVariableTypeChange();
      config.variableId = variableIdRef;
    }
  });