Time series extends axis options correctly

Upper component should be able to pass options to the time series
without destroying the structure of original options.

This change added the xAxis and yAxis configuration to the options
without replacing them completly, similarly to the series.

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,18 +187,21 @@ export default {
         },
       };
 
+      const timeXAxis = {
+        name: __('Time'),
+        type: 'time',
+        axisLabel: {
+          formatter: date => dateFormat(date, dateFormats.timeOfDay),
+        },
+        axisPointer: {
+          snap: true,
+        },
+        ...xAxis,
+      };
+
       return {
         series: this.chartOptionSeries,
-        xAxis: {
-          name: __('Time'),
-          type: 'time',
-          axisLabel: {
-            formatter: date => dateFormat(date, dateFormats.timeOfDay),
-          },
-          axisPointer: {
-            snap: true,
-          },
-        },
+        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', () => {