add export to png function

Author: brc-dd

config/vite.js

@@ -81,7 +81,8 @@ export const baseConfig = {
       'dayjs/plugin/timezone',
       'dayjs/plugin/utc',
       'markdown-it > argparse',
-      'markdown-it > entities'
+      'markdown-it > entities',
+      'file-saver'
     ],
     exclude: [
       'markdown-it'

histoire.config.ts

@@ -26,6 +26,6 @@ export default defineConfig({
     define: {
       __DOCS_HOST__: JSON.stringify(getDocsHost())
     },
-    optimizeDeps: { noDiscovery: true } // vite 6 compat
+    optimizeDeps: { ...baseConfig.optimizeDeps, noDiscovery: true } // vite 6 compat,
   }
 })

lib/support/Chart.ts

@@ -6,6 +6,9 @@
  *     https://github.com/radix-ui/colors/blob/main/LICENSE
  */
 
+import FileSaver from 'file-saver'
+import html2canvas from 'html2canvas'
+
 const isLightDarkSupported
   = typeof CSS !== 'undefined' && CSS.supports('color', 'light-dark(#000, #fff)')
 
@@ -50,7 +53,7 @@ export function scheme<T extends { key: string; color?: ChartColor }>(
   data: T[],
   colors: ChartColor[] = Object.keys(rest),
   unknown: ChartColor = 'gray'
-) {
+): (d: T) => string {
   const map = new Map<string, string>()
 
   for (let i = 0; i < data.length; i++) {
@@ -63,3 +66,47 @@ export function scheme<T extends { key: string; color?: ChartColor }>(
     return map.get(d.key) ?? unknown
   }
 }
+
+export async function exportAsPng(_el: any, fileName = 'chart.png', delay = 0): Promise<void> {
+  if (!_el) { return }
+  await new Promise((resolve) => setTimeout(resolve, delay))
+
+  const el = '$el' in _el ? _el.$el : _el
+  if (!(el instanceof HTMLElement)) { return }
+
+  const SCard = el.closest('.SCard')
+  if (!(SCard instanceof HTMLElement)) { return }
+
+  const canvas = await html2canvas(SCard, {
+    scale: 2,
+    backgroundColor: getBackgroundColor(el),
+    logging: false,
+    ignoreElements: (el) => el.classList.contains('SControlActionBar')
+  })
+
+  const dataUrl = canvas.toDataURL('image/png')
+  FileSaver.saveAs(dataUrl, fileName)
+}
+
+function getBackgroundColor(el: HTMLElement | null): string {
+  const defaultColor = 'rgba(0, 0, 0, 0)'
+  let color = 'rgba(0, 0, 0, 0)'
+
+  while (el) {
+    const bgColor = window.getComputedStyle(el).backgroundColor
+    if (bgColor !== defaultColor) {
+      color = bgColor
+      break
+    }
+
+    el = el.parentElement
+  }
+
+  if (color === defaultColor) {
+    return document.documentElement.classList.contains('dark')
+      ? 'rgba(0, 0, 0, 1)'
+      : 'rgba(255, 255, 255, 1)'
+  }
+
+  return color
+}

package.json

@@ -76,6 +76,7 @@
     "@types/qs": "^6.9.18",
     "d3": "^7.9.0",
     "file-saver": "^2.0.5",
+    "html2canvas": "^1.4.1",
     "magic-string": "^0.30.17",
     "ofetch": "^1.4.1",
     "qs": "^6.14.0",

pnpm-lock.yaml

@@ -1,9 +1,17 @@
 <script setup lang="ts">
+import IconDownload from '~icons/ph/download-simple-bold'
 import SCard from 'sefirot/components/SCard.vue'
 import SCardBlock from 'sefirot/components/SCardBlock.vue'
-import SChartBar, { type KV } from 'sefirot/components/SChartBar.vue'
+import SChartBar from 'sefirot/components/SChartBar.vue'
 import SChartPie from 'sefirot/components/SChartPie.vue'
-import { ref } from 'vue'
+import SControl from 'sefirot/components/SControl.vue'
+import SControlActionBar from 'sefirot/components/SControlActionBar.vue'
+import SControlActionBarButton from 'sefirot/components/SControlActionBarButton.vue'
+import SControlLeft from 'sefirot/components/SControlLeft.vue'
+import SControlRight from 'sefirot/components/SControlRight.vue'
+import SControlText from 'sefirot/components/SControlText.vue'
+import { type KV, exportAsPng } from 'sefirot/support/Chart'
+import { ref, useTemplateRef } from 'vue'
 
 const title = 'Components / SChart / 01. Playground'
 
@@ -18,6 +26,9 @@ const data = ref<KV[]>([
   { key: '2025', value: 45 }
 ])
 
+const barRef = useTemplateRef('bar-chart')
+const pieRef = useTemplateRef('pie-chart')
+
 function tooltipFormat(d: KV) {
   return `${d.key} &ndash; <span class="tooltip-number">${d.value}</span>`
 }
@@ -203,11 +214,26 @@ function state() {
       <Board :title="title">
         <SCard class="chart-card">
           <SCardBlock size="medium" class="s-px-24" bg="elv-2">
-            <div class="s-font-14 s-font-w-500">Bar Chart</div>
+            <SControl>
+              <SControlLeft>
+                <SControlText class="s-font-w-500">
+                  Bar Chart
+                </SControlText>
+              </SControlLeft>
+              <SControlRight>
+                <SControlActionBar>
+                  <SControlActionBarButton
+                    :icon="IconDownload"
+                    @click="exportAsPng(barRef, 'bar-chart.png')"
+                  />
+                </SControlActionBar>
+              </SControlRight>
+            </SControl>
           </SCardBlock>
           <SCardBlock bg="elv-2">
             <div class="s-w-full s-h-320">
               <SChartBar
+                ref="bar-chart"
                 :data
                 :margins="{
                   top: state.barMarginTop,
@@ -232,11 +258,26 @@ function state() {
         <br>
         <SCard class="chart-card">
           <SCardBlock size="medium" class="s-px-24" bg="elv-2">
-            <div class="s-font-14 s-font-w-500">Pie Chart</div>
+            <SControl>
+              <SControlLeft>
+                <SControlText class="s-font-w-500">
+                  Pie Chart
+                </SControlText>
+              </SControlLeft>
+              <SControlRight>
+                <SControlActionBar>
+                  <SControlActionBarButton
+                    :icon="IconDownload"
+                    @click="exportAsPng(pieRef, 'pie-chart.png')"
+                  />
+                </SControlActionBar>
+              </SControlRight>
+            </SControl>
           </SCardBlock>
           <SCardBlock bg="elv-2">
             <div class="s-w-full s-h-320 s-pb-24">
               <SChartPie
+                ref="pie-chart"
                 :data
                 :margins="{
                   top: state.pieMarginTop,