Merge branch '207070-metrics-anomaly-chart-rendering-fails' into 'master'

Fix broken chart: Options for axis are extended correctly in the time series

Closes #207070

See merge request gitlab-org/gitlab!25399

app/assets/javascripts/monitoring/components/charts/anomaly.vue

@@ -127,7 +127,6 @@ export default {
         });
 
       const yAxisWithOffset = {
-        name: this.yAxisLabel,
         axisLabel: {
           formatter: num => roundOffFloat(num - this.yOffset, 3).toString(),
         },
@@ -162,6 +161,7 @@ export default {
           }),
         );
       }
+
       return { yAxis: yAxisWithOffset, series: boundarySeries };
     },
   },

app/assets/javascripts/monitoring/components/charts/time_series.vue

@@ -162,7 +162,8 @@ export default {
       );
     },
     chartOptions() {
-      const option = omit(this.option, 'series');
+      const { yAxis, xAxis } = this.option;
+      const option = omit(this.option, ['series', 'yAxis', 'xAxis']);
 
       const dataYAxis = {
         name: this.yAxisLabel,
@@ -173,7 +174,9 @@ export default {
         axisLabel: {
           formatter: num => roundOffFloat(num, 3).toString(),
         },
+        ...yAxis,
       };
+
       const deploymentsYAxis = {
         show: false,
         min: deploymentYAxisCoords.min,
@@ -184,9 +187,7 @@ export default {
         },
       };
 
-      return {
-        series: this.chartOptionSeries,
-        xAxis: {
+      const timeXAxis = {
         name: __('Time'),
         type: 'time',
         axisLabel: {
@@ -195,7 +196,12 @@ export default {
         axisPointer: {
           snap: true,
         },
-        },
+        ...xAxis,
+      };
+
+      return {
+        series: this.chartOptionSeries,
+        xAxis: timeXAxis,
         yAxis: [dataYAxis, deploymentsYAxis],
         dataZoom: [this.dataZoomConfig],
         ...option,

changelogs/unreleased/metrics-anomaly-chart-rendering-fails.yml

+---
+title: Time series extends axis options correctly
+merge_request: 25399
+author:
+type: fixed

spec/frontend/monitoring/components/charts/time_series_spec.js

@@ -358,6 +358,45 @@ describe('Time series component', () => {
               expect(optionSeries[0].name).toEqual(mockSeriesName);
             });
           });
+
+          it('additional y axis data', () => {
+            const mockCustomYAxisOption = {
+              name: 'Custom y axis label',
+              axisLabel: {
+                formatter: jest.fn(),
+              },
+            };
+
+            timeSeriesChart.setProps({
+              option: {
+                yAxis: mockCustomYAxisOption,
+              },
+            });
+
+            return timeSeriesChart.vm.$nextTick().then(() => {
+              const { yAxis } = getChartOptions();
+
+              expect(yAxis[0]).toMatchObject(mockCustomYAxisOption);
+            });
+          });
+
+          it('additional x axis data', () => {
+            const mockCustomXAxisOption = {
+              name: 'Custom x axis label',
+            };
+
+            timeSeriesChart.setProps({
+              option: {
+                xAxis: mockCustomXAxisOption,
+              },
+            });
+
+            return timeSeriesChart.vm.$nextTick().then(() => {
+              const { xAxis } = getChartOptions();
+
+              expect(xAxis).toMatchObject(mockCustomXAxisOption);
+            });
+          });
         });
 
         describe('yAxis formatter', () => {