Add zoom to metrics dashboard

Adds the ability to change data zoom for metrics graphs

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

@@ -57,7 +57,7 @@ export default {
       },
       width: 0,
       height: 0,
-      scatterSymbol: undefined,
+      svgs: {},
     };
   },
   computed: {
@@ -78,25 +78,25 @@ export default {
           axisPointer: {
             snap: true,
           },
-          nameTextStyle: {
-            padding: [18, 0, 0, 0],
-          },
         },
         yAxis: {
           name: this.yAxisLabel,
           axisLabel: {
             formatter: value => value.toFixed(3),
           },
-          nameTextStyle: {
-            padding: [0, 0, 36, 0],
-          },
         },
         legend: {
           formatter: this.xAxisLabel,
         },
         series: this.scatterSeries,
+        dataZoom: this.dataZoomConfig,
       };
     },
+    dataZoomConfig() {
+      const handleIcon = this.svgs['scroll-handle'];
+
+      return handleIcon ? { handleIcon } : {};
+    },
     earliestDatapoint() {
       return Object.values(this.chartData).reduce((acc, data) => {
         const [[timestamp]] = data.sort(([a], [b]) => {
@@ -131,7 +131,7 @@ export default {
       return {
         type: 'scatter',
         data: this.recentDeployments.map(deployment => [deployment.createdAt, 0]),
-        symbol: this.scatterSymbol,
+        symbol: this.svgs.rocket,
         symbolSize: 14,
       };
     },
@@ -151,7 +151,8 @@ export default {
   created() {
     debouncedResize = debounceByAnimationFrame(this.onResize);
     window.addEventListener('resize', debouncedResize);
-    this.getScatterSymbol();
+    this.setSvg('rocket');
+    this.setSvg('scroll-handle');
   },
   methods: {
     formatTooltipText(params) {
@@ -167,11 +168,11 @@ export default {
         this.tooltip.content = `${this.yAxisLabel} ${seriesData.value[1].toFixed(3)}`;
       }
     },
-    getScatterSymbol() {
-      getSvgIconPathContent('rocket')
+    setSvg(name) {
+      getSvgIconPathContent(name)
         .then(path => {
           if (path) {
-            this.scatterSymbol = `path://${path}`;
+            this.$set(this.svgs, name, `path://${path}`);
           }
         })
         .catch(() => {});

changelogs/unreleased/57085-introduce-zoom-and-scroll-functionality-on-metrics-charts.yml

+---
+title: Add zoom and scroll to metrics dashboard
+merge_request: 25388
+author:
+type: added

spec/javascripts/monitoring/charts/area_spec.js

@@ -7,6 +7,7 @@ import MonitoringMock, { deploymentData } from '../mock_data';
 
 describe('Area component', () => {
   const mockWidgets = 'mockWidgets';
+  const mockSvgPathContent = 'mockSvgPathContent';
   let mockGraphData;
   let areaChart;
   let spriteSpy;
@@ -30,7 +31,7 @@ describe('Area component', () => {
     });
 
     spriteSpy = spyOnDependency(Area, 'getSvgIconPathContent').and.callFake(
-      () => new Promise(resolve => resolve()),
+      () => new Promise(resolve => resolve(mockSvgPathContent)),
     );
   });
 
@@ -146,13 +147,22 @@ describe('Area component', () => {
       });
     });
 
-    describe('getScatterSymbol', () => {
+    describe('setSvg', () => {
+      const mockSvgName = 'mockSvgName';
+
       beforeEach(() => {
-        areaChart.vm.getScatterSymbol();
+        areaChart.vm.setSvg(mockSvgName);
+      });
+
+      it('gets svg path content', () => {
+        expect(spriteSpy).toHaveBeenCalledWith(mockSvgName);
       });
 
-      it('gets rocket svg path content for use as deployment data symbol', () => {
-        expect(spriteSpy).toHaveBeenCalledWith('rocket');
+      it('sets svg path content', done => {
+        areaChart.vm.$nextTick(() => {
+          expect(areaChart.vm.svgs[mockSvgName]).toBe(`path://${mockSvgPathContent}`);
+          done();
+        });
       });
     });