Match color of tooltip and legend with area

2 files changed, 30 insertions, 13 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/anomaly.vue b/app/assets/javascripts/monitoring/components/charts/anomaly.vue
index 24af4645ca9..72f5412d456 100644
--- a/app/assets/javascripts/monitoring/components/charts/anomaly.vue
+++ b/app/assets/javascripts/monitoring/components/charts/anomaly.vue
@@ -4,6 +4,7 @@ import dateFormat from 'dateformat';
 import { GlLink, GlButton } from '@gitlab/ui';
 import { GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import { debounceByAnimationFrame, roundOffFloat } from '~/lib/utils/common_utils';
+import { hexToRgb } from '~/lib/utils/color_utils';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import Icon from '~/vue_shared/components/icon.vue';
 import {
@@ -139,6 +140,13 @@ export default {
         : areaOpacityValues.default;
       return style.area;
     },
+    areaColorAsRgba() {
+      if (this.areaStyle.color && _.isNumber(this.areaStyle.opacity)) {
+        const rgb = hexToRgb(this.areaStyle.color);
+        return `rgba(${rgb.join(',')},${this.areaStyle.opacity})`;
+      }
+      return null;
+    },
     chartData() {
       return [
         {
@@ -293,10 +301,9 @@ export default {
         type: 'line',
         stack: stackKey,
         lineStyle: {
-          color: this.primaryColor,
-          opacity: 0,
+          color: this.areaColorAsRgba, // appears in the legend
         },
-        color: this.primaryColor, // used in the tooltip
+        color: this.areaColorAsRgba, // appears in the tooltip
         symbol: 'none',
         ...series,
       };
@@ -342,6 +349,7 @@ export default {
         v-bind="$attrs"
         :data="chartData"
         :option="chartOptions"
+        :include-legend-avg-max="false"
         :format-tooltip-text="formatTooltipText"
         :thresholds="thresholds"
         :width="width"
diff --git a/spec/frontend/monitoring/components/charts/anomaly_spec.js b/spec/frontend/monitoring/components/charts/anomaly_spec.js
index ccc8f4edffd..61ef86d9f3a 100644
--- a/spec/frontend/monitoring/components/charts/anomaly_spec.js
+++ b/spec/frontend/monitoring/components/charts/anomaly_spec.js
@@ -1,6 +1,9 @@
 import Anomaly from '~/monitoring/components/charts/anomaly.vue';
-import { graphTypes } from '~/monitoring/constants';
+
 import { GlLineChart } from '@gitlab/ui/dist/charts';
+import { shallowMount } from '@vue/test-utils';
+import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
+import { graphTypes } from '~/monitoring/constants';
 import {
   anomalyDeploymentData,
   mockProjectPath,
@@ -9,11 +12,14 @@ import {
   anomalyMockResultValues,
 } from '../../mock_data';
 import { TEST_HOST } from 'helpers/test_constants';
-import { shallowMount } from '@vue/test-utils';
 
+const blue = '#0000FF';
+const blueAsRgb = '0,0,255';
 const mockWidgets = 'mockWidgets';
 const projectPath = `${TEST_HOST}${mockProjectPath}`;
 
+jest.mock('~/lib/utils/icon_utils'); // mock getSvgIconPathContent
+
 const makeAnomalyGraphData = (datasetName, template = anomalyMockGraphData) => {
   const queries = anomalyMockResultValues[datasetName].map((values, index) => ({
     ...template.queries[index],
@@ -44,6 +50,8 @@ describe('Anomaly chart component', () => {
     beforeEach(() => {
       anomalyGraphData = makeAnomalyGraphData('noAnomaly');
 
+      getSvgIconPathContent.mockReturnValue(Promise.resolve('PATH'));
+
       anomalyChart = makeAnomalyChart({
         graphData: anomalyGraphData,
         deploymentData: anomalyDeploymentData,
@@ -101,6 +109,7 @@ describe('Anomaly chart component', () => {
           graphData,
           deploymentData: anomalyDeploymentData,
         });
+        wrapper.vm.primaryColor = blue;
         glChart = wrapper.find(GlLineChart);
       });
 
@@ -181,14 +190,15 @@ describe('Anomaly chart component', () => {
         });
 
         it('is 2 stacked line series', () => {
-          expect(boundarySeries.length).toBe(2);
           boundarySeries.forEach(series => {
             expect(series).toEqual(
               expect.objectContaining({
                 lineStyle: {
-                  color: null,
-                  opacity: 0,
+                  // a lower opacity shade of `blue`
+                  color: expect.stringContaining(blueAsRgb),
                 },
+                // a lower opacity shade of `blue`
+                color: expect.stringContaining(blueAsRgb),
                 type: 'line',
               }),
             );
@@ -230,7 +240,6 @@ describe('Anomaly chart component', () => {
 
     describe('with anomalies', () => {
       const wrapperGraphData = makeAnomalyGraphData('oneAnomaly');
-      const primaryColor = 'nonAnomalyBlue';
       let props;
 
       beforeEach(() => {
@@ -238,7 +247,7 @@ describe('Anomaly chart component', () => {
           graphData: wrapperGraphData,
         });
         const glChart = wrapper.find(GlLineChart);
-        wrapper.vm.primaryColor = primaryColor;
+        wrapper.vm.primaryColor = blue;
         props = glChart.props();
       });
 
@@ -254,9 +263,9 @@ describe('Anomaly chart component', () => {
         const colorFn = props.data[0].itemStyle.color;
 
         expect(colorFn).toBeInstanceOf(Function);
-        expect(colorFn({ dataIndex: 0 })).toEqual(primaryColor);
-        expect(colorFn({ dataIndex: 1 })).not.toEqual(primaryColor);
-        expect(colorFn({ dataIndex: 2 })).toEqual(primaryColor);
+        expect(colorFn({ dataIndex: 0 })).toEqual(blue);
+        expect(colorFn({ dataIndex: 1 })).not.toEqual(blue);
+        expect(colorFn({ dataIndex: 2 })).toEqual(blue);
       });
     });