Add icons to the Trends Chart

Release notes

In 13.6, we released a new Project Security Dashboard with a vulnerability trends chart. This chart provides a historical view of vulnerability counts by severity over the past 365 days. While it provides valuable insights into a Project's security health over time, the chart launched without some convenience features to make it easier to use.

We've enhanced the chart to include new interactive elements that will make it more effective and efficient to use. You can now zoom in on a selected section of the chart. You can quickly reset back to the default view. And finally, you can export an SVG image of the chart for easy use in external documents.

https://docs.gitlab.com/ee/user/application_security/security_dashboard/#project-security-dashboard

Why are we doing this work

The first iteration of the redesign introduced a trends chart in the Security Dashboard. The chart is basic, it brings value to the user but is not complete. We're still missing some functionality. For instance the icons at the top section of the chart are missing. Those icons will increase the usability of the chart and will allow exporting the chart as an image.

Relevant links

• See design: #222448[a01_project-dashboard.png]
• See the chart implementation for documentation: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-line-chart--with-toolbox, specifically note the features property on the right side of the page to understand how to enable the icons.

Implementation plan

• frontend In the EChart options section of this page, https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-line-chart--with-toolbox, there is an example on how to enable these icons. Follow those examples in order to enable the icons in ee/app/assets/javascripts/security_dashboard/components/project_security_charts.vue.

Documentation

Update screenshot in https://docs.gitlab.com/ee/user/application_security/security_dashboard/#project-security-dashboard with one showing the added icons.