Graph: refactoring some stuff with legend values

src/app/components/timeSeries.js

@@ -7,9 +7,10 @@ function (_, kbn) {
 
   function TimeSeries(opts) {
     this.datapoints = opts.datapoints;
-    this.info = opts.info;
+    this.label = opts.alias;
-    this.label = opts.info.alias;
+    this.id = opts.alias;
-    this.id = opts.info.alias;
+    this.alias = opts.alias;
+    this.color = opts.color;
     this.valueFormater = kbn.valueFormats.none;
     this.stats = {};
   }
@@ -33,13 +34,13 @@ function (_, kbn) {
     this.lines = {};
     this.points = {};
     this.bars = {};
-    this.info.yaxis = 1;
+    this.yaxis = 1;
     this.zindex = 0;
     delete this.stack;
 
     for (var i = 0; i < overrides.length; i++) {
       var override = overrides[i];
-      if (!matchSeriesOverride(override.alias, this.info.alias)) {
+      if (!matchSeriesOverride(override.alias, this.alias)) {
         continue;
       }
       if (override.lines !== void 0) { this.lines.show = override.lines; }
@@ -54,7 +55,7 @@ function (_, kbn) {
       if (override.fillBelowTo !== void 0) { this.fillBelowTo = override.fillBelowTo; }
 
       if (override.yaxis !== void 0) {
-        this.info.yaxis = override.yaxis;
+        this.yaxis = override.yaxis;
       }
     }
   };
@@ -62,9 +63,6 @@ function (_, kbn) {
   TimeSeries.prototype.getFlotPairs = function (fillStyle) {
     var result = [];
 
-    this.color = this.info.color;
-    this.yaxis = this.info.yaxis;
-
     this.stats.total = 0;
     this.stats.max = Number.MIN_VALUE;
     this.stats.min = Number.MAX_VALUE;
@@ -123,12 +121,6 @@ function (_, kbn) {
     this.valueFormater = formater;
     this.decimals = decimals;
     this.scaledDecimals = scaledDecimals;
-
-    this.info.avg = this.formatValue(this.stats.avg);
-    this.info.current = this.formatValue(this.stats.current);
-    this.info.min = this.formatValue(this.stats.min);
-    this.info.max = this.formatValue(this.stats.max);
-    this.info.total = this.formatValue(this.stats.total);
   };
 
   TimeSeries.prototype.formatValue = function(value) {

src/app/directives/grafanaGraph.js

@@ -175,7 +175,7 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
             series.data = series.getFlotPairs(panel.nullPointMode, panel.y_formats);
 
             // if hidden remove points and disable stack
-            if (scope.hiddenSeries[series.info.alias]) {
+            if (scope.hiddenSeries[series.alias]) {
               series.data = [];
               series.stack = false;
             }

src/app/panels/graph/legend.js

@@ -36,7 +36,7 @@ function (angular, app, _, kbn, $) {
         function openColorSelector(e) {
           var el = $(e.currentTarget);
           var index = getSeriesIndexForElement(el);
-          var seriesInfo = data[index].info;
+          var seriesInfo = data[index];
           var popoverScope = scope.$new();
           popoverScope.series = seriesInfo;
           popoverSrv.show({
@@ -49,7 +49,7 @@ function (angular, app, _, kbn, $) {
         function toggleSeries(e) {
           var el = $(e.currentTarget);
           var index = getSeriesIndexForElement(el);
-          var seriesInfo = data[index].info;
+          var seriesInfo = data[index];
           scope.toggleSeries(seriesInfo, e);
         }
 
@@ -83,8 +83,8 @@ function (angular, app, _, kbn, $) {
           for (i = 0; i < data.length; i++) {
             var series = data[i];
             var html = '<div class="graph-legend-series';
-            if (series.info.yaxis === 2) { html += ' pull-right'; }
+            if (series.yaxis === 2) { html += ' pull-right'; }
-            if (scope.hiddenSeries[series.label]) { html += ' graph-legend-series-hidden'; }
+            if (scope.hiddenSeries[series.alias]) { html += ' graph-legend-series-hidden'; }
             html += '" data-series-index="' + i + '">';
             html += '<div class="graph-legend-icon">';
             html += '<i class="icon-minus pointer" style="color:' + series.color + '"></i>';
@@ -94,12 +94,18 @@ function (angular, app, _, kbn, $) {
             html += '<a>' + series.label + '</a>';
             html += '</div>';
 
+            var avg = series.formatValue(series.stats.avg);
+            var current = series.formatValue(series.stats.current);
+            var min = series.formatValue(series.stats.min);
+            var max = series.formatValue(series.stats.max);
+            var total = series.formatValue(series.stats.total);
+
             if (panel.legend.values) {
-              if (panel.legend.min) { html += '<div class="graph-legend-value min small">' + series.info.min + '</div>'; }
+              if (panel.legend.min) { html += '<div class="graph-legend-value min small">' + min + '</div>'; }
-              if (panel.legend.max) { html += '<div class="graph-legend-value max small">' + series.info.max + '</div>'; }
+              if (panel.legend.max) { html += '<div class="graph-legend-value max small">' + max + '</div>'; }
-              if (panel.legend.avg) { html += '<div class="graph-legend-value avg small">' + series.info.avg + '</div>'; }
+              if (panel.legend.avg) { html += '<div class="graph-legend-value avg small">' + avg + '</div>'; }
-              if (panel.legend.current) { html += '<div class="graph-legend-value current small">' + series.info.current + '</div>'; }
+              if (panel.legend.current) { html += '<div class="graph-legend-value current small">' + current + '</div>'; }
-              if (panel.legend.total) { html += '<div class="graph-legend-value total small">' + series.info.total + '</div>'; }
+              if (panel.legend.total) { html += '<div class="graph-legend-value total small">' + total + '</div>'; }
             }
 
             html += '</div>';

src/app/panels/graph/module.js

@@ -112,6 +112,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
     _.defaults($scope.panel.legend, _d.legend);
 
     $scope.hiddenSeries = {};
+    $scope.seriesList = [];
 
     $scope.updateTimeRange = function () {
       $scope.range = timeSrv.timeRange();
@@ -145,6 +146,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
           $scope.panelMeta.loading = false;
           $scope.panelMeta.error = err.message || "Timeseries data request error";
           $scope.inspector.error = err;
+          $scope.seriesList = [];
           $scope.render([]);
         });
     };
@@ -162,16 +164,16 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
       $scope.datapointsCount = 0;
       $scope.datapointsOutside = false;
 
-      var data = _.map(results.data, $scope.seriesHandler);
+      $scope.seriesList = _.map(results.data, $scope.seriesHandler);
 
       $scope.datapointsWarning = $scope.datapointsCount === 0 || $scope.datapointsOutside;
 
       $scope.annotationsPromise
         .then(function(annotations) {
-          data.annotations = annotations;
+          $scope.seriesList.annotations = annotations;
-          $scope.render(data);
+          $scope.render($scope.seriesList);
         }, function() {
-          $scope.render(data);
+          $scope.render($scope.seriesList);
         });
     };
 
@@ -182,7 +184,8 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
 
       var series = new TimeSeries({
         datapoints: datapoints,
-        info: {alias: alias, color: color},
+        alias: alias,
+        color: color,
       });
 
       if (datapoints && datapoints.length > 0) {
@@ -231,7 +234,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
       }
 
       // check if every other series is hidden
-      var alreadyExclusive = _.every($scope.legend, function(value) {
+      var alreadyExclusive = _.every($scope.seriesList, function(value) {
         if (value.alias === serie.alias) {
           return true;
         }
@@ -241,13 +244,13 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
 
       if (alreadyExclusive) {
         // remove all hidden series
-        _.each($scope.legend, function(value) {
+        _.each($scope.seriesList, function(value) {
           delete $scope.hiddenSeries[value.alias];
         });
       }
       else {
         // hide all but this serie
-        _.each($scope.legend, function(value) {
+        _.each($scope.seriesList, function(value) {
           if (value.alias === serie.alias) {
             return;
           }

src/test/specs/grafanaGraph-specs.js

@@ -47,11 +47,11 @@ define([
             ctx.data = [];
             ctx.data.push(new TimeSeries({
               datapoints: [[1,1],[2,2]],
-              info: { alias: 'series1', enable: true }
+              alias: 'series1'
             }));
             ctx.data.push(new TimeSeries({
               datapoints: [[1,1],[2,2]],
-              info: { alias: 'series2', enable: true }
+              alias: 'series2'
             }));
 
             setupFunc(scope, ctx.data);
@@ -131,7 +131,7 @@ define([
         scope.panel.bars = true;
         data[0] = new TimeSeries({
           datapoints: [[1,10],[2,20]],
-          info: { alias: 'series1', enable: true }
+          alias: 'series1',
         });
       });
 
@@ -148,7 +148,7 @@ define([
           { alias: 'test', fill: 0, points: true }
         ];
 
-        data[1].info.alias = 'test';
+        data[1].alias = 'test';
       });
 
       it('should match second series and fill zero, and enable points', function() {
@@ -164,8 +164,8 @@ define([
       });
 
       it('should move zindex 2 last', function() {
-        expect(ctx.plotData[0].info.alias).to.be('series2');
+        expect(ctx.plotData[0].alias).to.be('series2');
-        expect(ctx.plotData[1].info.alias).to.be('series1');
+        expect(ctx.plotData[1].alias).to.be('series1');
       });
     });
 
@@ -175,7 +175,7 @@ define([
       });
 
       it('should remove datapoints and disable stack', function() {
-        expect(ctx.plotData[0].info.alias).to.be('series1');
+        expect(ctx.plotData[0].alias).to.be('series1');
         expect(ctx.plotData[1].data.length).to.be(0);
         expect(ctx.plotData[1].stack).to.be(false);
       });

src/test/specs/timeSeries-specs.js

@@ -7,7 +7,7 @@ define([
     var points, series;
     var yAxisFormats = ['short', 'ms'];
     var testData = {
-      info: { alias: 'test' },
+      alias: 'test',
       datapoints: [
         [1,2],[null,3],[10,4],[8,5]
       ]
@@ -36,7 +36,7 @@ define([
 
       describe('fill & points', function() {
         beforeEach(function() {
-          series.info.alias = 'test';
+          series.alias = 'test';
           series.applySeriesOverrides([{ alias: 'test', fill: 0, points: true }]);
         });
 
@@ -48,7 +48,7 @@ define([
 
       describe('series option overrides, bars, true & lines false', function() {
         beforeEach(function() {
-          series.info.alias = 'test';
+          series.alias = 'test';
           series.applySeriesOverrides([{ alias: 'test', bars: true, lines: false }]);
         });
 
@@ -60,7 +60,7 @@ define([
 
       describe('series option overrides, linewidth, stack', function() {
         beforeEach(function() {
-          series.info.alias = 'test';
+          series.alias = 'test';
           series.applySeriesOverrides([{ alias: 'test', linewidth: 5, stack: false }]);
         });
 
@@ -72,7 +72,7 @@ define([
 
       describe('series option overrides, fill below to', function() {
         beforeEach(function() {
-          series.info.alias = 'test';
+          series.alias = 'test';
           series.applySeriesOverrides([{ alias: 'test', fillBelowTo: 'min' }]);
         });
 
@@ -83,7 +83,7 @@ define([
 
       describe('series option overrides, pointradius, steppedLine', function() {
         beforeEach(function() {
-          series.info.alias = 'test';
+          series.alias = 'test';
           series.applySeriesOverrides([{ alias: 'test', pointradius: 5, steppedLine: true }]);
         });
 
@@ -95,7 +95,7 @@ define([
 
       describe('override match on regex', function() {
         beforeEach(function() {
-          series.info.alias = 'test_01';
+          series.alias = 'test_01';
           series.applySeriesOverrides([{ alias: '/.*01/', lines: false }]);
         });
 
@@ -106,12 +106,12 @@ define([
 
       describe('override series y-axis, and z-index', function() {
         beforeEach(function() {
-          series.info.alias = 'test';
+          series.alias = 'test';
           series.applySeriesOverrides([{ alias: 'test', yaxis: 2, zindex: 2 }]);
         });
 
         it('should set yaxis', function() {
-          expect(series.info.yaxis).to.be(2);
+          expect(series.yaxis).to.be(2);
         });
 
         it('should set zindex', function() {