@opendata-ai/openchart-engine 7.2.0 → 7.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "7.2.0",
+  "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.0",
+    "@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);
@@ -205,6 +231,33 @@ describe('compileChart', () => {
     expect(pointMarks.length).toBeGreaterThan(0);
   });
 
+  it('produces PointMarks on a multi-series area when mark.point is true', () => {
+    // Multi-series areas derive their lines from area tops, which bypasses the
+    // line renderer's point emission. mark.point must still place dots.
+    const areaSpec = {
+      ...lineSpec,
+      mark: { type: 'area' as const, point: true as const },
+    };
+    const layout = compileChart(areaSpec, { width: 600, height: 400 });
+
+    const areaMarks = layout.marks.filter((m) => m.type === 'area');
+    const pointMarks = layout.marks.filter((m) => m.type === 'point');
+    expect(areaMarks.length).toBe(2); // US + UK
+    // One point per data row across both series (2 points x 2 series).
+    expect(pointMarks.length).toBe(4);
+    for (const p of pointMarks) {
+      if (p.type === 'point') expect(p.r).toBeGreaterThan(0);
+    }
+  });
+
+  it('does not produce PointMarks on a multi-series area by default', () => {
+    const areaSpec = { ...lineSpec, mark: 'area' as const };
+    const layout = compileChart(areaSpec, { width: 600, height: 400 });
+
+    const pointMarks = layout.marks.filter((m) => m.type === 'point');
+    expect(pointMarks.length).toBe(0);
+  });
+
   it('includes accessibility metadata with meaningful content', () => {
     const layout = compileChart(lineSpec, { width: 600, height: 400 });
     expect(layout.a11y.altText).toContain('Line chart');

package/src/__tests__/scales.test.ts

@@ -269,6 +269,40 @@ describe('scale config properties', () => {
     expect(paddedBandwidth).toBeGreaterThan(defaultBandwidth);
   });
 
+  it('point scale honors paddingOuter as a padding alias', () => {
+    const ordinalBase = {
+      ...lineSpec,
+      data: [
+        { year: 'A', value: 10 },
+        { year: 'B', value: 20 },
+        { year: 'C', value: 30 },
+      ],
+    };
+    const wide: NormalizedChartSpec = {
+      ...ordinalBase,
+      encoding: {
+        x: { field: 'year', type: 'ordinal', scale: { paddingOuter: 0.5 } },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+    const tight: NormalizedChartSpec = {
+      ...ordinalBase,
+      encoding: {
+        x: { field: 'year', type: 'ordinal', scale: { paddingOuter: 0.04 } },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+
+    const wideScales = computeScales(wide, chartArea, wide.data);
+    const tightScales = computeScales(tight, chartArea, tight.data);
+    expect(wideScales.x!.type).toBe('point');
+
+    // Less outer padding pushes the first point closer to the left edge.
+    const wideFirst = wideScales.x!.scale('A') as number;
+    const tightFirst = tightScales.x!.scale('A') as number;
+    expect(tightFirst).toBeLessThan(wideFirst);
+  });
+
   it('backward compatible: existing specs still work', () => {
     // lineSpec and barSpec from before should still produce valid scales
     const lineScales = computeScales(lineSpec, chartArea, lineSpec.data);

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/charts/line/index.ts

@@ -10,13 +10,17 @@
  *   `'normalize'`, or `'center'`.
  */
 
-import type { AreaMark, LineMark, Mark } from '@opendata-ai/openchart-core';
+import type { AreaMark, LineMark, Mark, PointMark } from '@opendata-ai/openchart-core';
 import { getRepresentativeColor } from '@opendata-ai/openchart-core';
+import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ChartRenderer } from '../registry';
 import { computeAreaMarks } from './area';
 import { computeLineMarks } from './compute';
 import { computeLineLabels } from './labels';
 
+/** Radius for area-chart data points, matching the line renderer. */
+const AREA_POINT_RADIUS = 3;
+
 // ---------------------------------------------------------------------------
 // Line chart renderer
 // ---------------------------------------------------------------------------
@@ -84,8 +88,14 @@ export const areaRenderer: ChartRenderer = (spec, scales, chartArea, strategy, t
     ? linesFromAreas(areas)
     : computeLineMarks(spec, scales, chartArea, strategy);
 
-  // Areas go first (rendered behind lines), then lines on top
-  return [...areas, ...lines] as Mark[];
+  // For multi-series areas the lines are derived from area tops, which skips
+  // the point-emission path in computeLineMarks. Emit the data-point dots here
+  // so `mark.point` works on area charts the same way it does on lines.
+  // Single-series areas already get their points from computeLineMarks above.
+  const points = hasColor && spec.markDef.point ? pointsFromAreas(areas, spec.markDef.point) : [];
+
+  // Areas go first (rendered behind lines), then lines, then points on top
+  return [...areas, ...lines, ...points] as Mark[];
 };
 
 // ---------------------------------------------------------------------------
@@ -117,6 +127,46 @@ function linesFromAreas(areas: AreaMark[]): LineMark[] {
   }));
 }
 
+/**
+ * Derive PointMark[] sitting on each area's top boundary. Honors the same
+ * `mark.point` modes as the line renderer: `true` (filled dots), `'transparent'`
+ * (invisible hover targets), and `'endpoints'` (hollow dots at first/last only).
+ */
+function pointsFromAreas(
+  areas: AreaMark[],
+  pointMode: NonNullable<NormalizedChartSpec['markDef']['point']>,
+): PointMark[] {
+  const isTransparent = pointMode === 'transparent';
+  const isEndpoints = pointMode === 'endpoints';
+  const points: PointMark[] = [];
+
+  for (const a of areas) {
+    const stroke = getRepresentativeColor(a.fill);
+    const lastIdx = a.topPoints.length - 1;
+
+    for (let i = 0; i < a.topPoints.length; i++) {
+      const pt = a.topPoints[i];
+      const isEndpoint = i === 0 || i === lastIdx;
+      const visible = !isTransparent && (!isEndpoints || isEndpoint);
+      const hollow = isEndpoints && visible;
+      points.push({
+        type: 'point',
+        cx: pt.x,
+        cy: pt.y,
+        r: visible ? AREA_POINT_RADIUS : 0,
+        fill: hollow ? 'transparent' : stroke,
+        stroke: hollow ? stroke : visible ? '#ffffff' : 'transparent',
+        strokeWidth: visible ? 1.5 : 0,
+        fillOpacity: isTransparent ? 0 : 1,
+        data: a.data[i] ?? {},
+        aria: { decorative: true },
+      });
+    }
+  }
+
+  return points;
+}
+
 // ---------------------------------------------------------------------------
 // Public exports
 // ---------------------------------------------------------------------------

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

package/src/layout/scales.ts

@@ -500,7 +500,11 @@ function buildPointScale(
     ? (channel.scale.domain as string[])
     : applyCategoricalSort(uniqueStrings(fieldValues(data, channel.field)), channel.sort);
 
-  const padding = channel.scale?.padding ?? 0.5;
+  // Point scales have a single padding knob (outer padding only -- there are no
+  // bands, so paddingInner is meaningless). Accept `paddingOuter` as an alias so
+  // a spec written for a band scale doesn't silently no-op when the mark is a
+  // line; explicit `padding` wins if both are set.
+  const padding = channel.scale?.padding ?? channel.scale?.paddingOuter ?? 0.5;
   const scale = scalePoint().domain(values).range([rangeStart, rangeEnd]).padding(padding);
 
   if (channel.scale?.reverse) {