@opendata-ai/openchart-vanilla 7.3.0 → 7.4.0

package/src/mount.ts

@@ -53,7 +53,7 @@ import {
   wireTooltipEvents,
   wireVoronoiTooltipEvents,
 } from './interactions';
-import { createMeasureText } from './measure-text';
+import { createMeasureText, resolveFontFamily, scheduleFontReload } from './measure-text';
 import { observeResize } from './resize-observer';
 import { renderChartSVG } from './svg-renderer';
 import { createTextEditOverlay } from './text-edit-overlay';
@@ -190,6 +190,13 @@ export function createChart<TData extends DataRow = DataRow>(
   let cleanupAnimations: (() => void) | null = null;
   let pendingResize = false;
 
+  // Set when webfonts have loaded and a recompile is owed to reflect final font
+  // metrics. The next render() that actually recompiles flips
+  // data-oc-fonts-state to 'ready' and clears this. Deferring the flip (rather
+  // than setting it right after resize()) keeps the attribute honest when the
+  // entrance animation makes resize() defer to pendingResize.
+  let fontsReloadPending = false;
+
   // Selection and text editing state
   let selectedElement: ElementRef | null = options?.selectedElement ?? null;
   let overlayElement: SVGGElement | null = null;
@@ -200,7 +207,25 @@ export function createChart<TData extends DataRow = DataRow>(
   const runtimeShownSeries = new Set<string>();
   let textEditCleanup: (() => void) | null = null;
 
-  const measureText = createMeasureText();
+  // Apply the root class up front so getComputedStyle can read --oc-font-family
+  // before we build the text measurer.
+  container.classList.add('oc-root');
+
+  // Resolve the effective font family the way compile() will. compile merges
+  // { ...spec.theme, ...options.theme }, so options.theme wins over the
+  // spec-level theme; fall back to the container's computed font. Measuring
+  // against a different font than compile renders (e.g. a spec that sets
+  // theme.fonts.family) desyncs layout metrics and the font-reload watcher.
+  function resolveEffectiveFont(): string {
+    return (
+      options?.theme?.fonts?.family ??
+      currentSpec.theme?.fonts?.family ??
+      resolveFontFamily(container)
+    );
+  }
+  let fontFamily = resolveEffectiveFont();
+  let measureText = createMeasureText(fontFamily);
+  let renderGen = 0;
 
   // ---------------------------------------------------------------------------
   // Compilation
@@ -774,6 +799,20 @@ export function createChart<TData extends DataRow = DataRow>(
         }
       });
     }
+    // Bump the render generation so tests (and consumers) can observe every
+    // full recompile, including the post-font-load one.
+    renderGen += 1;
+    container.dataset.ocRenderGen = String(renderGen);
+
+    // This render recompiled with the loaded webfonts, so the layout now
+    // reflects final font metrics. Publish 'ready' only now (not right after
+    // the fonts-ready resize(), which may have deferred to pendingResize while
+    // the entrance animation was still running).
+    if (fontsReloadPending) {
+      fontsReloadPending = false;
+      container.dataset.ocFontsState = 'ready';
+    }
+
     if (isFirstRender) {
       isFirstRender = false;
     }
