Graph: Add fill gradient option to series override line fill (#20941)

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

@@ -276,6 +276,19 @@ describe('TimeSeries', () => {
       });
       });
     });
     });
 
 
+    describe('fillGradient', () => {
+      beforeEach(() => {
+        series.alias = 'test';
+        series.applySeriesOverrides([{ alias: 'test', fill: 10, fillGradient: 10 }]);
+      });
+
+      it('should set fillcolor to gradient', () => {
+        expect(series.lines.fillColor).toMatchObject({
+          colors: [{ opacity: 0.0 }, { opacity: 1 }],
+        });
+      });
+    });
+
     describe('series option overrides, bars, true & lines false', () => {
     describe('series option overrides, bars, true & lines false', () => {
       beforeEach(() => {
       beforeEach(() => {
         series.alias = 'test';
         series.alias = 'test';

public/app/core/time_series2.ts

@@ -19,6 +19,16 @@ function translateFillOption(fill: number) {
   return fill === 0 ? 0.001 : fill / 10;
   return fill === 0 ? 0.001 : fill / 10;
 }
 }
 
 
+function getFillGradient(amount: number) {
+  if (!amount) {
+    return null;
+  }
+
+  return {
+    colors: [{ opacity: 0.0 }, { opacity: amount / 10 }],
+  };
+}
+
 /**
 /**
  * Calculate decimals for legend and update values for each series.
  * Calculate decimals for legend and update values for each series.
  * @param data series data
  * @param data series data
@@ -157,6 +167,9 @@ export default class TimeSeries {
       if (override.fill !== void 0) {
       if (override.fill !== void 0) {
         this.lines.fill = translateFillOption(override.fill);
         this.lines.fill = translateFillOption(override.fill);
       }
       }
+      if (override.fillGradient !== void 0) {
+        this.lines.fillColor = getFillGradient(override.fillGradient);
+      }
       if (override.stack !== void 0) {
       if (override.stack !== void 0) {
         this.stack = override.stack;
         this.stack = override.stack;
       }
       }

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

@@ -79,7 +79,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     lines: true,
     lines: true,
     // fill factor
     // fill factor
     fill: 1,
     fill: 1,
-    // fill factor
+    // fill gradient
     fillGradient: 0,
     fillGradient: 0,
     // line width in pixels
     // line width in pixels
     linewidth: 1,
     linewidth: 1,

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

@@ -101,6 +101,7 @@ export function SeriesOverridesCtrl($scope: any, $element: JQuery, popoverSrv: a
   $scope.addOverrideOption('Bars', 'bars', [true, false]);
   $scope.addOverrideOption('Bars', 'bars', [true, false]);
   $scope.addOverrideOption('Lines', 'lines', [true, false]);
   $scope.addOverrideOption('Lines', 'lines', [true, false]);
   $scope.addOverrideOption('Line fill', 'fill', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
   $scope.addOverrideOption('Line fill', 'fill', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+  $scope.addOverrideOption('Fill gradient', 'fillGradient', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
   $scope.addOverrideOption('Line width', 'linewidth', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
   $scope.addOverrideOption('Line width', 'linewidth', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
   $scope.addOverrideOption('Null point mode', 'nullPointMode', ['connected', 'null', 'null as zero']);
   $scope.addOverrideOption('Null point mode', 'nullPointMode', ['connected', 'null', 'null as zero']);
   $scope.addOverrideOption('Fill below to', 'fillBelowTo', $scope.getSeriesNames());
   $scope.addOverrideOption('Fill below to', 'fillBelowTo', $scope.getSeriesNames());