@opendata-ai/openchart-vanilla 2.7.0 → 2.8.1

package/dist/styles.css

@@ -742,11 +742,13 @@ th[aria-sort="descending"] .viz-table-sort-btn::before {
 }
 
 /* Dark mode graph overrides (darker bg for canvas-based rendering) */
-.viz-dark .viz-graph-wrapper {
+.viz-dark .viz-graph-wrapper,
+.viz-graph-wrapper.viz-dark {
   --viz-bg: #0d1117;
 }
 
-.viz-dark .viz-graph-legend {
+.viz-dark .viz-graph-legend,
+.viz-dark.viz-graph-wrapper .viz-graph-legend {
   background: rgba(13, 17, 23, 0.85);
   border-color: rgba(255, 255, 255, 0.1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -49,8 +49,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "2.7.0",
-    "@opendata-ai/openchart-engine": "2.7.0",
+    "@opendata-ai/openchart-core": "2.8.1",
+    "@opendata-ai/openchart-engine": "2.8.1",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

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

@@ -354,6 +354,46 @@ describe('chart chrome rendering', () => {
     expect(fontSize).toBeGreaterThan(0);
   });
 
+  it('wraps long title text into tspan elements at narrow widths', () => {
+    const longTitleSpec: ChartSpec = {
+      type: 'bar',
+      data: [
+        { name: 'A', value: 10 },
+        { name: 'B', value: 20 },
+      ],
+      encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'name', type: 'nominal' },
+      },
+      chrome: {
+        title: 'This is a very long chart title that should definitely wrap at narrow widths',
+      },
+    };
+    // Render at a very narrow width to force wrapping
+    const { svg } = renderSpec(longTitleSpec, { width: 250, height: 300 });
+    const title = svg.querySelector('.viz-title');
+    expect(title).not.toBeNull();
+    const tspans = title!.querySelectorAll('tspan');
+    expect(tspans.length).toBeGreaterThan(1);
+    // Full text should be preserved across tspans
+    const fullText = Array.from(tspans)
+      .map((t) => t.textContent)
+      .join(' ');
+    expect(fullText).toBe(
+      'This is a very long chart title that should definitely wrap at narrow widths',
+    );
+  });
+
+  it('does not wrap short title text', () => {
+    const { svg } = renderSpec(lineSpec);
+    const title = svg.querySelector('.viz-title');
+    expect(title).not.toBeNull();
+    // Short title should have no tspan children, just direct textContent
+    const tspans = title!.querySelectorAll('tspan');
+    expect(tspans.length).toBe(0);
+    expect(title!.textContent).toBe('GDP Growth');
+  });
+
   it('chart with no chrome specified renders no chrome text elements', () => {
     const noChrome: ChartSpec = {
       type: 'bar',

package/src/graph-mount.ts

@@ -259,13 +259,26 @@ export function createGraph(
 
     // Wrapper
     wrapper = document.createElement('div');
-    wrapper.className = 'viz-graph-wrapper';
+    wrapper.className = isDark ? 'viz-graph-wrapper viz-dark' : 'viz-graph-wrapper';
     if (isDark) {
       container.classList.add('viz-dark');
     } else {
       container.classList.remove('viz-dark');
     }
 
+    // Apply theme colors as CSS custom properties so chrome HTML picks them up.
+    // Without this, consumer-supplied theme.colors.text only affects canvas-drawn
+    // labels but not the HTML title/subtitle which read from --viz-text.
+    const resolvedTheme = compilation.theme;
+    if (resolvedTheme) {
+      const s = wrapper.style;
+      s.setProperty('--viz-bg', resolvedTheme.colors.background);
+      s.setProperty('--viz-text', resolvedTheme.colors.text);
+      s.setProperty('--viz-text-secondary', resolvedTheme.colors.axis ?? resolvedTheme.colors.text);
+      s.setProperty('--viz-font-family', resolvedTheme.fonts.family);
+      s.fontFamily = resolvedTheme.fonts.family;
+    }
+
     // Chrome (title, subtitle)
     chromeEl = document.createElement('div');
     chromeEl.className = 'viz-graph-chrome';

package/src/svg-renderer.ts

@@ -91,6 +91,50 @@ function applyTextStyle(el: SVGElement, style: TextStyle): void {
 // Chrome rendering
 // ---------------------------------------------------------------------------
 
+/**
+ * Break text into lines that fit within maxWidth using word wrapping.
+ * Uses a character-width heuristic (same as text-measure.ts).
+ */
+function wrapText(text: string, fontSize: number, fontWeight: number, maxWidth: number): string[] {
+  if (maxWidth <= 0) return [text];
+
+  // Heuristic character width matching text-measure.ts
+  const AVG_CHAR_WIDTH = 0.55;
+  const WEIGHT_FACTORS: Record<number, number> = {
+    100: 0.9,
+    200: 0.92,
+    300: 0.95,
+    400: 1.0,
+    500: 1.02,
+    600: 1.05,
+    700: 1.08,
+    800: 1.1,
+    900: 1.12,
+  };
+  const weightFactor = WEIGHT_FACTORS[fontWeight] ?? 1.0;
+  const charWidth = fontSize * AVG_CHAR_WIDTH * weightFactor;
+  const maxChars = Math.floor(maxWidth / charWidth);
+
+  if (text.length <= maxChars) return [text];
+
+  const words = text.split(' ');
+  const lines: string[] = [];
+  let current = '';
+
+  for (const word of words) {
+    const candidate = current ? `${current} ${word}` : word;
+    if (candidate.length > maxChars && current) {
+      lines.push(current);
+      current = word;
+    } else {
+      current = candidate;
+    }
+  }
+  if (current) lines.push(current);
+
+  return lines;
+}
+
 function renderChromeElement(
   parent: SVGElement,
   element: ResolvedChromeElement,
@@ -102,7 +146,26 @@ function renderChromeElement(
   applyTextStyle(text, element.style);
   text.setAttribute('class', className);
   text.setAttribute('data-chrome-key', chromeKey);
-  text.textContent = element.text;
+
+  const lines = wrapText(
+    element.text,
+    element.style.fontSize,
+    element.style.fontWeight,
+    element.maxWidth,
+  );
+
+  if (lines.length === 1) {
+    text.textContent = element.text;
+  } else {
+    const lineHeight = element.style.fontSize * (element.style.lineHeight ?? 1.3);
+    for (let i = 0; i < lines.length; i++) {
+      const tspan = createSVGElement('tspan');
+      setAttrs(tspan, { x: element.x, dy: i === 0 ? 0 : lineHeight });
+      tspan.textContent = lines[i];
+      text.appendChild(tspan);
+    }
+  }
+
   parent.appendChild(text);
 }