@opendata-ai/openchart-vanilla 8.4.0 → 8.4.1

package/dist/{chunk-HGRNXLDF.js → chunk-5RX6ZQGZ.js}

@@ -9,6 +9,14 @@ function setAttrs(el, attrs) {
     el.setAttribute(key, String(value));
   }
 }
+function applyKnockoutHalo(el, color, fontSize) {
+  setAttrs(el, {
+    stroke: color,
+    "stroke-width": Math.round(fontSize * 0.3),
+    "stroke-linejoin": "round",
+    "paint-order": "stroke"
+  });
+}
 function applyTextStyle(el, style) {
   const inline = el.style;
   inline.setProperty("fill", style.fill);
@@ -111,8 +119,9 @@ export {
   XLINK_NS,
   createSVGElement,
   setAttrs,
+  applyKnockoutHalo,
   applyTextStyle,
   buildThemeStyleBlock,
   injectThemeStyleBlock
 };
-//# sourceMappingURL=chunk-HGRNXLDF.js.map
+//# sourceMappingURL=chunk-5RX6ZQGZ.js.map

package/dist/chunk-5RX6ZQGZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/renderers/svg-dom.ts","../src/theme-style-block.ts"],"sourcesContent":["/**\n * Shared SVG DOM helpers used across the per-concern renderers.\n *\n * Pure, stateless utilities. No layout/theme knowledge.\n */\n\nimport type { TextStyle } from '@opendata-ai/openchart-core';\n\nexport const SVG_NS = 'http://www.w3.org/2000/svg';\nexport const XLINK_NS = 'http://www.w3.org/1999/xlink';\n\nexport function createSVGElement(tag: string): SVGElement {\n  return document.createElementNS(SVG_NS, tag);\n}\n\nexport function setAttrs(el: SVGElement, attrs: Record<string, string | number>): void {\n  for (const [key, value] of Object.entries(attrs)) {\n    el.setAttribute(key, String(value));\n  }\n}\n\n/**\n * Cut a knockout halo behind text so it stays legible where it crosses\n * gridlines, marks, or a neighbouring series: a surface-colored stroke painted\n * under the glyphs.\n *\n * Presentation attributes, not inline styles, so a stylesheet can still\n * override the halo. The width scales with the font size -- a fixed width rings\n * small glyphs and disappears behind large ones.\n */\nexport function applyKnockoutHalo(el: SVGElement, color: string, fontSize: number): void {\n  setAttrs(el, {\n    stroke: color,\n    'stroke-width': Math.round(fontSize * 0.3),\n    'stroke-linejoin': 'round',\n    'paint-order': 'stroke',\n  });\n}\n\nexport function applyTextStyle(el: SVGElement, style: TextStyle): void {\n  // Use inline styles so engine-computed values take priority over CSS class\n  // defaults (e.g. .oc-title { font-size: var(--oc-title-size) } would otherwise\n  // override the responsive scaling applied by the chrome layout).\n  const inline = (el as SVGElement & ElementCSSInlineStyle).style;\n  inline.setProperty('fill', style.fill);\n  inline.setProperty('font-size', `${style.fontSize}px`);\n  inline.setProperty('font-weight', String(style.fontWeight));\n  inline.setProperty('font-family', style.fontFamily);\n  if (style.textAnchor) {\n    el.setAttribute('text-anchor', style.textAnchor);\n  }\n  if (style.dominantBaseline) {\n    el.setAttribute('dominant-baseline', style.dominantBaseline);\n  }\n  if (style.fontVariant) {\n    el.setAttribute('font-variant', style.fontVariant);\n  }\n}\n","/**\n * Theme `<style>` block for self-contained SVG export.\n *\n * Charts render most fills as inline SVG attributes, but a handful of chrome\n * elements (metric cells, the brand watermark dot, legend text, endpoint labels)\n * take their fill from CSS classes in `chrome.css` via `--oc-*` variables. That\n * works on-screen because the live SVG inherits the page stylesheet — but a\n * serialized/rasterized export (PNG/JPG/GIF) is detached from the page, so those\n * class-based fills vanish. This module builds a `<style>` block that resolves\n * every such rule against a concrete `ResolvedTheme`, so injecting it into an\n * export clone makes the SVG fully self-contained.\n *\n * Both the headless renderer (`static.ts`) and the browser export path use this,\n * so class-based styling round-trips identically no matter which path produced\n * the SVG. Browser-safe (no Node imports) so the browser exporters can import it.\n */\n\nimport type { ResolvedTheme } from '@opendata-ai/openchart-core';\nimport { adaptForLightLineStroke, cssTokenDefault } from '@opendata-ai/openchart-core';\nimport { SVG_NS } from './renderers/svg-dom';\n\n/**\n * Build the theme `<style>` block CSS text for a resolved theme. Sets the\n * `--oc-*` custom properties on `svg.oc-chart` and defines every class-based\n * chrome rule against them.\n */\nexport function buildThemeStyleBlock(theme: ResolvedTheme): string {\n  const accent = theme.colors.categorical[0] ?? cssTokenDefault('--oc-accent', 'light');\n  const bg = theme.colors.neutral.surface;\n\n  const props = [\n    `--oc-font-family: ${theme.fonts.family}`,\n    `--oc-font-mono: ${theme.fonts.mono}`,\n    `--oc-title-size: ${theme.chrome.title.fontSize}px`,\n    `--oc-title-weight: ${theme.chrome.title.fontWeight}`,\n    `--oc-title-tracking: ${cssTokenDefault('--oc-title-tracking', 'light')}`,\n    `--oc-subtitle-size: ${theme.chrome.subtitle.fontSize}px`,\n    `--oc-subtitle-weight: ${theme.chrome.subtitle.fontWeight}`,\n    `--oc-source-size: ${theme.chrome.source.fontSize}px`,\n    `--oc-source-weight: ${theme.chrome.source.fontWeight}`,\n    `--oc-body-size: ${theme.fonts.sizes.body}px`,\n    `--oc-eyebrow-size: ${theme.chrome.eyebrow.fontSize}px`,\n    `--oc-eyebrow-weight: ${theme.chrome.eyebrow.fontWeight}`,\n    `--oc-eyebrow-tracking: ${cssTokenDefault('--oc-eyebrow-tracking', 'light')}`,\n    `--oc-bg: ${bg}`,\n    `--oc-text: ${theme.colors.text}`,\n    `--oc-text-muted: ${theme.colors.axis}`,\n    `--oc-text-secondary: ${theme.colors.neutral.secondary}`,\n    `--oc-text-faint: ${theme.colors.neutral.faint}`,\n    `--oc-border: ${theme.colors.neutral.border}`,\n    `--oc-gridline: ${theme.colors.gridline}`,\n    // Hairline, not the tick-label ink.\n    `--oc-axis: ${theme.colors.hairline}`,\n    `--oc-border-radius: ${theme.borderRadius}px`,\n    `--oc-accent: ${accent}`,\n    `--oc-accent-strong: ${adaptForLightLineStroke(accent)}`,\n    `--oc-positive: ${theme.colors.positive}`,\n    `--oc-negative: ${theme.colors.negative}`,\n    `--oc-legend-text: ${theme.isDark ? cssTokenDefault('--oc-legend-text', 'dark') : cssTokenDefault('--oc-legend-text', 'light')}`,\n    `--oc-space-2: ${theme.spacing.chromeGap * 2}px`,\n    `--oc-space-4: ${theme.spacing.padding}px`,\n  ];\n\n  const rules = [\n    // Tabular figures everywhere in the chart's own text: axis ticks, value\n    // labels and legend entries all line up column-wise.\n    `svg.oc-chart { ${props.join('; ')}; font-variant-numeric: tabular-nums; }`,\n    `.oc-chrome { font-family: var(--oc-font-family); }`,\n    `.oc-eyebrow { font-size: var(--oc-eyebrow-size); font-weight: var(--oc-eyebrow-weight); letter-spacing: var(--oc-eyebrow-tracking); text-transform: uppercase; fill: var(--oc-accent); }`,\n    `.oc-title { font-size: var(--oc-title-size); font-weight: var(--oc-title-weight); letter-spacing: var(--oc-title-tracking); fill: var(--oc-text); }`,\n    `.oc-subtitle { font-size: var(--oc-subtitle-size); font-weight: var(--oc-subtitle-weight); fill: var(--oc-text-muted); }`,\n    `.oc-source, .oc-byline, .oc-footer { font-size: var(--oc-source-size); font-weight: var(--oc-source-weight); fill: var(--oc-text-muted); }`,\n    `.oc-brand { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; fill: var(--oc-text-faint); }`,\n    `.oc-brand-dot { fill: var(--oc-accent); }`,\n    `.oc-eyebrow-dot { fill: var(--oc-accent); }`,\n    `.oc-metrics { font-family: var(--oc-font-family); }`,\n    `.oc-metric-label { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--oc-text-muted); }`,\n    `.oc-metric-value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; fill: var(--oc-text); font-variant-numeric: tabular-nums; }`,\n    `.oc-metric-delta-up { fill: var(--oc-positive); font-size: 12px; font-weight: 500; }`,\n    `.oc-metric-delta-down { fill: var(--oc-negative); font-size: 12px; font-weight: 500; }`,\n    `.oc-axis-tick-inline { font-size: 11px; font-weight: 400; fill: var(--oc-text-muted); }`,\n    `.oc-endpoint-labels { font-family: var(--oc-font-family); }`,\n    `.oc-endpoint-label { fill: var(--oc-endpoint-label-color, var(--oc-text)); }`,\n    `.oc-endpoint-value { fill: var(--oc-endpoint-value-color, var(--oc-text-muted)); }`,\n    `.oc-endpoint-leader { stroke: var(--oc-endpoint-leader-color, currentColor); }`,\n    `.oc-annotation-subtitle { fill: var(--oc-annotation-subtitle-color, var(--oc-text-muted)); }`,\n    `.oc-metric-secondary { fill: var(--oc-text-muted); font-size: 12px; font-weight: 400; }`,\n    `.oc-legend { font-family: var(--oc-font-family); font-size: var(--oc-body-size); }`,\n    `.oc-legend-entry { cursor: default; }`,\n    `.oc-legend text { fill: var(--oc-legend-text); }`,\n  ];\n\n  return rules.join('\\n');\n}\n\n/**\n * Inject the theme style block into an SVG clone's `<defs>` so class-based fills\n * survive serialization. Idempotent-ish: adds one `<style data-oc-theme>` at the\n * front of `<defs>`; call once per clone before serializing. No-op if `theme` is\n * undefined (nothing to resolve against).\n */\nexport function injectThemeStyleBlock(svg: SVGElement, theme: ResolvedTheme | undefined): void {\n  if (!theme) return;\n  let defs = svg.querySelector('defs');\n  if (!defs) {\n    defs = document.createElementNS(SVG_NS, 'defs');\n    svg.insertBefore(defs, svg.firstChild);\n  }\n  const style = document.createElementNS(SVG_NS, 'style');\n  style.setAttribute('data-oc-theme', '');\n  style.textContent = buildThemeStyleBlock(theme);\n  defs.insertBefore(style, defs.firstChild);\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-UOB422LY.js → chunk-6B5OBGIO.js}

@@ -1,6 +1,6 @@
 import {
   injectThemeStyleBlock
-} from "./chunk-HGRNXLDF.js";
+} from "./chunk-5RX6ZQGZ.js";
 
 // src/export.ts
 function getSVGDimensions(svg) {
@@ -279,4 +279,4 @@ export {
   exportJPG,
   exportCSV
 };
-//# sourceMappingURL=chunk-UOB422LY.js.map
+//# sourceMappingURL=chunk-6B5OBGIO.js.map

package/dist/{chunk-YGYMB7KB.js → chunk-KANNWAEA.js}

@@ -1,10 +1,11 @@
 import {
   SVG_NS,
   XLINK_NS,
+  applyKnockoutHalo,
   applyTextStyle,
   createSVGElement,
   setAttrs
-} from "./chunk-HGRNXLDF.js";
+} from "./chunk-5RX6ZQGZ.js";
 
 // src/svg-ids.ts
 var counter = 0;
@@ -156,15 +157,22 @@ function resolvePatternFill(pattern, patternMap) {
 var currentAnimation;
 var currentGradientMap = /* @__PURE__ */ new Map();
 var currentPatternMap = /* @__PURE__ */ new Map();
+var currentSurface = "";
 function setMarkRenderState(state) {
   currentAnimation = state.animation;
   currentGradientMap = state.gradientMap;
   currentPatternMap = state.patternMap ?? /* @__PURE__ */ new Map();
+  currentSurface = state.surface ?? "";
 }
 function resetMarkRenderState() {
   currentAnimation = void 0;
   currentGradientMap = /* @__PURE__ */ new Map();
   currentPatternMap = /* @__PURE__ */ new Map();
+  currentSurface = "";
+}
+function applyLabelHalo(text, label) {
+  if (!currentSurface || label.halo === false) return;
+  applyKnockoutHalo(text, currentSurface, label.style.fontSize);
 }
 function resolveFillOrPattern(fill, pattern) {
   if (pattern) return resolvePatternFill(pattern, currentPatternMap);
@@ -217,6 +225,7 @@ function renderLineMark(mark, index) {
     }
     setAttrs(label, { x: mark.label.x, y: mark.label.y });
     applyTextStyle(label, mark.label.style);
+    applyLabelHalo(label, mark.label);
     label.textContent = mark.label.text;
     g.appendChild(label);
     if (mark.label.connector) {
@@ -345,6 +354,7 @@ function renderArcMark(mark, index) {
       y: mark.label.y - mark.center.y
     });
     applyTextStyle(label, mark.label.style);
+    applyLabelHalo(label, mark.label);
     label.textContent = mark.label.text;
     g.appendChild(label);
   }
@@ -529,6 +539,7 @@ function renderMarks(parent, layout, opts) {
     label.setAttribute("class", "oc-mark-label");
     setAttrs(label, { x: rect.label.x, y: rect.label.y });
     applyTextStyle(label, rect.label.style);
+    applyLabelHalo(label, rect.label);
     label.textContent = rect.label.text;
     if (currentAnimation?.enter) {
       const idx = rect.animationIndex ?? i;
@@ -574,6 +585,61 @@ import {
   DEFAULT_LINE_HEIGHT,
   parseAnnotationSpans
 } from "@opendata-ai/openchart-engine";
+
+// src/theme-tokens.ts
+import { adaptForLightLineStroke, cssTokenDefault } from "@opendata-ai/openchart-core";
+function resolvedSurface(theme) {
+  return theme.colors.neutral.surface;
+}
+function stampThemeProperties(el, theme) {
+  const accent = theme.colors.categorical[0] ?? cssTokenDefault("--oc-accent", "light");
+  const bg = resolvedSurface(theme);
+  const n = theme.colors.neutral;
+  const props = [
+    ["--oc-font-family", theme.fonts.family],
+    ["--oc-font-mono", theme.fonts.mono],
+    ["--oc-title-size", `${theme.chrome.title.fontSize}px`],
+    ["--oc-title-weight", `${theme.chrome.title.fontWeight}`],
+    ["--oc-subtitle-size", `${theme.chrome.subtitle.fontSize}px`],
+    ["--oc-subtitle-weight", `${theme.chrome.subtitle.fontWeight}`],
+    ["--oc-source-size", `${theme.chrome.source.fontSize}px`],
+    ["--oc-source-weight", `${theme.chrome.source.fontWeight}`],
+    ["--oc-body-size", `${theme.fonts.sizes.body}px`],
+    ["--oc-eyebrow-size", `${theme.chrome.eyebrow.fontSize}px`],
+    ["--oc-eyebrow-weight", `${theme.chrome.eyebrow.fontWeight}`],
+    ["--oc-bg", bg],
+    ["--oc-text", theme.colors.text],
+    ["--oc-text-muted", theme.colors.axis],
+    // Secondary grays are derived from the theme's own text/background pair
+    // (ResolvedTheme.colors.neutral), so a warm or cool theme gets warm or
+    // cool grays instead of zinc. One direction only: theme -> CSS.
+    ["--oc-text-secondary", n.secondary],
+    ["--oc-text-faint", n.faint],
+    ["--oc-border", n.border],
+    ["--oc-gray-100", n[100]],
+    ["--oc-gray-200", n[200]],
+    ["--oc-gray-300", n[300]],
+    ["--oc-gray-400", n[400]],
+    ["--oc-gray-600", n[600]],
+    ["--oc-gray-800", n[800]],
+    ["--oc-gridline", theme.colors.gridline],
+    // --oc-axis is the hairline the axis line is drawn with, not the ink its
+    // tick labels take (that is --oc-text-muted, above).
+    ["--oc-axis", theme.colors.hairline],
+    ["--oc-border-radius", `${theme.borderRadius}px`],
+    ["--oc-accent", accent],
+    ["--oc-accent-strong", adaptForLightLineStroke(accent)],
+    ["--oc-positive", theme.colors.positive],
+    ["--oc-negative", theme.colors.negative],
+    ["--oc-space-2", `${theme.spacing.chromeGap * 2}px`],
+    ["--oc-space-4", `${theme.spacing.padding}px`]
+  ];
+  for (const [name, value] of props) {
+    el.style.setProperty(name, value);
+  }
+}
+
+// src/renderers/annotations.ts
 var CONNECTOR_STROKE_WIDTH = 1.25;
 function renderArrowhead(parent, tipX, tipY, tangentX, tangentY, stroke) {
   const head = computeArrowheadPoints(tipX, tipY, tangentX, tangentY);
@@ -801,10 +867,7 @@ function renderAnnotation(parent, annotation, index, bgColor) {
       });
       g.appendChild(bgRect);
     } else if (bgColor && annotation.label.halo !== false) {
-      text.style.paintOrder = "stroke";
-      text.style.stroke = bgColor;
-      text.style.strokeWidth = `${Math.round(fontSize * 0.3)}px`;
-      text.style.strokeLinejoin = "round";
+      applyKnockoutHalo(text, bgColor, fontSize);
     }
     g.appendChild(text);
     if (annotation.subtitle) {
@@ -824,7 +887,7 @@ function renderAnnotations(parent, layout) {
   if (layout.annotations.length === 0) return;
   const g = createSVGElement("g");
   g.setAttribute("class", "oc-annotations");
-  const bgColor = layout.theme.colors.background;
+  const bgColor = resolvedSurface(layout.theme);
   for (let i = 0; i < layout.annotations.length; i++) {
     renderAnnotation(g, layout.annotations[i], i, bgColor);
   }
@@ -1433,6 +1496,29 @@ var LEGEND_HIT_PAD = 4;
 function isCategorical(legend) {
   return !legend.type || legend.type === "categorical";
 }
+function renderNoDataSwatch(parent, noData, labelStyle, chip) {
+  const swatch = createSVGElement("rect");
+  swatch.setAttribute("class", "oc-legend-nodata");
+  setAttrs(swatch, {
+    x: noData.x,
+    y: noData.y,
+    width: noData.size,
+    height: noData.size,
+    fill: noData.fill,
+    ...chip ? { rx: chip.rx, ry: chip.rx } : { "shape-rendering": "crispEdges" }
+  });
+  parent.appendChild(swatch);
+  const label = createSVGElement("text");
+  setAttrs(label, {
+    x: noData.labelX,
+    y: noData.labelY,
+    "text-anchor": "start",
+    ...chip ? { "dominant-baseline": chip.baseline } : {}
+  });
+  applyTextStyle(label, labelStyle);
+  label.textContent = noData.label;
+  parent.appendChild(label);
+}
 function renderContinuousLegend(parent, legend) {
   if (legend.bounds.width <= 0 || legend.bounds.height <= 0) return;
   const g = createSVGElement("g");
@@ -1511,26 +1597,7 @@ function renderContinuousLegend(parent, legend) {
     g.appendChild(label);
   }
   if (legend.noData) {
-    const swatch = createSVGElement("rect");
-    swatch.setAttribute("class", "oc-legend-nodata");
-    setAttrs(swatch, {
-      x: legend.noData.x,
-      y: legend.noData.y,
-      width: legend.noData.size,
-      height: legend.noData.size,
-      fill: legend.noData.fill,
-      "shape-rendering": "crispEdges"
-    });
-    g.appendChild(swatch);
-    const label = createSVGElement("text");
-    setAttrs(label, {
-      x: legend.noData.labelX,
-      y: legend.noData.labelY,
-      "text-anchor": "start"
-    });
-    applyTextStyle(label, legend.labelStyle);
-    label.textContent = legend.noData.label;
-    g.appendChild(label);
+    renderNoDataSwatch(g, legend.noData, legend.labelStyle);
   }
   parent.appendChild(g);
 }
@@ -1720,6 +1787,9 @@ function renderLegend(parent, legend) {
       }
     }
   }
+  if (legend.noData) {
+    renderNoDataSwatch(g, legend.noData, legend.labelStyle, { rx: 2, baseline: "central" });
+  }
   parent.appendChild(g);
 }
 
@@ -1854,7 +1924,12 @@ function renderChartSVG(layout, container, opts) {
     defs
   );
   svg.appendChild(defs);
-  setMarkRenderState({ animation, gradientMap, patternMap });
+  setMarkRenderState({
+    animation,
+    gradientMap,
+    patternMap,
+    surface: resolvedSurface(layout.theme)
+  });
   try {
     if (layout.facet) {
       renderFacetedPanels(svg, layout, layout.facet.panels, defs);
@@ -1928,10 +2003,10 @@ function renderChartSVG(layout, container, opts) {
         clippedGroup.appendChild(dotsGroup);
       }
       svg.appendChild(clipGroup);
+      renderAnnotations(svg, layout);
       if (markLabelsOverlay) {
         svg.appendChild(markLabelsOverlay);
       }
-      renderAnnotations(svg, layout);
       renderEndpointLabels(svg, layout);
       const epEntries = layout.endpointLabels?.entries ?? [];
       if (epEntries.length > 0) {
@@ -2022,10 +2097,10 @@ function renderFacetedPanels(svg, layout, panels, defs) {
     clippedGroup.setAttribute("clip-path", `url(#${panelClipId})`);
     const panelLabelsOverlay = renderMarks(clippedGroup, panelLayout);
     g.appendChild(clippedGroup);
+    renderAnnotations(g, panelLayout);
     if (panelLabelsOverlay) {
       g.appendChild(panelLabelsOverlay);
     }
-    renderAnnotations(g, panelLayout);
     svg.appendChild(g);
   }
 }
@@ -2036,6 +2111,10 @@ export {
   resetSvgIdCounter,
   buildGradientDefs,
   resolveMarkFill,
+  buildPatternDefs,
+  resolvePatternFill,
+  resolvedSurface,
+  stampThemeProperties,
   renderChromeElement,
   renderLegend,
   registerMarkRenderer,
@@ -2043,4 +2122,4 @@ export {
   renderSingleMark,
   renderChartSVG
 };
-//# sourceMappingURL=chunk-YGYMB7KB.js.map
+//# sourceMappingURL=chunk-KANNWAEA.js.map