@opendata-ai/openchart-engine 7.2.0 → 7.2.1

package/package.json

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

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

@@ -205,6 +205,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/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/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) {