feat(charts): export chart as SVG

app/src/components/dashboard-container.tsx

@@ -6,7 +6,9 @@
 import {
   buildCsvString,
   triggerDownload,
+  triggerSvgDownload,
   buildExportFilename,
+  exportChartToSvg,
 } from "@neoboard/components";
 import { interpolateTitle } from "@/lib/widget/interpolate-title";
 import { buildExportData } from "@/lib/widget/card-utils";
@@ -15,6 +17,7 @@
   isWidgetTemplateOutdated,
 } from "@/lib/widget/widget-utils";
 import { isDataWidget } from "@/lib/widget/widget-actions";
+import { getChartConfig } from "@/lib/plugin/chart-helpers";
 import type {
   DashboardPage,
   DashboardWidget,
@@ -167,7 +170,20 @@
     triggerDownload(csv, filename);
   }
 
+  function exportWidgetSvg(widget: DashboardWidget) {
+    const el = document.querySelector(`[data-widget-id="${widget.id}"]`);
+    if (!el) return;
+    // Find the ECharts container (div with data-testid="base-chart")
+    const chartEl = el.querySelector<HTMLElement>('[data-testid="base-chart"]');
+    if (!chartEl) return;
+    const svg = exportChartToSvg(chartEl);
+    if (!svg) return;
+    const title = (widget.settings?.title as string) || widget.chartType;
+    const filename = buildExportFilename(title, "svg", page.title);
+    triggerSvgDownload(svg, filename);
+  }
+
   const buildActions = (widget: DashboardWidget) => {
     const actions = [];
 
     if (isDataWidget(widget.chartType)) {
@@ -177,6 +193,13 @@
       });
     }
 
+    if (getChartConfig(widget.chartType)?.capabilities.isECharts) {
+      actions.push({
+        label: "Export SVG",
+        onClick: () => exportWidgetSvg(widget),
+      });
+    }
+
     if (onSaveAsTemplate) {
       actions.push({
         label: "Save to Widget Lab",

component/src/charts/__tests__/echarts-mock.ts

@@ -57,5 +57,6 @@ export function registerEChartsMocks() {
 
   vi.mock("echarts/renderers", () => ({
     CanvasRenderer: vi.fn(),
+    SVGRenderer: vi.fn(),
   }));
 }

component/src/charts/base-chart.tsx

@@ -18,7 +18,7 @@
   MarkLineComponent,
   GraphicComponent,
 } from "echarts/components";
-import { CanvasRenderer } from "echarts/renderers";
+import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
 import type { EChartsOption } from "echarts";
 import { cn } from "@/lib/utils";
 import type { BaseChartProps, EChartsClickEvent } from "./types";
@@ -46,6 +46,7 @@
   MarkLineComponent,
   GraphicComponent,
   CanvasRenderer,
+  SVGRenderer,
 ]);
 
 // Register NeoBoard themes once at module load
@@ -279,9 +280,56 @@
   );
 }
 
+/**
+ * Export an ECharts chart to SVG by creating an offscreen instance with the
+ * SVG renderer and the same options as the visible chart.
+ *
+ * @param container - The DOM element containing the ECharts canvas
+ * @returns SVG string or null if the chart instance can't be found
+ */
+function exportChartToSvg(container: HTMLElement): string | null {
+  const instance = echarts.getInstanceByDom(container);
+  if (!instance) return null;
+
+  const options = instance.getOption();
+  const { width, height } = instance.getDom().getBoundingClientRect();
+
+  // Create an offscreen container for the SVG renderer
+  const offscreen = document.createElement("div");
+  offscreen.style.width = `${width}px`;
+  offscreen.style.height = `${height}px`;
+  offscreen.style.position = "absolute";
+  offscreen.style.left = "-9999px";
+  document.body.appendChild(offscreen);
+
+  try {
+    const themeName = isDarkMode() ? THEME_DARK : THEME_LIGHT;
+    const svgInstance = echarts.init(offscreen, themeName, {
+      renderer: "svg",
+      width,
+      height,
+    });
+    svgInstance.setOption(options);
+
+    // Extract the rendered SVG from the offscreen container
+    const svgEl = offscreen.querySelector("svg");
+    if (!svgEl) {
+      svgInstance.dispose();
+      return null;
+    }
+
+    const svgString = new XMLSerializer().serializeToString(svgEl);
+    svgInstance.dispose();
+    return svgString;
+  } finally {
+    document.body.removeChild(offscreen);
+  }
+}
+
 export {
   BaseChart,
   CHART_COLORS_FALLBACK as CHART_COLORS,
   resolveChartColors,
   useDarkMode,
+  exportChartToSvg,
 };

component/src/charts/index.ts

@@ -3,6 +3,7 @@ export {
   CHART_COLORS,
   resolveChartColors,
   useDarkMode,
+  exportChartToSvg,
 } from "./base-chart";
 export {
   THEME_LIGHT,

component/src/lib/__tests__/export-utils.test.ts

@@ -2,6 +2,7 @@ import { describe, it, expect } from "vitest";
 import {
   buildCsvString,
   triggerDownload,
+  triggerSvgDownload,
   buildExportFilename,
   escapeCsvCell,
 } from "../export-utils";
@@ -207,3 +208,17 @@ describe("triggerDownload", () => {
     expect(typeof triggerDownload).toBe("function");
   });
 });
+
+describe("triggerSvgDownload", () => {
+  it("is a function", () => {
+    expect(typeof triggerSvgDownload).toBe("function");
+  });
+});
+
+describe("buildExportFilename — svg extension", () => {
+  it("builds filename with svg extension", () => {
+    expect(buildExportFilename("Sales Chart", "svg", "Dashboard")).toBe(
+      "dashboard_sales-chart.svg",
+    );
+  });
+});

component/src/lib/export-utils.ts

@@ -94,3 +94,10 @@ export function triggerPngDownload(dataUrl: string, filename: string): void {
   a.click();
   document.body.removeChild(a);
 }
+
+/**
+ * Trigger an SVG file download from an SVG string.
+ */
+export function triggerSvgDownload(svgString: string, filename: string): void {
+  triggerDownload(svgString, filename, "image/svg+xml");
+}

component/src/utils/index.ts

@@ -1,4 +1,11 @@
 // Utility functions
 export { cn } from "../lib/utils";
 export { substituteParams } from "../lib/param-substitute";
-export { buildCsvString, triggerDownload, triggerPngDownload, buildExportFilename, escapeCsvCell } from "../lib/export-utils";
+export {
+  buildCsvString,
+  triggerDownload,
+  triggerPngDownload,
+  triggerSvgDownload,
+  buildExportFilename,
+  escapeCsvCell,
+} from "../lib/export-utils";

component/vitest.setup.ts

@@ -47,4 +47,5 @@ vi.mock("echarts/components", () => ({
 
 vi.mock("echarts/renderers", () => ({
   CanvasRenderer: vi.fn(),
+  SVGRenderer: vi.fn(),
 }));