@svgrid/grid 2.1.22 → 2.2.0

package/src/chart-export.ts

@@ -1,201 +1,201 @@
-/**
- * Export a rendered `SvGridChart` to a standalone SVG file or a PNG image.
- *
- * The on-screen chart styles its axes / labels / gridlines with CSS classes
- * and `--sg-*` theme variables, which don't survive a raw serialization. So
- * we clone the SVG, read the live computed colors, and inline a small `<style>`
- * block with concrete values - the export looks like what's on screen.
- *
- * Pass the chart's `<svg class="sv-grid-chart-svg">` element (or any ancestor
- * that contains it).
- */
-import type { ChartSpec } from './chart'
-
-function resolveSvg(el: SVGSVGElement | HTMLElement): SVGSVGElement | null {
-  if (el instanceof SVGSVGElement) return el
-  return el.querySelector('svg.sv-grid-chart-svg') ?? el.querySelector('svg')
-}
-
-function cssVar(el: Element, name: string, fallback: string): string {
-  const v = getComputedStyle(el).getPropertyValue(name).trim()
-  return v || fallback
-}
-
-export type ChartExportOptions = {
-  /** Background color of the exported image. Default: the grid background. */
-  background?: string
-  /** PNG pixel scale (1 = viewBox size). Default 2 (retina). */
-  scale?: number
-}
-
-/** Serialize the chart SVG to a standalone, self-styled SVG string. */
-export function chartToSvgString(
-  source: SVGSVGElement | HTMLElement,
-  options: ChartExportOptions = {},
-): string {
-  const svg = resolveSvg(source)
-  if (!svg) throw new Error('chartToSvgString: no <svg> found')
-
-  const fg = cssVar(svg, '--sg-fg', '#0f172a')
-  const muted = cssVar(svg, '--sg-muted', '#64748b')
-  const border = cssVar(svg, '--sg-border', '#e2e8f0')
-  const bg = options.background ?? cssVar(svg, '--sg-bg', '#ffffff')
-
-  const vb = svg.viewBox.baseVal
-  const w = vb && vb.width ? vb.width : svg.clientWidth || 520
-  const h = vb && vb.height ? vb.height : svg.clientHeight || 300
-
-  const clone = svg.cloneNode(true) as SVGSVGElement
-  clone.setAttribute('width', String(w))
-  clone.setAttribute('height', String(h))
-  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
-
-  // Inline computed paint/text styles so the export is what's on screen -
-  // dynamic SVG presentation attributes (a line's `stroke={color}`) and scoped
-  // component CSS don't survive a raw clone + XMLSerializer. Walk the live tree
-  // and its clone (1:1 here, before we prune hit layers) and copy the resolved
-  // style, so line paths etc. export with their real stroke instead of nothing.
-  const PAINT_PROPS = [
-    'fill', 'fill-opacity', 'stroke', 'stroke-width', 'stroke-opacity',
-    'stroke-dasharray', 'stroke-linecap', 'stroke-linejoin', 'opacity',
-    'font-size', 'font-family', 'font-weight', 'text-anchor',
-  ]
-  const liveNodes = svg.querySelectorAll('*')
-  const cloneNodes = clone.querySelectorAll('*')
-  for (let i = 0; i < liveNodes.length; i += 1) {
-    const el = cloneNodes[i] as (SVGElement & { style: CSSStyleDeclaration }) | undefined
-    if (!el || !el.style) continue
-    const cs = getComputedStyle(liveNodes[i]!)
-    for (const prop of PAINT_PROPS) {
-      const v = cs.getPropertyValue(prop)
-      if (v && v !== 'normal') el.style.setProperty(prop, v)
-    }
-  }
-
-  // Drop interaction-only hit layers.
-  clone.querySelectorAll('.sv-grid-chart-hit').forEach((n) => n.remove())
-
-  const style = document.createElementNS('http://www.w3.org/2000/svg', 'style')
-  style.textContent = `
-    .sv-grid-chart-axis { fill: ${muted}; font-size: 10px; font-family: sans-serif; }
-    .sv-grid-chart-gridline { stroke: ${border}; stroke-width: 1; opacity: 0.6; }
-    .sv-grid-chart-gridline.is-zero { stroke: ${muted}; opacity: 0.9; }
-    .sv-grid-chart-datalabel { fill: ${fg}; font-size: 9.5px; font-weight: 600; font-family: sans-serif; }
-    .sv-grid-chart-datalabel.on-bar { fill: #fff; }
-    .sv-grid-chart-donut-total { fill: ${fg}; font-size: 16px; font-weight: 800; font-family: sans-serif; }
-    .sv-grid-chart-donut-label { fill: ${muted}; font-size: 10px; font-family: sans-serif; }
-  `
-  clone.insertBefore(style, clone.firstChild)
-
-  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
-  rect.setAttribute('x', '0')
-  rect.setAttribute('y', '0')
-  rect.setAttribute('width', String(w))
-  rect.setAttribute('height', String(h))
-  rect.setAttribute('fill', bg)
-  clone.insertBefore(rect, style.nextSibling)
-
-  return new XMLSerializer().serializeToString(clone)
-}
-
-function triggerDownload(blobUrl: string, filename: string) {
-  const a = document.createElement('a')
-  a.href = blobUrl
-  a.download = filename
-  document.body.appendChild(a)
-  a.click()
-  a.remove()
-}
-
-/** Download the chart as an `.svg` file. */
-export function downloadChartSvg(
-  source: SVGSVGElement | HTMLElement,
-  filename = 'chart.svg',
-  options: ChartExportOptions = {},
-): void {
-  const svg = chartToSvgString(source, options)
-  const url = URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }))
-  triggerDownload(url, filename)
-  setTimeout(() => URL.revokeObjectURL(url), 1000)
-}
-
-/** Rasterize the chart to a PNG `Blob`. */
-export function chartToPngBlob(
-  source: SVGSVGElement | HTMLElement,
-  options: ChartExportOptions = {},
-): Promise<Blob> {
-  const svgStr = chartToSvgString(source, options)
-  const scale = options.scale ?? 2
-  const svgEl = resolveSvg(source)!
-  const vb = svgEl.viewBox.baseVal
-  const w = (vb && vb.width ? vb.width : svgEl.clientWidth || 520) * scale
-  const h = (vb && vb.height ? vb.height : svgEl.clientHeight || 300) * scale
-
-  return new Promise((resolve, reject) => {
-    const url = URL.createObjectURL(new Blob([svgStr], { type: 'image/svg+xml' }))
-    const img = new Image()
-    img.onload = () => {
-      const canvas = document.createElement('canvas')
-      canvas.width = Math.round(w)
-      canvas.height = Math.round(h)
-      const ctx = canvas.getContext('2d')
-      if (!ctx) {
-        URL.revokeObjectURL(url)
-        reject(new Error('canvas 2d context unavailable'))
-        return
-      }
-      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
-      URL.revokeObjectURL(url)
-      canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('toBlob failed'))), 'image/png')
-    }
-    img.onerror = () => {
-      URL.revokeObjectURL(url)
-      reject(new Error('failed to rasterize chart SVG'))
-    }
-    img.src = url
-  })
-}
-
-/** Download the chart as a `.png` file. */
-export async function downloadChartPng(
-  source: SVGSVGElement | HTMLElement,
-  filename = 'chart.png',
-  options: ChartExportOptions = {},
-): Promise<void> {
-  const blob = await chartToPngBlob(source, options)
-  const url = URL.createObjectURL(blob)
-  triggerDownload(url, filename)
-  setTimeout(() => URL.revokeObjectURL(url), 1000)
-}
-
-const csvCell = (v: unknown): string => {
-  const s = v == null ? '' : String(v)
-  return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s
-}
-
-/**
- * Serialize a chart's data to CSV: one row per category, one column per series
- * (`Category, <series 1>, ...`). Empty for exotic specs (sankey/treemap/gauge/
- * calendar) that don't carry a rectangular categories x series grid.
- */
-export function chartSpecToCsv(spec: ChartSpec): string {
-  const cats = spec.categories ?? []
-  const series = spec.series ?? []
-  if (!cats.length || !series.length) return ''
-  const header = ['Category', ...series.map((s) => s.label)].map(csvCell).join(',')
-  const rows = cats.map((cat, i) =>
-    [cat, ...series.map((s) => s.values[i] ?? '')].map(csvCell).join(','),
-  )
-  return [header, ...rows].join('\n')
-}
-
-/** Download the chart's data as a `.csv` file. Returns false if there's no
- *  rectangular category/series data to export. */
-export function downloadChartCsv(spec: ChartSpec, filename = 'chart.csv'): boolean {
-  const csv = chartSpecToCsv(spec)
-  if (!csv) return false
-  const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8' }))
-  triggerDownload(url, filename)
-  setTimeout(() => URL.revokeObjectURL(url), 1000)
-  return true
-}
+/**
+ * Export a rendered `SvGridChart` to a standalone SVG file or a PNG image.
+ *
+ * The on-screen chart styles its axes / labels / gridlines with CSS classes
+ * and `--sg-*` theme variables, which don't survive a raw serialization. So
+ * we clone the SVG, read the live computed colors, and inline a small `<style>`
+ * block with concrete values - the export looks like what's on screen.
+ *
+ * Pass the chart's `<svg class="sv-grid-chart-svg">` element (or any ancestor
+ * that contains it).
+ */
+import type { ChartSpec } from './chart'
+
+function resolveSvg(el: SVGSVGElement | HTMLElement): SVGSVGElement | null {
+  if (el instanceof SVGSVGElement) return el
+  return el.querySelector('svg.sv-grid-chart-svg') ?? el.querySelector('svg')
+}
+
+function cssVar(el: Element, name: string, fallback: string): string {
+  const v = getComputedStyle(el).getPropertyValue(name).trim()
+  return v || fallback
+}
+
+export type ChartExportOptions = {
+  /** Background color of the exported image. Default: the grid background. */
+  background?: string
+  /** PNG pixel scale (1 = viewBox size). Default 2 (retina). */
+  scale?: number
+}
+
+/** Serialize the chart SVG to a standalone, self-styled SVG string. */
+export function chartToSvgString(
+  source: SVGSVGElement | HTMLElement,
+  options: ChartExportOptions = {},
+): string {
+  const svg = resolveSvg(source)
+  if (!svg) throw new Error('chartToSvgString: no <svg> found')
+
+  const fg = cssVar(svg, '--sg-fg', '#0f172a')
+  const muted = cssVar(svg, '--sg-muted', '#64748b')
+  const border = cssVar(svg, '--sg-border', '#e2e8f0')
+  const bg = options.background ?? cssVar(svg, '--sg-bg', '#ffffff')
+
+  const vb = svg.viewBox.baseVal
+  const w = vb && vb.width ? vb.width : svg.clientWidth || 520
+  const h = vb && vb.height ? vb.height : svg.clientHeight || 300
+
+  const clone = svg.cloneNode(true) as SVGSVGElement
+  clone.setAttribute('width', String(w))
+  clone.setAttribute('height', String(h))
+  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
+
+  // Inline computed paint/text styles so the export is what's on screen -
+  // dynamic SVG presentation attributes (a line's `stroke={color}`) and scoped
+  // component CSS don't survive a raw clone + XMLSerializer. Walk the live tree
+  // and its clone (1:1 here, before we prune hit layers) and copy the resolved
+  // style, so line paths etc. export with their real stroke instead of nothing.
+  const PAINT_PROPS = [
+    'fill', 'fill-opacity', 'stroke', 'stroke-width', 'stroke-opacity',
+    'stroke-dasharray', 'stroke-linecap', 'stroke-linejoin', 'opacity',
+    'font-size', 'font-family', 'font-weight', 'text-anchor',
+  ]
+  const liveNodes = svg.querySelectorAll('*')
+  const cloneNodes = clone.querySelectorAll('*')
+  for (let i = 0; i < liveNodes.length; i += 1) {
+    const el = cloneNodes[i] as (SVGElement & { style: CSSStyleDeclaration }) | undefined
+    if (!el || !el.style) continue
+    const cs = getComputedStyle(liveNodes[i]!)
+    for (const prop of PAINT_PROPS) {
+      const v = cs.getPropertyValue(prop)
+      if (v && v !== 'normal') el.style.setProperty(prop, v)
+    }
+  }
+
+  // Drop interaction-only hit layers.
+  clone.querySelectorAll('.sv-grid-chart-hit').forEach((n) => n.remove())
+
+  const style = document.createElementNS('http://www.w3.org/2000/svg', 'style')
+  style.textContent = `
+    .sv-grid-chart-axis { fill: ${muted}; font-size: 10px; font-family: sans-serif; }
+    .sv-grid-chart-gridline { stroke: ${border}; stroke-width: 1; opacity: 0.6; }
+    .sv-grid-chart-gridline.is-zero { stroke: ${muted}; opacity: 0.9; }
+    .sv-grid-chart-datalabel { fill: ${fg}; font-size: 9.5px; font-weight: 600; font-family: sans-serif; }
+    .sv-grid-chart-datalabel.on-bar { fill: #fff; }
+    .sv-grid-chart-donut-total { fill: ${fg}; font-size: 16px; font-weight: 800; font-family: sans-serif; }
+    .sv-grid-chart-donut-label { fill: ${muted}; font-size: 10px; font-family: sans-serif; }
+  `
+  clone.insertBefore(style, clone.firstChild)
+
+  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
+  rect.setAttribute('x', '0')
+  rect.setAttribute('y', '0')
+  rect.setAttribute('width', String(w))
+  rect.setAttribute('height', String(h))
+  rect.setAttribute('fill', bg)
+  clone.insertBefore(rect, style.nextSibling)
+
+  return new XMLSerializer().serializeToString(clone)
+}
+
+function triggerDownload(blobUrl: string, filename: string) {
+  const a = document.createElement('a')
+  a.href = blobUrl
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+}
+
+/** Download the chart as an `.svg` file. */
+export function downloadChartSvg(
+  source: SVGSVGElement | HTMLElement,
+  filename = 'chart.svg',
+  options: ChartExportOptions = {},
+): void {
+  const svg = chartToSvgString(source, options)
+  const url = URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }))
+  triggerDownload(url, filename)
+  setTimeout(() => URL.revokeObjectURL(url), 1000)
+}
+
+/** Rasterize the chart to a PNG `Blob`. */
+export function chartToPngBlob(
+  source: SVGSVGElement | HTMLElement,
+  options: ChartExportOptions = {},
+): Promise<Blob> {
+  const svgStr = chartToSvgString(source, options)
+  const scale = options.scale ?? 2
+  const svgEl = resolveSvg(source)!
+  const vb = svgEl.viewBox.baseVal
+  const w = (vb && vb.width ? vb.width : svgEl.clientWidth || 520) * scale
+  const h = (vb && vb.height ? vb.height : svgEl.clientHeight || 300) * scale
+
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(new Blob([svgStr], { type: 'image/svg+xml' }))
+    const img = new Image()
+    img.onload = () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = Math.round(w)
+      canvas.height = Math.round(h)
+      const ctx = canvas.getContext('2d')
+      if (!ctx) {
+        URL.revokeObjectURL(url)
+        reject(new Error('canvas 2d context unavailable'))
+        return
+      }
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+      URL.revokeObjectURL(url)
+      canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('toBlob failed'))), 'image/png')
+    }
+    img.onerror = () => {
+      URL.revokeObjectURL(url)
+      reject(new Error('failed to rasterize chart SVG'))
+    }
+    img.src = url
+  })
+}
+
+/** Download the chart as a `.png` file. */
+export async function downloadChartPng(
+  source: SVGSVGElement | HTMLElement,
+  filename = 'chart.png',
+  options: ChartExportOptions = {},
+): Promise<void> {
+  const blob = await chartToPngBlob(source, options)
+  const url = URL.createObjectURL(blob)
+  triggerDownload(url, filename)
+  setTimeout(() => URL.revokeObjectURL(url), 1000)
+}
+
+const csvCell = (v: unknown): string => {
+  const s = v == null ? '' : String(v)
+  return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s
+}
+
+/**
+ * Serialize a chart's data to CSV: one row per category, one column per series
+ * (`Category, <series 1>, ...`). Empty for exotic specs (sankey/treemap/gauge/
+ * calendar) that don't carry a rectangular categories x series grid.
+ */
+export function chartSpecToCsv(spec: ChartSpec): string {
+  const cats = spec.categories ?? []
+  const series = spec.series ?? []
+  if (!cats.length || !series.length) return ''
+  const header = ['Category', ...series.map((s) => s.label)].map(csvCell).join(',')
+  const rows = cats.map((cat, i) =>
+    [cat, ...series.map((s) => s.values[i] ?? '')].map(csvCell).join(','),
+  )
+  return [header, ...rows].join('\n')
+}
+
+/** Download the chart's data as a `.csv` file. Returns false if there's no
+ *  rectangular category/series data to export. */
+export function downloadChartCsv(spec: ChartSpec, filename = 'chart.csv'): boolean {
+  const csv = chartSpecToCsv(spec)
+  if (!csv) return false
+  const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8' }))
+  triggerDownload(url, filename)
+  setTimeout(() => URL.revokeObjectURL(url), 1000)
+  return true
+}