@opendata-ai/openchart-engine 7.8.0 → 7.9.1

package/package.json

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

package/src/__tests__/__snapshots__/compile-snapshot.test.ts.snap

@@ -224,6 +224,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       },
       "fill": "#06b6d4",
       "height": 57.45223880597016,
+      "key": "|A",
       "label": {
         "connector": undefined,
         "style": {
@@ -258,6 +259,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       },
       "fill": "#06b6d4",
       "height": 57.45223880597016,
+      "key": "|B",
       "label": {
         "connector": undefined,
         "style": {
@@ -292,6 +294,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       },
       "fill": "#06b6d4",
       "height": 57.45223880597016,
+      "key": "|C",
       "label": {
         "connector": undefined,
         "style": {
@@ -1037,8 +1040,14 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "y": 105.2,
         },
       ],
+      "interpolate": "monotone",
+      "key": "US",
       "opacity": undefined,
       "path": "M47,334.25L651.761,105.2",
+      "pointKeys": [
+        "2020-01-01",
+        "2021-01-01",
+      ],
       "points": [
         {
           "x": 47,
@@ -1129,8 +1138,14 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "y": 143.375,
         },
       ],
+      "interpolate": "monotone",
+      "key": "UK",
       "opacity": undefined,
       "path": "M47,296.075L651.761,143.375",
+      "pointKeys": [
+        "2020-01-01",
+        "2021-01-01",
+      ],
       "points": [
         {
           "x": 47,
@@ -1221,8 +1236,14 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "y": 242.62999999999997,
         },
       ],
+      "interpolate": "monotone",
+      "key": "FR",
       "opacity": undefined,
       "path": "M47,349.52L651.761,242.63",
+      "pointKeys": [
+        "2020-01-01",
+        "2021-01-01",
+      ],
       "points": [
         {
           "x": 47,
@@ -1313,8 +1334,14 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "y": 196.82,
         },
       ],
+      "interpolate": "monotone",
+      "key": "DE",
       "opacity": undefined,
       "path": "M47,318.98L651.761,196.82",
+      "pointKeys": [
+        "2020-01-01",
+        "2021-01-01",
+      ],
       "points": [
         {
           "x": 47,
@@ -1804,6 +1831,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         "type": "linear",
       },
       "height": 101.27142857142857,
+      "key": "|A",
       "label": {
         "connector": undefined,
         "style": {
@@ -1849,6 +1877,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         "type": "linear",
       },
       "height": 185.6642857142857,
+      "key": "|B",
       "label": {
         "connector": undefined,
         "style": {
@@ -1894,6 +1923,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         "type": "linear",
       },
       "height": 236.29999999999998,
+      "key": "|C",
       "label": {
         "connector": undefined,
         "style": {
@@ -1939,6 +1969,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         "type": "linear",
       },
       "height": 151.90714285714287,
+      "key": "|D",
       "label": {
         "connector": undefined,
         "style": {

package/src/__tests__/axes.test.ts

@@ -482,6 +482,82 @@ describe('text-aware tick density', () => {
     expect(axes.x!.ticks.length).toBe(categories.length);
   });
 
+  it('keeps narrow band labels when one label is much wider (no global decimation)', () => {
+    // Regression: 5 rotated year labels where "2026 (to wk 17)" is much wider
+    // than the others. The old every-other thinning dropped BOTH "2023" and
+    // "2025" even though the narrow labels had ample room — a single wide label
+    // forced global decimation. Greedy per-label retention keeps the narrow
+    // ones; only the neighbor immediately crowded by the wide final label drops.
+    const categories = ['2022', '2023', '2024', '2025', '2026 (to wk 17)'];
+    const barSpec: NormalizedChartSpec = {
+      ...lineSpec,
+      markType: 'bar',
+      markDef: { type: 'bar', orient: 'vertical' },
+      data: categories.map((cat, i) => ({ cat, val: (i + 1) * 10 })),
+      encoding: {
+        x: { field: 'cat', type: 'nominal' },
+        y: { field: 'val', type: 'quantitative' },
+      },
+    };
+
+    // measureText reports the wide label as genuinely wide and the year labels
+    // as narrow, matching real glyph metrics.
+    const measure = (text: string) => ({
+      width: text.length * 8,
+      height: 12,
+    });
+
+    // Narrow area (280px) forces -45° rotation. The middle narrow labels survive
+    // — old every-other thinning would have dropped 2023 too.
+    const narrowArea = { x: 50, y: 50, width: 280, height: 300 };
+    const narrowScales = computeScales(barSpec, narrowArea, barSpec.data);
+    const narrowAxes = computeAxes(narrowScales, narrowArea, fullStrategy, theme, measure);
+    const narrowKept = narrowAxes.x!.ticks.map((t) => t.label);
+    expect(narrowAxes.x!.tickAngle).toBe(-45);
+    expect(narrowKept).toContain('2023');
+    expect(narrowKept).toContain('2024');
+    expect(narrowKept).toContain('2026 (to wk 17)');
+
+    // Wider area (500px) has room for every label — none are thinned.
+    const wideArea = { x: 50, y: 50, width: 500, height: 300 };
+    const wideScales = computeScales(barSpec, wideArea, barSpec.data);
+    const wideAxes = computeAxes(wideScales, wideArea, fullStrategy, theme, measure);
+    expect(wideAxes.x!.ticks.length).toBe(categories.length);
+  });
+
+  it('drops every neighbor a very wide final label overlaps, not just the nearest', () => {
+    // A final category long enough to project across several bands at -45° must
+    // clear ALL kept labels its footprint overlaps. The last-label protection
+    // pass drops each colliding neighbor, not only the immediate one — otherwise
+    // an earlier kept label still overlaps the forced final label.
+    const categories = ['A', 'B', 'C', 'D', 'This Is A Very Long Final Category Name'];
+    const barSpec: NormalizedChartSpec = {
+      ...lineSpec,
+      markType: 'bar',
+      markDef: { type: 'bar', orient: 'vertical' },
+      data: categories.map((cat, i) => ({ cat, val: (i + 1) * 10 })),
+      encoding: {
+        x: { field: 'cat', type: 'nominal' },
+        y: { field: 'val', type: 'quantitative' },
+      },
+    };
+    const measure = (text: string) => ({ width: text.length * 8, height: 12 });
+    const narrowArea = { x: 50, y: 50, width: 260, height: 300 };
+    const scales = computeScales(barSpec, narrowArea, barSpec.data);
+    const axes = computeAxes(scales, narrowArea, fullStrategy, theme, measure);
+    expect(axes.x!.tickAngle).toBe(-45);
+
+    const kept = axes.x!.ticks.map((t) => t.label);
+    // The forced final label is always retained.
+    expect(kept).toContain('This Is A Very Long Final Category Name');
+    // Every middle label the wide final label's footprint overlaps is dropped —
+    // not just the nearest one. Before the fix, "B" and "C" would survive and
+    // overlap the final label; only "D" (the immediate neighbor) was dropped.
+    expect(kept).not.toContain('B');
+    expect(kept).not.toContain('C');
+    expect(kept).not.toContain('D');
+  });
+
   it('y-axis gridlines match ticks so every gridline has a label', () => {
     // Force thinning by using a measureText that reports wide labels
     const wideMeasure = () => ({ width: 200, height: 12 });

package/src/__tests__/compile-animation.test.ts

@@ -50,11 +50,11 @@ describe('compileChart with animation', () => {
     const layout = compileChart(spec, { width: 600, height: 400 });
 
     expect(layout.animation).toBeDefined();
-    expect(layout.animation!.enabled).toBe(true);
-    expect(layout.animation!.duration).toBe(500);
-    expect(layout.animation!.ease).toBe('smooth');
-    expect(layout.animation!.staggerDelay).toBe(80);
-    expect(layout.animation!.staggerOrder).toBe('index');
+    expect(layout.animation!.enter).toBeDefined();
+    expect(layout.animation!.enter!.duration).toBe(500);
+    expect(layout.animation!.enter!.ease).toBe('smooth');
+    expect(layout.animation!.enter!.staggerDelay).toBe(80);
+    expect(layout.animation!.enter!.staggerOrder).toBe('index');
     expect(layout.animation!.annotationDelay).toBe(200);
   });
 
@@ -80,8 +80,8 @@ describe('compileChart with animation', () => {
     const layout = compileChart(spec, { width: 600, height: 400 });
 
     expect(layout.animation).toBeDefined();
-    expect(layout.animation!.duration).toBe(800);
-    expect(layout.animation!.ease).toBe('smooth');
+    expect(layout.animation!.enter!.duration).toBe(800);
+    expect(layout.animation!.enter!.ease).toBe('smooth');
     expect(layout.animation!.annotationDelay).toBe(500);
   });
 
@@ -152,7 +152,7 @@ describe('compileChart with animation', () => {
     } as ChartSpec;
     const layoutCompact = compileChart(specNoAnim, { width: 350, height: 400 });
     expect(layoutCompact.animation).toBeDefined();
-    expect(layoutCompact.animation!.enabled).toBe(true);
+    expect(layoutCompact.animation!.enter).toBeDefined();
 
     // At full width (> 700), no override applies, so no animation
     const layoutFull = compileChart(specNoAnim, { width: 800, height: 400 });

package/src/__tests__/compile-chart.test.ts

@@ -943,7 +943,7 @@ describe('compileChart', () => {
     };
     const layout = compileChart(spec, { width: 320, height: 200 });
     expect(layout.display).toBe('sparkline');
-    expect(layout.animation?.enabled).toBe(true);
+    expect(layout.animation?.enter).toBeDefined();
   });
 
   it('breakpoint chrome wins when top-level is sparkline', () => {
@@ -1012,8 +1012,8 @@ describe('compileChart', () => {
       { ...lineSpec, display: 'sparkline' as const, animation: true },
       { width: 400, height: 80 },
     );
-    expect(layout.animation?.enabled).toBe(true);
-    expect(layout.animation?.duration).toBe(1100);
+    expect(layout.animation?.enter).toBeDefined();
+    expect(layout.animation?.enter?.duration).toBe(1100);
   });
 
   it('sparkline + animation: { enter: { duration: 500 } } respects user duration', () => {
@@ -1025,12 +1025,12 @@ describe('compileChart', () => {
       },
       { width: 400, height: 80 },
     );
-    expect(layout.animation?.duration).toBe(500);
+    expect(layout.animation?.enter?.duration).toBe(500);
   });
 
   it('full mode + animation: true uses default 500ms (sparkline bump does not leak)', () => {
     const layout = compileChart({ ...lineSpec, animation: true }, { width: 600, height: 400 });
-    expect(layout.animation?.duration).toBe(500);
+    expect(layout.animation?.enter?.duration).toBe(500);
   });
 
   // ---------------------------------------------------------------------------

package/src/__tests__/dimensions.test.ts

@@ -162,7 +162,65 @@ describe('computeDimensions', () => {
     expect(dimsWithTitle.margins.left - dimsWithoutTitle.margins.left).toBeGreaterThanOrEqual(11);
   });
 
-  it('y-axis title margin scales with tick label width', () => {
+  it('y-axis title margin scales with tick label width (gutter ticks)', () => {
+    // Bar chart: y-tick labels sit in a left gutter, so the title must clear
+    // them. Wider tick labels ("2,000,000" vs "9") push the title further out.
+    const barBase: NormalizedChartSpec = {
+      ...baseSpec,
+      markType: 'bar',
+      markDef: { type: 'bar' },
+    };
+    const smallValues: NormalizedChartSpec = {
+      ...barBase,
+      data: [
+        { cat: 'a', value: 5 },
+        { cat: 'b', value: 9 },
+      ],
+      encoding: {
+        x: { field: 'cat', type: 'nominal' },
+        y: { field: 'value', type: 'quantitative', axis: { title: 'Count' } },
+      },
+    };
+    const largeValues: NormalizedChartSpec = {
+      ...barBase,
+      data: [
+        { cat: 'a', value: 1_500_000 },
+        { cat: 'b', value: 2_000_000 },
+      ],
+      encoding: {
+        x: { field: 'cat', type: 'nominal' },
+        y: {
+          field: 'value',
+          type: 'quantitative',
+          axis: { title: 'Revenue ($)', format: ',.0f' },
+        },
+      },
+    };
+
+    const dimsSmall = computeDimensions(
+      smallValues,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+    const dimsLarge = computeDimensions(
+      largeValues,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+
+    // Explicit format ",.0f" on large values produces "2,000,000" tick labels
+    // that are much wider than the abbreviated "0.0" from small values,
+    // so the y-axis title margin should grow to keep clearance
+    expect(dimsLarge.margins.left).toBeGreaterThan(dimsSmall.margins.left);
+  });
+
+  it('y-axis title margin ignores tick label width for inline ticks (line)', () => {
+    // Line chart with continuous y: tick labels render inline (above their
+    // gridline inside the plot), not in a left gutter. The title only needs to
+    // clear the chart edge, so wide tick values must NOT inflate the margin —
+    // that dead padding is the exact bug this guards against.
     const smallValues: NormalizedChartSpec = {
       ...baseSpec,
       data: [
@@ -203,10 +261,63 @@ describe('computeDimensions', () => {
       lightTheme,
     );
 
-    // Explicit format ",.0f" on large values produces "2,000,000" tick labels
-    // that are much wider than the abbreviated "0.0" from small values,
-    // so the y-axis title margin should grow to keep clearance
-    expect(dimsLarge.margins.left).toBeGreaterThan(dimsSmall.margins.left);
+    expect(dimsLarge.margins.left).toBe(dimsSmall.margins.left);
+  });
+
+  it('reserves gutter margin when an explicit band scale forces gutter ticks (line)', () => {
+    // A line chart's y-tick position is decided by the RESOLVED scale type, not
+    // the field type. An explicit `scale.type: 'band'` on a quantitative field
+    // resolves to a categorical (gutter) axis, so computeAxes draws a gutter
+    // title. The margin reservation must agree — reserving the inline (narrow)
+    // margin here would let the title collide with the gutter tick labels.
+    const bandScaleLine: NormalizedChartSpec = {
+      ...baseSpec,
+      data: [
+        { date: '2020-01-01', value: 1_500_000 },
+        { date: '2021-01-01', value: 2_000_000 },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: {
+          field: 'value',
+          type: 'quantitative',
+          scale: { type: 'band' },
+          axis: { title: 'Revenue ($)', format: ',.0f' },
+        },
+      },
+    };
+    const inlineLine: NormalizedChartSpec = {
+      ...baseSpec,
+      data: [
+        { date: '2020-01-01', value: 1_500_000 },
+        { date: '2021-01-01', value: 2_000_000 },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: {
+          field: 'value',
+          type: 'quantitative',
+          axis: { title: 'Revenue ($)', format: ',.0f' },
+        },
+      },
+    };
+
+    const bandDims = computeDimensions(
+      bandScaleLine,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+    const inlineDims = computeDimensions(
+      inlineLine,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+
+    // The gutter (band-scale) reservation includes the wide tick-label width, so
+    // it must exceed the inline reservation that omits it.
+    expect(bandDims.margins.left).toBeGreaterThan(inlineDims.margins.left);
   });
 
   it('applies dark mode theme adaptation', () => {