@opendata-ai/openchart-engine 7.1.2 → 7.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "7.1.2",
+  "version": "7.1.3",
   "description": "Headless compiler for openchart: spec validation, data compilation, scales, and layout",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -48,7 +48,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "7.1.2",
+    "@opendata-ai/openchart-core": "7.1.3",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/layout/axes/ticks.ts

@@ -5,17 +5,11 @@
  * not from the chart area. Density thinning lives in ./thinning.ts.
  */
 
-import type {
-  AxisLabelDensity,
-  AxisTick,
-  DataRow,
-  MeasureTextFn,
-} from '@opendata-ai/openchart-core';
+import type { AxisLabelDensity, AxisTick, DataRow } from '@opendata-ai/openchart-core';
 import {
   abbreviateNumber,
   buildD3Formatter,
   buildTemporalFormatter,
-  estimateTextWidth,
   formatDate,
   formatNumber,
 } from '@opendata-ai/openchart-core';
@@ -249,11 +243,6 @@ export function categoricalTicks(
   resolvedScale: ResolvedScale,
   density: AxisLabelDensity,
   orientation: 'horizontal' | 'vertical' = 'horizontal',
-  bandwidth?: number,
-  labelAngle?: number,
-  fontSize?: number,
-  fontWeight?: number,
-  measureText?: MeasureTextFn,
   subtitleContext?: { data: DataRow[]; fieldName: string; labelField: string },
 ): AxisTick[] {
   const scale = resolvedScale.scale as D3CategoricalScale;
@@ -264,41 +253,13 @@ export function categoricalTicks(
   let selectedValues = domain;
 
   if (resolvedScale.type === 'band' && orientation === 'horizontal') {
-    // Geometry-based thinning: check whether labels actually fit within the
-    // bandwidth before deciding to thin. Rotated labels have a smaller
-    // horizontal footprint (width * |cos(angle)|), so they can be much denser.
-    if (bandwidth !== undefined && bandwidth > 0 && fontSize !== undefined) {
-      const maxLabelWidth = domain.reduce((max, v) => {
-        const w = measureText
-          ? measureText(v, fontSize, fontWeight ?? 400).width
-          : estimateTextWidth(v, fontSize, fontWeight ?? 400);
-        return Math.max(max, w);
-      }, 0);
-
-      // At non-zero angles, horizontal footprint per label = width * |cos(angle)|
-      const angleRad = labelAngle !== undefined ? (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) {
-        // Labels don't fit -- thin proportionally to bandwidth, not density tier
-        const maxFitting = Math.max(1, Math.floor(bandwidth / (footprint + minGap)));
-        // Still respect explicit tickCount as an upper bound
-        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((_: string, i: number) => i % step === 0);
-        }
-      }
-      // else: labels fit at this bandwidth -- show all of them
-    } else {
-      // No geometry info: fall back to density-count cap (original behavior)
-      const maxTicks = explicitTickCount ?? TICK_COUNTS[density];
-      if ((explicitTickCount || density !== 'full') && domain.length > maxTicks) {
-        const step = Math.ceil(domain.length / maxTicks);
-        selectedValues = domain.filter((_: string, i: number) => i % step === 0);
-      }
+    // Horizontal band scales delegate thinning to the caller (computeAxes)
+    // which knows the effective label angle after auto-rotation. Only apply
+    // an explicit tickCount cap here; density-based thinning happens
+    // downstream in thinBandTicksIfNeeded where rotation is accounted for.
+    if (explicitTickCount && domain.length > explicitTickCount) {
+      const step = Math.ceil(domain.length / explicitTickCount);
+      selectedValues = domain.filter((_: string, i: number) => i % step === 0);
     }
   } else if (resolvedScale.type !== 'band') {
     // Point/ordinal scales: thin by density count

package/src/layout/axes.ts

@@ -190,6 +190,60 @@ function fitContinuousTicks(
   return thinTicksUntilFit(fallback, fontSize, fontWeight, measureText, orientation);
 }
 
+/**
+ * Check whether band-scale tick labels overlap at a given rotation angle,
+ * using position-based detection. Rotated labels extend diagonally past
+ * their band boundaries without colliding, so we check actual footprint
+ * along the axis rather than comparing against bandwidth.
+ */
+function bandTicksOverlapAtAngle(
+  ticks: AxisTick[],
+  angleDeg: number,
+  fontSize: number,
+  fontWeight: number,
+  measureText?: MeasureTextFn,
+): boolean {
+  if (ticks.length < 2) return false;
+  const angleRad = (Math.abs(angleDeg) * Math.PI) / 180;
+  const cosA = angleRad > 0 ? Math.abs(Math.cos(angleRad)) : 1;
+  const minGap = fontSize * 0.5;
+  for (let i = 0; i < ticks.length - 1; i++) {
+    const aWidth = measureLabel(ticks[i].label, fontSize, fontWeight, measureText) * cosA;
+    const bWidth = measureLabel(ticks[i + 1].label, fontSize, fontWeight, measureText) * cosA;
+    const aRight = ticks[i].position + aWidth / 2;
+    const bLeft = ticks[i + 1].position - bWidth / 2;
+    if (aRight + minGap > bLeft) return true;
+  }
+  return false;
+}
+
+/**
+ * Thin band-scale tick labels only when they actually overlap at their
+ * effective angle. Most grouped bar charts keep every label even at -45°.
+ * Only extremely dense charts (50+ categories) will thin.
+ */
+function thinBandTicksIfNeeded(
+  ticks: AxisTick[],
+  angleDeg: number,
+  fontSize: number,
+  fontWeight: number,
+  measureText?: MeasureTextFn,
+): AxisTick[] {
+  if (!bandTicksOverlapAtAngle(ticks, angleDeg, fontSize, fontWeight, measureText)) return ticks;
+
+  let current = ticks;
+  while (current.length > 2) {
+    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 (!bandTicksOverlapAtAngle(current, angleDeg, fontSize, fontWeight, measureText)) break;
+  }
+  return current;
+}
+
 // ---------------------------------------------------------------------------
 // Public API
 // ---------------------------------------------------------------------------
@@ -291,18 +345,9 @@ export function computeAxes(
     if (axisConfig?.values) {
       allTicks = resolveExplicitTicks(axisConfig.values, scales.x);
     } else if (!isContinuousX) {
-      const xBandwidth =
-        scales.x.type === 'band' ? (scales.x.scale as ScaleBand<string>).bandwidth() : undefined;
-      allTicks = categoricalTicks(
-        scales.x,
-        xDensity,
-        'horizontal',
-        xBandwidth,
-        axisConfig?.labelAngle,
-        fontSize,
-        fontWeight,
-        measureText,
-      );
+      // For band scales, generate all ticks first (no thinning). Rotation and
+      // thinning are resolved below once we know the effective label angle.
+      allTicks = categoricalTicks(scales.x, xDensity, 'horizontal');
     } else {
       allTicks = continuousTicks(scales.x, xDensity, xTargetCount);
     }
@@ -314,18 +359,32 @@ export function computeAxes(
       major: true,
     }));
 
-    // Thin tick labels to prevent overlap (skip for band scales which use
-    // auto-rotation, and when the user set explicit tick values).
-    // When tickCount is set, we still thin if D3 overshot the requested count
-    // (common with log scales where ticks(4) can return 26 values).
+    // Determine rotation before thinning so we know the effective label
+    // footprint. Band scales auto-rotate when horizontal labels don't fit.
+    let tickAngle = axisConfig?.labelAngle;
+    if (tickAngle === undefined && scales.x.type === 'band' && allTicks.length > 1) {
+      const bandwidth = (scales.x.scale as ScaleBand<string>).bandwidth();
+      let maxLabelWidth = 0;
+      for (const t of allTicks) {
+        const w = measureLabel(t.label, fontSize, fontWeight, measureText);
+        if (w > maxLabelWidth) maxLabelWidth = w;
+      }
+      if (maxLabelWidth > bandwidth * 0.85) {
+        tickAngle = -45;
+      }
+    }
+
+    // Thin tick labels to prevent overlap (skip for explicit tick values).
     const hasExplicitValues = !!axisConfig?.values;
-    const shouldThin = scales.x.type !== 'band' && !hasExplicitValues;
     let ticks: AxisTick[];
-    if (!shouldThin) {
+    if (hasExplicitValues) {
       ticks = allTicks;
+    } else if (scales.x.type === 'band') {
+      // Band scales: thin only when labels actually overlap at their
+      // effective angle. After rotation, most charts have room for every label.
+      const effectiveAngle = tickAngle ?? 0;
+      ticks = thinBandTicksIfNeeded(allTicks, effectiveAngle, fontSize, fontWeight, measureText);
     } else if (isContinuousX) {
-      // Continuous x-axis: re-request ticks at a lower count on overlap so
-      // time-scale quartile/monthly jumps don't leave a too-dense axis.
       ticks = fitContinuousTicks(
         scales.x,
         allTicks,
@@ -340,22 +399,6 @@ export function computeAxes(
       ticks = thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText);
     }
 
-    // Auto-rotate labels when band scale labels would overlap.
-    // Uses max label width (not average) since one long label is enough to overlap.
-    let tickAngle = axisConfig?.labelAngle;
-    if (tickAngle === undefined && scales.x.type === 'band' && ticks.length > 1) {
-      const bandwidth = (scales.x.scale as ScaleBand<string>).bandwidth();
-      let maxLabelWidth = 0;
-      for (const t of ticks) {
-        const w = measureLabel(t.label, fontSize, fontWeight, measureText);
-        if (w > maxLabelWidth) maxLabelWidth = w;
-      }
-      // If the widest label exceeds 85% of the bandwidth, rotate to avoid overlap
-      if (maxLabelWidth > bandwidth * 0.85) {
-        tickAngle = -45;
-      }
-    }
-
     const axisTitle = axisConfig?.title;
     const xLabelColor = axisConfig?.labelColor;
     // X-axis defaults to gutter (no inline mode is sensible for the x axis
@@ -404,11 +447,6 @@ export function computeAxes(
         scales.y,
         yDensity,
         'vertical',
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
         yFieldName && yLabelField && dataContext
           ? { data: dataContext.data, fieldName: yFieldName, labelField: yLabelField }
           : undefined,