Include toolbox for the trends chart

ee/app/assets/javascripts/security_dashboard/components/project_security_charts.vue

@@ -3,6 +3,7 @@ import { GlLoadingIcon } from '@gitlab/ui';
 import { GlLineChart } from '@gitlab/ui/dist/charts';
 import createFlash from '~/flash';
 import { formatDate, getDateInPast } from '~/lib/utils/datetime_utility';
+import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import { s__, __ } from '~/locale';
 import projectsHistoryQuery from '../graphql/queries/project_vulnerabilities_by_day_and_count.query.graphql';
 import { createProjectLoadingError } from '../helpers';
@@ -68,6 +69,7 @@ export default {
     return {
       chartWidth: 0,
       trendsByDay: [],
+      svgs: {},
     };
   },
   computed: {
@@ -109,11 +111,8 @@ export default {
     shouldShowEmptyState() {
       return !this.hasVulnerabilities;
     },
-  },
-  mounted() {
-    this.chartWidth = this.$refs.layout.$el.clientWidth;
-  },
-  chartOptions: {
+    chartOptions() {
+      return {
         xAxis: {
           name: __('Time'),
           key: 'time',
@@ -125,6 +124,37 @@ export default {
           type: 'value',
           minInterval: 1,
         },
+        toolbox: {
+          feature: {
+            dataZoom: {
+              icon: { zoom: this.svgs['marquee-selection'], back: this.svgs.redo },
+            },
+            restore: {
+              icon: this.svgs.repeat,
+            },
+            saveAsImage: {
+              icon: this.svgs.download,
+            },
+          },
+        },
+      };
+    },
+  },
+  mounted() {
+    this.chartWidth = this.$refs.layout.$el.clientWidth;
+  },
+  created() {
+    ['marquee-selection', 'redo', 'repeat', 'download'].forEach(this.setSvg);
+  },
+  methods: {
+    async setSvg(name) {
+      try {
+        this.$set(this.svgs, name, `path://${await getSvgIconPathContent(name)}`);
+      } catch (e) {
+        // eslint-disable-next-line no-console, @gitlab/require-i18n-strings
+        console.error('SVG could not be rendered correctly: ', e);
+      }
+    },
   },
 };
 </script>
@@ -139,7 +169,7 @@ export default {
         class="gl-mt-6"
         :width="chartWidth"
         :data="dataSeries"
-        :option="$options.chartOptions"
+        :option="chartOptions"
         :include-legend-avg-max="false"
       />
     </template>

ee/changelogs/unreleased/285476-add-icons-to-trends-chart.yml

+---
+title: Add toolbox for the trends chart in project security dashboard
+merge_request: 56316
+author:
+type: added

ee/spec/frontend/security_dashboard/components/project_security_charts_spec.js

@@ -15,6 +15,10 @@ import {
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
+jest.mock('~/lib/utils/icon_utils', () => ({
+  getSvgIconPathContent: jest.fn().mockResolvedValue('mockSvgPathContent'),
+}));
+
 describe('Project Security Charts component', () => {
   let wrapper;
 
@@ -87,13 +91,24 @@ describe('Project Security Charts component', () => {
       return wrapper.vm.$nextTick();
     });
 
-    it('should display the chart with data', async () => {
+    it('should display the chart with data', () => {
       expect(findLineChart().props('data')).toMatchSnapshot();
     });
 
     it('should not display the loading icon', () => {
       expect(findLoadingIcon().exists()).toBe(false);
     });
+
+    it.each([['restore'], ['saveAsImage']])('should contain %i icon', (icon) => {
+      const option = findLineChart().props('option').toolbox.feature;
+      expect(option[icon].icon).toBe('path://mockSvgPathContent');
+    });
+
+    it('contains dataZoom config', () => {
+      const option = findLineChart().props('option').toolbox.feature;
+      expect(option.dataZoom.icon.zoom).toBe('path://mockSvgPathContent');
+      expect(option.dataZoom.icon.back).toBe('path://mockSvgPathContent');
+    });
   });
 
   describe('when there is no history data', () => {