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,6 +253,7 @@ export default {
       this.tooltip.title = dateFormat(params.value, dateFormats.default);
       this.tooltip.content = [];
       params.seriesData.forEach(dataPoint => {
+        if (dataPoint.value) {
           const [xVal, yVal] = dataPoint.value;
           this.tooltip.isDeployment = dataPoint.componentSubType === graphTypes.deploymentData;
           if (this.tooltip.isDeployment) {
@@ -271,6 +272,7 @@ export default {
               color,
             });
           }
+        }
       });
     },
     setSvg(name) {

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'));