Began work on applying per series options to flot options

src/app/panels/graph/timeSeries.js → src/app/components/timeSeries.js

@@ -5,15 +5,13 @@ define([
 function (_, kbn) {
   'use strict';
 
-  var ts = {};
-
-  ts.ZeroFilled = function (opts) {
+  function TimeSeries(opts) {
     this.datapoints = opts.datapoints;
     this.info = opts.info;
     this.label = opts.info.alias;
-  };
+  }
 
-  ts.ZeroFilled.prototype.getFlotPairs = function (fillStyle, yFormats) {
+  TimeSeries.prototype.getFlotPairs = function (fillStyle, yFormats) {
     var result = [];
 
     this.color = this.info.color;
@@ -74,5 +72,6 @@ function (_, kbn) {
     return result;
   };
 
-  return ts;
+  return TimeSeries;
+
 });

src/app/directives/grafanaGraph.js

@@ -154,10 +154,9 @@ function (angular, $, kbn, moment, _) {
           };
 
           for (var i = 0; i < data.length; i++) {
-            var _d = data[i].getFlotPairs(panel.nullPointMode, panel.y_formats);
-            data[i].data = _d;
-            data[0].lines = { show: false, dashes: true };
-            data[0].bars = { show: true  };
+            var series = data[i];
+            series.data = series.getFlotPairs(panel.nullPointMode, panel.y_formats);
+            applySeriesOverrideOptions(series);
           }
 
           if (data.length && data[0].info.timeStep) {
@@ -184,6 +183,19 @@ function (angular, $, kbn, moment, _) {
           }
         }
 
+        function applySeriesOverrideOptions(series) {
+          for (var i = 0; i < scope.panel.seriesOverrides.length; i++) {
+            var override = scope.panel.seriesOverrides[i];
+            if (override.alias === series.info.alias) {
+              if (!_.isUndefined(override.fill)) {
+                series.lines = {
+                  fill: override.fill === 0 ? 0.001 : override.fill/10
+                };
+              }
+            }
+          }
+        }
+
         function shouldDelayDraw(panel) {
           if (panel.legend.rightSide) {
             return true;

src/app/panels/graph/module.js

@@ -5,7 +5,7 @@ define([
   'lodash',
   'kbn',
   'moment',
-  './timeSeries',
+  'components/timeSeries',
   './seriesOverridesCtrl',
   'services/panelSrv',
   'services/annotationsSrv',
@@ -17,7 +17,7 @@ define([
   'jquery.flot.stack',
   'jquery.flot.stackpercent'
 ],
-function (angular, app, $, _, kbn, moment, timeSeries) {
+function (angular, app, $, _, kbn, moment, TimeSeries) {
   'use strict';
 
   var module = angular.module('grafana.panels.graph');
@@ -258,7 +258,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
       $scope.legend.push(seriesInfo);
 
-      var series = new timeSeries.ZeroFilled({
+      var series = new TimeSeries({
         datapoints: datapoints,
         info: seriesInfo,
       });

src/app/panels/graph/seriesOverridesCtrl.js

@@ -35,6 +35,7 @@ define([
       var value = option.values[valueIndex];
       $scope.override[option.propertyName] = value;
       $scope.updateCurrentOverrides();
+      $scope.render();
     };
 
     $scope.removeOverride = function(option) {

src/app/panels/graph/styleEditor.html

@@ -84,7 +84,7 @@
 							alias or regex
 						</li>
 						<li>
-							<input type="text" class="input-medium grafana-target-segment-input" >
+							<input type="text" ng-model="override.alias" class="input-medium grafana-target-segment-input" >
 						</li>
 						<li class="grafana-target-segment" ng-repeat="option in currentOverrides">
 							<a class="pointer" ng-click="removeOverride(option)">

src/test/specs/grafanaGraph-specs.js

@@ -2,8 +2,9 @@ define([
   './helpers',
   'angular',
   'jquery',
+  'components/timeSeries',
   'directives/grafanaGraph'
-], function(helpers, angular, $) {
+], function(helpers, angular, $, TimeSeries) {
   'use strict';
 
   describe('grafanaGraph', function() {
@@ -22,21 +23,31 @@ define([
             scope.panel = {
               legend: {},
               grid: {},
-              y_formats: []
+              y_formats: [],
+              seriesOverrides: []
             };
             scope.dashboard = { timezone: 'browser' };
             scope.range = {
               from: new Date('2014-08-09 10:00:00'),
               to: new Date('2014-09-09 13:00:00')
             };
+            ctx.data = [];
+            ctx.data.push(new TimeSeries({
+              datapoints: [[1,1],[2,2]],
+              info: { alias: 'series1', enable: true }
+            }));
+            ctx.data.push(new TimeSeries({
+              datapoints: [[1,1],[2,2]],
+              info: { alias: 'series2', enable: true }
+            }));
 
-            setupFunc(scope);
+            setupFunc(scope, ctx.data);
 
             $compile(element)(scope);
             scope.$digest();
             $.plot = ctx.plotSpy = sinon.spy();
 
-            scope.$emit('render', []);
+            scope.$emit('render', ctx.data);
             ctx.plotData = ctx.plotSpy.getCall(0).args[1];
             ctx.plotOptions = ctx.plotSpy.getCall(0).args[2];
           }));
@@ -63,6 +74,23 @@ define([
 
     });
 
+    graphScenario('series option fill override', function(ctx) {
+      ctx.setup(function(scope, data) {
+        scope.panel.lines = true;
+        scope.panel.fill = 5;
+        scope.panel.seriesOverrides = [
+          { alias: 'test', fill: 0 }
+        ];
+
+        data[1].info.alias = 'test';
+      });
+
+      it('should match second series and set line fill', function() {
+        expect(ctx.plotOptions.series.lines.fill).to.be(0.5);
+        expect(ctx.plotData[1].lines.fill).to.be(0.001);
+      });
+
+    });
   });
 });
 

src/test/specs/seriesOverridesCtrl-specs.js

@@ -12,6 +12,9 @@ define([
 
     beforeEach(ctx.providePhase());
     beforeEach(ctx.createControllerPhase('SeriesOverridesCtrl'));
+    beforeEach(function() {
+      ctx.scope.render = function() {};
+    });
 
     describe('Controller should init overrideMenu', function() {
       it('click should include option and value index', function() {