@opendata-ai/openchart-core 8.0.0-rc.2 → 8.0.0-rc.21

package/src/layout/text-measure.ts

@@ -1,404 +0,0 @@
-/**
- * Text measurement for environments without a DOM.
- *
- * Uses per-character advance-width tables measured from Inter (the default
- * chart font) for ~2-3% accuracy on Latin text at weights 400/700.
- * Other fonts set via theme.fonts.family still get a better-than-flat-ratio
- * approximation but no accuracy guarantee.
- *
- * Tables generated by scripts/generate-char-widths.mjs — regenerate, don't
- * hand-edit.
- */
-
-import type { MeasureTextFn } from '../types/layout';
-
-// ---------------------------------------------------------------------------
-// Per-character advance widths for Inter, normalized to fontSize = 1.
-// Generated by scripts/generate-char-widths.mjs from Chromium canvas metrics.
-// ---------------------------------------------------------------------------
-
-const CHAR_WIDTHS_400: Record<string, number> = {
-  ' ': 0.278,
-  '!': 0.278,
-  '"': 0.355,
-  '#': 0.556,
-  $: 0.556,
-  '%': 0.889,
-  '&': 0.667,
-  "'": 0.191,
-  '(': 0.333,
-  ')': 0.333,
-  '*': 0.389,
-  '+': 0.584,
-  ',': 0.278,
-  '-': 0.333,
-  '.': 0.278,
-  '/': 0.278,
-  '0': 0.556,
-  '1': 0.556,
-  '2': 0.556,
-  '3': 0.556,
-  '4': 0.556,
-  '5': 0.556,
-  '6': 0.556,
-  '7': 0.556,
-  '8': 0.556,
-  '9': 0.556,
-  ':': 0.278,
-  ';': 0.278,
-  '<': 0.584,
-  '=': 0.584,
-  '>': 0.584,
-  '?': 0.556,
-  '@': 1.015,
-  A: 0.667,
-  B: 0.667,
-  C: 0.722,
-  D: 0.722,
-  E: 0.667,
-  F: 0.611,
-  G: 0.778,
-  H: 0.722,
-  I: 0.278,
-  J: 0.5,
-  K: 0.667,
-  L: 0.556,
-  M: 0.833,
-  N: 0.722,
-  O: 0.778,
-  P: 0.667,
-  Q: 0.778,
-  R: 0.722,
-  S: 0.667,
-  T: 0.611,
-  U: 0.722,
-  V: 0.667,
-  W: 0.944,
-  X: 0.667,
-  Y: 0.667,
-  Z: 0.611,
-  '[': 0.278,
-  '\\': 0.278,
-  ']': 0.278,
-  '^': 0.469,
-  _: 0.556,
-  '`': 0.333,
-  a: 0.556,
-  b: 0.556,
-  c: 0.5,
-  d: 0.556,
-  e: 0.556,
-  f: 0.278,
-  g: 0.556,
-  h: 0.556,
-  i: 0.222,
-  j: 0.222,
-  k: 0.5,
-  l: 0.222,
-  m: 0.833,
-  n: 0.556,
-  o: 0.556,
-  p: 0.556,
-  q: 0.556,
-  r: 0.333,
-  s: 0.5,
-  t: 0.278,
-  u: 0.556,
-  v: 0.5,
-  w: 0.722,
-  x: 0.5,
-  y: 0.5,
-  z: 0.5,
-  '{': 0.334,
-  '|': 0.26,
-  '}': 0.334,
-  '~': 0.584,
-  '₹': 0.52,
-  '₩': 1.022,
-  '¥': 0.556,
-  '￥': 1,
-  '€': 0.744,
-  '£': 0.556,
-  '¢': 0.556,
-  '§': 0.556,
-  '©': 0.737,
-  '®': 0.737,
-  '™': 1,
-  '°': 0.4,
-  '–': 0.556,
-  '—': 1,
-  '‘': 0.222,
-  '’': 0.222,
-  '“': 0.333,
-  '”': 0.333,
-  '…': 1,
-  '±': 0.549,
-  '×': 0.584,
-  '÷': 0.549,
-};
-
-const AVG_CHAR_WIDTH_400 = 0.53;
-
-const CHAR_WIDTHS_700: Record<string, number> = {
-  ' ': 0.278,
-  '!': 0.333,
-  '"': 0.474,
-  '#': 0.556,
-  $: 0.556,
-  '%': 0.889,
-  '&': 0.722,
-  "'": 0.238,
-  '(': 0.333,
-  ')': 0.333,
-  '*': 0.389,
-  '+': 0.584,
-  ',': 0.278,
-  '-': 0.333,
-  '.': 0.278,
-  '/': 0.278,
-  '0': 0.556,
-  '1': 0.556,
-  '2': 0.556,
-  '3': 0.556,
-  '4': 0.556,
-  '5': 0.556,
-  '6': 0.556,
-  '7': 0.556,
-  '8': 0.556,
-  '9': 0.556,
-  ':': 0.333,
-  ';': 0.333,
-  '<': 0.584,
-  '=': 0.584,
-  '>': 0.584,
-  '?': 0.611,
-  '@': 0.975,
-  A: 0.722,
-  B: 0.722,
-  C: 0.722,
-  D: 0.722,
-  E: 0.667,
-  F: 0.611,
-  G: 0.778,
-  H: 0.722,
-  I: 0.278,
-  J: 0.556,
-  K: 0.722,
-  L: 0.611,
-  M: 0.833,
-  N: 0.722,
-  O: 0.778,
-  P: 0.667,
-  Q: 0.778,
-  R: 0.722,
-  S: 0.667,
-  T: 0.611,
-  U: 0.722,
-  V: 0.667,
-  W: 0.944,
-  X: 0.667,
-  Y: 0.667,
-  Z: 0.611,
-  '[': 0.333,
-  '\\': 0.278,
-  ']': 0.333,
-  '^': 0.584,
-  _: 0.556,
-  '`': 0.333,
-  a: 0.556,
-  b: 0.611,
-  c: 0.556,
-  d: 0.611,
-  e: 0.556,
-  f: 0.333,
-  g: 0.611,
-  h: 0.611,
-  i: 0.278,
-  j: 0.278,
-  k: 0.556,
-  l: 0.278,
-  m: 0.889,
-  n: 0.611,
-  o: 0.611,
-  p: 0.611,
-  q: 0.611,
-  r: 0.389,
-  s: 0.556,
-  t: 0.333,
-  u: 0.611,
-  v: 0.556,
-  w: 0.778,
-  x: 0.556,
-  y: 0.556,
-  z: 0.5,
-  '{': 0.389,
-  '|': 0.28,
-  '}': 0.389,
-  '~': 0.584,
-  '₹': 0.553,
-  '₩': 1.024,
-  '¥': 0.556,
-  '￥': 1,
-  '€': 0.744,
-  '£': 0.556,
-  '¢': 0.556,
-  '§': 0.556,
-  '©': 0.737,
-  '®': 0.737,
-  '™': 1,
-  '°': 0.4,
-  '–': 0.556,
-  '—': 1,
-  '‘': 0.278,
-  '’': 0.278,
-  '“': 0.5,
-  '”': 0.5,
-  '…': 1,
-  '±': 0.549,
-  '×': 0.584,
-  '÷': 0.549,
-};
-
-const AVG_CHAR_WIDTH_700 = 0.554;
-
-// Weights < 650 scale the CHAR_WIDTHS_400 table; weights >= 650 scale
-// CHAR_WIDTHS_700. The factor is 1.0 at each table's native weight.
-const WEIGHT_ADJUSTMENT: Record<number, number> = {
-  100: 0.9,
-  200: 0.92,
-  300: 0.95,
-  400: 1.0,
-  500: 1.02,
-  600: 1.05,
-  700: 1.0, // uses CHAR_WIDTHS_700 directly
-  800: 1.1,
-  900: 1.12,
-};
-
-function resolveTable(fontWeight: number): {
-  table: Record<string, number>;
-  avg: number;
-  scale: number;
-} {
-  if (fontWeight >= 650) {
-    return {
-      table: CHAR_WIDTHS_700,
-      avg: AVG_CHAR_WIDTH_700,
-      scale: WEIGHT_ADJUSTMENT[fontWeight] ?? 1.0,
-    };
-  }
-  return {
-    table: CHAR_WIDTHS_400,
-    avg: AVG_CHAR_WIDTH_400,
-    scale: WEIGHT_ADJUSTMENT[fontWeight] ?? 1.0,
-  };
-}
-
-function charWidthRatio(ch: string, table: Record<string, number>, avg: number): number {
-  const direct = table[ch];
-  if (direct !== undefined) return direct;
-  const code = ch.codePointAt(0) ?? 0;
-  // Combining marks (diacritics) have zero advance width
-  if ((code >= 0x0300 && code <= 0x036f) || (code >= 0x1ab0 && code <= 0x1aff)) return 0;
-  // CJK ideographs, kana, hangul, and fullwidth forms are full-em
-  if (
-    (code >= 0x1100 && code <= 0x11ff) ||
-    (code >= 0x2e80 && code <= 0x9fff) ||
-    (code >= 0xac00 && code <= 0xd7af) ||
-    (code >= 0xf900 && code <= 0xfaff) ||
-    (code >= 0xff00 && code <= 0xff60)
-  )
-    return 1.0;
-  return avg;
-}
-
-/**
- * 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 { avg, scale } = resolveTable(fontWeight);
-  return fontSize * avg * scale;
-}
-
-/**
- * Estimate the rendered width of a text string.
- *
- * Uses per-character advance widths measured from Inter (the default chart
- * font). Accurate to ~2-3% for Latin text at weights 400/700; other weights
- * are interpolated from the nearest table.
- */
-export function estimateTextWidth(text: string, fontSize: number, fontWeight = 400): number {
-  const { table, avg, scale } = resolveTable(fontWeight);
-
-  const measureLine = (line: string): number => {
-    let sum = 0;
-    for (const ch of line) {
-      sum += charWidthRatio(ch, table, avg);
-    }
-    return sum * fontSize * scale;
-  };
-
-  if (text.includes('\n')) {
-    let maxWidth = 0;
-    for (const line of text.split('\n')) {
-      const w = measureLine(line);
-      if (w > maxWidth) maxWidth = w;
-    }
-    return maxWidth;
-  }
-  return measureLine(text);
-}
-
-/**
- * Width reserved for the "tryOpenData.ai" brand watermark in the bottom-right corner.
- */
-export const BRAND_RESERVE_WIDTH = 130;
-
-/** Font size of the brand watermark (px). Shared between layout and renderer. */
-export const BRAND_FONT_SIZE = 12;
-
-/** Minimum chart width to render the brand watermark (px). */
-export const BRAND_MIN_WIDTH = 120;
-
-/**
- * Width threshold below which layout tightens spacing (legend gaps, chrome
- * padding, label gaps) to maximize data area on small screens.
- */
-export const COMPACT_WIDTH = 420;
-
-/**
- * Estimate the rendered height of a text block.
- */
-export function estimateTextHeight(fontSize: number, lineCount = 1, lineHeight = 1.3): number {
-  return fontSize * lineHeight * lineCount;
-}
-
-/**
- * Distance from the top of a text box to its alphabetic baseline.
- *
- * Layout stores text positions as top-edge coordinates; renderers convert to
- * baseline coordinates with this ratio instead of `dominant-baseline: hanging`.
- * WebKit computes the hanging baseline from different font metrics than Blink
- * and never inherits dominant-baseline into tspans (WebKit bugs 139258 /
- * 297455), which shifted whole titles above the container on iOS Safari.
- * The 0.8 ratio matches Blink's rendered hanging position for typical UI
- * fonts (hanging sits at ~0.8 x ascent, Inter ascent ~= 0.97em) and the
- * Highcharts fontMetrics convention.
- */
-export function textAscent(fontSize: number): number {
-  return fontSize * 0.8;
-}
-
-// ---------------------------------------------------------------------------
-// Measurer resolver — bridges heuristic ↔ injected canvas measurer
-// ---------------------------------------------------------------------------
-
-export const heuristicMeasure: MeasureTextFn = (text, fontSize, fontWeight) => ({
-  width: estimateTextWidth(text, fontSize, fontWeight),
-  height: estimateTextHeight(fontSize),
-});
-
-export function resolveMeasurer(measureText?: MeasureTextFn): MeasureTextFn {
-  return measureText ?? heuristicMeasure;
-}

