@opendata-ai/openchart-engine 6.25.1 → 6.25.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "6.25.1",
+  "version": "6.25.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": "6.25.1",
+    "@opendata-ai/openchart-core": "6.25.3",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/__tests__/axes.test.ts

@@ -809,3 +809,78 @@ describe('ticksOverlap with vertical orientation', () => {
     expect(ticksOverlap(ticks, fontSize, fontWeight, undefined, 'vertical')).toBe(false);
   });
 });
+
+// ---------------------------------------------------------------------------
+// Horizontal bar chart: y-axis category label regression
+// Mobile/compact viewports must show all category labels on horizontal bar
+// charts, regardless of axisLabelDensity. Thinning is only valid on x-axis
+// band scales where many category names can overlap horizontally.
+// ---------------------------------------------------------------------------
+
+describe('horizontal bar y-axis label thinning regression', () => {
+  const countries = [
+    'USA',
+    'Germany',
+    'France',
+    'Japan',
+    'UK',
+    'Canada',
+    'Australia',
+    'Netherlands',
+    'Sweden',
+    'Switzerland',
+  ];
+
+  const hBarSpec: NormalizedChartSpec = {
+    markType: 'bar',
+    markDef: { type: 'bar', orient: 'horizontal' },
+    data: countries.map((country, i) => ({ country, value: (i + 1) * 100 })),
+    encoding: {
+      x: { field: 'value', type: 'quantitative' },
+      y: { field: 'country', type: 'nominal' },
+    },
+    chrome: {},
+    annotations: [],
+    responsive: true,
+    theme: {},
+    darkMode: 'off',
+    labels: { density: 'auto', format: '' },
+  };
+
+  it('shows all category labels on y-axis at minimal density (mobile regression)', () => {
+    const scales = computeScales(hBarSpec, chartArea, hBarSpec.data);
+    const axes = computeAxes(scales, chartArea, minimalStrategy, theme);
+
+    // Every bar must have a label -- thinning to 3 on mobile was the bug
+    expect(axes.y!.ticks.length).toBe(countries.length);
+  });
+
+  it('shows all category labels on y-axis at reduced density', () => {
+    const reducedStrategy: LayoutStrategy = {
+      ...minimalStrategy,
+      axisLabelDensity: 'reduced',
+    };
+    const scales = computeScales(hBarSpec, chartArea, hBarSpec.data);
+    const axes = computeAxes(scales, chartArea, reducedStrategy, theme);
+
+    expect(axes.y!.ticks.length).toBe(countries.length);
+  });
+
+  it('still thins x-axis band scale labels at minimal density (column chart)', () => {
+    const vBarSpec: NormalizedChartSpec = {
+      ...hBarSpec,
+      markDef: { type: 'bar', orient: 'vertical' },
+      encoding: {
+        x: { field: 'country', type: 'nominal' },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+    const narrowArea = { x: 50, y: 50, width: 200, height: 300 };
+    const scales = computeScales(vBarSpec, narrowArea, vBarSpec.data);
+    const axes = computeAxes(scales, narrowArea, minimalStrategy, theme);
+
+    // X-axis band scale with 10 categories at minimal density on a narrow chart
+    // should thin -- showing all 10 on 200px would overlap
+    expect(axes.x!.ticks.length).toBeLessThan(countries.length);
+  });
+});

package/src/compile.ts

@@ -500,7 +500,15 @@ export function compileLayer(spec: LayerSpec, options: CompileOptions): ChartLay
     seenLabels.add(entry.label);
   }
 
-  for (const leaf of leaves) {
+  // Sort leaves by zIndex for render order while preserving original indices
+  // for axis assignment. Default zIndex is the array position.
+  const indexedLeaves = leaves.map((leaf, i) => ({
+    leaf,
+    zIndex: (leaf as ChartSpec).zIndex ?? i,
+  }));
+  indexedLeaves.sort((a, b) => a.zIndex - b.zIndex);
+
+  for (const { leaf } of indexedLeaves) {
     const leafLayout = compileChart(leaf as unknown, options);
 
     allMarks.push(...leafLayout.marks);
@@ -821,6 +829,14 @@ function compileLayerIndependent(
     }
   }
 
+  // Determine mark render order. By default, layer 0 paints first (behind),
+  // layer 1 paints second (on top). zIndex on the original leaf specs can
+  // reverse this so e.g. a line in layer 0 renders on top of bars in layer 1.
+  const z0 = leaf0.zIndex ?? 0;
+  const z1 = leaf1.zIndex ?? 1;
+  const marks =
+    z0 <= z1 ? [...adjustedMarks0, ...taggedMarks1] : [...taggedMarks1, ...adjustedMarks0];
+
   return {
     ...layout0,
     axes: {
@@ -828,7 +844,7 @@ function compileLayerIndependent(
       y: layout0.axes.y,
       y2: y2Axis,
     },
-    marks: [...adjustedMarks0, ...taggedMarks1],
+    marks,
     legend: {
       ...layout0.legend,
       entries: mergedLegendEntries,

package/src/layout/axes/ticks.ts

@@ -5,11 +5,12 @@
  * not from the chart area. Density thinning lives in ./thinning.ts.
  */
 
-import type { AxisLabelDensity, AxisTick } from '@opendata-ai/openchart-core';
+import type { AxisLabelDensity, AxisTick, MeasureTextFn } from '@opendata-ai/openchart-core';
 import {
   abbreviateNumber,
   buildD3Formatter,
   buildTemporalFormatter,
+  estimateTextWidth,
   formatDate,
   formatNumber,
 } from '@opendata-ai/openchart-core';
@@ -201,24 +202,78 @@ export function scaleSupportsTickCount(resolvedScale: ResolvedScale): boolean {
   return 'ticks' in scale && typeof scale.ticks === 'function';
 }
 
-/** Generate ticks for a band/point/ordinal scale. */
+/**
+ * Generate ticks for a band/point/ordinal scale.
+ *
+ * For horizontal x-axis band scales, thinning is geometry-aware: if
+ * `bandwidth` and `fontSize`/`fontWeight` are provided, labels are only
+ * thinned when the estimated label footprint (accounting for `labelAngle`)
+ * actually exceeds the bandwidth. When labels are rotated, their horizontal
+ * footprint shrinks by |cos(angle)|, so far fewer need to be removed.
+ * Falls back to a density-count cap when geometry info is unavailable.
+ */
 export function categoricalTicks(
   resolvedScale: ResolvedScale,
   density: AxisLabelDensity,
+  orientation: 'horizontal' | 'vertical' = 'horizontal',
+  bandwidth?: number,
+  labelAngle?: number,
+  fontSize?: number,
+  fontWeight?: number,
+  measureText?: MeasureTextFn,
 ): AxisTick[] {
   const scale = resolvedScale.scale as D3CategoricalScale;
   const domain: string[] = scale.domain();
   const explicitTickCount = resolvedScale.channel.axis?.tickCount;
-  const maxTicks = explicitTickCount ?? TICK_COUNTS[density];
 
-  // Band scales show all labels at full density but thin at reduced/minimal
-  // to prevent overlap on narrow containers (e.g. 17 bars on mobile).
   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((_: string, i: number) => i % step === 0);
+
+  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);
+      }
+    }
+  } else if (resolvedScale.type !== 'band') {
+    // Point/ordinal scales: thin by density count
+    const maxTicks = explicitTickCount ?? TICK_COUNTS[density];
+    if (domain.length > maxTicks) {
+      const step = Math.ceil(domain.length / maxTicks);
+      selectedValues = domain.filter((_: string, i: number) => i % step === 0);
+    }
   }
+  // vertical band scale (horizontal bar y-axis): always show all labels
 
   const ticks = selectedValues.map((value: string) => {
     // Band scales: use the center of the band

package/src/layout/axes.ts

@@ -259,7 +259,18 @@ export function computeAxes(
     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 as ScaleBand<string>).bandwidth() : undefined;
+      allTicks = categoricalTicks(
+        scales.x,
+        xDensity,
+        'horizontal',
+        xBandwidth,
+        axisConfig?.labelAngle,
+        fontSize,
+        fontWeight,
+        measureText,
+      );
     } else {
       allTicks = continuousTicks(scales.x, xDensity, xTargetCount);
     }
@@ -351,7 +362,7 @@ export function computeAxes(
     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);
     }