@opendata-ai/openchart-vanilla 7.6.0 → 7.7.0

package/src/svg-renderer.ts

@@ -9,7 +9,7 @@
  * own module under `./renderers/`.
  */
 
-import type { ChartLayout, RectMark } from '@opendata-ai/openchart-core';
+import type { ChartLayout, FacetPanelLayout, RectMark } from '@opendata-ai/openchart-core';
 import { clampStaggerDelay } from '@opendata-ai/openchart-engine';
 import { buildGradientDefs } from './gradient-utils';
 import { renderAnnotations } from './renderers/annotations';
@@ -161,111 +161,90 @@ export function renderChartSVG(
   // starts with a clean slate.
   setMarkRenderState({ animation, gradientMap });
   try {
-    // Render layers in order (back to front)
-    // Axes render outside clip (labels extend beyond chart area)
-    renderAxes(svg, layout);
+    if (layout.facet) {
+      // Faceted rendering: per-panel axes, marks, annotations
+      renderFacetedPanels(svg, layout, layout.facet.panels, defs);
+    } else {
+      // Standard (non-faceted) rendering
+      // Axes render outside clip (labels extend beyond chart area)
+      renderAxes(svg, layout);
 
-    // Marks are clipped to chart area so area fills don't cover chrome
-    const clippedGroup = createSVGElement('g');
-    clippedGroup.setAttribute('clip-path', `url(#${clipId})`);
-    const markLabelsOverlay = renderMarks(clippedGroup, layout);
-
-    // Add transparent overlay rect for line/area charts to enable voronoi tooltip lookup.
-    // Always emitted for line/area with dataPoints — the overlay-driven snap tooltip
-    // with crosshair is the canonical interaction for these chart types. When point
-    // marks coexist (e.g. mark.point: true), they still render decoratively but
-    // pointer events route to the overlay so the snap behavior wins.
-    const hasLineOrAreaWithDataPoints = layout.marks.some(
-      (m) => (m.type === 'line' || m.type === 'area') && m.dataPoints && m.dataPoints.length > 0,
-    );
-    if (hasLineOrAreaWithDataPoints) {
-      // Decorative point marks on line/area: route pointer events to the
-      // overlay so the snap-tooltip wins instead of competing per-point hover.
-      const pointEls = clippedGroup.querySelectorAll('circle.oc-mark-point');
-      for (const el of pointEls) {
-        el.setAttribute('pointer-events', 'none');
-      }
+      // Marks are clipped to chart area so area fills don't cover chrome
+      const clippedGroup = createSVGElement('g');
+      clippedGroup.setAttribute('clip-path', `url(#${clipId})`);
+      const markLabelsOverlay = renderMarks(clippedGroup, layout);
+
+      // Add transparent overlay rect for line/area charts to enable voronoi tooltip lookup.
+      const hasLineOrAreaWithDataPoints = layout.marks.some(
+        (m) => (m.type === 'line' || m.type === 'area') && m.dataPoints && m.dataPoints.length > 0,
+      );
+      if (hasLineOrAreaWithDataPoints) {
+        const pointEls = clippedGroup.querySelectorAll('circle.oc-mark-point');
+        for (const el of pointEls) {
+          el.setAttribute('pointer-events', 'none');
+        }
 
-      const overlay = createSVGElement('rect');
-      setAttrs(overlay, {
-        x: layout.area.x,
-        y: layout.area.y,
-        width: layout.area.width,
-        height: layout.area.height,
-        fill: 'transparent',
-      });
-      overlay.setAttribute('class', 'oc-voronoi-overlay');
-      overlay.setAttribute('data-voronoi-overlay', 'true');
-      clippedGroup.appendChild(overlay);
-
-      // Crosshair line: vertical line that tracks the snapped data point x.
-      // Gated on `opts.crosshair` because the dashed line is the optional bit;
-      // the snap-dots layer below ships regardless so the multi-series
-      // hover-tooltip stays useful even when the user opts out of the line.
-      if (opts?.crosshair) {
-        const crosshairLine = createSVGElement('line');
-        crosshairLine.setAttribute('data-crosshair', 'true');
-        crosshairLine.setAttribute('class', 'oc-crosshair');
-        setAttrs(crosshairLine, {
-          x1: 0,
-          y1: layout.area.y,
-          x2: 0,
-          y2: layout.area.y + layout.area.height,
-          stroke: layout.theme.colors.axis,
-          'stroke-opacity': '0.4',
-          'stroke-dasharray': '3,3',
-          'stroke-width': '1',
-          'pointer-events': 'none',
+        const overlay = createSVGElement('rect');
+        setAttrs(overlay, {
+          x: layout.area.x,
+          y: layout.area.y,
+          width: layout.area.width,
+          height: layout.area.height,
+          fill: 'transparent',
         });
-        crosshairLine.style.display = 'none';
-        clippedGroup.appendChild(crosshairLine);
+        overlay.setAttribute('class', 'oc-voronoi-overlay');
+        overlay.setAttribute('data-voronoi-overlay', 'true');
+        clippedGroup.appendChild(overlay);
+
+        if (opts?.crosshair) {
+          const crosshairLine = createSVGElement('line');
+          crosshairLine.setAttribute('data-crosshair', 'true');
+          crosshairLine.setAttribute('class', 'oc-crosshair');
+          setAttrs(crosshairLine, {
+            x1: 0,
+            y1: layout.area.y,
+            x2: 0,
+            y2: layout.area.y + layout.area.height,
+            stroke: layout.theme.colors.axis,
+            'stroke-opacity': '0.4',
+            'stroke-dasharray': '3,3',
+            'stroke-width': '1',
+            'pointer-events': 'none',
+          });
+          crosshairLine.style.display = 'none';
+          clippedGroup.appendChild(crosshairLine);
+        }
+
+        const dotsGroup = createSVGElement('g');
+        dotsGroup.setAttribute('data-snap-dots', 'true');
+        dotsGroup.setAttribute('class', 'oc-snap-dots');
+        dotsGroup.setAttribute('pointer-events', 'none');
+        clippedGroup.appendChild(dotsGroup);
       }
 
-      // Snap-dot layer: mount.ts populates one circle per series at the
-      // snapped x on hover. Always emitted so the merged tooltip has its
-      // anchors regardless of `opts.crosshair`.
-      const dotsGroup = createSVGElement('g');
-      dotsGroup.setAttribute('data-snap-dots', 'true');
-      dotsGroup.setAttribute('class', 'oc-snap-dots');
-      dotsGroup.setAttribute('pointer-events', 'none');
-      clippedGroup.appendChild(dotsGroup);
-    }
+      svg.appendChild(clippedGroup);
 
-    svg.appendChild(clippedGroup);
+      if (markLabelsOverlay) {
+        svg.appendChild(markLabelsOverlay);
+      }
 
-    // Value label overlay sits outside the clip path so labels above near-full-height
-    // bars aren't clipped. Coordinates are in absolute SVG space, no transform needed.
-    if (markLabelsOverlay) {
-      svg.appendChild(markLabelsOverlay);
-    }
+      renderAnnotations(svg, layout);
+      renderEndpointLabels(svg, layout);
 
-    renderAnnotations(svg, layout);
-
-    // Endpoint labels render after marks/annotations so they sit on top of any
-    // chart-edge content, but before the traditional legend so chrome wins on
-    // collision. The engine handles all suppression — when entries is empty,
-    // renderEndpointLabels is a no-op.
-    renderEndpointLabels(svg, layout);
-
-    // Suppress decorative point marks that sit underneath an endpoint marker
-    // (mark.point: true + endpoint marker on produces a double-circle at the
-    // line's right terminus). The endpoint marker is the canonical terminator
-    // when present, so the point mark hides via opacity (not removal) so the
-    // SVG DOM stays diff-friendly for animated re-renders.
-    const epEntries = layout.endpointLabels?.entries ?? [];
-    if (epEntries.length > 0) {
-      const pointEls = clippedGroup.querySelectorAll<SVGCircleElement>('circle.oc-mark-point');
-      for (const entry of epEntries) {
-        if (!entry.marker) continue;
-        // dataX is the original line endpoint; marker.x is offset by radius.
-        // Point marks are placed at data coordinates, so compare against dataX.
-        const mx = entry.marker.dataX;
-        const my = entry.marker.y;
-        for (const el of pointEls) {
-          const cx = Number(el.getAttribute('cx'));
-          const cy = Number(el.getAttribute('cy'));
-          if (Math.abs(cx - mx) < 0.5 && Math.abs(cy - my) < 0.5) {
-            el.setAttribute('opacity', '0');
+      // Suppress decorative point marks under endpoint markers
+      const epEntries = layout.endpointLabels?.entries ?? [];
+      if (epEntries.length > 0) {
+        const pointEls = clippedGroup.querySelectorAll<SVGCircleElement>('circle.oc-mark-point');
+        for (const entry of epEntries) {
+          if (!entry.marker) continue;
+          const mx = entry.marker.dataX;
+          const my = entry.marker.y;
+          for (const el of pointEls) {
+            const cx = Number(el.getAttribute('cx'));
+            const cy = Number(el.getAttribute('cy'));
+            if (Math.abs(cx - mx) < 0.5 && Math.abs(cy - my) < 0.5) {
+              el.setAttribute('opacity', '0');
+            }
           }
         }
       }
@@ -290,3 +269,83 @@ export function renderChartSVG(
   container.appendChild(svg);
   return svg;
 }
+
+function renderFacetedPanels(
+  svg: SVGElement,
+  layout: ChartLayout,
+  panels: FacetPanelLayout[],
+  defs: SVGElement,
+): void {
+  for (const panel of panels) {
+    const g = createSVGElement('g');
+    g.setAttribute('class', 'oc-facet-panel');
+    g.setAttribute('data-facet', panel.key);
+
+    // Panel background for visual grouping
+    const bg = createSVGElement('rect');
+    setAttrs(bg, {
+      x: panel.area.x,
+      y: panel.header.y - panel.header.fontSize * 0.6,
+      width: panel.area.width,
+      height: panel.area.height + panel.header.fontSize + 4,
+      rx: 3,
+      fill: layout.theme.isDark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.02)',
+    });
+    g.appendChild(bg);
+
+    // Panel header label
+    const headerText = createSVGElement('text');
+    setAttrs(headerText, {
+      x: panel.header.x,
+      y: panel.header.y,
+      'text-anchor': 'middle',
+      'font-family': layout.theme.fonts.family,
+      'font-size': panel.header.fontSize,
+      'font-weight': panel.header.fontWeight,
+      fill: layout.theme.colors.text,
+    });
+    headerText.textContent = panel.header.text;
+    g.appendChild(headerText);
+
+    // Build a per-panel synthetic layout for the existing renderers
+    const panelLayout: ChartLayout = {
+      ...layout,
+      area: panel.area,
+      axes: panel.axes,
+      marks: panel.marks,
+      annotations: panel.annotations,
+    };
+
+    // Panel axes (ticks already suppressed for inner panels by the engine)
+    renderAxes(g, panelLayout);
+
+    // Panel clip path
+    const panelClipId = nextSvgId('oc-facet-clip');
+    const clipPath = createSVGElement('clipPath');
+    clipPath.setAttribute('id', panelClipId);
+    const clipRect = createSVGElement('rect');
+    setAttrs(clipRect, {
+      x: panel.area.x,
+      y: panel.area.y,
+      width: panel.area.width,
+      height: panel.area.height,
+    });
+    clipPath.appendChild(clipRect);
+    defs.appendChild(clipPath);
+
+    // Panel marks (clipped)
+    const clippedGroup = createSVGElement('g');
+    clippedGroup.setAttribute('clip-path', `url(#${panelClipId})`);
+    const panelLabelsOverlay = renderMarks(clippedGroup, panelLayout);
+    g.appendChild(clippedGroup);
+
+    if (panelLabelsOverlay) {
+      g.appendChild(panelLabelsOverlay);
+    }
+
+    // Panel annotations
+    renderAnnotations(g, panelLayout);
+
+    svg.appendChild(g);
+  }
+}

package/src/theme-tokens.ts

@@ -0,0 +1,51 @@
+/**
+ * Generate CSS custom properties from a resolved JS theme.
+ *
+ * Stamped on the .oc-root container at mount time so CSS consumers
+ * read from the same source of truth as the JS engine. The static
+ * values in tokens.css / dark.css serve as fallback defaults for
+ * contexts where JS hasn't mounted (SSR, static HTML).
+ */
+
+import type { ResolvedTheme } from '@opendata-ai/openchart-core';
+import { adaptForLightLineStroke } from '@opendata-ai/openchart-core';
+
+export function stampThemeProperties(el: HTMLElement, theme: ResolvedTheme): void {
+  const accent = theme.colors.categorical[0] ?? '#06b6d4';
+  const bg =
+    theme.colors.background === 'transparent'
+      ? theme.isDark
+        ? '#09090b'
+        : '#ffffff'
+      : theme.colors.background;
+
+  const props: [string, string][] = [
+    ['--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],
+    ['--oc-gridline', theme.colors.gridline],
+    ['--oc-axis', theme.colors.axis],
+    ['--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);
+  }
+}

package/src/tilemap-renderer.ts

@@ -12,6 +12,7 @@ import type {
   TileMapTileMark,
 } from '@opendata-ai/openchart-core';
 import { textAscent } from '@opendata-ai/openchart-core';
+import { renderLegend } from './renderers/legend';
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const XLINK_NS = 'http://www.w3.org/1999/xlink';
@@ -438,8 +439,12 @@ export function renderTileMapSVG(
   // Render tiles
   renderTiles(svg, tiles, animate ? animation : undefined);
 
-  // Render gradient legend
-  renderGradientLegend(svg, layout);
+  // Render legend (gradient for quantitative, categorical for nominal)
+  if (layout.categoricalLegend) {
+    renderLegend(svg, layout.categoricalLegend);
+  } else {
+    renderGradientLegend(svg, layout);
+  }
 
   // Render watermark
   if (watermark) {