Merge branch '285477-add-timeline-to-chart' into 'master'

Enable timeline on chart

See merge request gitlab-org/gitlab!56844

doc/user/application_security/security_dashboard/index.md

@@ -73,12 +73,13 @@ CSV file containing details of the resources scanned.
 
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/235558) in GitLab 13.6.
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/285476) in GitLab 13.10, options to zoom in on a date range, and download the vulnerabilities chart.
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/285477) in GitLab 13.11, date range slider to visualise data between given dates.
 
 At the project level, the Security Dashboard displays a chart with the number of vulnerabilities over time.
 Access it by navigating to **Security & Compliance > Security Dashboard**. We display historical
 data up to 365 days. The chart's data is updated daily.
 
-![Project Security Dashboard](img/project_security_dashboard_chart_v13_10.png)
+![Project Security Dashboard](img/project_security_dashboard_chart_v13_11.png)
 
 Filter the historical data by clicking on the corresponding legend name. The image above, for example, shows
 only the graph for vulnerabilities with **high** severity.

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', () => {