@@ -786,6 +825,13 @@ export function createChart<TData extends DataRow = DataRow>(
   function update(newSpec: ChartSpec | GraphSpec, updateOpts?: UpdateOptions): void {
     if (destroyed) return;
     currentSpec = newSpec;
+    // A new spec can change theme.fonts.family; rebuild the measurer so layout
+    // measures the font compile will actually render with.
+    const nextFont = resolveEffectiveFont();
+    if (nextFont !== fontFamily) {
+      fontFamily = nextFont;
+      measureText = createMeasureText(fontFamily);
+    }
     runtimeHiddenSeries.clear();
     runtimeShownSeries.clear();
     if (updateOpts && 'selectedElement' in updateOpts) {
@@ -893,6 +939,23 @@ export function createChart<TData extends DataRow = DataRow>(
   // Initial render
   render();
 
+  // Recompile once after webfonts load. On real devices the primary font
+  // (e.g. Inter via display=swap) often swaps in after first paint, changing
+  // text metrics; without a re-measure, titles wrap wrong and labels collide.
+  // Desktop Chrome has the font cached, so it renders 'ready' immediately.
+  const pending = scheduleFontReload(
+    fontFamily,
+    () => !destroyed,
+    () => {
+      // Mark the reload owed, then trigger a recompile. render() flips the
+      // attribute to 'ready' once it actually recompiles — including the
+      // pendingResize replay after the entrance animation finishes.
+      fontsReloadPending = true;
+      resize();
+    },
+  );
+  container.dataset.ocFontsState = pending ? 'pending' : 'ready';
+
   // Set up responsive resize
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => {

package/src/renderers/axes.ts

@@ -8,6 +8,7 @@ import {
   estimateTextWidth,
   getAxisTitleOffset,
   TICK_LABEL_OFFSET,
+  textAscent,
 } from '@opendata-ai/openchart-core';
 import { applyTextStyle, createSVGElement, setAttrs } from './svg-dom';
 
@@ -86,16 +87,15 @@ function renderAxis(
         });
       } else {
         const xLabelPad = axis.labelPadding ?? layout.theme.spacing.xAxisLabelPadding;
-        // Anchor at the text's top edge (hanging baseline) so xLabelPad is the
-        // literal gap between the axis line and the top of the label, regardless
-        // of font size. With the default alphabetic baseline the offset lands at
-        // the text baseline instead, so large fonts let the label top creep up
-        // and hug (or overlap) the axis line.
+        // xLabelPad is the literal gap between the axis line and the TOP of
+        // the label regardless of font size, so shift down by the ascent to
+        // land on the alphabetic baseline. (dominant-baseline:hanging would
+        // express this directly, but WebKit positions hanging from different
+        // font metrics than Blink, drifting labels on iOS Safari.)
         setAttrs(label, {
           x: tick.position,
-          y: area.y + area.height + xLabelPad,
+          y: area.y + area.height + xLabelPad + textAscent(axis.tickLabelStyle.fontSize),
           'text-anchor': 'middle',
-          'dominant-baseline': 'hanging',
         });
       }
 

package/src/renderers/brand.ts

@@ -3,7 +3,7 @@
  */
 
 import type { ChartLayout } from '@opendata-ai/openchart-core';
-import { BRAND_FONT_SIZE, BRAND_MIN_WIDTH } from '@opendata-ai/openchart-core';
+import { BRAND_FONT_SIZE, BRAND_MIN_WIDTH, textAscent } from '@opendata-ai/openchart-core';
 import { createSVGElement, setAttrs, XLINK_NS } from './svg-dom';
 
 const BRAND_URL = 'https://tryopendata.ai';
@@ -45,13 +45,15 @@ export function renderBrand(parent: SVGElement, layout: ChartLayout): void {
 
   // "try" in normal weight, "OpenData" in semibold, ".ai" in normal weight,
   // rendered as a single right-aligned text element with three tspans.
-  // Use hanging baseline to align top-edge with source/byline chrome text.
+  // chromeY is the top edge shared with source/byline chrome text; anchor the
+  // shared alphabetic baseline from the largest tspan's ascent. (Hanging
+  // baseline is avoided: WebKit positions it differently and never inherits
+  // it into tspans, which scattered the three spans on iOS Safari.)
   const BRAND_LARGE = 16;
   const text = createSVGElement('text');
   setAttrs(text, {
     x: rightEdge,
-    y: chromeY,
-    'dominant-baseline': 'hanging',
+    y: chromeY + textAscent(BRAND_LARGE),
     'font-family': layout.theme.fonts.family,
     'font-size': BRAND_FONT_SIZE,
     'text-anchor': 'end',

package/src/renderers/chrome.ts

@@ -7,7 +7,7 @@ import type {
   MeasureTextFn,
   ResolvedChromeElement,
 } from '@opendata-ai/openchart-core';
-import { estimateTextWidth, wrapText } from '@opendata-ai/openchart-core';
+import { estimateTextWidth, textAscent, wrapText } from '@opendata-ai/openchart-core';
 import { applyTextStyle, createSVGElement, setAttrs } from './svg-dom';
 
 function renderChromeElement(
@@ -19,7 +19,10 @@ function renderChromeElement(
   uppercase = false,
 ): void {
   const text = createSVGElement('text');
-  setAttrs(text, { x: element.x, y: element.y });
+  // element.y is the TOP of the text box; convert to the alphabetic baseline
+  // here instead of relying on dominant-baseline:hanging, which WebKit
+  // positions from different font metrics and never inherits into tspans.
+  setAttrs(text, { x: element.x, y: element.y + textAscent(element.style.fontSize) });
   applyTextStyle(text, element.style);
   text.setAttribute('class', className);
   text.setAttribute('data-chrome-key', chromeKey);
@@ -61,8 +64,8 @@ export function renderChrome(parent: SVGElement, layout: ChartLayout): void {
   // Top chrome: render at their stored y positions (already absolute)
   if (chrome.eyebrow) {
     // Leading accent dot — matches the editorial design system mock.
-    // Eyebrow text uses dominantBaseline: hanging, so eyebrow.y is the top of
-    // the text. Visual center is roughly y + fontSize * 0.55 (cap height).
+    // eyebrow.y is the top of the text box. Visual center is roughly
+    // y + fontSize * 0.55 (cap height).
     const eyebrow = chrome.eyebrow;
     const dotR = 3;
     const dotGap = 8;

package/src/sankey-mount.ts

@@ -23,7 +23,7 @@ import {
   type JPGExportOptions,
   type SVGExportOptions,
 } from './export';
-import { createMeasureText } from './measure-text';
+import { createMeasureText, resolveFontFamily, scheduleFontReload } from './measure-text';
 import { observeResize } from './resize-observer';
 import { renderSankeySVG } from './sankey-renderer';
 import { createTooltipManager, type TooltipManager } from './tooltip';
@@ -122,7 +122,30 @@ export function createSankey(
   let animationCleanup: (() => void) | null = null;
   let pendingResize = false;
 
-  const measureText = createMeasureText();
+  // Set when webfonts have loaded and a recompile is owed. The next render()
+  // that recompiles flips data-oc-fonts-state to 'ready' and clears this, so
+  // the attribute stays honest when resize() defers to pendingResize during
+  // the entrance animation.
+  let fontsReloadPending = false;
+
+  // Apply the root class up front so getComputedStyle sees --oc-font-family
+  // before the text measurer is built.
+  container.classList.add('oc-sankey-root');
+
+  // Resolve the effective font the way compile() will: compile merges
+  // { ...spec.theme, ...options.theme }, so options.theme wins over the
+  // spec-level theme; fall back to the container's computed font. Measuring a
+  // different font than gets rendered desyncs layout metrics and the reload watcher.
+  function resolveEffectiveFont(): string {
+    return (
+      options?.theme?.fonts?.family ??
+      currentSpec.theme?.fonts?.family ??
+      resolveFontFamily(container)
+    );
+  }
+  let fontFamily = resolveEffectiveFont();
+  let measureText = createMeasureText(fontFamily);
+  let renderGen = 0;
 
   // ---------------------------------------------------------------------------
   // Helpers
@@ -410,6 +433,17 @@ export function createSankey(
         }
       });
     }
+
+    renderGen += 1;
+    container.dataset.ocRenderGen = String(renderGen);
+
+    // This render recompiled with the loaded webfonts; publish 'ready' now
+    // rather than right after the fonts-ready resize() (which may have deferred
+    // to pendingResize during the entrance animation).
+    if (fontsReloadPending) {
+      fontsReloadPending = false;
+      container.dataset.ocFontsState = 'ready';
+    }
   }
 
   // ---------------------------------------------------------------------------
@@ -419,6 +453,13 @@ export function createSankey(
   function update(newSpec: SankeySpec): void {
     if (destroyed) return;
     currentSpec = newSpec;
+    // A new spec can change theme.fonts.family; rebuild the measurer so layout
+    // measures the font compile will actually render with.
+    const nextFont = resolveEffectiveFont();
+    if (nextFont !== fontFamily) {
+      fontFamily = nextFont;
+      measureText = createMeasureText(fontFamily);
+    }
     isFirstRender = true; // Allow animation on update
     render();
   }
@@ -495,6 +536,7 @@ export function createSankey(
     svgElement = null;
 
     container.classList.remove('oc-dark');
+    container.classList.remove('oc-sankey-root');
   }
 
   // ---------------------------------------------------------------------------
@@ -537,12 +579,30 @@ export function createSankey(
         }
       });
     }
+
+    renderGen += 1;
+    container.dataset.ocRenderGen = String(renderGen);
   } catch (err) {
     console.error('[viz] Sankey mount failed:', err);
     // Re-throw so callers can handle the error rather than silently returning a broken instance
     throw err;
   }
 
+  // Recompile once after webfonts load so late-swapping fonts don't leave
+  // node labels measured against fallback metrics.
+  const fontsPending = scheduleFontReload(
+    fontFamily,
+    () => !destroyed,
+    () => {
+      // Mark the reload owed, then recompile. render() flips the attribute to
+      // 'ready' once it actually recompiles, including the pendingResize replay
+      // after the entrance animation finishes.
+      fontsReloadPending = true;
+      resize();
+    },
+  );
+  container.dataset.ocFontsState = fontsPending ? 'pending' : 'ready';
+
   // Responsive resize
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => {

package/src/sankey-renderer.ts

@@ -21,6 +21,7 @@ import {
   BRAND_FONT_SIZE,
   BRAND_MIN_WIDTH,
   estimateTextWidth,
+  textAscent,
   wrapText,
 } from '@opendata-ai/openchart-core';
 import { clampStaggerDelay } from '@opendata-ai/openchart-engine';
@@ -94,7 +95,9 @@ function renderChromeElement(
   measureText?: MeasureTextFn,
 ): void {
   const text = createSVGElement('text');
-  setAttrs(text, { x: element.x, y: element.y });
+  // element.y is the TOP of the text box; convert to the alphabetic baseline
+  // (see renderers/chrome.ts — WebKit mishandles dominant-baseline:hanging).
+  setAttrs(text, { x: element.x, y: element.y + textAscent(element.style.fontSize) });
   applyTextStyle(text, element.style);
   text.setAttribute('class', className);
   text.setAttribute('data-chrome-key', chromeKey);

package/src/svg-renderer.ts

@@ -52,10 +52,12 @@ export function renderChartSVG(
   setAttrs(svg, {
     viewBox: `0 0 ${width} ${height}`,
     xmlns: SVG_NS,
-    // WebKit/iOS Safari getBBox() bug: text with dominant-baseline:hanging
-    // reports bounding boxes extending above y=0. The SVG spec default
-    // overflow is "hidden", which clips this phantom extent. Setting
-    // overflow:visible prevents the clipping. Chart marks are already
+    // The SVG spec default is overflow:"hidden", which clips anything a hair
+    // outside the viewBox. We now position all text on the alphabetic/central
+    // baseline (dominant-baseline:hanging was dropped because WebKit computed
+    // it from different metrics), but WebKit/iOS still reports getBBox extents
+    // with a few pixels of slack around tspans, so text touching an edge can
+    // still get clipped. overflow:visible avoids that. Chart marks are already
     // constrained by a clipPath, so nothing bleeds out.
     overflow: 'visible',
     // Hint browsers to enable sub-pixel font hinting and kerning for chart text.

package/src/tilemap-mount.ts

@@ -23,7 +23,7 @@ import {
   type JPGExportOptions,
   type SVGExportOptions,
 } from './export';
-import { createMeasureText } from './measure-text';
+import { createMeasureText, resolveFontFamily, scheduleFontReload } from './measure-text';
 import { observeResize } from './resize-observer';
 import { renderTileMapSVG } from './tilemap-renderer';
 import { createTooltipManager, type TooltipManager } from './tooltip';
@@ -118,7 +118,30 @@ export function createTileMap(
   let animationCleanup: (() => void) | null = null;
   let pendingResize = false;
 
-  const measureText = createMeasureText();
+  // Set when webfonts have loaded and a recompile is owed. The next render()
+  // that recompiles flips data-oc-fonts-state to 'ready' and clears this, so
+  // the attribute stays honest when resize() defers to pendingResize during
+  // the entrance animation.
+  let fontsReloadPending = false;
+
+  // Apply the root class up front so getComputedStyle sees --oc-font-family
+  // before the text measurer is built.
+  container.classList.add('oc-tilemap-root');
+
+  // Resolve the effective font the way compile() will: compile merges
+  // { ...spec.theme, ...options.theme }, so options.theme wins over the
+  // spec-level theme; fall back to the container's computed font. Measuring a
+  // different font than gets rendered desyncs layout metrics and the reload watcher.
+  function resolveEffectiveFont(): string {
+    return (
+      options?.theme?.fonts?.family ??
+      currentSpec.theme?.fonts?.family ??
+      resolveFontFamily(container)
+    );
+  }
+  let fontFamily = resolveEffectiveFont();
+  let measureText = createMeasureText(fontFamily);
+  let renderGen = 0;
 
   // ---------------------------------------------------------------------------
   // Helpers
@@ -273,10 +296,28 @@ export function createTileMap(
         }
       });
     }
+
+    renderGen += 1;
+    container.dataset.ocRenderGen = String(renderGen);
+
+    // This render recompiled with the loaded webfonts; publish 'ready' now
+    // rather than right after the fonts-ready resize() (which may have deferred
+    // to pendingResize during the entrance animation).
+    if (fontsReloadPending) {
+      fontsReloadPending = false;
+      container.dataset.ocFontsState = 'ready';
+    }
   }
 
   function update(newSpec: TileMapSpec): void {
     currentSpec = newSpec;
+    // A new spec can change theme.fonts.family; rebuild the measurer so layout
+    // measures the font compile will actually render with.
+    const nextFont = resolveEffectiveFont();
+    if (nextFont !== fontFamily) {
+      fontFamily = nextFont;
+      measureText = createMeasureText(fontFamily);
+    }
     currentLayout = compile();
     render();
   }
@@ -365,8 +406,8 @@ export function createTileMap(
   // Initialize
   // ---------------------------------------------------------------------------
 
-  // Add root class for CSS custom properties (tokens, tooltip styles)
-  container.classList.add('oc-tilemap-root');
+  // Root class was applied before the measurer was built (see above); dark
+  // mode class still applies here.
   if (resolveDarkMode(options?.darkMode)) {
     container.classList.add('oc-dark');
   }
@@ -375,6 +416,21 @@ export function createTileMap(
   currentLayout = compile();
   render(true);
 
+  // Recompile once after webfonts load so labels aren't stuck measured
+  // against fallback metrics on real devices.
+  const fontsPending = scheduleFontReload(
+    fontFamily,
+    () => !destroyed,
+    () => {
+      // Mark the reload owed, then recompile. render() flips the attribute to
+      // 'ready' once it actually recompiles, including the pendingResize replay
+      // after the entrance animation finishes.
+      fontsReloadPending = true;
+      resize();
+    },
+  );
+  container.dataset.ocFontsState = fontsPending ? 'pending' : 'ready';
+
   // Setup responsive resizing
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => {

package/src/tilemap-renderer.ts

@@ -11,6 +11,7 @@ import type {
   TileMapLayout,
   TileMapTileMark,
 } from '@opendata-ai/openchart-core';
+import { textAscent } from '@opendata-ai/openchart-core';
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const XLINK_NS = 'http://www.w3.org/1999/xlink';
@@ -41,6 +42,8 @@ function setAttrs(el: SVGElement, attrs: Record<string, string | number>): void
 // Chrome rendering
 // ---------------------------------------------------------------------------
 
+// Chrome y positions are top-edge coordinates; convert to the alphabetic
+// baseline via textAscent() (WebKit mishandles dominant-baseline:hanging).
 function renderChrome(parent: SVGElement, layout: TileMapLayout): void {
   const g = createSVGElement('g');
   g.setAttribute('class', 'oc-chrome');
@@ -50,7 +53,10 @@ function renderChrome(parent: SVGElement, layout: TileMapLayout): void {
 
   if (chrome.title) {
     const text = createSVGElement('text');
-    setAttrs(text, { x: chrome.title.x, y: chrome.title.y });
+    setAttrs(text, {
+      x: chrome.title.x,
+      y: chrome.title.y + textAscent(chrome.title.style.fontSize),
+    });
     text.setAttribute('class', 'oc-title');
     text.setAttribute('font-family', chrome.title.style.fontFamily);
     text.setAttribute('font-size', String(chrome.title.style.fontSize));
@@ -62,7 +68,10 @@ function renderChrome(parent: SVGElement, layout: TileMapLayout): void {
 
   if (chrome.subtitle) {
     const text = createSVGElement('text');
-    setAttrs(text, { x: chrome.subtitle.x, y: chrome.subtitle.y });
+    setAttrs(text, {
+      x: chrome.subtitle.x,
+      y: chrome.subtitle.y + textAscent(chrome.subtitle.style.fontSize),
+    });
     text.setAttribute('class', 'oc-subtitle');
     text.setAttribute('font-family', chrome.subtitle.style.fontFamily);
     text.setAttribute('font-size', String(chrome.subtitle.style.fontSize));
@@ -77,7 +86,10 @@ function renderChrome(parent: SVGElement, layout: TileMapLayout): void {
 
   if (chrome.source) {
     const text = createSVGElement('text');
-    setAttrs(text, { x: chrome.source.x, y: bottomOffset + chrome.source.y });
+    setAttrs(text, {
+      x: chrome.source.x,
+      y: bottomOffset + chrome.source.y + textAscent(chrome.source.style.fontSize),
+    });
     text.setAttribute('class', 'oc-source');
     text.setAttribute('font-family', chrome.source.style.fontFamily);
     text.setAttribute('font-size', String(chrome.source.style.fontSize));
@@ -92,7 +104,10 @@ function renderChrome(parent: SVGElement, layout: TileMapLayout): void {
 
   if (chrome.byline) {
     const text = createSVGElement('text');
-    setAttrs(text, { x: chrome.byline.x, y: bottomOffset + chrome.byline.y });
+    setAttrs(text, {
+      x: chrome.byline.x,
+      y: bottomOffset + chrome.byline.y + textAscent(chrome.byline.style.fontSize),
+    });
     text.setAttribute('class', 'oc-byline');
     text.setAttribute('font-family', chrome.byline.style.fontFamily);
     text.setAttribute('font-size', String(chrome.byline.style.fontSize));
@@ -107,7 +122,10 @@ function renderChrome(parent: SVGElement, layout: TileMapLayout): void {
 
   if (chrome.footer) {
     const text = createSVGElement('text');
-    setAttrs(text, { x: chrome.footer.x, y: bottomOffset + chrome.footer.y });
+    setAttrs(text, {
+      x: chrome.footer.x,
+      y: bottomOffset + chrome.footer.y + textAscent(chrome.footer.style.fontSize),
+    });
     text.setAttribute('class', 'oc-footer');
     text.setAttribute('font-family', chrome.footer.style.fontFamily);
     text.setAttribute('font-size', String(chrome.footer.style.fontSize));