From 75d3a6b520ae097b85091495896b9d7c9470b48e Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Sat, 24 May 2025 04:07:29 -0700
Subject: [PATCH] Add export button and output SVG

---
 .../project/project_security_dashboard.vue    | 59 ++++++++++++++++++-
 1 file changed, 58 insertions(+), 1 deletion(-)

diff --git a/ee/app/assets/javascripts/security_dashboard/components/project/project_security_dashboard.vue b/ee/app/assets/javascripts/security_dashboard/components/project/project_security_dashboard.vue
index eb00be6775b7d6..f1359caa81475d 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/project/project_security_dashboard.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/project/project_security_dashboard.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlLoadingIcon, GlSprintf, GlLink, GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { GlLineChart } from '@gitlab/ui/dist/charts';
 import projectsHistoryQuery from 'ee/security_dashboard/graphql/queries/project_vulnerabilities_by_day_and_count.query.graphql';
 import severitiesCountQuery from 'ee/security_dashboard/graphql/queries/vulnerability_severities_count.query.graphql';
@@ -31,6 +31,11 @@ export default {
     GlSprintf,
     GlLink,
     PageHeading,
+    GlButton,
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     projectFullPath: {
@@ -85,6 +90,8 @@ export default {
     return {
       chartWidth: 0,
       trendsByDay: [],
+      echartsInstance: null,
+      svgMarkup: '',
     };
   },
   computed: {
@@ -140,6 +147,17 @@ export default {
     },
     chartOptions() {
       return {
+        // GlChartLegend is not included in the export
+        // Will need to pass this option
+        // However the style is completely different from our custom
+        // Could we piece our custom GlChartLegend on the BE (maybe a screenshot)?
+        // -----
+        // legend: {
+        //   show: true,
+        //   orient: 'horizontal',
+        //   bottom: -10,
+        //   left: 'left',
+        // },
         xAxis: {
           name: __('Date'),
           key: 'date',
@@ -170,6 +188,22 @@ export default {
     ),
   },
   DOC_PATH_PROJECT_SECURITY_DASHBOARD,
+  methods: {
+    onChartCreated(echartsInstance) {
+      this.echartsInstance = echartsInstance;
+    },
+    exportAsPDF() {
+      if (!this.echartsInstance) return;
+      const svgUrl = this.echartsInstance.getDataURL({
+        type: 'svg',
+        excludeComponents: ['toolbox', 'dataZoom'],
+      });
+
+      // Output the SVG
+      const svgData = decodeURIComponent(svgUrl.split(',')[1]);
+      this.svgMarkup = svgData;
+    },
+  },
 };
 </script>
 
@@ -187,6 +221,18 @@ export default {
           </template>
         </gl-sprintf>
       </template>
+      <template #actions>
+        <gl-button
+          v-gl-tooltip
+          :title="'Export as PDF'"
+          category="secondary"
+          class="gl-ml-2"
+          @click="exportAsPDF"
+        >
+          <gl-icon name="export" class="gl-mr-2" />
+          Export
+        </gl-button>
+      </template>
     </page-heading>
 
     <div>
@@ -198,7 +244,18 @@ export default {
         :option="chartOptions"
         responsive
         :include-legend-avg-max="false"
+        @created="onChartCreated"
       />
     </div>
+    <div class="gl-border gl-mt-5 gl-border-4 gl-border-red-500 gl-p-4">
+      <h1>{{ __("SVG Ouptut (TESTING)") }}</h1>
+      <div
+        v-if="svgMarkup"
+        class="rounded gl-border gl-mt-5 gl-bg-gray-10 gl-p-3"
+        style="overflow: auto"
+      >
+        <div v-html="svgMarkup"></div>
+      </div>
+    </div>
   </div>
 </template>
-- 
GitLab