From 4ef76537a1567eef1fb2b5c102be4295edc74ee4 Mon Sep 17 00:00:00 2001
From: Simon Reinisch <simon@reinisch.io>
Date: Wed, 1 May 2024 14:58:16 +0200
Subject: [PATCH] feat: add download button to dashboard sankey chart

closes #36
---
 .../base/context-menu/ContextMenu.vue         |  1 +
 src/app/components/charts/echart/EChart.vue   | 32 ++++++++-
 .../charts/sankey-chart/SankeyChart.vue       | 66 ++++++++++++++++++-
 .../navigation/tools/export/ExportButton.vue  |  4 +-
 src/i18n/locales/de.json                      |  4 +-
 src/i18n/locales/en.json                      |  4 +-
 src/utils/cssVariables.ts                     | 26 ++++++++
 src/utils/downloadFile.ts                     | 15 +++++
 src/utils/index.ts                            |  2 +-
 src/utils/saveFile.ts                         | 12 ----
 src/utils/svgToPNG.ts                         | 25 +++++++
 11 files changed, 170 insertions(+), 21 deletions(-)
 create mode 100644 src/utils/cssVariables.ts
 create mode 100644 src/utils/downloadFile.ts
 delete mode 100644 src/utils/saveFile.ts
 create mode 100644 src/utils/svgToPNG.ts

diff --git a/src/app/components/base/context-menu/ContextMenu.vue b/src/app/components/base/context-menu/ContextMenu.vue
index d2f29161..4a0eb360 100644
--- a/src/app/components/base/context-menu/ContextMenu.vue
+++ b/src/app/components/base/context-menu/ContextMenu.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- TODO: Forward click to slot -->
   <div ref="reference" v-tooltip="{ text: tooltip, position: tooltipPosition }" :class="classes" @click="toggle">
     <slot />
   </div>
diff --git a/src/app/components/charts/echart/EChart.vue b/src/app/components/charts/echart/EChart.vue
index 5900dc3a..e13f466d 100644
--- a/src/app/components/charts/echart/EChart.vue
+++ b/src/app/components/charts/echart/EChart.vue
@@ -4,9 +4,12 @@
 
 <script lang="ts" setup>
 import * as echarts from 'echarts/core';
+import { EChartsType } from 'echarts/core';
 import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
 import { useResizeObserver } from '@composables';
 import { ClassNames } from '@utils';
+import { getCssVariables } from '../../../../utils/cssVariables';
+import { svgToPNG } from '../../../../utils/svgToPNG';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const props = defineProps<{
@@ -17,11 +20,33 @@ const props = defineProps<{
 const classes = computed(() => props.class);
 const root = ref<HTMLDivElement>();
 const rootSize = useResizeObserver(root);
-const chart = shallowRef();
+const chart = shallowRef<EChartsType>();
 
 const update = () => chart.value?.setOption(props.options);
 const resize = () => chart.value?.resize();
 
+const assertSvg = () => {
+  if (!root.value || !chart.value) {
+    throw new Error('No SVG string to convert to PNG');
+  }
+
+  // Inject raw css values
+  const cssVariables = getCssVariables(root.value);
+  const svgString = chart.value.renderToSVGString();
+  const variableRegex = /var\((--.*?)\)/g;
+  let serialized = svgString;
+
+  for (const [name, key] of svgString.matchAll(variableRegex)) {
+    const value = cssVariables.get(key)?.replace(/"/g, "'");
+
+    if (value) {
+      serialized = serialized.replace(name, value);
+    }
+  }
+
+  return serialized;
+};
+
 watch(props, update);
 watch(chart, update);
 watch(rootSize, resize);
@@ -34,4 +59,9 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('resize', resize);
 });
+
+defineExpose({
+  toSVG: (): Blob => new Blob([assertSvg()], { type: 'image/svg+xml;charset=utf-8' }),
+  toPNG: (): Promise<Blob> => svgToPNG(assertSvg(), 3)
+});
 </script>
diff --git a/src/app/pages/dashboard/overview/widgets/charts/sankey-chart/SankeyChart.vue b/src/app/pages/dashboard/overview/widgets/charts/sankey-chart/SankeyChart.vue
index 1f5e9027..e9f168a9 100644
--- a/src/app/pages/dashboard/overview/widgets/charts/sankey-chart/SankeyChart.vue
+++ b/src/app/pages/dashboard/overview/widgets/charts/sankey-chart/SankeyChart.vue
@@ -1,15 +1,32 @@
 <template>
-  <EChart :class="[$style.sankeyChart, classes]" :options="options" />
+  <div :class="$style.container">
+    <EChart ref="chart" :class="[$style.sankeyChart, classes]" :options="options" />
+
+    <ContextMenu v-if="chart" position="top-end" :class="$style.downloadMenu">
+      <button type="button" :class="$style.downloadBtn">
+        <RiDownloadCloud2Line size="18" />
+      </button>
+
+      <template #options>
+        <ContextMenuButton :icon="RiLandscapeLine" :text="t('page.dashboard.downloadAsPNG')" @click="downloadPNG" />
+        <ContextMenuButton :icon="RiImageLine" :text="t('page.dashboard.downloadAsSVG')" @click="downloadSVG" />
+      </template>
+    </ContextMenu>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { RiDownloadCloud2Line, RiImageLine, RiLandscapeLine } from '@remixicon/vue';
 import { SankeySeriesOption } from 'echarts';
 import { SankeyChart } from 'echarts/charts';
 import * as echarts from 'echarts/core';
 import { SVGRenderer } from 'echarts/renderers';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ContextMenu from '@components/base/context-menu/ContextMenu.vue';
+import ContextMenuButton from '@components/base/context-menu/ContextMenuButton.vue';
 import EChart from '@components/charts/echart/EChart.vue';
-import { ClassNames } from '@utils';
+import { ClassNames, downloadBlob } from '@utils';
 import { SankeyChartConfig } from './SankeyChart.types';
 
 echarts.use([SankeyChart, SVGRenderer]);
@@ -21,6 +38,9 @@ const props = defineProps<{
   data: SankeyChartConfig;
 }>();
 
+const { t } = useI18n();
+const chart = ref<InstanceType<typeof EChart>>();
+
 const classes = computed(() => props.class);
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -61,11 +81,51 @@ const options = computed(
     }
   })
 );
