@opendata-ai/openchart-engine 7.9.1 → 7.9.2

package/package.json

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

package/src/__tests__/axes.test.ts

@@ -525,6 +525,38 @@ describe('text-aware tick density', () => {
     expect(wideAxes.x!.ticks.length).toBe(categories.length);
   });
 
+  it('keeps a short neighbor that a wide final label only barely reaches', () => {
+    // Regression (mobile): with a short label whose footprint clears the wide
+    // final label by a couple pixels — less than the comfort minGap but with no
+    // real overlap — the last-label protection must NOT drop it. At the phone
+    // width where "2026 (to wk 17)" sits ~2px from "2025", dropping "2025" to
+    // seat the wide endpoint reads as arbitrary. The protection pass keys on
+    // true pixel overlap, not the comfort gap, so "2025" survives.
+    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: [122, 47, 266, 2000, 1600][i] })),
+      encoding: {
+        x: { field: 'cat', type: 'nominal' },
+        y: { field: 'val', type: 'quantitative' },
+      },
+    };
+
+    // Uses default (real) text measurement. At 300px the band centers sit ~56px
+    // apart; the year labels project to ~17px at -45° and the wide label to
+    // ~54px, leaving "2025" and "2026 (to wk 17)" ~2px apart — a near miss.
+    const area = { x: 60, y: 50, width: 300, height: 300 };
+    const scales = computeScales(barSpec, area, barSpec.data);
+    const axes = computeAxes(scales, area, fullStrategy, theme);
+    expect(axes.x!.tickAngle).toBe(-45);
+    const kept = axes.x!.ticks.map((t) => t.label);
+    expect(kept).toContain('2025');
+    expect(kept).toContain('2026 (to wk 17)');
+    expect(kept.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

package/src/__tests__/dimensions.test.ts

@@ -829,4 +829,45 @@ describe('bottom legend placement (defect-3 regression)', () => {
       );
     });
   });
+
+  it('keeps the inline y-axis title inside the container on narrow, large-font charts', () => {
+    // Regression (mobile): the inline y-tick fix reserved a narrow left margin,
+    // but computeAxes still positioned the rotated y-title with the GUTTER
+    // offset (tick-label width + viewport floor). On a phone at deck-scale
+    // fonts that pushed the title's rotation center to x ≈ -1, clipping the
+    // whole title off the left edge. The title offset now honors the inline
+    // flag, so titlePosition.x stays a comfortable distance inside x = 0.
+    const spec = {
+      mark: { type: 'line' as const, point: true },
+      data: [
+        { year: '2009-10', pct: 94.2 },
+        { year: '2015-16', pct: 93.8 },
+        { year: '2020-21', pct: 95.0 },
+      ],
+      encoding: {
+        x: { field: 'year', type: 'ordinal' as const },
+        y: {
+          field: 'pct',
+          type: 'quantitative' as const,
+          axis: { title: 'Kindergartners with 2-dose MMR', grid: true, format: '.0f' },
+          scale: { domain: [90, 96], nice: false },
+        },
+      },
+      theme: { fonts: { sizes: { body: 21, axisTick: 18 } } },
+      chrome: { title: 'T', subtitle: 'S', source: 'Src' },
+    };
+
+    for (const width of [320, 360, 390]) {
+      const layout = compileChart(spec, { width, height: 600 });
+      const yAxis = layout.axes.y;
+      expect(yAxis?.tickPosition).toBe('inline');
+      const title = yAxis?.titlePosition;
+      expect(title).toBeDefined();
+      // The title is rotated -90° anchored middle; its glyph box straddles the
+      // rotation center by ~half the title font. The left edge must stay on the
+      // canvas (x >= 0). Assert the rotation center clears half a glyph.
+      const halfGlyph = Math.ceil(layout.theme.fonts.sizes.body / 2);
+      expect(title!.x - halfGlyph).toBeGreaterThanOrEqual(0);
+    }
+  });
 });

package/src/layout/axes.ts

@@ -365,12 +365,18 @@ function thinBandTicksIfNeeded(
   // wide final label (long category name) projects across several bands at an
   // angle, so clear every kept label its footprint overlaps, not just the
   // nearest one — otherwise an earlier kept label still overlaps the endpoint.
+  //
+  // Use true pixel overlap here (no minGap comfort buffer) so a neighbor that
+  // merely falls a few pixels short of the comfort gap — but does not actually
+  // touch the endpoint label — is kept rather than sacrificed. Dropping a
+  // readable short label to seat a near-miss wide endpoint reads as arbitrary
+  // (e.g. losing "2025" beside "2026 (to wk 17)" that clears it by 2px).
   const lastIdx = ticks.length - 1;
   if (!keep[lastIdx]) {
     keep[lastIdx] = true;
     for (let i = lastIdx - 1; i > 0; i--) {
       if (!keep[i]) continue;
-      if (spans[i].right + minGap > spans[lastIdx].left) {
+      if (spans[i].right > spans[lastIdx].left) {
         keep[i] = false;
         continue;
       }
@@ -735,7 +741,17 @@ export function computeAxes(
         );
         return Math.max(max, w);
       }, 0);
-      const titleOff = axisTitleOffset(maxTickLabelWidth, result.y.labelStyle.fontSize, totalWidth);
+      // Inline y-ticks live inside the plot (no left gutter), so the title
+      // clears only the chart edge — pass the inline flag so the offset drops
+      // the tick-label width and the viewport floor. Omitting it reserved a
+      // gutter-sized offset that pushed the rotated title off the left edge of
+      // the container on narrow/large-font charts.
+      const titleOff = axisTitleOffset(
+        maxTickLabelWidth,
+        result.y.labelStyle.fontSize,
+        totalWidth,
+        result.y.tickPosition === 'inline',
+      );
       result.y.titlePosition = {
         x: chartArea.x - titleOff,
         y: chartArea.y + chartArea.height / 2,