@opendata-ai/openchart-engine 2.12.1 → 2.13.0

package/package.json

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

package/src/__tests__/axes.test.ts

@@ -455,6 +455,38 @@ describe('text-aware tick density', () => {
     expect(axes.x!.ticks.length).toBe(categories.length);
   });
 
+  it('gridlines survive tick thinning', () => {
+    // Force thinning by using a measureText that reports wide labels
+    const wideMeasure = () => ({ width: 200, height: 12 });
+    const scales = computeScales(lineSpec, chartArea, lineSpec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme, wideMeasure);
+
+    // Ticks should be thinned (fewer labels) but gridlines should remain at
+    // all original tick positions
+    expect(axes.y!.gridlines.length).toBeGreaterThanOrEqual(axes.y!.ticks.length);
+    // With wide labels forcing thinning, gridlines should outnumber ticks
+    if (axes.y!.ticks.length < axes.y!.gridlines.length) {
+      // Gridlines retained positions that ticks lost — the fix is working
+      expect(axes.y!.gridlines.length).toBeGreaterThan(axes.y!.ticks.length);
+    }
+  });
+
+  it('x-axis gridlines survive tick thinning when grid is enabled', () => {
+    const specWithGrid: NormalizedChartSpec = {
+      ...lineSpec,
+      encoding: {
+        x: { field: 'date', type: 'temporal', axis: { grid: true } },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+
+    const wideMeasure = () => ({ width: 200, height: 12 });
+    const scales = computeScales(specWithGrid, chartArea, specWithGrid.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme, wideMeasure);
+
+    expect(axes.x!.gridlines.length).toBeGreaterThanOrEqual(axes.x!.ticks.length);
+  });
+
   it('passes measureText to auto-rotation detection', () => {
     const barSpec: NormalizedChartSpec = {
       ...lineSpec,

package/src/layout/axes.ts

@@ -173,13 +173,7 @@ export function thinTicksUntilFit(
 // ---------------------------------------------------------------------------
 
 /** Generate ticks for a continuous scale (linear, time, log). */
-function continuousTicks(
-  resolvedScale: ResolvedScale,
-  density: AxisLabelDensity,
-  fontSize: number,
-  fontWeight: number,
-  measureText?: MeasureTextFn,
-): AxisTick[] {
+function continuousTicks(resolvedScale: ResolvedScale, density: AxisLabelDensity): AxisTick[] {
   const scale = resolvedScale.scale as D3ContinuousScale;
   const explicitCount = resolvedScale.channel.axis?.tickCount;
   const count = explicitCount ?? TICK_COUNTS[density];
@@ -191,20 +185,11 @@ function continuousTicks(
     label: formatTickLabel(value, resolvedScale),
   }));
 
-  // Respect explicit tickCount: user asked for this many, don't override
-  if (explicitCount) return ticks;
-
-  return thinTicksUntilFit(ticks, fontSize, fontWeight, measureText);
+  return ticks;
 }
 
 /** Generate ticks for a band/point/ordinal scale. */
-function categoricalTicks(
-  resolvedScale: ResolvedScale,
-  density: AxisLabelDensity,
-  fontSize: number,
-  fontWeight: number,
-  measureText?: MeasureTextFn,
-): AxisTick[] {
+function categoricalTicks(resolvedScale: ResolvedScale, density: AxisLabelDensity): AxisTick[] {
   const scale = resolvedScale.scale as D3CategoricalScale;
   const domain: string[] = scale.domain();
   const explicitTickCount = resolvedScale.channel.axis?.tickCount;
@@ -232,11 +217,6 @@ function categoricalTicks(
     };
   });
 
-  // For non-band scales without explicit tickCount, thin based on label width
-  if (resolvedScale.type !== 'band' && !explicitTickCount) {
-    return thinTicksUntilFit(ticks, fontSize, fontWeight, measureText);
-  }
-
   return ticks;
 }
 
@@ -328,16 +308,25 @@ export function computeAxes(
   const { fontWeight } = tickLabelStyle;
 
   if (scales.x) {
-    const ticks =
+    const allTicks =
       scales.x.type === 'band' || scales.x.type === 'point' || scales.x.type === 'ordinal'
-        ? categoricalTicks(scales.x, xDensity, fontSize, fontWeight, measureText)
-        : continuousTicks(scales.x, xDensity, fontSize, fontWeight, measureText);
+        ? categoricalTicks(scales.x, xDensity)
+        : continuousTicks(scales.x, xDensity);
 
-    const gridlines: Gridline[] = ticks.map((t) => ({
+    // Gridlines use the full tick set so they remain visible even when labels
+    // are thinned to prevent overlap.
+    const gridlines: Gridline[] = allTicks.map((t) => ({
       position: t.position,
       major: true,
     }));
 
+    // Thin tick labels to prevent overlap (skip for band scales which use
+    // auto-rotation, and when the user set an explicit tickCount).
+    const shouldThin = scales.x.type !== 'band' && !scales.x.channel.axis?.tickCount;
+    const ticks = shouldThin
+      ? thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText)
+      : allTicks;
+
     // 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 = scales.x.channel.axis?.tickAngle;
@@ -367,16 +356,23 @@ export function computeAxes(
   }
 
   if (scales.y) {
-    const ticks =
+    const allTicks =
       scales.y.type === 'band' || scales.y.type === 'point' || scales.y.type === 'ordinal'
-        ? categoricalTicks(scales.y, yDensity, fontSize, fontWeight, measureText)
-        : continuousTicks(scales.y, yDensity, fontSize, fontWeight, measureText);
+        ? categoricalTicks(scales.y, yDensity)
+        : continuousTicks(scales.y, yDensity);
 
-    const gridlines: Gridline[] = ticks.map((t) => ({
+    // Gridlines use the full tick set (label thinning shouldn't remove gridlines).
+    const gridlines: Gridline[] = allTicks.map((t) => ({
       position: t.position,
       major: true,
     }));
 
+    // Thin tick labels to prevent overlap (skip for band scales and explicit tickCount).
+    const shouldThin = scales.y.type !== 'band' && !scales.y.channel.axis?.tickCount;
+    const ticks = shouldThin
+      ? thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText)
+      : allTicks;
+
     result.y = {
       ticks,
       // Y-axis gridlines are shown by default (standard editorial practice)