@opendata-ai/openchart-engine 7.9.2 → 7.10.0

package/dist/index.js

@@ -10506,12 +10506,41 @@ import {
 } from "@opendata-ai/openchart-core";
 
 // src/layout/axes/rotation.ts
+import { TICK_LINE_HEIGHT_FACTOR, X_AXIS_ROTATED_EXTENT_CAP } from "@opendata-ai/openchart-core";
 var BAND_FIT_FRACTION = 0.85;
 var AUTO_ROTATE_ANGLE = -45;
-function resolveBandTickAngle(explicitAngle, maxLabelWidth, bandwidth, labelCount) {
+var STEEP_ROTATE_ANGLE = -90;
+var LABEL_GAP = 4;
+function ribbonSeparation(spacing, angleDeg) {
+  return spacing * Math.abs(Math.sin(angleDeg * Math.PI / 180));
+}
+function alongTextClearance(spacing, angleDeg) {
+  return spacing * Math.abs(Math.cos(angleDeg * Math.PI / 180));
+}
+function rotatedLabelsFit(spacing, angleDeg, fontSize, maxLabelWidth) {
+  return ribbonSeparation(spacing, angleDeg) >= fontSize * TICK_LINE_HEIGHT_FACTOR + LABEL_GAP || alongTextClearance(spacing, angleDeg) >= maxLabelWidth + LABEL_GAP;
+}
+function resolveBandTickAngle(explicitAngle, maxLabelWidth, bandwidth, labelCount, spacing, fontSize) {
   if (explicitAngle !== void 0) return explicitAngle;
   if (labelCount < 2) return void 0;
-  return maxLabelWidth > bandwidth * BAND_FIT_FRACTION ? AUTO_ROTATE_ANGLE : void 0;
+  if (maxLabelWidth <= bandwidth * BAND_FIT_FRACTION) return void 0;
+  if (rotatedLabelsFit(spacing, AUTO_ROTATE_ANGLE, fontSize, maxLabelWidth)) {
+    return AUTO_ROTATE_ANGLE;
+  }
+  return maxLabelWidth <= X_AXIS_ROTATED_EXTENT_CAP ? STEEP_ROTATE_ANGLE : AUTO_ROTATE_ANGLE;
+}
+function bandLabelStride(maxLabelWidth, angleDeg, fontSize, spacing) {
+  if (spacing <= 0) return 1;
+  if (angleDeg === void 0 || angleDeg === 0) {
+    return Math.max(1, Math.ceil((maxLabelWidth + LABEL_GAP) / spacing));
+  }
+  const separation = ribbonSeparation(spacing, angleDeg);
+  const clearance = alongTextClearance(spacing, angleDeg);
+  const required = fontSize * TICK_LINE_HEIGHT_FACTOR + LABEL_GAP;
+  const byRibbon = separation > 0 ? Math.ceil(required / separation) : Number.POSITIVE_INFINITY;
+  const byLength = clearance > 0 ? Math.ceil((maxLabelWidth + LABEL_GAP) / clearance) : Number.POSITIVE_INFINITY;
+  const stride = Math.min(byRibbon, byLength);
+  return Number.isFinite(stride) ? Math.max(1, stride) : 1;
 }
 
 // src/layout/axes/thinning.ts
@@ -10608,7 +10637,7 @@ var NUMERIC_SCALE_TYPES = /* @__PURE__ */ new Set([
   "threshold"
 ]);
 var TEMPORAL_SCALE_TYPES = /* @__PURE__ */ new Set(["time", "utc"]);
-function formatTickLabel(value2, resolvedScale) {
+function formatTickLabel(value2, resolvedScale, compact = false) {
   const axisConfig = resolvedScale.channel.axis || void 0;
   const formatStr = axisConfig?.format;
   const suffix = axisConfig?.labelSuffix ?? "";
@@ -10616,7 +10645,7 @@ function formatTickLabel(value2, resolvedScale) {
     const temporalFmt = buildTemporalFormatter(formatStr);
     if (temporalFmt) return temporalFmt(value2) + suffix;
     const useUtc = resolvedScale.type === "utc";
-    return formatDate(value2, void 0, void 0, useUtc) + suffix;
+    return formatDate(value2, void 0, void 0, useUtc, compact) + suffix;
   }
   if (NUMERIC_SCALE_TYPES.has(resolvedScale.type)) {
     const num = value2;
@@ -10643,7 +10672,7 @@ function continuousTicks(resolvedScale, density, targetCount) {
   const count = axCfg?.tickCount ?? targetCount ?? TICK_COUNTS[density];
   return buildContinuousTicks(resolvedScale, count);
 }
-function buildContinuousTicks(resolvedScale, count) {
+function buildContinuousTicks(resolvedScale, count, compact = false) {
   const scale = resolvedScale.scale;
   if (!("ticks" in scale) || typeof scale.ticks !== "function") {
     return continuousTicks(resolvedScale, "full");
@@ -10666,7 +10695,7 @@ function buildContinuousTicks(resolvedScale, count) {
   return ticks2.map((value2) => ({
     value: value2,
     position: scale(value2),
-    label: formatTickLabel(value2, resolvedScale)
+    label: formatTickLabel(value2, resolvedScale, compact)
   }));
 }
 function scaleSupportsTickCount(resolvedScale) {
@@ -10781,12 +10810,12 @@ function effectiveDensity(baseDensity, axisLength, minimalThreshold, reducedThre
 var CONTINUOUS_TICK_FLOOR = 4;
 var OVERSHOOT_TOLERANCE = 1.5;
 var MIN_QUANTITATIVE_TICKS = 2;
-function ensureMinContinuousTicks(scale, ticks2, requestedCount) {
+function ensureMinContinuousTicks(scale, ticks2, requestedCount, compact = false) {
   if (ticks2.length >= MIN_QUANTITATIVE_TICKS) return ticks2;
   if (!scale || !scaleSupportsTickCount(scale)) return ticks2;
   let best = ticks2;
   for (let n = Math.max(requestedCount, MIN_QUANTITATIVE_TICKS) + 1; n <= 10; n++) {
-    const candidate = buildContinuousTicks(scale, n);
+    const candidate = buildContinuousTicks(scale, n, compact);
     if (candidate.length >= MIN_QUANTITATIVE_TICKS) return candidate;
     if (candidate.length > best.length) best = candidate;
   }
@@ -10799,66 +10828,36 @@ function fitContinuousTicks(scale, initialTicks, initialCount, fontSize, fontWei
   const overshoots = flooredTicks.length > tolerance;
   const overlaps = ticksOverlap(flooredTicks, fontSize, fontWeight, measureText, orientation);
   if (!overshoots && !overlaps) return flooredTicks;
+  const useCompact = (scale.type === "time" || scale.type === "utc") && orientation === "horizontal";
+  const fitsCleanly = (candidate) => candidate.length <= tolerance && !ticksOverlap(candidate, fontSize, fontWeight, measureText, orientation);
+  if (useCompact) {
+    const compactAtInitial = buildContinuousTicks(scale, initialCount, true);
+    if (fitsCleanly(compactAtInitial)) return compactAtInitial;
+  }
   const minThreshold = orientation === "vertical" ? HEIGHT_MINIMAL_THRESHOLD : WIDTH_MINIMAL_THRESHOLD;
   const floor = axisLength >= minThreshold ? CONTINUOUS_TICK_FLOOR : 2;
   let bestWithinFloor;
+  let bestWithinFloorCount;
   for (let n = initialCount - 1; n >= 2; n--) {
     const candidate = buildContinuousTicks(scale, n);
-    const candidateOvershoots = candidate.length > tolerance;
-    const candidateOverlaps = ticksOverlap(
-      candidate,
-      fontSize,
-      fontWeight,
-      measureText,
-      orientation
-    );
-    if (!candidateOvershoots && !candidateOverlaps) {
-      return candidate;
+    if (fitsCleanly(candidate)) return candidate;
+    if (useCompact) {
+      const compact = buildContinuousTicks(scale, n, true);
+      if (fitsCleanly(compact)) return compact;
+    }
+    if (candidate.length >= floor) {
+      bestWithinFloor = candidate;
+      bestWithinFloorCount = n;
     }
-    if (candidate.length >= floor) bestWithinFloor = candidate;
   }
-  const rawFallback = bestWithinFloor ?? buildContinuousTicks(scale, floor);
-  const fallback = ensureMinContinuousTicks(scale, rawFallback, floor);
+  const rawFallback = useCompact ? buildContinuousTicks(scale, bestWithinFloorCount ?? floor, true) : bestWithinFloor ?? buildContinuousTicks(scale, floor);
+  const fallback = ensureMinContinuousTicks(scale, rawFallback, floor, useCompact);
   return thinTicksUntilFit(fallback, fontSize, fontWeight, measureText, orientation);
 }
-function labelSpanAtAngle(tick, angleDeg, fontSize, fontWeight, measureText) {
-  const angleRad = Math.abs(angleDeg) * Math.PI / 180;
-  const cosA = angleRad > 0 ? Math.abs(Math.cos(angleRad)) : 1;
-  const projected = measureLabel(tick.label, fontSize, fontWeight, measureText) * cosA;
-  if (angleDeg === 0) {
-    return { left: tick.position - projected / 2, right: tick.position + projected / 2 };
-  }
-  if (angleDeg < 0) {
-    return { left: tick.position - projected, right: tick.position };
-  }
-  return { left: tick.position, right: tick.position + projected };
-}
-function thinBandTicksIfNeeded(ticks2, angleDeg, fontSize, fontWeight, measureText) {
-  if (ticks2.length < 3) return ticks2;
-  const minGap = fontSize * 0.5;
-  const spans = ticks2.map((t) => labelSpanAtAngle(t, angleDeg, fontSize, fontWeight, measureText));
-  const keep = new Array(ticks2.length).fill(false);
-  keep[0] = true;
-  let lastRight = spans[0].right;
-  for (let i = 1; i < ticks2.length; i++) {
-    if (spans[i].left >= lastRight + minGap) {
-      keep[i] = true;
-      lastRight = spans[i].right;
-    }
-  }
+function applyBandLabelStride(ticks2, stride) {
+  if (stride <= 1 || ticks2.length < 3) return ticks2;
   const lastIdx = ticks2.length - 1;
-  if (!keep[lastIdx]) {
-    keep[lastIdx] = true;
-    for (let i = lastIdx - 1; i > 0; i--) {
-      if (!keep[i]) continue;
-      if (spans[i].right > spans[lastIdx].left) {
-        keep[i] = false;
-        continue;
-      }
-      break;
-    }
-  }
-  return ticks2.filter((_, i) => keep[i]);
+  return ticks2.filter((_, i) => (lastIdx - i) % stride === 0);
 }
 function computeAxes(scales, chartArea, strategy, theme, measureText, dataContext) {
   const result = {};
@@ -10909,22 +10908,37 @@ function computeAxes(scales, chartArea, strategy, theme, measureText, dataContex
       major: true
     }));
     let tickAngle = axisConfig?.labelAngle;
-    if (tickAngle === void 0 && scales.x.type === "band" && allTicks.length > 1) {
-      const bandwidth = scales.x.scale.bandwidth();
+    let bandStride = 1;
+    if (scales.x.type === "band" && allTicks.length > 1) {
+      const bandScale = scales.x.scale;
+      const bandwidth = bandScale.bandwidth();
+      let anchorSpacing = Number.POSITIVE_INFINITY;
+      for (let i = 1; i < allTicks.length; i++) {
+        const d = Math.abs(allTicks[i].position - allTicks[i - 1].position);
+        if (d > 0 && d < anchorSpacing) anchorSpacing = d;
+      }
+      if (!Number.isFinite(anchorSpacing)) anchorSpacing = bandScale.step();
       let maxLabelWidth = 0;
       for (const t of allTicks) {
         const w = measureLabel(t.label, fontSize, fontWeight, measureText);
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
-      tickAngle = resolveBandTickAngle(void 0, maxLabelWidth, bandwidth, allTicks.length);
+      tickAngle = resolveBandTickAngle(
+        axisConfig?.labelAngle,
+        maxLabelWidth,
+        bandwidth,
+        allTicks.length,
+        anchorSpacing,
+        fontSize
+      );
+      bandStride = bandLabelStride(maxLabelWidth, tickAngle, fontSize, anchorSpacing);
     }
     const hasExplicitValues = !!axisConfig?.values;
     let ticks2;
     if (hasExplicitValues) {
       ticks2 = allTicks;
     } else if (scales.x.type === "band") {
-      const effectiveAngle = tickAngle ?? 0;
-      ticks2 = thinBandTicksIfNeeded(allTicks, effectiveAngle, fontSize, fontWeight, measureText);
+      ticks2 = applyBandLabelStride(allTicks, bandStride);
     } else if (isContinuousX) {
       ticks2 = fitContinuousTicks(
         scales.x,
@@ -11287,15 +11301,23 @@ function evenRange(start, end, count) {
   const step = (end - start) / (count - 1);
   return Array.from({ length: count }, (_, i) => start + step * i);
 }
+function resolveBandPadding(scaleConfig) {
+  const padding = scaleConfig?.padding ?? 0.35;
+  return {
+    paddingInner: scaleConfig?.paddingInner ?? padding,
+    paddingOuter: scaleConfig?.paddingOuter ?? padding
+  };
+}
 function estimateBandwidth(scaleConfig, plotWidth, n) {
+  const { paddingInner } = resolveBandPadding(scaleConfig);
+  return estimateBandStep(scaleConfig, plotWidth, n) * (1 - paddingInner);
+}
+function estimateBandStep(scaleConfig, plotWidth, n) {
   if (n <= 0) return 0;
-  const padding = scaleConfig?.padding ?? 0.35;
-  const paddingInner = scaleConfig?.paddingInner ?? padding;
-  const paddingOuter = scaleConfig?.paddingOuter ?? padding;
+  const { paddingInner, paddingOuter } = resolveBandPadding(scaleConfig);
   const denom = n - paddingInner + 2 * paddingOuter;
   if (denom <= 0) return 0;
-  const step = plotWidth / denom;
-  return step * (1 - paddingInner);
+  return plotWidth / denom;
 }
 function buildBandScale(channel, data, rangeStart, rangeEnd) {
   const values = channel.scale?.domain ? channel.scale.domain : applyCategoricalSort(uniqueStrings(fieldValues(data, channel.field)), channel.sort);
@@ -11754,8 +11776,17 @@ function resolveLayoutPlan(chartSpec, renderSpec, options, theme, strategy, wate
       const rightMarginEst = hPad + (isRadial ? hPad : axisMargin);
       const plotWidth = Math.max(0, width - leftGutter - Math.max(rightMarginEst, hPad));
       const bandwidth = estimateBandwidth(encoding.x?.scale, plotWidth, xLabels.length);
+      const step = estimateBandStep(encoding.x?.scale, plotWidth, xLabels.length);
+      const xTickCount = xAxis?.tickCount;
+      let drawnLabels = xLabels;
+      let anchorSpacing = step;
+      if (xTickCount && xLabels.length > xTickCount) {
+        const capStride = Math.ceil(xLabels.length / xTickCount);
+        drawnLabels = xLabels.filter((_, i) => i % capStride === 0);
+        anchorSpacing = step * capStride;
+      }
       let maxXLabelWidth = 0;
-      for (const label of xLabels) {
+      for (const label of drawnLabels) {
         const w = measure(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
         if (w > maxXLabelWidth) maxXLabelWidth = w;
       }
@@ -11763,7 +11794,9 @@ function resolveLayoutPlan(chartSpec, renderSpec, options, theme, strategy, wate
         void 0,
         maxXLabelWidth,
         bandwidth,
-        xLabels.length
+        drawnLabels.length,
+        anchorSpacing,
+        theme.fonts.sizes.axisTick
       );
     }
     const xAxisExtent = isRadial || xAxisSuppressed ? 0 : computeXAxisExtentFromLabels2({
@@ -13834,7 +13867,7 @@ function generateLinkPath(link) {
 }
 
 // src/sankey/compile-sankey.ts
-var LABEL_GAP = 6;
+var LABEL_GAP2 = 6;
 var LINK_OPACITY_LIGHT = 0.5;
 var LINK_OPACITY_DARK = 0.75;
 var NODE_CORNER_RADIUS = 2;
@@ -13906,16 +13939,16 @@ function computeNodeLabel(node, maxDepth, theme, nodeWidth, nodeLabelAlign = "au
   let maxWidth;
   if (containerWidth !== void 0) {
     if (placeLeft) {
-      maxWidth = x0 - LABEL_GAP - pad2;
+      maxWidth = x0 - LABEL_GAP2 - pad2;
     } else {
-      maxWidth = containerWidth - pad2 - (x1 + LABEL_GAP);
+      maxWidth = containerWidth - pad2 - (x1 + LABEL_GAP2);
     }
     if (maxWidth !== void 0 && maxWidth < 0) maxWidth = 0;
   }
   if (placeLeft) {
     return {
       text: node.label ?? node.id,
-      x: x0 - LABEL_GAP,
+      x: x0 - LABEL_GAP2,
       y: midY,
       style: { ...style, textAnchor: "end", dominantBaseline: "central" },
       visible: true,
@@ -13924,7 +13957,7 @@ function computeNodeLabel(node, maxDepth, theme, nodeWidth, nodeLabelAlign = "au
   }
   return {
     text: node.label ?? node.id,
-    x: x1 + LABEL_GAP,
+    x: x1 + LABEL_GAP2,
     y: midY,
     style: { ...style, textAnchor: "start", dominantBaseline: "central" },
     visible: true,
@@ -14036,7 +14069,7 @@ function compileSankey(spec, options) {
     const depth = node.depth ?? 0;
     const labelsLeft = nodeLabelAlign === "left" || nodeLabelAlign === "auto" && depth === maxDepthFirst;
     if (labelsLeft) continue;
-    const labelX = (node.x1 ?? nodeWidth) + LABEL_GAP;
+    const labelX = (node.x1 ?? nodeWidth) + LABEL_GAP2;
     const labelText = node.label ?? node.id;
     const labelWidth = estimateTextWidth18(labelText, labelFontSize, labelFontWeight);
     const overflow = labelX + labelWidth - rightEdge;