Fix monitor charts zoom error

Monitor dashboard charts throw error when
zoomed quickly and breaks the page

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

@@ -253,23 +253,25 @@ export default {
       this.tooltip.title = dateFormat(params.value, dateFormats.default);
       this.tooltip.content = [];
       params.seriesData.forEach(dataPoint => {
-        const [xVal, yVal] = dataPoint.value;
-        this.tooltip.isDeployment = dataPoint.componentSubType === graphTypes.deploymentData;
-        if (this.tooltip.isDeployment) {
-          const [deploy] = this.recentDeployments.filter(
-            deployment => deployment.createdAt === xVal,
-          );
-          this.tooltip.sha = deploy.sha.substring(0, 8);
-          this.tooltip.commitUrl = deploy.commitUrl;
-        } else {
-          const { seriesName, color, dataIndex } = dataPoint;
-          const value = yVal.toFixed(3);
-          this.tooltip.content.push({
-            name: seriesName,
-            dataIndex,
-            value,
-            color,
-          });
+        if (dataPoint.value) {
+          const [xVal, yVal] = dataPoint.value;
+          this.tooltip.isDeployment = dataPoint.componentSubType === graphTypes.deploymentData;
+          if (this.tooltip.isDeployment) {
+            const [deploy] = this.recentDeployments.filter(
+              deployment => deployment.createdAt === xVal,
+            );
+            this.tooltip.sha = deploy.sha.substring(0, 8);
+            this.tooltip.commitUrl = deploy.commitUrl;
+          } else {
+            const { seriesName, color, dataIndex } = dataPoint;
+            const value = yVal.toFixed(3);
+            this.tooltip.content.push({
+              name: seriesName,
+              dataIndex,
+              value,
+              color,
+            });
+          }
         }
       });
     },

changelogs/unreleased/32780-when-zooming-metrics-at-some-point-we-can-t-adjust-the-zoom-any-fur.yml

+---
+title: Fixed monitor charts from throwing error when zoomed
+merge_request: 20331
+author:
+type: fixed

spec/frontend/monitoring/charts/time_series_spec.js

@@ -116,6 +116,19 @@ describe('Time series component', () => {
           });
         });
 
+        it('does not throw error if data point is outside the zoom range', () => {
+          const seriesDataWithoutValue = generateSeriesData('line');
+          expect(
+            timeSeriesChart.vm.formatTooltipText({
+              ...seriesDataWithoutValue,
+              seriesData: seriesDataWithoutValue.seriesData.map(data => ({
+                ...data,
+                value: undefined,
+              })),
+            }),
+          ).toBeUndefined();
+        });
+
         describe('when series is of line type', () => {
           beforeEach(done => {
             timeSeriesChart.vm.formatTooltipText(generateSeriesData('line'));