+
+const downloadPNG = async () => {
+  downloadBlob(await chart.value!.toPNG(), 'sankey-chart.png');
+};
+
+const downloadSVG = () => {
+  downloadBlob(chart.value!.toSVG(), 'sankey-chart.svg');
+};
 </script>
 
 <style lang="scss" module>
+.container,
 .sankeyChart {
   width: 100%;
   height: 100%;
 }
+
+.container {
+  position: relative;
+
+  &:hover .downloadMenu {
+    opacity: 1;
+  }
+}
+
+.downloadMenu {
+  position: absolute;
+  inset: auto 0 10px auto;
+  transition: opacity var(--transition-m);
+  opacity: 0;
+
+  .downloadBtn {
+    all: unset;
+    display: flex;
+    padding: 6px;
+    border-radius: var(--border-radius-m);
+    background: var(--c-primary);
+    color: var(--c-primary-text);
+    cursor: pointer;
+    transition: var(--transition-m) background;
+
+    &:hover {
+      background: var(--c-primary-hover);
+      color: var(--c-primary-text-hover);
+    }
+  }
+}
 </style>
diff --git a/src/app/pages/navigation/tools/export/ExportButton.vue b/src/app/pages/navigation/tools/export/ExportButton.vue
index 7a970d13..4bd3ab12 100644
--- a/src/app/pages/navigation/tools/export/ExportButton.vue
+++ b/src/app/pages/navigation/tools/export/ExportButton.vue
@@ -7,12 +7,12 @@ import { RiDownloadCloud2Line } from '@remixicon/vue';
 import { useI18n } from 'vue-i18n';
 import ContextMenuButton from '@components/base/context-menu/ContextMenuButton.vue';
 import { useDataStore } from '@store/state';
-import { saveFile } from '@utils';
+import { downloadFile } from '@utils';
 
 const { serialize } = useDataStore();
 const { t } = useI18n();
 
 const save = () => {
-  saveFile(serialize(), 'ocular-data.json', 'application/json');
+  downloadFile(serialize(), 'ocular-data.json', 'application/json');
 };
 </script>
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 99bd81d0..b6e32f58 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -136,7 +136,9 @@
       "yoyExpenseGrowth": "Jährliches Ausgabenwachstum",
       "allTimeIncome": "Allzeit Einnahmen",
       "allTimeExpenses": "Allzeit Ausgaben",
