@opendata-ai/openchart-core 2.10.0 → 2.12.0

package/dist/styles.css

@@ -662,6 +662,8 @@ th[aria-sort="descending"] .viz-table-sort-btn::before {
   overflow: hidden;
   background: var(--viz-bg);
   font-family: var(--viz-font-family);
+  width: 100%;
+  height: 100%;
 }
 
 .viz-graph-canvas {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-core",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "description": "Types, theme, colors, accessibility, and utilities for openchart",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",

package/src/index.ts

@@ -54,6 +54,7 @@ export {
 // ---------------------------------------------------------------------------
 
 export {
+  BRAND_RESERVE_WIDTH,
   computeChrome,
   estimateTextWidth,
 } from './layout/index';
@@ -86,7 +87,7 @@ export type {
   LabelCandidate,
   LabelPriority,
 } from './labels/index';
-export { resolveCollisions } from './labels/index';
+export { computeLabelBounds, detectCollision, resolveCollisions } from './labels/index';
 
 // ---------------------------------------------------------------------------
 // Locale: number and date formatting

package/src/labels/collision.ts

@@ -6,6 +6,7 @@
  * Targeting ~60% of Infrographic quality for Phase 0.
  */
 
+import { estimateTextWidth } from '../layout/text-measure';
 import type { Rect, ResolvedLabel, TextStyle } from '../types/layout';
 
 // ---------------------------------------------------------------------------
@@ -159,3 +160,28 @@ export function resolveCollisions(labels: LabelCandidate[]): ResolvedLabel[] {
 
   return results;
 }
+
+// ---------------------------------------------------------------------------
+// Label bounds estimation
+// ---------------------------------------------------------------------------
+
+/**
+ * Compute the bounding rect of a resolved label from its position and text.
+ * Uses heuristic text measurement so it works without DOM access.
+ */
+export function computeLabelBounds(label: ResolvedLabel): Rect {
+  const fontSize = label.style.fontSize;
+  const fontWeight = label.style.fontWeight;
+  const width = estimateTextWidth(label.text, fontSize, fontWeight);
+  const height = fontSize * (label.style.lineHeight ?? 1.2);
+
+  // Adjust x based on text anchor
+  let x = label.x;
+  if (label.style.textAnchor === 'middle') {
+    x = label.x - width / 2;
+  } else if (label.style.textAnchor === 'end') {
+    x = label.x - width;
+  }
+
+  return { x, y: label.y, width, height };
+}

package/src/labels/index.ts

@@ -3,4 +3,4 @@
  */
 
 export type { LabelCandidate, LabelPriority } from './collision';
-export { detectCollision, resolveCollisions } from './collision';
+export { computeLabelBounds, detectCollision, resolveCollisions } from './collision';

package/src/layout/__tests__/chrome.test.ts

@@ -100,6 +100,23 @@ describe('computeChrome', () => {
     expect(result.bottomHeight).toBeGreaterThan(0);
   });
 
+  it('reserves extra height when title wraps to multiple lines at narrow widths', () => {
+    const longTitle =
+      'Global Economic Recovery Trends Show Surprising Resilience Across Major Markets';
+    const chrome: Chrome = { title: longTitle, subtitle: 'Subtitle text' };
+
+    // At wide width, title fits on one line
+    const wide = computeChrome(chrome, theme, 800);
+    // At narrow width, title wraps to multiple lines
+    const narrow = computeChrome(chrome, theme, 300);
+
+    // Narrow should reserve more top height due to title wrapping
+    expect(narrow.topHeight).toBeGreaterThan(wide.topHeight);
+
+    // Subtitle should be pushed further down to avoid collision
+    expect(narrow.subtitle!.y).toBeGreaterThan(wide.subtitle!.y);
+  });
+
   it('uses measureText function when provided', () => {
     const measureText = (text: string, fontSize: number) => ({
       width: text.length * fontSize * 0.6,

package/src/layout/chrome.ts

@@ -22,7 +22,7 @@ import type {
 } from '../types/layout';
 import type { Chrome, ChromeText } from '../types/spec';
 import type { ChromeDefaults, ResolvedTheme } from '../types/theme';
-import { estimateTextHeight, estimateTextWidth } from './text-measure';
+import { BRAND_RESERVE_WIDTH, estimateCharWidth, estimateTextHeight } from './text-measure';
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -71,27 +71,40 @@ function buildTextStyle(
   };
 }
 
-/** Measure text width using the provided function or heuristic fallback. */
-function measureWidth(text: string, style: TextStyle, measureText?: MeasureTextFn): number {
-  if (measureText) {
-    return measureText(text, style.fontSize, style.fontWeight).width;
-  }
-  return estimateTextWidth(text, style.fontSize, style.fontWeight);
-}
-
 /**
  * Estimate how many lines text will wrap to, given a max width.
+ * Uses character-count word-wrapping that matches the SVG renderer's
+ * wrapText behavior (word-boundary breaks, same charWidth heuristic).
  * Returns at least 1.
  */
 function estimateLineCount(
   text: string,
   style: TextStyle,
   maxWidth: number,
-  measureText?: MeasureTextFn,
+  _measureText?: MeasureTextFn,
 ): number {
-  const fullWidth = measureWidth(text, style, measureText);
-  if (fullWidth <= maxWidth) return 1;
-  return Math.ceil(fullWidth / maxWidth);
+  if (maxWidth <= 0) return 1;
+
+  const charWidth = estimateCharWidth(style.fontSize, style.fontWeight);
+  const maxChars = Math.floor(maxWidth / charWidth);
+
+  if (text.length <= maxChars) return 1;
+
+  const words = text.split(' ');
+  let lines = 1;
+  let current = '';
+
+  for (const word of words) {
+    const candidate = current ? `${current} ${word}` : word;
+    if (candidate.length > maxChars && current) {
+      lines++;
+      current = word;
+    } else {
+      current = candidate;
+    }
+  }
+
+  return lines;
 }
 
 // ---------------------------------------------------------------------------
@@ -190,6 +203,8 @@ export function computeChrome(
   }
 
   // Bottom elements: source, byline, footer
+  // Reserve space on the right for the brand watermark so text doesn't overlap it
+  const bottomMaxWidth = maxWidth - BRAND_RESERVE_WIDTH;
   const bottomElements: Partial<Pick<ResolvedChrome, 'source' | 'byline' | 'footer'>> = {};
   let bottomHeight = 0;
 
@@ -237,7 +252,7 @@ export function computeChrome(
         width,
         item.norm.style,
       );
-      const lineCount = estimateLineCount(item.norm.text, style, maxWidth, measureText);
+      const lineCount = estimateLineCount(item.norm.text, style, bottomMaxWidth, measureText);
       const height = estimateTextHeight(style.fontSize, lineCount, style.lineHeight);
 
       // y positions will be computed relative to the bottom of the
@@ -246,7 +261,7 @@ export function computeChrome(
         text: item.norm.text,
         x: pad + (item.norm.offset?.dx ?? 0),
         y: bottomHeight + (item.norm.offset?.dy ?? 0), // offset from where bottom chrome starts
-        maxWidth,
+        maxWidth: bottomMaxWidth,
         style,
       };
 

package/src/layout/index.ts

@@ -3,4 +3,9 @@
  */
 
 export { computeChrome } from './chrome';
-export { estimateTextHeight, estimateTextWidth } from './text-measure';
+export {
+  BRAND_RESERVE_WIDTH,
+  estimateCharWidth,
+  estimateTextHeight,
+  estimateTextWidth,
+} from './text-measure';

package/src/layout/text-measure.ts

@@ -27,6 +27,15 @@ const WEIGHT_ADJUSTMENT: Record<number, number> = {
   900: 1.12,
 };
 
+/**
+ * Estimate the average character width for a given font size and weight.
+ * Used by both text width estimation and word-wrap line counting.
+ */
+export function estimateCharWidth(fontSize: number, fontWeight = 400): number {
+  const weightFactor = WEIGHT_ADJUSTMENT[fontWeight] ?? 1.0;
+  return fontSize * AVG_CHAR_WIDTH_RATIO * weightFactor;
+}
+
 /**
  * Estimate the rendered width of a text string.
  *
@@ -38,10 +47,17 @@ const WEIGHT_ADJUSTMENT: Record<number, number> = {
  * @param fontWeight - Font weight (100-900). Defaults to 400.
  */
 export function estimateTextWidth(text: string, fontSize: number, fontWeight = 400): number {
-  const weightFactor = WEIGHT_ADJUSTMENT[fontWeight] ?? 1.0;
-  return text.length * fontSize * AVG_CHAR_WIDTH_RATIO * weightFactor;
+  return text.length * estimateCharWidth(fontSize, fontWeight);
 }
 
+/**
+ * Width reserved for the "OpenData" brand watermark in the bottom-right corner.
+ * Accounts for ~8 chars at font size 20 with mixed 500/600 weight, plus a gap
+ * so adjacent text doesn't crowd it. Used by chrome and legend layout to avoid
+ * overlapping the brand.
+ */
+export const BRAND_RESERVE_WIDTH = 110;
+
 /**
  * Estimate the rendered height of a text block.
  *

package/src/styles/viz.css

@@ -662,6 +662,8 @@ th[aria-sort="descending"] .viz-table-sort-btn::before {
   overflow: hidden;
   background: var(--viz-bg);
   font-family: var(--viz-font-family);
+  width: 100%;
+  height: 100%;
 }
 
 .viz-graph-canvas {

package/src/theme/__tests__/resolve.test.ts

@@ -74,3 +74,60 @@ describe('resolveTheme', () => {
     expect(resolved.spacing.padding).toBe(DEFAULT_THEME.spacing.padding);
   });
 });
+
+// ---------------------------------------------------------------------------
+// Deep merge behavior hardening
+// ---------------------------------------------------------------------------
+
+describe('resolveTheme deep merge edge cases', () => {
+  it('replaces categorical array entirely, does not concatenate', () => {
+    const custom = ['#aaa', '#bbb'];
+    const resolved = resolveTheme({ colors: { categorical: custom } });
+    expect(resolved.colors.categorical).toEqual(custom);
+    expect(resolved.colors.categorical).toHaveLength(2);
+  });
+
+  it('skips undefined values, preserving defaults', () => {
+    const resolved = resolveTheme({ borderRadius: undefined });
+    expect(resolved.borderRadius).toBe(DEFAULT_THEME.borderRadius);
+  });
+
+  it('applies multiple overrides at different depths in one call', () => {
+    const resolved = resolveTheme({
+      colors: { background: '#222222', text: '#eeeeee' },
+      fonts: { family: 'Georgia' },
+      spacing: { padding: 32 },
+      borderRadius: 4,
+    });
+    expect(resolved.colors.background).toBe('#222222');
+    expect(resolved.colors.text).toBe('#eeeeee');
+    expect(resolved.fonts.family).toBe('Georgia');
+    expect(resolved.spacing.padding).toBe(32);
+    expect(resolved.borderRadius).toBe(4);
+    // Non-overridden values preserved
+    expect(resolved.fonts.mono).toBe(DEFAULT_THEME.fonts.mono);
+    expect(resolved.spacing.chromeGap).toBe(DEFAULT_THEME.spacing.chromeGap);
+    expect(resolved.colors.categorical).toEqual(DEFAULT_THEME.colors.categorical);
+  });
+
+  it('empty object override returns defaults unchanged', () => {
+    const resolved = resolveTheme({});
+    expect(resolved.colors).toEqual(expect.objectContaining(DEFAULT_THEME.colors));
+    expect(resolved.fonts).toEqual(DEFAULT_THEME.fonts);
+    expect(resolved.spacing).toEqual(DEFAULT_THEME.spacing);
+    expect(resolved.borderRadius).toBe(DEFAULT_THEME.borderRadius);
+  });
+
+  it('dark background adapts chrome colors without losing chrome structure', () => {
+    const resolved = resolveTheme({ colors: { background: '#111111', text: '#ffffff' } });
+    expect(resolved.isDark).toBe(true);
+    // Chrome structure should still be fully populated
+    expect(resolved.chrome.title).toBeDefined();
+    expect(resolved.chrome.subtitle).toBeDefined();
+    expect(resolved.chrome.source).toBeDefined();
+    expect(resolved.chrome.byline).toBeDefined();
+    expect(resolved.chrome.footer).toBeDefined();
+    // Title color should be adapted (not the light-mode default)
+    expect(resolved.chrome.title.color).not.toBe(DEFAULT_THEME.chrome.title.color);
+  });
+});