@opendata-ai/openchart-engine 7.2.1 → 7.2.2

package/package.json

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

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

@@ -462,7 +462,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       "chromeToChart": 8,
       "padding": 20,
       "xAxisHeight": 26,
-      "xAxisLabelPadding": 14,
+      "xAxisLabelPadding": 4,
     },
   },
   "tooltipDescriptors": [
@@ -1438,7 +1438,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "chromeToChart": 8,
       "padding": 20,
       "xAxisHeight": 26,
-      "xAxisLabelPadding": 14,
+      "xAxisLabelPadding": 4,
     },
   },
   "tooltipDescriptors": [],
@@ -2029,7 +2029,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "chromeToChart": 8,
       "padding": 20,
       "xAxisHeight": 26,
-      "xAxisLabelPadding": 14,
+      "xAxisLabelPadding": 4,
     },
   },
   "tooltipDescriptors": [

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

@@ -175,6 +175,32 @@ describe('compileChart', () => {
     expect(layout.legend.position).toBe('top');
   });
 
+  it('aligns the top legend left edge to the plot area, not the container edge', () => {
+    // A y-axis title + numeric ticks reserves a left gutter, pushing the plot
+    // area right of the container padding. The top legend should start at the
+    // plot's left edge (above the y-axis guide), not flush against the container.
+    const layout = compileChart(
+      {
+        ...lineSpec,
+        encoding: {
+          ...lineSpec.encoding,
+          y: { field: 'value', type: 'quantitative' as const, axis: { title: 'GDP ($B)' } },
+        },
+        legend: { position: 'top' as const, show: true },
+      },
+      { width: 360, height: 400 },
+    );
+    expect(layout.legend.position).toBe('top');
+    expect(layout.legend.entries.length).toBeGreaterThan(0);
+    // Plot area is inset from the container by the y-axis gutter.
+    expect(layout.area.x).toBeGreaterThan(0);
+    // Legend left edge now matches the plot left edge (within a pixel).
+    expect(layout.legend.bounds.x).toBeCloseTo(layout.area.x, 0);
+    // And the legend never paints past the container's right padding edge.
+    // Default theme spacing.padding is 20.
+    expect(layout.legend.bounds.x + layout.legend.bounds.width).toBeLessThanOrEqual(360 - 20 + 0.5);
+  });
+
   it('produces line marks with dataPoints (no PointMarks by default)', () => {
     const layout = compileChart(lineSpec, { width: 600, height: 400 });
     expect(layout.marks.length).toBeGreaterThan(0);

package/src/annotations/__tests__/compute.test.ts

@@ -225,6 +225,35 @@ describe('computeAnnotations', () => {
       expect(annotations[0].label!.text).toBe('Recession');
     });
 
+    it('range label defaults to 11px / weight 500', () => {
+      const spec = makeSpec([
+        { type: 'range', x1: '2020-01-01', x2: '2021-01-01', label: 'Period' },
+      ]);
+      const scales = computeScales(spec, chartArea, spec.data);
+      const annotations = computeAnnotations(spec, scales, chartArea, fullStrategy);
+
+      expect(annotations[0].label!.style.fontSize).toBe(11);
+      expect(annotations[0].label!.style.fontWeight).toBe(500);
+    });
+
+    it('range label honors fontSize and fontWeight overrides', () => {
+      const spec = makeSpec([
+        {
+          type: 'range',
+          x1: '2020-01-01',
+          x2: '2021-01-01',
+          label: 'Period',
+          fontSize: 19,
+          fontWeight: 600,
+        },
+      ]);
+      const scales = computeScales(spec, chartArea, spec.data);
+      const annotations = computeAnnotations(spec, scales, chartArea, fullStrategy);
+
+      expect(annotations[0].label!.style.fontSize).toBe(19);
+      expect(annotations[0].label!.style.fontWeight).toBe(600);
+    });
+
     it('range has fill and opacity', () => {
       const spec = makeSpec([
         {
@@ -463,6 +492,41 @@ describe('computeAnnotations', () => {
       expect(rect.x + rect.width).toBeCloseTo(x2BandStart + bandwidth, 1);
     });
 
+    it('extendToEdges:false anchors a point-scale range at data point centers', () => {
+      // With extendToEdges:false the band starts/ends exactly at the first/last
+      // data point centers instead of extending half a step to the plot edge,
+      // so the range is inset from the axis.
+      const domainValues = ['2006', '2008', '2010', '2012'];
+      const ordinalSpec: NormalizedChartSpec = {
+        markType: 'line',
+        markDef: { type: 'line' },
+        data: domainValues.map((year, i) => ({ year, value: i * 10 })),
+        encoding: {
+          x: { field: 'year', type: 'ordinal' },
+          y: { field: 'value', type: 'quantitative' },
+        },
+        chrome: {},
+        annotations: [{ type: 'range', x1: '2006', x2: '2012', extendToEdges: false }],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+      const scales = computeScales(ordinalSpec, chartArea, ordinalSpec.data);
+      const annotations = computeAnnotations(ordinalSpec, scales, chartArea, fullStrategy);
+
+      expect(annotations).toHaveLength(1);
+      const rect = annotations[0].rect!;
+
+      const xScale = scales.x!.scale as ScalePoint<string>;
+      // Left/right edges land at the point centers, not extended past them.
+      expect(rect.x).toBeCloseTo(xScale('2006')!, 1);
+      expect(rect.x + rect.width).toBeCloseTo(xScale('2012')!, 1);
+      // And the band is strictly inside the plot (inset from both edges).
+      expect(rect.x).toBeGreaterThan(chartArea.x);
+      expect(rect.x + rect.width).toBeLessThan(chartArea.x + chartArea.width);
+    });
+
     it('linear-scale range is unaffected by edge extension', () => {
       // For linear scales, resolvePositionEdge is identical to resolvePosition.
       // This ensures the fix doesn't introduce any drift on continuous axes.

package/src/annotations/resolve-range.ts

@@ -12,7 +12,7 @@ import type {
 import type { ResolvedScales } from '../layout/scales';
 import { DEFAULT_RANGE_FILL, DEFAULT_RANGE_OPACITY } from './constants';
 import { applyOffset } from './geometry';
-import { resolvePositionEdge } from './position';
+import { resolvePosition, resolvePositionEdge } from './position';
 import { makeAnnotationLabelStyle } from './resolve-text';
 
 export function resolveRangeAnnotation(
@@ -26,10 +26,22 @@ export function resolveRangeAnnotation(
   let width = chartArea.width;
   let height = chartArea.height;
 
+  // When extendToEdges is false, anchor at the data point's exact position
+  // (band/point center) instead of extending to the band/step edge. This insets
+  // the range from the axis so it starts at the first data point rather than
+  // flush against the axis guide. No effect on linear/time scales.
+  const extend = annotation.extendToEdges !== false;
+  const resolveEdge = (
+    value: string | number,
+    scale: typeof scales.x,
+    edge: 'start' | 'end',
+  ): number | null =>
+    extend ? resolvePositionEdge(value, scale, edge) : resolvePosition(value, scale);
+
   // X-range (vertical band)
   if (annotation.x1 !== undefined && annotation.x2 !== undefined) {
-    const x1px = resolvePositionEdge(annotation.x1, scales.x, 'start');
-    const x2px = resolvePositionEdge(annotation.x2, scales.x, 'end');
+    const x1px = resolveEdge(annotation.x1, scales.x, 'start');
+    const x2px = resolveEdge(annotation.x2, scales.x, 'end');
     if (x1px === null || x2px === null) return null;
 
     x = Math.min(x1px, x2px);
@@ -38,8 +50,8 @@ export function resolveRangeAnnotation(
 
   // Y-range (horizontal band)
   if (annotation.y1 !== undefined && annotation.y2 !== undefined) {
-    const y1px = resolvePositionEdge(annotation.y1, scales.y, 'end');
-    const y2px = resolvePositionEdge(annotation.y2, scales.y, 'start');
+    const y1px = resolveEdge(annotation.y1, scales.y, 'end');
+    const y2px = resolveEdge(annotation.y2, scales.y, 'start');
     if (y1px === null || y2px === null) return null;
 
     y = Math.min(y1px, y2px);
@@ -62,7 +74,12 @@ export function resolveRangeAnnotation(
     const baseDy = 14;
     const labelDelta = applyOffset({ dx: baseDx, dy: baseDy }, annotation.labelOffset);
 
-    const style = makeAnnotationLabelStyle(11, 500, undefined, isDark);
+    const style = makeAnnotationLabelStyle(
+      annotation.fontSize ?? 11,
+      annotation.fontWeight ?? 500,
+      undefined,
+      isDark,
+    );
     if (centered) {
       style.textAnchor = 'middle';
     } else if (anchor === 'right') {

package/src/compile.ts

@@ -553,24 +553,34 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
   // the reserved margin. This way computeLegend positions the legend outside
   // the data area (in the margin) instead of overlapping data marks.
   //
-  // Top/bottom legends sit above/below the chart and aren't constrained by
-  // y-axis labels. Use the full container width so wrapping decisions match
-  // the first pass (which uses options.width). Without this, charts with wide
-  // y-axis labels (horizontal bars, long category names) artificially narrow
-  // the legend and trigger premature wrapping.
+  // Top/bottom legends align their left edge to the plot area (chartArea.x),
+  // so the legend sits above/below the y-axis guide rather than flush against
+  // the container edge.
+  //
+  // Width runs from the new left origin (chartArea.x) to the container's right
+  // padding, so the rendered legend never paints past the right edge / over the
+  // endpoint-label column. This is narrower than the first pass (which used the
+  // full container at preliminaryArea.width = options.width), so on a chart with
+  // BOTH a wide y-axis gutter AND a legend that nearly fills its row, the second
+  // pass can wrap to one more row than the first pass reserved in margins.top —
+  // the extra row protrudes slightly into the chrome gap. That graceful failure
+  // (a few px of vertical crowding, still on-canvas) is preferable to the
+  // alternative (chips clipped off the right edge of the SVG). The maxRows cap
+  // (default 2 for top legends) bounds the worst case to a single extra row.
   const legendArea: Rect = { ...chartArea };
   if ('entries' in legendLayout && legendLayout.entries.length > 0) {
+    const legendInnerWidth = options.width - theme.spacing.padding - chartArea.x;
     const gap = legendGap(options.width);
     switch (legendLayout.position) {
       case 'top':
-        legendArea.x = theme.spacing.padding;
-        legendArea.width = options.width - theme.spacing.padding * 2;
+        legendArea.x = chartArea.x;
+        legendArea.width = legendInnerWidth;
         legendArea.y -= legendLayout.bounds.height + gap;
         legendArea.height += legendLayout.bounds.height + gap;
         break;
       case 'bottom':
-        legendArea.x = theme.spacing.padding;
-        legendArea.width = options.width - theme.spacing.padding * 2;
+        legendArea.x = chartArea.x;
+        legendArea.width = legendInnerWidth;
         // Bottom legend sits below the x-axis tick row, not over it. Expand
         // legendArea by xAxisHeight + legendHeight + gap so the bottom-anchored
         // legend lands beneath the axis. Mirrors dimensions.ts which reserved

package/src/layout/dimensions.ts

@@ -23,12 +23,11 @@ import type {
   ResolvedTheme,
 } from '@opendata-ai/openchart-core';
 import {
-  AXIS_TITLE_GAP,
   AXIS_TITLE_TRAILING_PAD,
+  axisTitleOffset,
   BREAKPOINT_COMPACT_MAX,
   computeChrome,
   estimateTextWidth,
-  getAxisTitleOffset,
   HPAD_COMPACT_FRACTION,
   HPAD_COMPACT_MIN,
   LABEL_GAP_COMPACT,
@@ -38,7 +37,6 @@ import {
   MAX_LEFT_LABEL_FRACTION_MEDIUM,
   MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX,
   NARROW_VIEWPORT_MAX,
-  TICK_LABEL_OFFSET,
   TOP_PAD_EXTRA_NARROW,
 } from '@opendata-ai/openchart-core';
 import { format as d3Format } from 'd3-format';
@@ -634,14 +632,16 @@ export function computeDimensions(
         theme.fonts.weights.normal,
       );
     }
-    // Mirror the renderer's dynamic offset formula:
-    //   dynamicOffset = TICK_LABEL_OFFSET(6) + maxTickLabelWidth + AXIS_TITLE_GAP(14)
-    //   titleOffset = max(dynamicOffset, getAxisTitleOffset(width))
-    const dynamicTitleOffset = TICK_LABEL_OFFSET + estTickLabelWidth + AXIS_TITLE_GAP;
-    const axisTitleOffset = Math.max(dynamicTitleOffset, getAxisTitleOffset(width));
-    const halfGlyph = Math.ceil(theme.fonts.sizes.body / 2);
+    // Mirror the renderer's title placement so the reserved space matches where
+    // the title is drawn. axisTitleOffset() returns the distance to the title's
+    // center; it already includes the title half-glyph on the tick-label side.
+    // We add another halfGlyph here for the title glyph extending the other way,
+    // toward the container edge, so the margin reaches the title's outer edge.
+    const titleFontSize = theme.fonts.sizes.body;
+    const offset = axisTitleOffset(estTickLabelWidth, titleFontSize, width);
+    const halfGlyph = Math.ceil(titleFontSize / 2);
     const rotatedLabelMargin =
-      axisTitleOffset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD);
+      offset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD);
     margins.left = Math.max(margins.left, hPad + rotatedLabelMargin);
   }