@opendata-ai/openchart-engine 6.25.2 → 6.25.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "6.25.2",
+  "version": "6.25.4",
   "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.2",
+    "@opendata-ai/openchart-core": "6.25.4",
     "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

@@ -237,14 +237,23 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
         },
       };
     }
-    if (bp.labels) {
-      chartSpec = {
-        ...chartSpec,
-        labels: {
-          ...chartSpec.labels,
-          ...(bp.labels as NormalizedChartSpec['labels']),
-        },
-      };
+    if (bp.labels !== undefined) {
+      if (typeof bp.labels === 'boolean') {
+        chartSpec = {
+          ...chartSpec,
+          labels: bp.labels
+            ? { density: 'auto', format: '', prefix: '' }
+            : { density: 'none', format: '', prefix: '' },
+        };
+      } else {
+        chartSpec = {
+          ...chartSpec,
+          labels: {
+            ...chartSpec.labels,
+            ...(bp.labels as NormalizedChartSpec['labels']),
+          },
+        };
+      }
     }
     if (bp.legend) {
       chartSpec = {

package/src/compiler/normalize.ts

@@ -17,6 +17,7 @@ import type {
   Encoding,
   FieldType,
   GraphSpec,
+  LabelSpec,
   LayerSpec,
   SankeySpec,
   TableSpec,
@@ -189,6 +190,21 @@ function normalizeAnnotations(annotations: Annotation[] | undefined): Annotation
   });
 }
 
+// ---------------------------------------------------------------------------
+// Label normalization
+// ---------------------------------------------------------------------------
+
+function normalizeLabels(labels?: LabelSpec): NormalizedChartSpec['labels'] {
+  if (labels === false) return { density: 'none', format: '', prefix: '' };
+  if (labels === true || labels === undefined) return { density: 'auto', format: '', prefix: '' };
+  return {
+    density: labels.density ?? 'auto',
+    format: labels.format ?? '',
+    prefix: labels.prefix ?? '',
+    offsets: labels.offsets,
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Spec-level normalization
 // ---------------------------------------------------------------------------
@@ -205,12 +221,7 @@ function normalizeChartSpec(spec: ChartSpec, warnings: string[]): NormalizedChar
     encoding,
     chrome: normalizeChrome(spec.chrome),
     annotations: normalizeAnnotations(spec.annotations),
-    labels: {
-      density: spec.labels?.density ?? 'auto',
-      format: spec.labels?.format ?? '',
-      prefix: spec.labels?.prefix ?? '',
-      offsets: spec.labels?.offsets,
-    },
+    labels: normalizeLabels(spec.labels),
     legend: spec.legend,
     responsive: spec.responsive ?? true,
     theme: spec.theme ?? {},

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);
     }