@opendata-ai/openchart-vanilla 7.3.0 → 7.4.0

package/dist/index.js

@@ -41,6 +41,7 @@ function setupTableAnimationCleanup(wrapper) {
 }
 
 // src/barlist-renderer.ts
+import { textAscent } from "@opendata-ai/openchart-core";
 var SVG_NS = "http://www.w3.org/2000/svg";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
 var BRAND_URL = "https://tryopendata.ai";
@@ -64,7 +65,7 @@ function renderChrome(parent, layout) {
     const text = createSVGElement("text");
     setAttrs(text, {
       x: el.x,
-      y: isBottom ? bottomOffset + el.y : el.y
+      y: (isBottom ? bottomOffset + el.y : el.y) + textAscent(el.style.fontSize)
     });
     text.setAttribute("class", `oc-${key}`);
     text.setAttribute("font-family", el.style.fontFamily);
@@ -468,7 +469,8 @@ function csvEscape(value) {
 
 // src/measure-text.ts
 import { estimateTextWidth } from "@opendata-ai/openchart-core";
-function createMeasureText() {
+var DEFAULT_FONT_FAMILY = "Inter, sans-serif";
+function createMeasureText(fontFamily = DEFAULT_FONT_FAMILY) {
   let canvas = null;
   let ctx = null;
   return (text, fontSize, fontWeight) => {
@@ -483,7 +485,7 @@ function createMeasureText() {
       };
     }
     const weight = fontWeight ?? 400;
-    ctx.font = `${weight} ${fontSize}px Inter, sans-serif`;
+    ctx.font = `${weight} ${fontSize}px ${fontFamily}`;
     const metrics = ctx.measureText(text);
     return {
       width: metrics.width,
@@ -491,6 +493,57 @@ function createMeasureText() {
     };
   };
 }
+function resolveFontFamily(container) {
+  if (typeof window === "undefined" || typeof getComputedStyle !== "function") {
+    return DEFAULT_FONT_FAMILY;
+  }
+  try {
+    const style = getComputedStyle(container);
+    const custom = style.getPropertyValue("--oc-font-family").trim();
+    if (custom) return custom;
+    const computed = style.fontFamily?.trim();
+    if (computed) return computed;
+  } catch {
+  }
+  return DEFAULT_FONT_FAMILY;
+}
+function primaryFontName(fontFamily) {
+  const first = fontFamily.split(",")[0]?.trim() ?? "";
+  return first.replace(/^["']|["']$/g, "").trim();
+}
+function fontsPending(fontFamily) {
+  if (typeof document === "undefined") return false;
+  const fonts = document.fonts;
+  if (!fonts || typeof fonts.check !== "function") return false;
+  const name = primaryFontName(fontFamily);
+  if (!name) return false;
+  const generics = /* @__PURE__ */ new Set([
+    "sans-serif",
+    "serif",
+    "monospace",
+    "system-ui",
+    "cursive",
+    "fantasy",
+    "ui-sans-serif",
+    "ui-serif",
+    "ui-monospace"
+  ]);
+  if (generics.has(name.toLowerCase())) return false;
+  try {
+    return !fonts.check(`12px "${name}"`);
+  } catch {
+    return false;
+  }
+}
+function scheduleFontReload(fontFamily, isAlive, onReady) {
+  if (!fontsPending(fontFamily)) return false;
+  const fonts = document.fonts;
+  if (!fonts?.ready) return false;
+  fonts.ready.then(() => {
+    if (isAlive()) onReady();
+  });
+  return true;
+}
 
 // src/resize-observer.ts
 var DEBOUNCE_MS = 16;
@@ -627,7 +680,14 @@ function createBarList(container, spec, options) {
   let disconnectResize = null;
   let animationCleanup = null;
   let pendingResize = false;
-  const measureText = createMeasureText();
+  let fontsReloadPending = false;
+  container.classList.add("oc-barlist-root");
+  function resolveEffectiveFont() {
+    return options?.theme?.fonts?.family ?? currentSpec.theme?.fonts?.family ?? resolveFontFamily(container);
+  }
+  let fontFamily = resolveEffectiveFont();
+  let measureText = createMeasureText(fontFamily);
+  let renderGen = 0;
   function getContainerDimensions() {
     const rect = container.getBoundingClientRect();
     return {
@@ -747,9 +807,20 @@ function createBarList(container, spec, options) {
         }
       });
     }
+    renderGen += 1;
+    container.dataset.ocRenderGen = String(renderGen);
+    if (fontsReloadPending) {
+      fontsReloadPending = false;
+      container.dataset.ocFontsState = "ready";
+    }
   }
   function update(newSpec) {
     currentSpec = newSpec;
+    const nextFont = resolveEffectiveFont();
+    if (nextFont !== fontFamily) {
+      fontFamily = nextFont;
+      measureText = createMeasureText(fontFamily);
+    }
     currentLayout = compile();
     render();
   }
@@ -803,12 +874,20 @@ function createBarList(container, spec, options) {
     }
     container.classList.remove("oc-barlist-root", "oc-dark");
   }
-  container.classList.add("oc-barlist-root");
   if (resolveDarkMode(options?.darkMode)) {
     container.classList.add("oc-dark");
   }
   currentLayout = compile();
   render(true);
+  const fontsPending2 = scheduleFontReload(
+    fontFamily,
+    () => !destroyed,
+    () => {
+      fontsReloadPending = true;
+      resize();
+    }
+  );
+  container.dataset.ocFontsState = fontsPending2 ? "pending" : "ready";
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => resize());
   }
@@ -5259,7 +5338,8 @@ import {
   axisTitleOffset,
   estimateTextWidth as estimateTextWidth2,
   getAxisTitleOffset,
-  TICK_LABEL_OFFSET
+  TICK_LABEL_OFFSET,
+  textAscent as textAscent2
 } from "@opendata-ai/openchart-core";
 function appendCompoundLabel(parent, primaryText, subtitle, fontWeight) {
   const primarySpan = createSVGElement2("tspan");
@@ -5314,9 +5394,8 @@ function renderAxis(parent, axis, orientation, layout) {
         const xLabelPad = axis.labelPadding ?? layout.theme.spacing.xAxisLabelPadding;
         setAttrs2(label, {
           x: tick.position,
-          y: area.y + area.height + xLabelPad,
-          "text-anchor": "middle",
-          "dominant-baseline": "hanging"
+          y: area.y + area.height + xLabelPad + textAscent2(axis.tickLabelStyle.fontSize),
+          "text-anchor": "middle"
         });
       }
       applyTextStyle(label, axis.tickLabelStyle);
@@ -5522,7 +5601,7 @@ function renderAxes(parent, layout) {
 }
 
 // src/renderers/brand.ts
-import { BRAND_FONT_SIZE as BRAND_FONT_SIZE2, BRAND_MIN_WIDTH as BRAND_MIN_WIDTH2 } from "@opendata-ai/openchart-core";
+import { BRAND_FONT_SIZE as BRAND_FONT_SIZE2, BRAND_MIN_WIDTH as BRAND_MIN_WIDTH2, textAscent as textAscent3 } from "@opendata-ai/openchart-core";
 var BRAND_URL2 = "https://tryopendata.ai";
 function renderBrand(parent, layout) {
   if (layout.dimensions.width < BRAND_MIN_WIDTH2) return;
@@ -5546,8 +5625,7 @@ function renderBrand(parent, layout) {
   const text = createSVGElement2("text");
   setAttrs2(text, {
     x: rightEdge,
-    y: chromeY,
-    "dominant-baseline": "hanging",
+    y: chromeY + textAscent3(BRAND_LARGE),
     "font-family": layout.theme.fonts.family,
     "font-size": BRAND_FONT_SIZE2,
     "text-anchor": "end",
@@ -5572,10 +5650,10 @@ function renderBrand(parent, layout) {
 }
 
 // src/renderers/chrome.ts
-import { estimateTextWidth as estimateTextWidth3, wrapText } from "@opendata-ai/openchart-core";
+import { estimateTextWidth as estimateTextWidth3, textAscent as textAscent4, wrapText } from "@opendata-ai/openchart-core";
 function renderChromeElement(parent, element, className, chromeKey, measureText, uppercase = false) {
   const text = createSVGElement2("text");
-  setAttrs2(text, { x: element.x, y: element.y });
+  setAttrs2(text, { x: element.x, y: element.y + textAscent4(element.style.fontSize) });
   applyTextStyle(text, element.style);
   text.setAttribute("class", className);
   text.setAttribute("data-chrome-key", chromeKey);
@@ -6292,10 +6370,12 @@ function renderChartSVG(layout, container, opts) {
   setAttrs2(svg, {
     viewBox: `0 0 ${width} ${height}`,
     xmlns: SVG_NS3,
-    // 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.
@@ -6647,13 +6727,20 @@ function createChart(container, spec, options) {
   let isFirstRender = true;
   let cleanupAnimations = null;
   let pendingResize = false;
+  let fontsReloadPending = false;
   let selectedElement = options?.selectedElement ?? null;
   let overlayElement = null;
   let isTextEditingActive = false;
   const runtimeHiddenSeries = /* @__PURE__ */ new Set();
   const runtimeShownSeries = /* @__PURE__ */ new Set();
   let textEditCleanup = null;
-  const measureText = createMeasureText();
+  container.classList.add("oc-root");
+  function resolveEffectiveFont() {
+    return options?.theme?.fonts?.family ?? currentSpec.theme?.fonts?.family ?? resolveFontFamily(container);
+  }
+  let fontFamily = resolveEffectiveFont();
+  let measureText = createMeasureText(fontFamily);
+  let renderGen = 0;
   function compile() {
     const { width, height } = getContainerDimensions();
     const darkMode = resolveDarkMode3(options?.darkMode);
@@ -7101,6 +7188,12 @@ function createChart(container, spec, options) {
         }
       });
     }
+    renderGen += 1;
+    container.dataset.ocRenderGen = String(renderGen);
+    if (fontsReloadPending) {
+      fontsReloadPending = false;
+      container.dataset.ocFontsState = "ready";
+    }
     if (isFirstRender) {
       isFirstRender = false;
     }
@@ -7108,6 +7201,11 @@ function createChart(container, spec, options) {
   function update(newSpec, updateOpts) {
     if (destroyed) return;
     currentSpec = newSpec;
+    const nextFont = resolveEffectiveFont();
+    if (nextFont !== fontFamily) {
+      fontFamily = nextFont;
+      measureText = createMeasureText(fontFamily);
+    }
     runtimeHiddenSeries.clear();
     runtimeShownSeries.clear();
     if (updateOpts && "selectedElement" in updateOpts) {
@@ -7198,6 +7296,15 @@ function createChart(container, spec, options) {
     container.classList.remove("oc-root");
   }
   render();
+  const pending = scheduleFontReload(
+    fontFamily,
+    () => !destroyed,
+    () => {
+      fontsReloadPending = true;
+      resize();
+    }
+  );
+  container.dataset.ocFontsState = pending ? "pending" : "ready";
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => {
       resize();
@@ -7556,6 +7663,7 @@ import {
   BRAND_FONT_SIZE as BRAND_FONT_SIZE3,
   BRAND_MIN_WIDTH as BRAND_MIN_WIDTH3,
   estimateTextWidth as estimateTextWidth5,
+  textAscent as textAscent5,
   wrapText as wrapText2
 } from "@opendata-ai/openchart-core";
 import { clampStaggerDelay as clampStaggerDelay2 } from "@opendata-ai/openchart-engine";
@@ -7599,7 +7707,7 @@ function stampAnimationAttrs2(el, mark, fallbackIndex, animation) {
 }
 function renderChromeElement2(parent, element, className, chromeKey, measureText) {
   const text = createSVGElement3("text");
-  setAttrs3(text, { x: element.x, y: element.y });
+  setAttrs3(text, { x: element.x, y: element.y + textAscent5(element.style.fontSize) });
   applyTextStyle2(text, element.style);
   text.setAttribute("class", className);
   text.setAttribute("data-chrome-key", chromeKey);
@@ -7984,7 +8092,14 @@ function createSankey(container, spec, options) {
   let isFirstRender = true;
   let animationCleanup = null;
   let pendingResize = false;
-  const measureText = createMeasureText();
+  let fontsReloadPending = false;
+  container.classList.add("oc-sankey-root");
+  function resolveEffectiveFont() {
+    return options?.theme?.fonts?.family ?? currentSpec.theme?.fonts?.family ?? resolveFontFamily(container);
+  }
+  let fontFamily = resolveEffectiveFont();
+  let measureText = createMeasureText(fontFamily);
+  let renderGen = 0;
   function getContainerDimensions() {
     const rect = container.getBoundingClientRect();
     return {
@@ -8190,10 +8305,21 @@ function createSankey(container, spec, options) {
         }
       });
     }
+    renderGen += 1;
+    container.dataset.ocRenderGen = String(renderGen);
+    if (fontsReloadPending) {
+      fontsReloadPending = false;
+      container.dataset.ocFontsState = "ready";
+    }
   }
   function update(newSpec) {
     if (destroyed) return;
     currentSpec = newSpec;
+    const nextFont = resolveEffectiveFont();
+    if (nextFont !== fontFamily) {
+      fontFamily = nextFont;
+      measureText = createMeasureText(fontFamily);
+    }
     isFirstRender = true;
     render();
   }
@@ -8250,6 +8376,7 @@ function createSankey(container, spec, options) {
     }
     svgElement = null;
     container.classList.remove("oc-dark");
+    container.classList.remove("oc-sankey-root");
   }
   try {
     currentLayout = compile();
@@ -8277,10 +8404,21 @@ function createSankey(container, spec, options) {
         }
       });
     }
+    renderGen += 1;
+    container.dataset.ocRenderGen = String(renderGen);
   } catch (err) {
     console.error("[viz] Sankey mount failed:", err);
     throw err;
   }
+  const fontsPending2 = scheduleFontReload(
+    fontFamily,
+    () => !destroyed,
+    () => {
+      fontsReloadPending = true;
+      resize();
+    }
+  );
+  container.dataset.ocFontsState = fontsPending2 ? "pending" : "ready";
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => {
       resize();
@@ -9135,6 +9273,7 @@ function createTable(container, spec, options) {
 import { compileTileMap } from "@opendata-ai/openchart-engine";
 
 // src/tilemap-renderer.ts
+import { textAscent as textAscent6 } from "@opendata-ai/openchart-core";
 var SVG_NS5 = "http://www.w3.org/2000/svg";
 var XLINK_NS4 = "http://www.w3.org/1999/xlink";
 var BRAND_URL5 = "https://tryopendata.ai";
@@ -9158,7 +9297,10 @@ function renderChrome4(parent, layout) {
   const bottomOffset = layout.area.y + layout.area.height;
   if (chrome.title) {
     const text = createSVGElement4("text");
-    setAttrs4(text, { x: chrome.title.x, y: chrome.title.y });
+    setAttrs4(text, {
+      x: chrome.title.x,
+      y: chrome.title.y + textAscent6(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));
@@ -9169,7 +9311,10 @@ function renderChrome4(parent, layout) {
   }
   if (chrome.subtitle) {
     const text = createSVGElement4("text");
-    setAttrs4(text, { x: chrome.subtitle.x, y: chrome.subtitle.y });
+    setAttrs4(text, {
+      x: chrome.subtitle.x,
+      y: chrome.subtitle.y + textAscent6(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));
@@ -9183,7 +9328,10 @@ function renderChrome4(parent, layout) {
   }
   if (chrome.source) {
     const text = createSVGElement4("text");
-    setAttrs4(text, { x: chrome.source.x, y: bottomOffset + chrome.source.y });
+    setAttrs4(text, {
+      x: chrome.source.x,
+      y: bottomOffset + chrome.source.y + textAscent6(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));
@@ -9197,7 +9345,10 @@ function renderChrome4(parent, layout) {
   }
   if (chrome.byline) {
     const text = createSVGElement4("text");
-    setAttrs4(text, { x: chrome.byline.x, y: bottomOffset + chrome.byline.y });
+    setAttrs4(text, {
+      x: chrome.byline.x,
+      y: bottomOffset + chrome.byline.y + textAscent6(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));
@@ -9211,7 +9362,10 @@ function renderChrome4(parent, layout) {
   }
   if (chrome.footer) {
     const text = createSVGElement4("text");
-    setAttrs4(text, { x: chrome.footer.x, y: bottomOffset + chrome.footer.y });
+    setAttrs4(text, {
+      x: chrome.footer.x,
+      y: bottomOffset + chrome.footer.y + textAscent6(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));
@@ -9474,7 +9628,14 @@ function createTileMap(container, spec, options) {
   let disconnectResize = null;
   let animationCleanup = null;
   let pendingResize = false;
-  const measureText = createMeasureText();
+  let fontsReloadPending = false;
+  container.classList.add("oc-tilemap-root");
+  function resolveEffectiveFont() {
+    return options?.theme?.fonts?.family ?? currentSpec.theme?.fonts?.family ?? resolveFontFamily(container);
+  }
+  let fontFamily = resolveEffectiveFont();
+  let measureText = createMeasureText(fontFamily);
+  let renderGen = 0;
   function getContainerDimensions() {
     const rect = container.getBoundingClientRect();
     const width = Math.max(rect.width || 600, 100);
@@ -9587,9 +9748,20 @@ function createTileMap(container, spec, options) {
         }
       });
     }
+    renderGen += 1;
+    container.dataset.ocRenderGen = String(renderGen);
+    if (fontsReloadPending) {
+      fontsReloadPending = false;
+      container.dataset.ocFontsState = "ready";
+    }
   }
   function update(newSpec) {
     currentSpec = newSpec;
+    const nextFont = resolveEffectiveFont();
+    if (nextFont !== fontFamily) {
+      fontFamily = nextFont;
+      measureText = createMeasureText(fontFamily);
+    }
     currentLayout = compile();
     render();
   }
@@ -9643,12 +9815,20 @@ function createTileMap(container, spec, options) {
     }
     container.classList.remove("oc-tilemap-root", "oc-dark");
   }
-  container.classList.add("oc-tilemap-root");
   if (resolveDarkMode6(options?.darkMode)) {
     container.classList.add("oc-dark");
   }
   currentLayout = compile();
   render(true);
+  const fontsPending2 = scheduleFontReload(
+    fontFamily,
+    () => !destroyed,
+    () => {
+      fontsReloadPending = true;
+      resize();
+    }
+  );
+  container.dataset.ocFontsState = fontsPending2 ? "pending" : "ready";
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => {
       resize();