@opendata-ai/openchart-vanilla 6.23.1 → 6.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "6.23.1",
+  "version": "6.24.0",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@opendata-ai/openchart-core": "6.23.1",
-    "@opendata-ai/openchart-engine": "6.23.1",
+    "@opendata-ai/openchart-core": "6.24.0",
+    "@opendata-ai/openchart-engine": "6.24.0",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

package/src/__tests__/svg-renderer.test.ts

@@ -346,12 +346,12 @@ describe('chart chrome rendering', () => {
 
   it('title has font styling applied', () => {
     const { svg } = renderSpec(lineSpec);
-    const title = svg.querySelector('.oc-title');
+    const title = svg.querySelector('.oc-title') as SVGElement & ElementCSSInlineStyle;
     expect(title).not.toBeNull();
-    const fontFamily = title!.getAttribute('font-family');
-    const fontSize = Number(title!.getAttribute('font-size'));
-    expect(fontFamily).not.toBeNull();
-    expect(fontSize).toBeGreaterThan(0);
+    const fontFamily = title.style.getPropertyValue('font-family');
+    const fontSize = title.style.getPropertyValue('font-size');
+    expect(fontFamily).not.toBe('');
+    expect(parseFloat(fontSize)).toBeGreaterThan(0);
   });
 
   it('wraps long title text into tspan elements at narrow widths', () => {

package/src/measure-text.ts

@@ -0,0 +1,37 @@
+/**
+ * Canvas-backed text measurement factory.
+ *
+ * Shared by mount.ts (charts) and sankey-mount.ts (sankey diagrams) so both
+ * pipelines get accurate browser-measured text widths instead of the heuristic
+ * fallback. Falls back to the heuristic when canvas isn't available (e.g. SSR).
+ */
+
+import type { MeasureTextFn } from '@opendata-ai/openchart-core';
+
+export function createMeasureText(): MeasureTextFn {
+  let canvas: HTMLCanvasElement | null = null;
+  let ctx: CanvasRenderingContext2D | null = null;
+
+  return (
+    text: string,
+    fontSize: number,
+    fontWeight?: number,
+  ): { width: number; height: number } => {
+    if (!canvas) {
+      canvas = document.createElement('canvas');
+      ctx = canvas.getContext('2d');
+    }
+    if (!ctx) {
+      // Fallback: heuristic estimation
+      return { width: text.length * fontSize * 0.6, height: fontSize * 1.2 };
+    }
+
+    const weight = fontWeight ?? 400;
+    ctx.font = `${weight} ${fontSize}px Inter, sans-serif`;
+    const metrics = ctx.measureText(text);
+    return {
+      width: metrics.width,
+      height: fontSize * 1.2,
+    };
+  };
+}

package/src/mount.ts

@@ -20,7 +20,6 @@ import type {
   ElementRef,
   GraphSpec,
   LayerSpec,
-  MeasureTextFn,
   RangeAnnotation,
   RefLineAnnotation,
   TextAnnotation,
@@ -39,6 +38,7 @@ import {
   type JPGExportOptions,
   type SVGExportOptions,
 } from './export';
+import { createMeasureText } from './measure-text';
 import { observeResize } from './resize-observer';
 import { renderChartSVG } from './svg-renderer';
 import { createTextEditOverlay } from './text-edit-overlay';
@@ -115,38 +115,6 @@ function resolveDarkMode(mode?: DarkMode): boolean {
   return false;
 }
 
-// ---------------------------------------------------------------------------
-// measureText via hidden canvas
-// ---------------------------------------------------------------------------
-
-function createMeasureText(): MeasureTextFn {
-  let canvas: HTMLCanvasElement | null = null;
-  let ctx: CanvasRenderingContext2D | null = null;
-
-  return (
-    text: string,
-    fontSize: number,
-    fontWeight?: number,
-  ): { width: number; height: number } => {
-    if (!canvas) {
-      canvas = document.createElement('canvas');
-      ctx = canvas.getContext('2d');
-    }
-    if (!ctx) {
-      // Fallback: heuristic estimation
-      return { width: text.length * fontSize * 0.6, height: fontSize * 1.2 };
-    }
-
-    const weight = fontWeight ?? 400;
-    ctx.font = `${weight} ${fontSize}px Inter, sans-serif`;
-    const metrics = ctx.measureText(text);
-    return {
-      width: metrics.width,
-      height: fontSize * 1.2,
-    };
-  };
-}
-
 // ---------------------------------------------------------------------------
 // Tooltip event wiring
 // ---------------------------------------------------------------------------

package/src/renderers/axes.ts

@@ -76,7 +76,39 @@ function renderAxis(
         'dominant-baseline': 'central',
       });
       applyTextStyle(label, axis.tickLabelStyle);
-      label.textContent = tick.label;
+      // Truncate categorical y-axis labels that exceed available space so
+      // they don't overflow into the chart area. The engine may clamp
+      // margin.left on narrow containers; render what fits with an ellipsis.
+      const availableWidth = area.x - 6;
+      const fontSize = axis.tickLabelStyle.fontSize;
+      const fontWeight = axis.tickLabelStyle.fontWeight;
+      const fullWidth = estimateTextWidth(tick.label, fontSize, fontWeight);
+      if (fullWidth > availableWidth && availableWidth > 20) {
+        // Binary-search the longest prefix that fits with a trailing ellipsis
+        const ellipsis = '\u2026';
+        const ellipsisWidth = estimateTextWidth(ellipsis, fontSize, fontWeight);
+        let lo = 0;
+        let hi = tick.label.length;
+        while (lo < hi) {
+          const mid = (lo + hi + 1) >>> 1;
+          const candidate = tick.label.slice(0, mid);
+          if (
+            estimateTextWidth(candidate, fontSize, fontWeight) + ellipsisWidth <=
+            availableWidth
+          ) {
+            lo = mid;
+          } else {
+            hi = mid - 1;
+          }
+        }
+        label.textContent = lo > 0 ? tick.label.slice(0, lo).trimEnd() + ellipsis : ellipsis;
+        // Preserve the full label for accessibility / tooltips
+        const titleEl = createSVGElement('title');
+        titleEl.textContent = tick.label;
+        label.appendChild(titleEl);
+      } else {
+        label.textContent = tick.label;
+      }
       g.appendChild(label);
     }
   }

package/src/renderers/svg-dom.ts

@@ -21,14 +21,14 @@ export function setAttrs(el: SVGElement, attrs: Record<string, string | number>)
 }
 
 export function applyTextStyle(el: SVGElement, style: TextStyle): void {
-  setAttrs(el, {
-    'font-family': style.fontFamily,
-    'font-size': style.fontSize,
-    'font-weight': style.fontWeight,
-  });
-  // Use inline style for fill so it takes priority over CSS class defaults
-  // (e.g. .oc-title { fill: var(--oc-text) } which would override attributes)
-  (el as SVGElement & ElementCSSInlineStyle).style.setProperty('fill', style.fill);
+  // Use inline styles so engine-computed values take priority over CSS class
+  // defaults (e.g. .oc-title { font-size: var(--oc-title-size) } would otherwise
+  // override the responsive scaling applied by the chrome layout).
+  const inline = (el as SVGElement & ElementCSSInlineStyle).style;
+  inline.setProperty('fill', style.fill);
+  inline.setProperty('font-size', `${style.fontSize}px`);
+  inline.setProperty('font-weight', String(style.fontWeight));
+  inline.setProperty('font-family', style.fontFamily);
   if (style.textAnchor) {
     el.setAttribute('text-anchor', style.textAnchor);
   }

package/src/sankey-mount.ts

@@ -23,6 +23,7 @@ import {
   type JPGExportOptions,
   type SVGExportOptions,
 } from './export';
+import { createMeasureText } from './measure-text';
 import { observeResize } from './resize-observer';
 import { renderSankeySVG } from './sankey-renderer';
 import { createTooltipManager, type TooltipManager } from './tooltip';
@@ -121,6 +122,8 @@ export function createSankey(
   let animationCleanup: (() => void) | null = null;
   let pendingResize = false;
 
+  const measureText = createMeasureText();
+
   // ---------------------------------------------------------------------------
   // Helpers
   // ---------------------------------------------------------------------------
@@ -143,6 +146,7 @@ export function createSankey(
       theme: options?.theme,
       darkMode,
       watermark: options?.watermark,
+      measureText,
     };
 
     return compileSankey(currentSpec, compileOpts);

package/src/sankey-renderer.ts

@@ -8,6 +8,7 @@
 
 import type {
   LegendLayout,
+  MeasureTextFn,
   ResolvedAnimation,
   ResolvedChromeElement,
   SankeyLayout,
@@ -89,6 +90,7 @@ function renderChromeElement(
   element: ResolvedChromeElement,
   className: string,
   chromeKey: string,
+  measureText?: MeasureTextFn,
 ): void {
   const text = createSVGElement('text');
   setAttrs(text, { x: element.x, y: element.y });
@@ -101,6 +103,7 @@ function renderChromeElement(
     element.style.fontSize,
     element.style.fontWeight,
     element.maxWidth,
+    measureText,
   );
 
   if (lines.length === 1) {
@@ -122,13 +125,13 @@ function renderChrome(parent: SVGElement, layout: SankeyLayout): void {
   const g = createSVGElement('g');
   g.setAttribute('class', 'oc-chrome');
 
-  const { chrome } = layout;
+  const { chrome, measureText } = layout;
 
   if (chrome.title) {
-    renderChromeElement(g, chrome.title, 'oc-title', 'title');
+    renderChromeElement(g, chrome.title, 'oc-title', 'title', measureText);
   }
   if (chrome.subtitle) {
-    renderChromeElement(g, chrome.subtitle, 'oc-subtitle', 'subtitle');
+    renderChromeElement(g, chrome.subtitle, 'oc-subtitle', 'subtitle', measureText);
   }
 
   // Bottom chrome: positioned below the sankey drawing area.
@@ -140,6 +143,7 @@ function renderChrome(parent: SVGElement, layout: SankeyLayout): void {
       { ...chrome.source, y: bottomOffset + chrome.source.y },
       'oc-source',
       'source',
+      measureText,
     );
   }
   if (chrome.byline) {
@@ -148,6 +152,7 @@ function renderChrome(parent: SVGElement, layout: SankeyLayout): void {
       { ...chrome.byline, y: bottomOffset + chrome.byline.y },
       'oc-byline',
       'byline',
+      measureText,
     );
   }
   if (chrome.footer) {
@@ -156,6 +161,7 @@ function renderChrome(parent: SVGElement, layout: SankeyLayout): void {
       { ...chrome.footer, y: bottomOffset + chrome.footer.y },
       'oc-footer',
       'footer',
+      measureText,
     );
   }
 
@@ -476,7 +482,11 @@ function renderNodes(
 // Labels rendering
 // ---------------------------------------------------------------------------
 
-function renderLabels(parent: SVGElement, nodes: SankeyNodeMark[]): void {
+function renderLabels(
+  parent: SVGElement,
+  nodes: SankeyNodeMark[],
+  measureText?: MeasureTextFn,
+): void {
   const g = createSVGElement('g');
   g.setAttribute('class', 'oc-sankey-labels');
 
@@ -492,7 +502,7 @@ function renderLabels(parent: SVGElement, nodes: SankeyNodeMark[]): void {
     if (label.maxWidth !== undefined && label.maxWidth > 0) {
       const fontSize = label.style.fontSize ?? 12;
       const fontWeight = label.style.fontWeight ?? 400;
-      const lines = wrapText(label.text, fontSize, fontWeight, label.maxWidth);
+      const lines = wrapText(label.text, fontSize, fontWeight, label.maxWidth, measureText);
       if (lines.length > 1) {
         const lineHeight = fontSize * (label.style.lineHeight ?? 1.3);
         // Center the multi-line block vertically around the label y position
@@ -585,7 +595,7 @@ export function renderSankeySVG(
   renderNodes(svg, layout.nodes, animation);
 
   // Labels
-  renderLabels(svg, layout.nodes);
+  renderLabels(svg, layout.nodes, layout.measureText);
 
   // Legend
   renderLegend(svg, layout.legend);