@opendata-ai/openchart-engine 6.25.1 → 6.25.3

package/dist/index.js

@@ -4,7 +4,7 @@ import {
   adaptTheme as adaptTheme3,
   BREAKPOINT_COMPACT_MAX as BREAKPOINT_COMPACT_MAX2,
   computeLabelBounds,
-  estimateTextWidth as estimateTextWidth13,
+  estimateTextWidth as estimateTextWidth14,
   generateAltText,
   generateDataTable,
   getAxisTitleOffset as getAxisTitleOffset2,
@@ -7921,6 +7921,7 @@ import {
   abbreviateNumber as abbreviateNumber2,
   buildD3Formatter as buildD3Formatter4,
   buildTemporalFormatter,
+  estimateTextWidth as estimateTextWidth8,
   formatDate,
   formatNumber as formatNumber2
 } from "@opendata-ai/openchart-core";
@@ -8015,16 +8016,41 @@ function scaleSupportsTickCount(resolvedScale) {
   const scale = resolvedScale.scale;
   return "ticks" in scale && typeof scale.ticks === "function";
 }
-function categoricalTicks(resolvedScale, density) {
+function categoricalTicks(resolvedScale, density, orientation = "horizontal", bandwidth, labelAngle, fontSize, fontWeight, measureText) {
   const scale = resolvedScale.scale;
   const domain = scale.domain();
   const explicitTickCount = resolvedScale.channel.axis?.tickCount;
-  const maxTicks = explicitTickCount ?? TICK_COUNTS[density];
   let selectedValues = domain;
-  const shouldThinBand = resolvedScale.type === "band" && (explicitTickCount || density !== "full");
-  if ((resolvedScale.type !== "band" || shouldThinBand) && domain.length > maxTicks) {
-    const step = Math.ceil(domain.length / maxTicks);
-    selectedValues = domain.filter((_, i) => i % step === 0);
+  if (resolvedScale.type === "band" && orientation === "horizontal") {
+    if (bandwidth !== void 0 && bandwidth > 0 && fontSize !== void 0) {
+      const maxLabelWidth = domain.reduce((max4, v) => {
+        const w = measureText ? measureText(v, fontSize, fontWeight ?? 400).width : estimateTextWidth8(v, fontSize, fontWeight ?? 400);
+        return Math.max(max4, w);
+      }, 0);
+      const angleRad = labelAngle !== void 0 ? Math.abs(labelAngle) * Math.PI / 180 : 0;
+      const footprint = angleRad > 0 ? maxLabelWidth * Math.abs(Math.cos(angleRad)) : maxLabelWidth;
+      const minGap = fontSize * 0.5;
+      if (footprint + minGap > bandwidth) {
+        const maxFitting = Math.max(1, Math.floor(bandwidth / (footprint + minGap)));
+        const cap = explicitTickCount ?? Math.min(domain.length, Math.max(maxFitting, TICK_COUNTS[density]));
+        if (domain.length > cap) {
+          const step = Math.ceil(domain.length / cap);
+          selectedValues = domain.filter((_, i) => i % step === 0);
+        }
+      }
+    } else {
+      const maxTicks = explicitTickCount ?? TICK_COUNTS[density];
+      if ((explicitTickCount || density !== "full") && domain.length > maxTicks) {
+        const step = Math.ceil(domain.length / maxTicks);
+        selectedValues = domain.filter((_, i) => i % step === 0);
+      }
+    }
+  } else if (resolvedScale.type !== "band") {
+    const maxTicks = explicitTickCount ?? TICK_COUNTS[density];
+    if (domain.length > maxTicks) {
+      const step = Math.ceil(domain.length / maxTicks);
+      selectedValues = domain.filter((_, i) => i % step === 0);
+    }
   }
   const ticks2 = selectedValues.map((value2) => {
     const bandScale = resolvedScale.type === "band" ? scale : null;
@@ -8145,7 +8171,17 @@ function computeAxes(scales, chartArea, strategy, theme, measureText) {
     if (axisConfig?.values) {
       allTicks = resolveExplicitTicks(axisConfig.values, scales.x);
     } else if (!isContinuousX) {
-      allTicks = categoricalTicks(scales.x, xDensity);
+      const xBandwidth = scales.x.type === "band" ? scales.x.scale.bandwidth() : void 0;
+      allTicks = categoricalTicks(
+        scales.x,
+        xDensity,
+        "horizontal",
+        xBandwidth,
+        axisConfig?.labelAngle,
+        fontSize,
+        fontWeight,
+        measureText
+      );
     } else {
       allTicks = continuousTicks(scales.x, xDensity, xTargetCount);
     }
@@ -8213,7 +8249,7 @@ function computeAxes(scales, chartArea, strategy, theme, measureText) {
     if (axisConfig?.values) {
       allTicks = resolveExplicitTicks(axisConfig.values, scales.y);
     } else if (!isContinuousY) {
-      allTicks = categoricalTicks(scales.y, yDensity);
+      allTicks = categoricalTicks(scales.y, yDensity, "vertical");
     } else {
       allTicks = continuousTicks(scales.y, yDensity, yTargetCount);
     }
@@ -8270,7 +8306,7 @@ import {
   AXIS_TITLE_TRAILING_PAD,
   BREAKPOINT_COMPACT_MAX,
   computeChrome as computeChrome2,
-  estimateTextWidth as estimateTextWidth9,
+  estimateTextWidth as estimateTextWidth10,
   getAxisTitleOffset,
   HPAD_COMPACT_FRACTION,
   HPAD_COMPACT_MIN,
@@ -8285,7 +8321,7 @@ import {
 } from "@opendata-ai/openchart-core";
 
 // src/legend/wrap.ts
-import { COMPACT_WIDTH, estimateTextWidth as estimateTextWidth8 } from "@opendata-ai/openchart-core";
+import { COMPACT_WIDTH, estimateTextWidth as estimateTextWidth9 } from "@opendata-ai/openchart-core";
 var SWATCH_SIZE2 = 12;
 var SWATCH_GAP2 = 6;
 var ENTRY_GAP2 = 16;
@@ -8304,7 +8340,7 @@ function measureLegendWrap(entries, maxWidth, labelStyle, maxRows, entryGap = EN
   let fittingCount = entries.length;
   let fittingCountLocked = false;
   for (let i = 0; i < entries.length; i++) {
-    const labelWidth = estimateTextWidth8(
+    const labelWidth = estimateTextWidth9(
       entries[i].label,
       labelStyle.fontSize,
       labelStyle.fontWeight
@@ -8376,7 +8412,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     if (xField) {
       for (const row of spec.data) {
         const label = String(row[xField] ?? "");
-        const w = estimateTextWidth9(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        const w = estimateTextWidth10(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
     }
@@ -8406,7 +8442,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
         const label = String(row[colorField] ?? "");
         if (!seen.has(label)) {
           seen.add(label);
-          const w = estimateTextWidth9(label, 11, 600);
+          const w = estimateTextWidth10(label, 11, 600);
           if (w > maxLabelWidth) maxLabelWidth = w;
         }
       }
@@ -8426,7 +8462,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       const maxXStr = String(maxX);
       for (const ann of spec.annotations) {
         if (ann.type === "text" && String(ann.x) === maxXStr) {
-          const textWidth = estimateTextWidth9(ann.text, ann.fontSize ?? 11, ann.fontWeight ?? 600);
+          const textWidth = estimateTextWidth10(ann.text, ann.fontSize ?? 11, ann.fontWeight ?? 600);
           const dx = ann.offset?.dx ?? 0;
           const anchor = ann.anchor ?? "auto";
           const baseRightExtent = anchor === "left" ? textWidth : (
@@ -8450,7 +8486,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       let maxLabelWidth = 0;
       for (const row of spec.data) {
         const label = String(row[yField] ?? "");
-        const w = estimateTextWidth9(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        const w = estimateTextWidth10(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
       if (maxLabelWidth > 0) {
@@ -8486,7 +8522,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       }
       const negPrefix = spec.data.some((r) => Number(r[yField]) < 0) ? "-" : "";
       const labelEst = negPrefix + sampleLabel;
-      const labelWidth = estimateTextWidth9(
+      const labelWidth = estimateTextWidth10(
         labelEst,
         theme.fonts.sizes.axisTick,
         theme.fonts.weights.normal
@@ -9007,7 +9043,7 @@ function computeScales(spec, chartArea, data) {
 }
 
 // src/legend/compute.ts
-import { BRAND_RESERVE_WIDTH as BRAND_RESERVE_WIDTH2, COMPACT_WIDTH as COMPACT_WIDTH2, estimateTextWidth as estimateTextWidth10 } from "@opendata-ai/openchart-core";
+import { BRAND_RESERVE_WIDTH as BRAND_RESERVE_WIDTH2, COMPACT_WIDTH as COMPACT_WIDTH2, estimateTextWidth as estimateTextWidth11 } from "@opendata-ai/openchart-core";
 var LEGEND_PADDING = 8;
 var LEGEND_RIGHT_WIDTH = 120;
 var RIGHT_LEGEND_MAX_HEIGHT_RATIO = 0.4;
@@ -9123,7 +9159,7 @@ function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
   }
   if (resolvedPosition === "right" || resolvedPosition === "bottom-right") {
     const maxLabelWidth = Math.max(
-      ...entries.map((e) => estimateTextWidth10(e.label, labelStyle.fontSize, labelStyle.fontWeight))
+      ...entries.map((e) => estimateTextWidth11(e.label, labelStyle.fontSize, labelStyle.fontWeight))
     );
     const legendWidth = Math.min(
       LEGEND_RIGHT_WIDTH,
@@ -9183,7 +9219,7 @@ function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
     entries = truncateEntries(entries, fittingCount);
   }
   const totalWidth = entries.reduce((sum2, entry) => {
-    const labelWidth = estimateTextWidth10(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
+    const labelWidth = estimateTextWidth11(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
     return sum2 + SWATCH_SIZE2 + SWATCH_GAP2 + labelWidth + effectiveEntryGap;
   }, 0);
   const { rowCount } = measureLegendWrap(
@@ -9218,7 +9254,7 @@ import {
   adaptTheme as adaptTheme2,
   buildD3Formatter as buildD3Formatter5,
   computeChrome as computeChrome3,
-  estimateTextWidth as estimateTextWidth11,
+  estimateTextWidth as estimateTextWidth12,
   formatNumber as formatNumber3,
   resolveTheme as resolveTheme2
 } from "@opendata-ai/openchart-core";
@@ -9899,7 +9935,7 @@ function compileSankey(spec, options) {
     if (labelsLeft) continue;
     const labelX = (node.x1 ?? nodeWidth) + LABEL_GAP;
     const labelText = node.label ?? node.id;
-    const labelWidth = estimateTextWidth11(labelText, labelFontSize, labelFontWeight);
+    const labelWidth = estimateTextWidth12(labelText, labelFontSize, labelFontWeight);
     const overflow = labelX + labelWidth - rightEdge;
     if (overflow > maxOverflow) maxOverflow = overflow;
   }
@@ -10161,7 +10197,7 @@ function emptyLayout(area, chrome, theme, options, watermark) {
 }
 
 // src/tables/compile-table.ts
-import { computeChrome as computeChrome4, estimateTextWidth as estimateTextWidth12 } from "@opendata-ai/openchart-core";
+import { computeChrome as computeChrome4, estimateTextWidth as estimateTextWidth13 } from "@opendata-ai/openchart-core";
 
 // src/tables/bar-column.ts
 var NEGATIVE_BAR_COLOR = "#c44e52";
@@ -10576,13 +10612,13 @@ function estimateColumnWidth(col, data, fontSize) {
   if (col.image) return (col.image.width ?? 24) + PADDING;
   if (col.flag) return 60;
   const label = col.label ?? col.key;
-  const headerWidth = estimateTextWidth12(label, fontSize, 600) + PADDING;
+  const headerWidth = estimateTextWidth13(label, fontSize, 600) + PADDING;
   const sampleSize = Math.min(100, data.length);
   let maxDataWidth = 0;
   for (let i = 0; i < sampleSize; i++) {
     const val = data[i][col.key];
     const text = val == null ? "" : String(val);
-    const width = estimateTextWidth12(text, fontSize, 400) + PADDING;
+    const width = estimateTextWidth13(text, fontSize, 400) + PADDING;
     if (width > maxDataWidth) maxDataWidth = width;
   }
   return Math.max(MIN_WIDTH, headerWidth, maxDataWidth);
@@ -11544,7 +11580,12 @@ function compileLayer(spec, options) {
   for (const entry of mergedLegendEntries) {
     seenLabels.add(entry.label);
   }
-  for (const leaf of leaves) {
+  const indexedLeaves = leaves.map((leaf, i) => ({
+    leaf,
+    zIndex: leaf.zIndex ?? i
+  }));
+  indexedLeaves.sort((a, b) => a.zIndex - b.zIndex);
+  for (const { leaf } of indexedLeaves) {
     const leafLayout = compileChart(leaf, options);
     allMarks.push(...leafLayout.marks);
     for (const entry of leafLayout.legend.entries) {
@@ -11573,7 +11614,7 @@ function estimateYAxisLabelWidth(data, encoding, baseFontSize) {
     let maxWidth = 0;
     for (const row of data) {
       const label = String(row[yField] ?? "");
-      const w = estimateTextWidth13(label, baseFontSize, 400);
+      const w = estimateTextWidth14(label, baseFontSize, 400);
       if (w > maxWidth) maxWidth = w;
     }
     return maxWidth > 0 ? maxWidth + 10 : 40;
@@ -11602,7 +11643,7 @@ function estimateYAxisLabelWidth(data, encoding, baseFontSize) {
   }
   const hasNeg = data.some((r) => Number(r[yField]) < 0);
   const labelEst = (hasNeg ? "-" : "") + sampleLabel;
-  return estimateTextWidth13(labelEst, baseFontSize, 400) + 10;
+  return estimateTextWidth14(labelEst, baseFontSize, 400) + 10;
 }
 function compileLayerIndependent(leaves, layerSpec, options) {
   if (leaves.length > 2) {
@@ -11755,6 +11796,9 @@ function compileLayerIndependent(leaves, layerSpec, options) {
       mergedTooltips.set(key, value2);
     }
   }
+  const z0 = leaf0.zIndex ?? 0;
+  const z1 = leaf1.zIndex ?? 1;
+  const marks = z0 <= z1 ? [...adjustedMarks0, ...taggedMarks1] : [...taggedMarks1, ...adjustedMarks0];
   return {
     ...layout0,
     axes: {
@@ -11762,7 +11806,7 @@ function compileLayerIndependent(leaves, layerSpec, options) {
       y: layout0.axes.y,
       y2: y2Axis
     },
-    marks: [...adjustedMarks0, ...taggedMarks1],
+    marks,
     legend: {
       ...layout0.legend,
       entries: mergedLegendEntries