@opendata-ai/openchart-vanilla 2.12.2 → 2.13.1

package/dist/index.d.ts

@@ -2,12 +2,26 @@ export { ChartLayout, ChartSpec, CompileOptions, TableLayout, TableSpec, VizSpec
 import { GraphSpec, ThemeConfig, DarkMode, ChartSpec, ChartLayout, ChartEventHandlers, BarTableCell, CategoryTableCell, TableCell, FlagTableCell, HeatmapTableCell, ImageTableCell, SparklineTableCell, TextTableCell, Mark, TableSpec, SortState, TableLayout, TooltipContent } from '@opendata-ai/openchart-core';
 
 /**
- * Export utilities: serialize charts to SVG, PNG, or CSV.
+ * Export utilities: serialize charts to SVG, PNG, JPG, or CSV.
  *
  * - SVG: serializes the rendered DOM element via XMLSerializer
+ * - SVG with fonts: async version that embeds @font-face data URIs
  * - PNG: renders SVG to canvas, then extracts as Blob
+ * - JPG: same as PNG but with JPEG compression and background fill
  * - CSV: converts a data array to comma-separated text
  */
+interface SVGExportOptions {
+    /** Embed fonts as base64 data URIs in the SVG. Defaults to true. */
+    embedFonts?: boolean;
+}
+interface PNGExportOptions extends SVGExportOptions {
+    /** DPI scaling factor. Defaults to 2 for retina-quality output. */
+    dpi?: number;
+}
+interface JPGExportOptions extends PNGExportOptions {
+    /** JPEG quality from 0 to 1. Defaults to 0.92. */
+    quality?: number;
+}
 /**
  * Serialize an SVG element to an XML string.
  *
@@ -15,31 +29,39 @@ import { GraphSpec, ThemeConfig, DarkMode, ChartSpec, ChartLayout, ChartEventHan
  * @returns The SVG markup as a string.
  */
 declare function exportSVG(svgElement: SVGElement): string;
-interface PNGExportOptions {
-    /** DPI scaling factor. Defaults to 2 for retina-quality output. */
-    dpi?: number;
-}
+/**
+ * Serialize an SVG element with embedded fonts to an XML string.
+ *
+ * Collects font-family declarations from the SVG's text elements,
+ * finds matching @font-face rules in the page's stylesheets, fetches
+ * the font files, and embeds them as base64 data URIs. The resulting
+ * SVG is self-contained and renders correctly without external fonts.
+ *
+ * @param svgElement - The rendered SVG element to serialize.
+ * @param options - Export options.
+ * @returns A Promise resolving to the SVG markup as a string.
+ */
+declare function exportSVGWithFonts(svgElement: SVGElement, options?: SVGExportOptions): Promise<string>;
 /**
  * Render an SVG element to a PNG Blob via a canvas.
  *
+ * Embeds fonts by default so the exported image matches on-screen rendering.
+ * Set `embedFonts: false` to skip font embedding for faster exports.
+ *
  * @param svgElement - The rendered SVG element.
- * @param options - Optional DPI scaling.
+ * @param options - Optional DPI scaling and font embedding.
  * @returns A Promise resolving to the PNG Blob.
  */
 declare function exportPNG(svgElement: SVGElement, options?: PNGExportOptions): Promise<Blob>;
-interface JPGExportOptions extends PNGExportOptions {
-    /** JPEG quality from 0 to 1. Defaults to 0.92. */
-    quality?: number;
-}
 /**
  * Render an SVG element to a JPEG Blob via a canvas.
  *
  * Same pipeline as exportPNG but outputs JPEG with configurable quality.
- * The canvas is filled with white before drawing to avoid transparent
- * backgrounds rendering as black in JPEG format.
+ * The canvas is filled with the chart's background color before drawing
+ * to avoid transparent backgrounds rendering as black in JPEG format.
  *
  * @param svgElement - The rendered SVG element.
- * @param options - Optional DPI scaling and JPEG quality.
+ * @param options - Optional DPI scaling, JPEG quality, and font embedding.
  * @returns A Promise resolving to the JPEG Blob.
  */
 declare function exportJPG(svgElement: SVGElement, options?: JPGExportOptions): Promise<Blob>;
@@ -149,10 +171,11 @@ interface ChartInstance {
     resize(): void;
     /** Export the chart. */
     export(format: 'svg'): string;
+    export(format: 'svg-with-fonts', options?: SVGExportOptions): Promise<string>;
     export(format: 'png', options?: ExportOptions): Promise<Blob>;
     export(format: 'jpg', options?: ExportOptions): Promise<Blob>;
     export(format: 'csv'): string;
-    export(format: 'svg' | 'png' | 'jpg' | 'csv', options?: ExportOptions): string | Promise<Blob>;
+    export(format: 'svg' | 'svg-with-fonts' | 'png' | 'jpg' | 'csv', options?: ExportOptions): string | Promise<Blob> | Promise<string>;
     /** Remove all DOM elements and disconnect observers. */
     destroy(): void;
     /** The current compiled layout (for hooks / debugging). */
@@ -350,4 +373,4 @@ interface TooltipManager {
  */
 declare function createTooltipManager(container: HTMLElement): TooltipManager;
 
-export { type ChartInstance, type ExportOptions, type GraphInstance, type GraphMountOptions, type JPGExportOptions, type KeyboardNavOptions, type MountOptions, type PNGExportOptions, type TableInstance, type TableMountOptions, type TableState, type TooltipManager, attachKeyboardNav, createChart, createGraph, createSimulationWorker, createTable, createTooltipManager, exportCSV, exportJPG, exportPNG, exportSVG, observeResize, registerMarkRenderer, renderBarCell, renderCategoryCell, renderCell, renderChartSVG, renderFlagCell, renderHeatmapCell, renderImageCell, renderSparklineCell, renderTable, renderTextCell };
+export { type ChartInstance, type ExportOptions, type GraphInstance, type GraphMountOptions, type JPGExportOptions, type KeyboardNavOptions, type MountOptions, type PNGExportOptions, type SVGExportOptions, type TableInstance, type TableMountOptions, type TableState, type TooltipManager, attachKeyboardNav, createChart, createGraph, createSimulationWorker, createTable, createTooltipManager, exportCSV, exportJPG, exportPNG, exportSVG, exportSVGWithFonts, observeResize, registerMarkRenderer, renderBarCell, renderCategoryCell, renderCell, renderChartSVG, renderFlagCell, renderHeatmapCell, renderImageCell, renderSparklineCell, renderTable, renderTextCell };

package/dist/index.js

@@ -1,13 +1,142 @@
 // src/export.ts
+function getSVGDimensions(svg) {
+  const w = parseFloat(svg.getAttribute("width") || "");
+  const h = parseFloat(svg.getAttribute("height") || "");
+  if (w && h) return { width: w, height: h };
+  const vb = svg.getAttribute("viewBox");
+  if (vb) {
+    const parts = vb.split(/[\s,]+/).map(Number);
+    if (parts.length >= 4 && parts[2] && parts[3]) {
+      return { width: parts[2], height: parts[3] };
+    }
+  }
+  return { width: 600, height: 400 };
+}
+function collectUsedFonts(svgElement) {
+  const fonts = /* @__PURE__ */ new Map();
+  const textElements = svgElement.querySelectorAll("text");
+  for (const el of textElements) {
+    const family = el.getAttribute("font-family");
+    const weight = el.getAttribute("font-weight") || "400";
+    if (family) {
+      const primary = family.split(",")[0].trim().replace(/["']/g, "");
+      if (!fonts.has(primary)) fonts.set(primary, /* @__PURE__ */ new Set());
+      fonts.get(primary).add(String(weight));
+    }
+  }
+  return fonts;
+}
+function findFontFaceRules(usedFonts) {
+  const results = [];
+  try {
+    for (const sheet of document.styleSheets) {
+      let rules;
+      try {
+        rules = sheet.cssRules;
+      } catch {
+        continue;
+      }
+      for (const rule of rules) {
+        if (!(rule instanceof CSSFontFaceRule)) continue;
+        const familyRaw = rule.style.getPropertyValue("font-family").replace(/["']/g, "").trim();
+        const weight = rule.style.getPropertyValue("font-weight") || "400";
+        const style = rule.style.getPropertyValue("font-style") || "normal";
+        const src = rule.style.getPropertyValue("src");
+        const weights = usedFonts.get(familyRaw);
+        if (!weights) continue;
+        const weightMatch = weights.has(weight) || weight.includes(" ");
+        if (!weightMatch) continue;
+        const woff2Match = src.match(/url\(["']?([^"')]+\.woff2[^"')]*?)["']?\)/);
+        if (woff2Match) {
+          results.push({
+            family: familyRaw,
+            weight,
+            style,
+            url: woff2Match[1],
+            format: "woff2"
+          });
+        }
+      }
+    }
+  } catch {
+  }
+  return results;
+}
+async function fetchFontsAsBase64(fontRules) {
+  const results = [];
+  const fetches = fontRules.map(async (rule) => {
+    try {
+      const response = await fetch(rule.url);
+      if (!response.ok) return;
+      const buffer = await response.arrayBuffer();
+      const base64 = arrayBufferToBase64(buffer);
+      results.push({
+        family: rule.family,
+        weight: rule.weight,
+        style: rule.style,
+        base64,
+        format: rule.format
+      });
+    } catch {
+    }
+  });
+  await Promise.all(fetches);
+  return results;
+}
+function arrayBufferToBase64(buffer) {
+  let binary = "";
+  const bytes = new Uint8Array(buffer);
+  for (let i = 0; i < bytes.byteLength; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary);
+}
+function injectFontsIntoSVG(svgElement, fonts) {
+  if (fonts.length === 0) return;
+  const cssRules = fonts.map(
+    (f) => `@font-face { font-family: '${f.family}'; font-weight: ${f.weight}; font-style: ${f.style}; src: url(data:font/${f.format};base64,${f.base64}) format('${f.format}'); }`
+  ).join("\n");
+  const ns = "http://www.w3.org/2000/svg";
+  let defs = svgElement.querySelector("defs");
+  if (!defs) {
+    defs = document.createElementNS(ns, "defs");
+    svgElement.insertBefore(defs, svgElement.firstChild);
+  }
+  const styleEl = document.createElementNS(ns, "style");
+  styleEl.textContent = cssRules;
+  defs.insertBefore(styleEl, defs.firstChild);
+}
+async function embedFonts(svgElement) {
+  const usedFonts = collectUsedFonts(svgElement);
+  if (usedFonts.size === 0) return;
+  const fontRules = findFontFaceRules(usedFonts);
+  if (fontRules.length === 0) return;
+  const fontData = await fetchFontsAsBase64(fontRules);
+  injectFontsIntoSVG(svgElement, fontData);
+}
+function getSVGBackgroundColor(svgElement) {
+  const firstRect = svgElement.querySelector("rect");
+  return firstRect?.getAttribute("fill") || "#ffffff";
+}
 function exportSVG(svgElement) {
   const serializer = new XMLSerializer();
   return serializer.serializeToString(svgElement);
 }
+async function exportSVGWithFonts(svgElement, options) {
+  const shouldEmbed = options?.embedFonts ?? true;
+  if (shouldEmbed) {
+    await embedFonts(svgElement);
+  }
+  return exportSVG(svgElement);
+}
 async function exportPNG(svgElement, options) {
   const dpi = options?.dpi ?? 2;
+  const shouldEmbed = options?.embedFonts ?? true;
+  if (shouldEmbed) {
+    await embedFonts(svgElement);
+  }
   const svgString = exportSVG(svgElement);
-  const width = parseFloat(svgElement.getAttribute("width") || "600");
-  const height = parseFloat(svgElement.getAttribute("height") || "400");
+  const { width, height } = getSVGDimensions(svgElement);
   const canvas = document.createElement("canvas");
   canvas.width = width * dpi;
   canvas.height = height * dpi;
@@ -41,9 +170,12 @@ async function exportPNG(svgElement, options) {
 async function exportJPG(svgElement, options) {
   const dpi = options?.dpi ?? 2;
   const quality = options?.quality ?? 0.92;
+  const shouldEmbed = options?.embedFonts ?? true;
+  if (shouldEmbed) {
+    await embedFonts(svgElement);
+  }
   const svgString = exportSVG(svgElement);
-  const width = parseFloat(svgElement.getAttribute("width") || "600");
-  const height = parseFloat(svgElement.getAttribute("height") || "400");
+  const { width, height } = getSVGDimensions(svgElement);
   const canvas = document.createElement("canvas");
   canvas.width = width * dpi;
   canvas.height = height * dpi;
@@ -51,7 +183,7 @@ async function exportJPG(svgElement, options) {
   if (!ctx) {
     throw new Error("Canvas 2D context not available");
   }
-  ctx.fillStyle = "#ffffff";
+  ctx.fillStyle = getSVGBackgroundColor(svgElement);
   ctx.fillRect(0, 0, canvas.width, canvas.height);
   ctx.scale(dpi, dpi);
   const img = new Image();
@@ -3867,6 +3999,7 @@ function renderChartSVG(layout, container) {
     viewBox: `0 0 ${width} ${height}`,
     xmlns: SVG_NS
   });
+  svg.style.height = `${height}px`;
   svg.setAttribute("role", layout.a11y.role);
   svg.setAttribute("aria-label", layout.a11y.altText);
   svg.setAttribute("class", "viz-chart");
@@ -4926,6 +5059,8 @@ function createChart(container, spec, options) {
     switch (format) {
       case "svg":
         return exportSVG(svgElement);
+      case "svg-with-fonts":
+        return exportSVGWithFonts(svgElement, exportOptions);
       case "png":
         return exportPNG(svgElement, exportOptions);
       case "jpg":
@@ -6130,6 +6265,7 @@ export {
   exportJPG,
   exportPNG,
   exportSVG,
+  exportSVGWithFonts,
   observeResize,
   registerMarkRenderer,
   renderBarCell,