package/src/layout/text-wrap.ts

@@ -1,93 +0,0 @@
-/**
- * Word-wrap a text string into lines that fit within a max width.
- *
- * Shared by the SVG chart renderer and the sankey renderer. When a
- * `measureText` callback is provided, uses real DOM measurement for
- * accurate wrapping. Otherwise falls back to a character-width
- * heuristic driven by `estimateCharWidth` from text-measure.ts.
- *
- * Non-browser callers (SSR, tests) omit the measureText argument to
- * use the heuristic fallback. Do not change the signature without
- * re-verifying visual baselines for every caller.
- */
-
-import type { MeasureTextFn } from '../types/layout';
-import { estimateCharWidth } from './text-measure';
-
-/**
- * Break text into lines that fit within maxWidth using word wrapping.
- *
- * Splits on explicit newlines first, then word-wraps each segment.
- * Preserves empty segments so consecutive newlines produce blank lines.
- *
- * @param text - The text to wrap. May contain `\n` for forced breaks.
- * @param fontSize - Font size in pixels.
- * @param fontWeight - Font weight (100-900).
- * @param maxWidth - Maximum line width in pixels. Non-positive values return `[text]` unchanged.
- * @param measureText - Optional real text measurer. When omitted, uses a character-width heuristic.
- */
-export function wrapText(
-  text: string,
-  fontSize: number,
-  fontWeight: number,
-  maxWidth: number,
-  measureText?: MeasureTextFn,
-): string[] {
-  if (maxWidth <= 0) return [text];
-
-  // Split on explicit newlines first
-  const segments = text.split('\n');
-  if (segments.length > 1) {
-    return segments.flatMap((segment) =>
-      segment.length === 0 ? [''] : wrapText(segment, fontSize, fontWeight, maxWidth, measureText),
-    );
-  }
-
-  // Use real text measurement when available
-  if (measureText) {
-    const textWidth = measureText(text, fontSize, fontWeight).width;
-    if (textWidth <= maxWidth) return [text];
-
-    const words = text.split(' ');
-    const lines: string[] = [];
-    let current = '';
-
-    for (const word of words) {
-      const candidate = current ? `${current} ${word}` : word;
-      const candidateWidth = measureText(candidate, fontSize, fontWeight).width;
-      if (candidateWidth > maxWidth && current) {
-        lines.push(current);
-        current = word;
-      } else {
-        current = candidate;
-      }
-    }
-    if (current) lines.push(current);
-
-    return lines;
-  }
-
-  // Heuristic: estimate character width from font size and weight.
-  // Reuses the same ratio and weight adjustment constants as text-measure.
-  const charWidth = estimateCharWidth(fontSize, fontWeight);
-  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;
-}