@opendata-ai/openchart-engine 2.10.0 → 2.12.0

package/dist/index.js

@@ -1,6 +1,8 @@
 // src/compile.ts
 import {
   adaptTheme as adaptTheme2,
+  BRAND_RESERVE_WIDTH as BRAND_RESERVE_WIDTH2,
+  computeLabelBounds,
   generateAltText,
   generateDataTable,
   getBreakpoint,
@@ -10,7 +12,7 @@ import {
 } from "@opendata-ai/openchart-core";
 
 // src/annotations/compute.ts
-import { estimateTextWidth } from "@opendata-ai/openchart-core";
+import { detectCollision, estimateTextWidth } from "@opendata-ai/openchart-core";
 var DEFAULT_ANNOTATION_FONT_SIZE = 12;
 var DEFAULT_ANNOTATION_FONT_WEIGHT = 400;
 var DEFAULT_LINE_HEIGHT = 1.3;
@@ -325,41 +327,34 @@ function estimateLabelBounds(label) {
   const fontWeight = label.style.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
   return computeTextBounds(label.x, label.y, label.text, fontSize, fontWeight);
 }
-function rectsOverlap(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;
-}
 var NUDGE_PADDING = 6;
+function generateNudgeCandidates(selfBounds, obstacles, padding) {
+  const candidates = [];
+  for (const obs of obstacles) {
+    const belowDy = obs.y + obs.height + padding - selfBounds.y;
+    candidates.push({ dx: 0, dy: belowDy, distance: Math.abs(belowDy) });
+    const aboveDy = obs.y - padding - (selfBounds.y + selfBounds.height);
+    candidates.push({ dx: 0, dy: aboveDy, distance: Math.abs(aboveDy) });
+    const leftDx = obs.x - padding - (selfBounds.x + selfBounds.width);
+    candidates.push({ dx: leftDx, dy: 0, distance: Math.abs(leftDx) });
+    const rightDx = obs.x + obs.width + padding - selfBounds.x;
+    candidates.push({ dx: rightDx, dy: 0, distance: Math.abs(rightDx) });
+  }
+  candidates.sort((a, b) => a.distance - b.distance);
+  return candidates;
+}
 function nudgeAnnotationFromObstacles(annotation, originalAnnotation, scales, chartArea, obstacles) {
   if (annotation.type !== "text" || !annotation.label) return false;
   const labelBounds = estimateLabelBounds(annotation.label);
   const collidingObs = obstacles.filter(
-    (obs) => obs.width > 0 && obs.height > 0 && rectsOverlap(labelBounds, obs)
+    (obs) => obs.width > 0 && obs.height > 0 && detectCollision(labelBounds, obs)
   );
   if (collidingObs.length === 0) return false;
   const px = resolvePosition(originalAnnotation.x, scales.x);
   const py = resolvePosition(originalAnnotation.y, scales.y);
   if (px === null || py === null) return false;
-  const candidates = [];
+  const candidates = generateNudgeCandidates(labelBounds, collidingObs, NUDGE_PADDING);
   const fontSize = labelBounds.height / Math.max(1, annotation.label.text.split("\n").length);
-  for (const obs of collidingObs) {
-    const currentLabelTop = labelBounds.y;
-    const targetLabelTop = obs.y + obs.height + NUDGE_PADDING;
-    const belowDy = targetLabelTop - currentLabelTop;
-    candidates.push({ dx: 0, dy: belowDy, distance: Math.abs(belowDy) });
-    const currentLabelBottom = labelBounds.y + labelBounds.height;
-    const targetLabelBottom = obs.y - NUDGE_PADDING;
-    const aboveDy = targetLabelBottom - currentLabelBottom;
-    candidates.push({ dx: 0, dy: aboveDy, distance: Math.abs(aboveDy) });
-    const currentLabelRight = labelBounds.x + labelBounds.width;
-    const targetLabelRight = obs.x - NUDGE_PADDING;
-    const leftDx = targetLabelRight - currentLabelRight;
-    candidates.push({ dx: leftDx, dy: 0, distance: Math.abs(leftDx) });
-    const currentLabelLeft = labelBounds.x;
-    const targetLabelLeft = obs.x + obs.width + NUDGE_PADDING;
-    const rightDx = targetLabelLeft - currentLabelLeft;
-    candidates.push({ dx: rightDx, dy: 0, distance: Math.abs(rightDx) });
-  }
-  candidates.sort((a, b) => a.distance - b.distance);
   for (const { dx, dy } of candidates) {
     const newLabelX = annotation.label.x + dx;
     const newLabelY = annotation.label.y + dy;
@@ -388,12 +383,12 @@ function nudgeAnnotationFromObstacles(annotation, originalAnnotation, scales, ch
     };
     const candidateBounds = estimateLabelBounds(candidateLabel);
     const stillCollides = obstacles.some(
-      (obs) => obs.width > 0 && obs.height > 0 && rectsOverlap(candidateBounds, obs)
+      (obs) => obs.width > 0 && obs.height > 0 && detectCollision(candidateBounds, obs)
     );
     if (stillCollides) continue;
     const labelCenterX = candidateBounds.x + candidateBounds.width / 2;
     const labelCenterY = candidateBounds.y + candidateBounds.height / 2;
-    const inBounds = labelCenterX >= chartArea.x && labelCenterX <= chartArea.x + chartArea.width + 100 && labelCenterY >= chartArea.y - fontSize && labelCenterY <= chartArea.y + chartArea.height + fontSize;
+    const inBounds = labelCenterX >= chartArea.x && labelCenterX <= chartArea.x + chartArea.width + 100 && labelCenterY >= chartArea.y - fontSize && labelCenterY <= chartArea.y + chartArea.height + fontSize * 3;
     if (inBounds) {
       if (candidateLabel.connector && dx === 0 && dy !== 0) {
         candidateLabel.connector = {
@@ -407,6 +402,74 @@ function nudgeAnnotationFromObstacles(annotation, originalAnnotation, scales, ch
   }
   return false;
 }
+function resolveAnnotationCollisions(annotations, originalSpecs, scales, chartArea) {
+  const placedBounds = [];
+  for (let i = 0; i < annotations.length; i++) {
+    const annotation = annotations[i];
+    if (annotation.type !== "text" || !annotation.label) {
+      continue;
+    }
+    const bounds = estimateLabelBounds(annotation.label);
+    const collidingBounds = placedBounds.filter(
+      (pb) => pb.width > 0 && pb.height > 0 && detectCollision(bounds, pb)
+    );
+    if (collidingBounds.length > 0) {
+      const originalSpec = originalSpecs[i];
+      if (originalSpec?.type === "text") {
+        const px = resolvePosition(originalSpec.x, scales.x);
+        const py = resolvePosition(originalSpec.y, scales.y);
+        if (px !== null && py !== null) {
+          const candidates = generateNudgeCandidates(bounds, collidingBounds, NUDGE_PADDING);
+          const fontSize = bounds.height / Math.max(1, annotation.label.text.split("\n").length);
+          for (const { dx, dy } of candidates) {
+            const newLabelX = annotation.label.x + dx;
+            const newLabelY = annotation.label.y + dy;
+            const candidateLabel = {
+              ...annotation.label,
+              x: newLabelX,
+              y: newLabelY
+            };
+            const candidateBounds = estimateLabelBounds(candidateLabel);
+            const stillCollides = placedBounds.some(
+              (pb) => pb.width > 0 && pb.height > 0 && detectCollision(candidateBounds, pb)
+            );
+            if (stillCollides) continue;
+            const labelCenterX = candidateBounds.x + candidateBounds.width / 2;
+            const labelCenterY = candidateBounds.y + candidateBounds.height / 2;
+            const inBounds = labelCenterX >= chartArea.x && labelCenterX <= chartArea.x + chartArea.width + 100 && labelCenterY >= chartArea.y - fontSize && labelCenterY <= chartArea.y + chartArea.height + fontSize;
+            if (inBounds) {
+              let newConnector = annotation.label.connector;
+              if (newConnector) {
+                const annFontSize = annotation.label.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
+                const annFontWeight = annotation.label.style.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
+                const connStyle = newConnector.style === "curve" ? "curve" : "straight";
+                const newFrom = computeConnectorOrigin(
+                  newLabelX,
+                  newLabelY,
+                  annotation.label.text,
+                  annFontSize,
+                  annFontWeight,
+                  px,
+                  py,
+                  connStyle
+                );
+                newConnector = { ...newConnector, from: newFrom };
+              }
+              annotation.label = {
+                ...annotation.label,
+                x: newLabelX,
+                y: newLabelY,
+                connector: newConnector
+              };
+              break;
+            }
+          }
+        }
+      }
+    }
+    placedBounds.push(estimateLabelBounds(annotation.label));
+  }
+}
 function computeAnnotations(spec, scales, chartArea, strategy, isDark = false, obstacles = []) {
   if (strategy.annotationPosition === "tooltip-only") {
     return [];
@@ -432,6 +495,7 @@ function computeAnnotations(spec, scales, chartArea, strategy, isDark = false, o
       annotations.push(resolved);
     }
   }
+  resolveAnnotationCollisions(annotations, spec.annotations, scales, chartArea);
   annotations.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
   return annotations;
 }
@@ -5993,6 +6057,8 @@ var HEIGHT_MINIMAL_THRESHOLD = 120;
 var HEIGHT_REDUCED_THRESHOLD = 200;
 var WIDTH_MINIMAL_THRESHOLD = 150;
 var WIDTH_REDUCED_THRESHOLD = 300;
+var MIN_TICK_GAP_FACTOR = 1;
+var MIN_TICK_COUNT = 2;
 var DENSITY_ORDER = ["full", "reduced", "minimal"];
 function effectiveDensity(baseDensity, axisLength, minimalThreshold, reducedThreshold) {
   let density = baseDensity;
@@ -6005,17 +6071,49 @@ function effectiveDensity(baseDensity, axisLength, minimalThreshold, reducedThre
   }
   return density;
 }
-function continuousTicks(resolvedScale, density) {
+function measureLabel(text, fontSize, fontWeight, measureText) {
+  return measureText ? measureText(text, fontSize, fontWeight).width : estimateTextWidth7(text, fontSize, fontWeight);
+}
+function ticksOverlap(ticks2, fontSize, fontWeight, measureText) {
+  if (ticks2.length < 2) return false;
+  const minGap = fontSize * MIN_TICK_GAP_FACTOR;
+  for (let i = 0; i < ticks2.length - 1; i++) {
+    const aWidth = measureLabel(ticks2[i].label, fontSize, fontWeight, measureText);
+    const bWidth = measureLabel(ticks2[i + 1].label, fontSize, fontWeight, measureText);
+    const aRight = ticks2[i].position + aWidth / 2;
+    const bLeft = ticks2[i + 1].position - bWidth / 2;
+    if (aRight + minGap > bLeft) return true;
+  }
+  return false;
+}
+function thinTicksUntilFit(ticks2, fontSize, fontWeight, measureText) {
+  if (!ticksOverlap(ticks2, fontSize, fontWeight, measureText)) return ticks2;
+  let current = ticks2;
+  while (current.length > MIN_TICK_COUNT) {
+    const thinned = [current[0]];
+    for (let i = 2; i < current.length - 1; i += 2) {
+      thinned.push(current[i]);
+    }
+    if (current.length > 1) thinned.push(current[current.length - 1]);
+    current = thinned;
+    if (!ticksOverlap(current, fontSize, fontWeight, measureText)) break;
+  }
+  return current;
+}
+function continuousTicks(resolvedScale, density, fontSize, fontWeight, measureText) {
   const scale = resolvedScale.scale;
-  const count = resolvedScale.channel.axis?.tickCount ?? TICK_COUNTS[density];
-  const ticks2 = scale.ticks(count);
-  return ticks2.map((value) => ({
+  const explicitCount = resolvedScale.channel.axis?.tickCount;
+  const count = explicitCount ?? TICK_COUNTS[density];
+  const rawTicks = scale.ticks(count);
+  const ticks2 = rawTicks.map((value) => ({
     value,
     position: scale(value),
     label: formatTickLabel(value, resolvedScale)
   }));
+  if (explicitCount) return ticks2;
+  return thinTicksUntilFit(ticks2, fontSize, fontWeight, measureText);
 }
-function categoricalTicks(resolvedScale, density) {
+function categoricalTicks(resolvedScale, density, fontSize, fontWeight, measureText) {
   const scale = resolvedScale.scale;
   const domain = scale.domain();
   const explicitTickCount = resolvedScale.channel.axis?.tickCount;
@@ -6025,7 +6123,7 @@ function categoricalTicks(resolvedScale, density) {
     const step = Math.ceil(domain.length / maxTicks);
     selectedValues = domain.filter((_, i) => i % step === 0);
   }
-  return selectedValues.map((value) => {
+  const ticks2 = selectedValues.map((value) => {
     const bandScale = resolvedScale.type === "band" ? scale : null;
     const pos = bandScale ? (bandScale(value) ?? 0) + bandScale.bandwidth() / 2 : scale(value) ?? 0;
     return {
@@ -6034,6 +6132,10 @@ function categoricalTicks(resolvedScale, density) {
       label: value
     };
   });
+  if (resolvedScale.type !== "band" && !explicitTickCount) {
+    return thinTicksUntilFit(ticks2, fontSize, fontWeight, measureText);
+  }
+  return ticks2;
 }
 function formatTickLabel(value, resolvedScale) {
   const formatStr = resolvedScale.channel.axis?.format;
@@ -6052,7 +6154,7 @@ function formatTickLabel(value, resolvedScale) {
   }
   return String(value);
 }
-function computeAxes(scales, chartArea, strategy, theme) {
+function computeAxes(scales, chartArea, strategy, theme, measureText) {
   const result = {};
   const baseDensity = strategy.axisLabelDensity;
   const yDensity = effectiveDensity(
@@ -6082,8 +6184,10 @@ function computeAxes(scales, chartArea, strategy, theme) {
     fill: theme.colors.text,
     lineHeight: 1.3
   };
+  const { fontSize } = tickLabelStyle;
+  const { fontWeight } = tickLabelStyle;
   if (scales.x) {
-    const ticks2 = scales.x.type === "band" || scales.x.type === "point" || scales.x.type === "ordinal" ? categoricalTicks(scales.x, xDensity) : continuousTicks(scales.x, xDensity);
+    const ticks2 = scales.x.type === "band" || scales.x.type === "point" || scales.x.type === "ordinal" ? categoricalTicks(scales.x, xDensity, fontSize, fontWeight, measureText) : continuousTicks(scales.x, xDensity, fontSize, fontWeight, measureText);
     const gridlines = ticks2.map((t) => ({
       position: t.position,
       major: true
@@ -6093,11 +6197,7 @@ function computeAxes(scales, chartArea, strategy, theme) {
       const bandwidth = scales.x.scale.bandwidth();
       let maxLabelWidth = 0;
       for (const t of ticks2) {
-        const w = estimateTextWidth7(
-          t.label,
-          theme.fonts.sizes.axisTick,
-          theme.fonts.weights.normal
-        );
+        const w = measureLabel(t.label, fontSize, fontWeight, measureText);
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
       if (maxLabelWidth > bandwidth * 0.85) {
@@ -6116,7 +6216,7 @@ function computeAxes(scales, chartArea, strategy, theme) {
     };
   }
   if (scales.y) {
-    const ticks2 = scales.y.type === "band" || scales.y.type === "point" || scales.y.type === "ordinal" ? categoricalTicks(scales.y, yDensity) : continuousTicks(scales.y, yDensity);
+    const ticks2 = scales.y.type === "band" || scales.y.type === "point" || scales.y.type === "ordinal" ? categoricalTicks(scales.y, yDensity, fontSize, fontWeight, measureText) : continuousTicks(scales.y, yDensity, fontSize, fontWeight, measureText);
     const gridlines = ticks2.map((t) => ({
       position: t.position,
       major: true
@@ -6543,7 +6643,7 @@ function computeScales(spec, chartArea, data) {
 }
 
 // src/legend/compute.ts
-import { estimateTextWidth as estimateTextWidth9 } from "@opendata-ai/openchart-core";
+import { BRAND_RESERVE_WIDTH, estimateTextWidth as estimateTextWidth9 } from "@opendata-ai/openchart-core";
 var SWATCH_SIZE2 = 12;
 var SWATCH_GAP2 = 6;
 var ENTRY_GAP2 = 16;
@@ -6685,7 +6785,7 @@ function computeLegend(spec, strategy, theme, chartArea) {
       entryGap: 4
     };
   }
-  const availableWidth = chartArea.width - LEGEND_PADDING * 2;
+  const availableWidth = chartArea.width - LEGEND_PADDING * 2 - BRAND_RESERVE_WIDTH;
   const maxFit = entriesThatFit(entries, availableWidth, TOP_LEGEND_MAX_ROWS, labelStyle);
   if (maxFit < entries.length) {
     entries = truncateEntries(entries, maxFit);
@@ -6716,7 +6816,7 @@ function computeLegend(spec, strategy, theme, chartArea) {
     bounds: {
       x: chartArea.x + offsetDx,
       y: (resolvedPosition === "bottom" ? chartArea.y + chartArea.height - legendHeight : chartArea.y) + offsetDy,
-      width: Math.min(totalWidth, chartArea.width),
+      width: Math.min(totalWidth, availableWidth),
       height: legendHeight
     },
     labelStyle,
@@ -7401,6 +7501,9 @@ function buildFields(row, encoding, color2) {
   return fields;
 }
 function getTooltipTitle(row, encoding) {
+  if (encoding.detail) {
+    return String(row[encoding.detail.field] ?? "");
+  }
   if (encoding.x?.type === "temporal") {
     return formatValue(row[encoding.x.field], "temporal");
   }
@@ -7497,8 +7600,28 @@ var builtinRenderers = {
 for (const [type, renderer] of Object.entries(builtinRenderers)) {
   registerChartRenderer(type, renderer);
 }
-function computeRowObstacles(marks, scales) {
-  if (!scales.y || scales.y.type !== "band") return [];
+function computeMarkObstacles(marks, scales) {
+  if (scales.y?.type === "band") {
+    return computeBandRowObstacles(marks, scales);
+  }
+  const obstacles = [];
+  for (const mark of marks) {
+    if (mark.type === "rect") {
+      const rm = mark;
+      obstacles.push({ x: rm.x, y: rm.y, width: rm.width, height: rm.height });
+    } else if (mark.type === "point") {
+      const pm = mark;
+      obstacles.push({
+        x: pm.cx - pm.r,
+        y: pm.cy - pm.r,
+        width: pm.r * 2,
+        height: pm.r * 2
+      });
+    }
+  }
+  return obstacles;
+}
+function computeBandRowObstacles(marks, scales) {
   const rows = /* @__PURE__ */ new Map();
   for (const mark of marks) {
     let cy;
@@ -7657,7 +7780,7 @@ function compileChart(spec, options) {
   }
   scales.defaultColor = theme.colors.categorical[0];
   const isRadial = chartSpec.type === "pie" || chartSpec.type === "donut";
-  const axes = isRadial ? { x: void 0, y: void 0 } : computeAxes(scales, chartArea, strategy, theme);
+  const axes = isRadial ? { x: void 0, y: void 0 } : computeAxes(scales, chartArea, strategy, theme, options.measureText);
   if (!isRadial) {
     computeGridlines(axes, chartArea);
   }
@@ -7667,7 +7790,18 @@ function compileChart(spec, options) {
   if (finalLegend.bounds.width > 0) {
     obstacles.push(finalLegend.bounds);
   }
-  obstacles.push(...computeRowObstacles(marks, scales));
+  obstacles.push(...computeMarkObstacles(marks, scales));
+  for (const mark of marks) {
+    if (mark.type !== "area" && mark.label?.visible) {
+      obstacles.push(computeLabelBounds(mark.label));
+    }
+  }
+  const brandPadding = theme.spacing.padding;
+  const brandX = dims.total.width - brandPadding - BRAND_RESERVE_WIDTH2;
+  const xAxisExtent = axes.x?.label ? 48 : axes.x ? 26 : 0;
+  const firstBottomChrome = dims.chrome.source ?? dims.chrome.byline ?? dims.chrome.footer;
+  const brandY = firstBottomChrome ? chartArea.y + chartArea.height + xAxisExtent + firstBottomChrome.y : chartArea.y + chartArea.height + xAxisExtent + theme.spacing.chartToFooter;
+  obstacles.push({ x: brandX, y: brandY, width: BRAND_RESERVE_WIDTH2, height: 30 });
   const annotations = computeAnnotations(
     chartSpec,
     scales,