Enable timeline on trends chart

- Add changelog
- Update documentation image

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

@@ -10,6 +10,7 @@ import { createProjectLoadingError } from '../helpers';
 import DashboardNotConfigured from './empty_states/reports_not_configured.vue';
 import SecurityChartsLayout from './security_charts_layout.vue';
+const CHART_DEFAULT_DAYS = 30;
 const MAX_DAYS = 100;
 const ISO_DATE = 'isoDate';
 const SEVERITIES = [
@@ -73,6 +74,9 @@ export default {
     };
   },
   computed: {
+    chartStartDate() {
+      return formatDate(getDateInPast(new Date(), CHART_DEFAULT_DAYS), ISO_DATE);
+    },
     startDate() {
       return formatDate(getDateInPast(new Date(), MAX_DAYS), ISO_DATE);
     },
@@ -124,6 +128,20 @@ export default {
           type: 'value',
           minInterval: 1,
         },
+        dataZoom: [
+          {
+            type: 'slider',
+            startValue: this.chartStartDate,
+            handleIcon: this.svgs['scroll-handle'],
+            dataBackground: {
+              lineStyle: {
+                width: 1,
+                color: '#bfbfbf',
+              },
+              areaStyle: null,
+            },
+          },
+        ],
         toolbox: {
           feature: {
             dataZoom: {
@@ -144,7 +162,7 @@ export default {
     this.chartWidth = this.$refs.layout.$el.clientWidth;
   },
   created() {
-    ['marquee-selection', 'redo', 'repeat', 'download'].forEach(this.setSvg);
+    ['marquee-selection', 'redo', 'repeat', 'download', 'scroll-handle'].forEach(this.setSvg);
   },
   methods: {
     async setSvg(name) {

ee/changelogs/unreleased/285477-add-timeline-to-chart.yml

+---
+title: Enable timeline on project security dashboard's trends chart
+merge_request: 56844
+author:
+type: added

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

@@ -6,6 +6,7 @@ import DashboardNotConfigured from 'ee/security_dashboard/components/empty_state
 import ProjectSecurityCharts from 'ee/security_dashboard/components/project_security_charts.vue';
 import SecurityChartsLayout from 'ee/security_dashboard/components/security_charts_layout.vue';
 import projectsHistoryQuery from 'ee/security_dashboard/graphql/queries/project_vulnerabilities_by_day_and_count.query.graphql';
+import { useFakeDate } from 'helpers/fake_date';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import {
   mockProjectSecurityChartsWithData,
@@ -83,6 +84,8 @@ describe('Project Security Charts component', () => {
   });
   describe('when there is history data', () => {
+    useFakeDate(2021, 3, 11);
+
     beforeEach(() => {
       wrapper = createComponent({
         query: mockProjectSecurityChartsWithData(),
@@ -109,6 +112,19 @@ describe('Project Security Charts component', () => {
       expect(option.dataZoom.icon.zoom).toBe('path://mockSvgPathContent');
       expect(option.dataZoom.icon.back).toBe('path://mockSvgPathContent');
     });
+
+    it('contains the timeline slider', () => {
+      const { dataZoom } = findLineChart().props('option');
+      expect(dataZoom[0]).toMatchObject({
+        type: 'slider',
+        handleIcon: 'path://mockSvgPathContent',
+        startValue: '2021-03-12',
+        dataBackground: {
+          lineStyle: { width: 1 },
+          areaStyle: null,
+        },
+      });
+    });
   });
   describe('when there is no history data', () => {