-      "allTimeSavings": "Allzeit Ersparnisse"
+      "allTimeSavings": "Allzeit Ersparnisse",
+      "downloadAsPNG": "Als PNG herunterladen",
+      "downloadAsSVG": "Als SVG herunterladen"
     }
   }
 }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 0a644881..e0e83449 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -136,7 +136,9 @@
       "yoyExpenseGrowth": "YoY Expense Growth",
       "allTimeIncome": "All Time Income",
       "allTimeExpenses": "All Time Expenses",
-      "allTimeSavings": "All Time Savings"
+      "allTimeSavings": "All Time Savings",
+      "downloadAsPNG": "Download as PNG",
+      "downloadAsSVG": "Download as SVG"
     }
   }
 }
diff --git a/src/utils/cssVariables.ts b/src/utils/cssVariables.ts
new file mode 100644
index 00000000..c2f546b8
--- /dev/null
+++ b/src/utils/cssVariables.ts
@@ -0,0 +1,26 @@
+export const getCssVariables = (el: HTMLElement) => {
+  const variableNames = new Set(
+    Array.from(document.styleSheets)
+      .flatMap((v) => Array.from(v.cssRules))
+      .filter((rule) => rule instanceof CSSStyleRule)
+      .flatMap((rule) => Array.from((rule as CSSStyleRule).style))
+      .filter((key) => key.startsWith('--'))
+  );
+
+  // Recursively resolve all variables
+  const elementStyle = getComputedStyle(el);
+
+  const resolveVariable = (variable: string): string => {
+    const value = elementStyle.getPropertyValue(variable).trim();
+    const innerVariables = value.matchAll(/var\((--[^,)]+)(?:,([^)]+))?\)/g);
+    let resolved = value;
+
+    for (const [match, name, fallback] of innerVariables) {
+      resolved = resolved.replace(match, resolveVariable(name) || fallback || '');
+    }
+
+    return value;
+  };
+
+  return new Map<string, string>([...variableNames].map((name) => [name, resolveVariable(name)]));
+};
diff --git a/src/utils/downloadFile.ts b/src/utils/downloadFile.ts
new file mode 100644
index 00000000..2cbfd320
--- /dev/null
+++ b/src/utils/downloadFile.ts
@@ -0,0 +1,15 @@
+export const downloadFile = (content: string, fileName: string, contentType: string): void => {
+  downloadBlob(new Blob([content], { type: contentType }), fileName);
+};
+
+export const downloadBlob = (data: Blob, fileName: string): void => {
+  const link = document.createElement('a');
+  link.style.display = 'none';
+  document.body.appendChild(link);
+
+  link.href = URL.createObjectURL(data);
+  link.download = fileName;
+  link.click();
+
+  document.body.removeChild(link);
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 20992609..7cfa6651 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -3,7 +3,7 @@ export * from './debounce';
 export * from './logger';
 export * from './readFile';
 export * from './remove';
-export * from './saveFile';
+export * from './downloadFile';
 export * from './selectFile';
 export * from './types';
 export * from './uuid';
diff --git a/src/utils/saveFile.ts b/src/utils/saveFile.ts
deleted file mode 100644
index 5fb0ed4d..00000000
--- a/src/utils/saveFile.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const saveFile = (content: string, fileName: string, contentType: string): void => {
-  const link = document.createElement('a');
-  link.style.display = 'none';
-  document.body.appendChild(link);
-
-  const blob = new Blob([content], { type: contentType });
-  link.href = URL.createObjectURL(blob);
-  link.download = fileName;
-  link.click();
-
-  document.body.removeChild(link);
-};
diff --git a/src/utils/svgToPNG.ts b/src/utils/svgToPNG.ts
new file mode 100644
index 00000000..c71e2df6
--- /dev/null
+++ b/src/utils/svgToPNG.ts
@@ -0,0 +1,25 @@
+export const svgToPNG = (svgString: string, scale = 1) => {
+  const img = new Image();
+  const svg = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+  const url = URL.createObjectURL(svg);
+
+  return new Promise<Blob>((resolve, reject) => {
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const width = img.width * scale;
+      const height = img.height * scale;
+
+      canvas.width = width;
+      canvas.height = height;
+
+      const ctx = canvas.getContext('2d');
+      ctx?.drawImage(img, 0, 0, width, height);
+      URL.revokeObjectURL(url);
+
+      canvas.toBlob((v) => (v ? resolve(v) : reject(new Error('Failed to convert canvas to PNG blob'))), 'image/png');
+    };
+
+    img.onerror = () => reject(new Error('Failed to load image for PNG conversion'));
+    img.src = url;
+  });
+};