Add alpha color channel support for graph bars (#10956)

* Set fillColor in bars on load and on color change

* Change bar fill color on color override

* Added test for series overrides

* Moved bars fill color setting into time_series. Fixed issue with prev commit where you could not show bars because of series overrides.

public/app/core/specs/time_series.jest.ts

@@ -281,6 +281,20 @@ describe('TimeSeries', function() {
         expect(series.zindex).toBe(2);
         expect(series.zindex).toBe(2);
       });
       });
     });
     });
+
+    describe('override color', function() {
+      beforeEach(function() {
+        series.applySeriesOverrides([{ alias: 'test', color: '#112233' }]);
+      });
+
+      it('should set color', function() {
+        expect(series.color).toBe('#112233');
+      });
+
+      it('should set bars.fillColor', function() {
+        expect(series.bars.fillColor).toBe('#112233');
+      });
+    });
   });
   });
 
 
   describe('value formatter', function() {
   describe('value formatter', function() {

public/app/core/time_series2.ts

@@ -99,6 +99,7 @@ export default class TimeSeries {
     this.alias = opts.alias;
     this.alias = opts.alias;
     this.aliasEscaped = _.escape(opts.alias);
     this.aliasEscaped = _.escape(opts.alias);
     this.color = opts.color;
     this.color = opts.color;
+    this.bars = { fillColor: opts.color };
     this.valueFormater = kbn.valueFormats.none;
     this.valueFormater = kbn.valueFormats.none;
     this.stats = {};
     this.stats = {};
     this.legend = true;
     this.legend = true;
@@ -112,11 +113,11 @@ export default class TimeSeries {
       dashLength: [],
       dashLength: [],
     };
     };
     this.points = {};
     this.points = {};
-    this.bars = {};
     this.yaxis = 1;
     this.yaxis = 1;
     this.zindex = 0;
     this.zindex = 0;
     this.nullPointMode = null;
     this.nullPointMode = null;
     delete this.stack;
     delete this.stack;
+    delete this.bars.show;
 
 
     for (var i = 0; i < overrides.length; i++) {
     for (var i = 0; i < overrides.length; i++) {
       var override = overrides[i];
       var override = overrides[i];
@@ -168,7 +169,7 @@ export default class TimeSeries {
         this.fillBelowTo = override.fillBelowTo;
         this.fillBelowTo = override.fillBelowTo;
       }
       }
       if (override.color !== void 0) {
       if (override.color !== void 0) {
-        this.color = override.color;
+        this.setColor(override.color);
       }
       }
       if (override.transform !== void 0) {
       if (override.transform !== void 0) {
         this.transform = override.transform;
         this.transform = override.transform;
@@ -346,4 +347,9 @@ export default class TimeSeries {
 
 
     return false;
     return false;
   }
   }
+
+  setColor(color) {
+    this.color = color;
+    this.bars.fillColor = color;
+  }
 }
 }

public/app/plugins/panel/graph/module.ts

@@ -235,7 +235,7 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
   }
 
 
   changeSeriesColor(series, color) {
   changeSeriesColor(series, color) {
-    series.color = color;
+    series.setColor(color);
     this.panel.aliasColors[series.alias] = series.color;
     this.panel.aliasColors[series.alias] = series.color;
     this.render();
     this.render();
   }
   }