@opendata-ai/openchart-core 7.2.3 → 7.3.0

package/dist/index.js

@@ -813,6 +813,433 @@ var DIVERGING_PALETTES = {
   brownTeal: [...DIVERGING_BROWN_TEAL.stops]
 };
 
+// src/layout/text-measure.ts
+var CHAR_WIDTHS_400 = {
+  " ": 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,
+  "\u20B9": 0.52,
+  "\u20A9": 1.022,
+  "\xA5": 0.556,
+  "\uFFE5": 1,
+  "\u20AC": 0.744,
+  "\xA3": 0.556,
+  "\xA2": 0.556,
+  "\xA7": 0.556,
+  "\xA9": 0.737,
+  "\xAE": 0.737,
+  "\u2122": 1,
+  "\xB0": 0.4,
+  "\u2013": 0.556,
+  "\u2014": 1,
+  "\u2018": 0.222,
+  "\u2019": 0.222,
+  "\u201C": 0.333,
+  "\u201D": 0.333,
+  "\u2026": 1,
+  "\xB1": 0.549,
+  "\xD7": 0.584,
+  "\xF7": 0.549
+};
+var AVG_CHAR_WIDTH_400 = 0.53;
+var CHAR_WIDTHS_700 = {
+  " ": 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,
+  "\u20B9": 0.553,
+  "\u20A9": 1.024,
+  "\xA5": 0.556,
+  "\uFFE5": 1,
+  "\u20AC": 0.744,
+  "\xA3": 0.556,
+  "\xA2": 0.556,
+  "\xA7": 0.556,
+  "\xA9": 0.737,
+  "\xAE": 0.737,
+  "\u2122": 1,
+  "\xB0": 0.4,
+  "\u2013": 0.556,
+  "\u2014": 1,
+  "\u2018": 0.278,
+  "\u2019": 0.278,
+  "\u201C": 0.5,
+  "\u201D": 0.5,
+  "\u2026": 1,
+  "\xB1": 0.549,
+  "\xD7": 0.584,
+  "\xF7": 0.549
+};
+var AVG_CHAR_WIDTH_700 = 0.554;
+var WEIGHT_ADJUSTMENT = {
+  100: 0.9,
+  200: 0.92,
+  300: 0.95,
+  400: 1,
+  500: 1.02,
+  600: 1.05,
+  700: 1,
+  // uses CHAR_WIDTHS_700 directly
+  800: 1.1,
+  900: 1.12
+};
+function resolveTable(fontWeight) {
+  if (fontWeight >= 650) {
+    return {
+      table: CHAR_WIDTHS_700,
+      avg: AVG_CHAR_WIDTH_700,
+      scale: WEIGHT_ADJUSTMENT[fontWeight] ?? 1
+    };
+  }
+  return {
+    table: CHAR_WIDTHS_400,
+    avg: AVG_CHAR_WIDTH_400,
+    scale: WEIGHT_ADJUSTMENT[fontWeight] ?? 1
+  };
+}
+function charWidthRatio(ch, table, avg) {
+  const direct = table[ch];
+  if (direct !== void 0) return direct;
+  const code = ch.codePointAt(0) ?? 0;
+  if (code >= 768 && code <= 879 || code >= 6832 && code <= 6911) return 0;
+  if (code >= 4352 && code <= 4607 || code >= 11904 && code <= 40959 || code >= 44032 && code <= 55215 || code >= 63744 && code <= 64255 || code >= 65280 && code <= 65376)
+    return 1;
+  return avg;
+}
+function estimateCharWidth(fontSize, fontWeight = 400) {
+  const { avg, scale } = resolveTable(fontWeight);
+  return fontSize * avg * scale;
+}
+function estimateTextWidth(text, fontSize, fontWeight = 400) {
+  const { table, avg, scale } = resolveTable(fontWeight);
+  const measureLine = (line) => {
+    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);
+}
+var BRAND_RESERVE_WIDTH = 130;
+var BRAND_FONT_SIZE = 12;
+var BRAND_MIN_WIDTH = 120;
+var COMPACT_WIDTH = 420;
+function estimateTextHeight(fontSize, lineCount = 1, lineHeight = 1.3) {
+  return fontSize * lineHeight * lineCount;
+}
+var heuristicMeasure = (text, fontSize, fontWeight) => ({
+  width: estimateTextWidth(text, fontSize, fontWeight),
+  height: estimateTextHeight(fontSize)
+});
+function resolveMeasurer(measureText) {
+  return measureText ?? heuristicMeasure;
+}
+
+// src/responsive/breakpoints.ts
+var BREAKPOINT_COMPACT_MAX = 400;
+var BREAKPOINT_MEDIUM_MAX = 700;
+function getBreakpoint(width) {
+  if (width < BREAKPOINT_COMPACT_MAX) return "compact";
+  if (width <= BREAKPOINT_MEDIUM_MAX) return "medium";
+  return "full";
+}
+var HEIGHT_CRAMPED_MAX = 200;
+var HEIGHT_SHORT_MAX = 350;
+function getHeightClass(height) {
+  if (height < HEIGHT_CRAMPED_MAX) return "cramped";
+  if (height <= HEIGHT_SHORT_MAX) return "short";
+  return "normal";
+}
+function getWidthStrategy(breakpoint) {
+  switch (breakpoint) {
+    case "compact":
+      return {
+        labelMode: "none",
+        legendPosition: "top",
+        annotationPosition: "tooltip-only",
+        axisLabelDensity: "minimal",
+        chromeMode: "full",
+        legendMaxHeight: -1
+      };
+    case "medium":
+      return {
+        labelMode: "important",
+        legendPosition: "top",
+        annotationPosition: "inline",
+        axisLabelDensity: "reduced",
+        chromeMode: "full",
+        legendMaxHeight: -1
+      };
+    case "full":
+      return {
+        labelMode: "all",
+        legendPosition: "right",
+        annotationPosition: "inline",
+        axisLabelDensity: "full",
+        chromeMode: "full",
+        legendMaxHeight: -1
+      };
+  }
+}
+function applyHeightConstraints(strategy, heightClass) {
+  if (heightClass === "normal") return strategy;
+  if (heightClass === "cramped") {
+    return {
+      ...strategy,
+      chromeMode: "hidden",
+      legendMaxHeight: 0,
+      labelMode: "none",
+      annotationPosition: "tooltip-only"
+    };
+  }
+  return {
+    ...strategy,
+    chromeMode: "compact",
+    legendMaxHeight: 0.15
+  };
+}
+function getLayoutStrategy(breakpoint, heightClass = "normal") {
+  const base = getWidthStrategy(breakpoint);
+  return applyHeightConstraints(base, heightClass);
+}
+
+// src/responsive/metrics.ts
+var AXIS_TITLE_OFFSET_COMPACT = 35;
+var AXIS_TITLE_OFFSET_DEFAULT = 45;
+function getAxisTitleOffset(width) {
+  return width < BREAKPOINT_COMPACT_MAX ? AXIS_TITLE_OFFSET_COMPACT : AXIS_TITLE_OFFSET_DEFAULT;
+}
+var HPAD_COMPACT_FRACTION = 0.5;
+var HPAD_COMPACT_MIN = 4;
+var TICK_LABEL_OFFSET = 6;
+var AXIS_TITLE_TRAILING_PAD = 4;
+var AXIS_TITLE_GAP = 7;
+function axisTitleOffset(maxTickLabelWidth, titleFontSize, width) {
+  const halfTitleGlyph = Math.ceil(titleFontSize / 2);
+  const dynamic = TICK_LABEL_OFFSET + maxTickLabelWidth + AXIS_TITLE_GAP + halfTitleGlyph;
+  return Math.max(dynamic, getAxisTitleOffset(width));
+}
+var NARROW_VIEWPORT_MAX = 500;
+var TOP_PAD_EXTRA_NARROW = 10;
+var TOP_PAD_NARROW_MAX = NARROW_VIEWPORT_MAX;
+var LABEL_GAP_COMPACT = 8;
+var LABEL_GAP_DEFAULT = 12;
+var LABEL_GAP_NARROW_MAX = NARROW_VIEWPORT_MAX;
+var MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX = 600;
+var MAX_LEFT_LABEL_FRACTION_COMPACT = 0.45;
+var MAX_LEFT_LABEL_FRACTION_MEDIUM = 0.55;
+var MAX_LEFT_LABEL_FRACTION_DEFAULT = 1;
+var X_AXIS_BAND_HEIGHT = 26;
+var X_AXIS_TITLE_BAND = 22;
+var X_AXIS_TITLE_BAND_ROTATED = 20;
+function computeXAxisExtentFromLabels(input) {
+  const measure = input.measure ?? estimateTextWidth;
+  const baseHeight = input.xAxisHeight ?? X_AXIS_BAND_HEIGHT;
+  if (input.tickAngle && Math.abs(input.tickAngle) > 10) {
+    const angleRad = Math.abs(input.tickAngle) * (Math.PI / 180);
+    let maxLabelWidth = 40;
+    for (const label of input.labels) {
+      const w = measure(label, input.tickFontSize, input.tickFontWeight);
+      if (w > maxLabelWidth) maxLabelWidth = w;
+    }
+    const rotatedHeight = Math.min(maxLabelWidth * Math.sin(angleRad) + 6, 120);
+    return input.hasTitle ? rotatedHeight + X_AXIS_TITLE_BAND_ROTATED : rotatedHeight;
+  }
+  return input.hasTitle ? baseHeight + X_AXIS_TITLE_BAND : baseHeight;
+}
+
 // src/theme/defaults.ts
 var DEFAULT_THEME = {
   colors: {
@@ -856,7 +1283,7 @@ var DEFAULT_THEME = {
     chromeToChart: 8,
     chartToFooter: 8,
     axisMargin: 6,
-    xAxisHeight: 26,
+    xAxisHeight: X_AXIS_BAND_HEIGHT,
     // Gap (px) between the x-axis line and the TOP of the tick labels. The
     // renderer anchors x-tick labels at their top edge (hanging baseline), so
     // this is a literal top gap that holds regardless of font size.
@@ -1164,42 +1591,6 @@ function resolveTheme(userTheme, base = DEFAULT_THEME) {
   };
 }
 
-// src/layout/text-measure.ts
-var AVG_CHAR_WIDTH_RATIO = 0.57;
-var WEIGHT_ADJUSTMENT = {
-  100: 0.9,
-  200: 0.92,
-  300: 0.95,
-  400: 1,
-  500: 1.02,
-  600: 1.05,
-  700: 1.08,
-  800: 1.1,
-  900: 1.12
-};
-function estimateCharWidth(fontSize, fontWeight = 400) {
-  const weightFactor = WEIGHT_ADJUSTMENT[fontWeight] ?? 1;
-  return fontSize * AVG_CHAR_WIDTH_RATIO * weightFactor;
-}
-function estimateTextWidth(text, fontSize, fontWeight = 400) {
-  const charWidth = estimateCharWidth(fontSize, fontWeight);
-  if (text.includes("\n")) {
-    let maxLen = 0;
-    for (const line of text.split("\n")) {
-      if (line.length > maxLen) maxLen = line.length;
-    }
-    return maxLen * charWidth;
-  }
-  return text.length * charWidth;
-}
-var BRAND_RESERVE_WIDTH = 130;
-var BRAND_FONT_SIZE = 12;
-var BRAND_MIN_WIDTH = 120;
-var COMPACT_WIDTH = 420;
-function estimateTextHeight(fontSize, lineCount = 1, lineHeight = 1.3) {
-  return fontSize * lineHeight * lineCount;
-}
-
 // src/layout/chrome.ts
 function normalizeChromeText(value) {
   if (value === void 0) return null;
@@ -1505,101 +1896,6 @@ function wrapText(text, fontSize, fontWeight, maxWidth, measureText) {
   return lines;
 }
 
-// src/responsive/breakpoints.ts
-var BREAKPOINT_COMPACT_MAX = 400;
-var BREAKPOINT_MEDIUM_MAX = 700;
-function getBreakpoint(width) {
-  if (width < BREAKPOINT_COMPACT_MAX) return "compact";
-  if (width <= BREAKPOINT_MEDIUM_MAX) return "medium";
-  return "full";
-}
-var HEIGHT_CRAMPED_MAX = 200;
-var HEIGHT_SHORT_MAX = 350;
-function getHeightClass(height) {
-  if (height < HEIGHT_CRAMPED_MAX) return "cramped";
-  if (height <= HEIGHT_SHORT_MAX) return "short";
-  return "normal";
-}
-function getWidthStrategy(breakpoint) {
-  switch (breakpoint) {
-    case "compact":
-      return {
-        labelMode: "none",
-        legendPosition: "top",
-        annotationPosition: "tooltip-only",
-        axisLabelDensity: "minimal",
-        chromeMode: "full",
-        legendMaxHeight: -1
-      };
-    case "medium":
-      return {
-        labelMode: "important",
-        legendPosition: "top",
-        annotationPosition: "inline",
-        axisLabelDensity: "reduced",
-        chromeMode: "full",
-        legendMaxHeight: -1
-      };
-    case "full":
-      return {
-        labelMode: "all",
-        legendPosition: "right",
-        annotationPosition: "inline",
-        axisLabelDensity: "full",
-        chromeMode: "full",
-        legendMaxHeight: -1
-      };
-  }
-}
-function applyHeightConstraints(strategy, heightClass) {
-  if (heightClass === "normal") return strategy;
-  if (heightClass === "cramped") {
-    return {
-      ...strategy,
-      chromeMode: "hidden",
-      legendMaxHeight: 0,
-      labelMode: "none",
-      annotationPosition: "tooltip-only"
-    };
-  }
-  return {
-    ...strategy,
-    chromeMode: "compact",
-    legendMaxHeight: 0.15
-  };
-}
-function getLayoutStrategy(breakpoint, heightClass = "normal") {
-  const base = getWidthStrategy(breakpoint);
-  return applyHeightConstraints(base, heightClass);
-}
-
-// src/responsive/metrics.ts
-var AXIS_TITLE_OFFSET_COMPACT = 35;
-var AXIS_TITLE_OFFSET_DEFAULT = 45;
-function getAxisTitleOffset(width) {
-  return width < BREAKPOINT_COMPACT_MAX ? AXIS_TITLE_OFFSET_COMPACT : AXIS_TITLE_OFFSET_DEFAULT;
-}
-var HPAD_COMPACT_FRACTION = 0.5;
-var HPAD_COMPACT_MIN = 4;
-var TICK_LABEL_OFFSET = 6;
-var AXIS_TITLE_TRAILING_PAD = 4;
-var AXIS_TITLE_GAP = 7;
-function axisTitleOffset(maxTickLabelWidth, titleFontSize, width) {
-  const halfTitleGlyph = Math.ceil(titleFontSize / 2);
-  const dynamic = TICK_LABEL_OFFSET + maxTickLabelWidth + AXIS_TITLE_GAP + halfTitleGlyph;
-  return Math.max(dynamic, getAxisTitleOffset(width));
-}
-var NARROW_VIEWPORT_MAX = 500;
-var TOP_PAD_EXTRA_NARROW = 10;
-var TOP_PAD_NARROW_MAX = NARROW_VIEWPORT_MAX;
-var LABEL_GAP_COMPACT = 8;
-var LABEL_GAP_DEFAULT = 12;
-var LABEL_GAP_NARROW_MAX = NARROW_VIEWPORT_MAX;
-var MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX = 600;
-var MAX_LEFT_LABEL_FRACTION_COMPACT = 0.45;
-var MAX_LEFT_LABEL_FRACTION_MEDIUM = 0.55;
-var MAX_LEFT_LABEL_FRACTION_DEFAULT = 1;
-
 // src/labels/collision.ts
 var PRIORITY_ORDER = {
   data: 0,
@@ -1609,6 +1905,11 @@ var PRIORITY_ORDER = {
 function detectCollision(a, b) {
   return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
 }
+function overlapArea(a, b) {
+  const w = Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x);
+  const h = Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y);
+  return w > 0 && h > 0 ? w * h : 0;
+}
 var OFFSET_STRATEGIES = [
   { dx: 0, dy: 0 },
   // original position
@@ -3093,6 +3394,9 @@ export {
   TICK_LABEL_OFFSET,
   TOP_PAD_EXTRA_NARROW,
   TOP_PAD_NARROW_MAX,
+  X_AXIS_BAND_HEIGHT,
+  X_AXIS_TITLE_BAND,
+  X_AXIS_TITLE_BAND_ROTATED,
   abbreviateNumber,
   adaptColorForDarkMode,
   adaptTheme,
@@ -3105,6 +3409,7 @@ export {
   columnChart,
   computeChrome,
   computeLabelBounds,
+  computeXAxisExtentFromLabels,
   contrastRatio,
   dataTable,
   detectCollision,
@@ -3123,6 +3428,7 @@ export {
   getHeightClass,
   getLayoutStrategy,
   getRepresentativeColor,
+  heuristicMeasure,
   inferFieldType,
   isBarListSpec,
   isChartSpec,
@@ -3139,11 +3445,13 @@ export {
   isTileMapSpec,
   lineChart,
   meetsAA,
+  overlapArea,
   pickLabelColor,
   pieChart,
   resolveCollisions,
   resolveMarkDef,
   resolveMarkType,
+  resolveMeasurer,
   resolveTheme,
   scatterChart,
   simulateColorBlindness,