@opendata-ai/openchart-engine 6.0.0 → 6.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "6.0.0",
+  "version": "6.1.1",
   "description": "Headless compiler for openchart: spec validation, data compilation, scales, and layout",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -45,7 +45,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "6.0.0",
+    "@opendata-ai/openchart-core": "6.1.1",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/__test-fixtures__/specs.ts

@@ -48,7 +48,8 @@ export function makeCompactStrategy(): LayoutStrategy {
 /** Single-series line chart with temporal x-axis. */
 export function makeLineSpec(): NormalizedChartSpec {
   return {
-    type: 'line',
+    markType: 'line',
+    markDef: { type: 'line' },
     data: [
       { date: '2020-01-01', value: 10, country: 'US' },
       { date: '2021-01-01', value: 40, country: 'US' },
@@ -82,7 +83,8 @@ export function makeLineSpec(): NormalizedChartSpec {
 /** Basic bar chart (horizontal) with nominal y and quantitative x. */
 export function makeBarSpec(): NormalizedChartSpec {
   return {
-    type: 'bar',
+    markType: 'bar',
+    markDef: { type: 'bar' },
     data: [
       { name: 'A', value: 10 },
       { name: 'B', value: 30 },
@@ -110,7 +112,8 @@ export function makeBarSpec(): NormalizedChartSpec {
 /** Basic scatter chart with quantitative x and y. */
 export function makeScatterSpec(): NormalizedChartSpec {
   return {
-    type: 'scatter',
+    markType: 'point',
+    markDef: { type: 'point' },
     data: [
       { x: 10, y: 20 },
       { x: 30, y: 50 },

package/src/__tests__/axes.test.ts

@@ -6,7 +6,8 @@ import { computeAxes, effectiveDensity, thinTicksUntilFit, ticksOverlap } from '
 import { computeScales } from '../layout/scales';
 
 const lineSpec: NormalizedChartSpec = {
-  type: 'line',
+  markType: 'line',
+  markDef: { type: 'line' },
   data: [
     { date: '2020-01-01', value: 100 },
     { date: '2021-01-01', value: 500 },
@@ -208,7 +209,8 @@ describe('computeAxes', () => {
   it('propagates tickAngle from encoding to x-axis layout', () => {
     const specWithAngle: NormalizedChartSpec = {
       ...lineSpec,
-      type: 'column',
+      markType: 'bar',
+      markDef: { type: 'bar', orient: 'vertical' },
       data: [
         { cat: 'California', val: 10 },
         { cat: 'New York', val: 20 },
@@ -439,7 +441,8 @@ describe('text-aware tick density', () => {
     const categories = ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo'];
     const barSpec: NormalizedChartSpec = {
       ...lineSpec,
-      type: 'column',
+      markType: 'bar',
+      markDef: { type: 'bar', orient: 'vertical' },
       data: categories.map((cat, i) => ({ cat, val: (i + 1) * 10 })),
       encoding: {
         x: { field: 'cat', type: 'nominal' },
@@ -490,7 +493,8 @@ describe('text-aware tick density', () => {
   it('passes measureText to auto-rotation detection', () => {
     const barSpec: NormalizedChartSpec = {
       ...lineSpec,
-      type: 'column',
+      markType: 'bar',
+      markDef: { type: 'bar', orient: 'vertical' },
       data: [
         { cat: 'A', val: 10 },
         { cat: 'B', val: 20 },
@@ -509,3 +513,163 @@ describe('text-aware tick density', () => {
     expect(axes.x!.tickAngle).toBe(-45);
   });
 });
+
+// ---------------------------------------------------------------------------
+// Axis config expansion tests
+// ---------------------------------------------------------------------------
+
+describe('axis config properties', () => {
+  it('uses title instead of deprecated label', () => {
+    const spec: NormalizedChartSpec = {
+      ...lineSpec,
+      encoding: {
+        x: { field: 'date', type: 'temporal', axis: { title: 'Year' } },
+        y: { field: 'value', type: 'quantitative', axis: { title: 'Amount ($)' } },
+      },
+    };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    expect(axes.x!.label).toBe('Year');
+    expect(axes.y!.label).toBe('Amount ($)');
+  });
+
+  it('falls back to deprecated label when title is not set', () => {
+    const spec: NormalizedChartSpec = {
+      ...lineSpec,
+      encoding: {
+        x: { field: 'date', type: 'temporal', axis: { label: 'Old Label' } },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    expect(axes.x!.label).toBe('Old Label');
+  });
+
+  it('prefers labelAngle over deprecated tickAngle', () => {
+    const spec: NormalizedChartSpec = {
+      ...lineSpec,
+      encoding: {
+        x: {
+          field: 'date',
+          type: 'temporal',
+          axis: { labelAngle: -30, tickAngle: -90 },
+        },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    // labelAngle takes precedence
+    expect(axes.x!.tickAngle).toBe(-30);
+  });
+
+  it('passes orient config to axis layout', () => {
+    const spec: NormalizedChartSpec = {
+      ...lineSpec,
+      encoding: {
+        x: { field: 'date', type: 'temporal', axis: { orient: 'top' } },
+        y: { field: 'value', type: 'quantitative', axis: { orient: 'right' } },
+      },
+    };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    expect(axes.x!.orient).toBe('top');
+    expect(axes.y!.orient).toBe('right');
+  });
+
+  it('passes domain and ticks visibility to axis layout', () => {
+    const spec: NormalizedChartSpec = {
+      ...lineSpec,
+      encoding: {
+        x: { field: 'date', type: 'temporal', axis: { domain: false, ticks: false } },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    expect(axes.x!.domainLine).toBe(false);
+    expect(axes.x!.tickMarks).toBe(false);
+  });
+
+  it('passes offset and padding configs to axis layout', () => {
+    const spec: NormalizedChartSpec = {
+      ...lineSpec,
+      encoding: {
+        x: {
+          field: 'date',
+          type: 'temporal',
+          axis: { offset: 10, titlePadding: 8, labelPadding: 4 },
+        },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    expect(axes.x!.offset).toBe(10);
+    expect(axes.x!.titlePadding).toBe(8);
+    expect(axes.x!.labelPadding).toBe(4);
+  });
+
+  it('passes labelOverlap and labelFlush to axis layout', () => {
+    const spec: NormalizedChartSpec = {
+      ...lineSpec,
+      encoding: {
+        x: {
+          field: 'date',
+          type: 'temporal',
+          axis: { labelOverlap: 'parity', labelFlush: true },
+        },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    expect(axes.x!.labelOverlap).toBe('parity');
+    expect(axes.x!.labelFlush).toBe(true);
+  });
+
+  it('uses explicit tick values when provided', () => {
+    const spec: NormalizedChartSpec = {
+      ...lineSpec,
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: {
+          field: 'value',
+          type: 'quantitative',
+          axis: { values: [0, 250, 500] },
+        },
+      },
+    };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    // Should produce exactly 3 ticks matching our explicit values
+    expect(axes.y!.ticks.length).toBe(3);
+    expect(axes.y!.ticks[0].value).toBe(0);
+    expect(axes.y!.ticks[1].value).toBe(250);
+    expect(axes.y!.ticks[2].value).toBe(500);
+  });
+
+  it('defaults are undefined when axis config properties are not set', () => {
+    const scales = computeScales(lineSpec, chartArea, lineSpec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    // All new properties should be undefined when not set
+    expect(axes.x!.orient).toBeUndefined();
+    expect(axes.x!.domainLine).toBeUndefined();
+    expect(axes.x!.tickMarks).toBeUndefined();
+    expect(axes.x!.offset).toBeUndefined();
+    expect(axes.x!.titlePadding).toBeUndefined();
+    expect(axes.x!.labelPadding).toBeUndefined();
+    expect(axes.x!.labelOverlap).toBeUndefined();
+    expect(axes.x!.labelFlush).toBeUndefined();
+  });
+});

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

@@ -6,7 +6,7 @@ import { compileChart, compileGraph, compileTable } from '../compile';
 // ---------------------------------------------------------------------------
 
 const lineSpec = {
-  type: 'line' as const,
+  mark: 'line' as const,
   data: [
     { date: '2020-01-01', value: 10, country: 'US' },
     { date: '2021-01-01', value: 40, country: 'US' },
@@ -26,7 +26,7 @@ const lineSpec = {
 };
 
 const barSpec = {
-  type: 'bar' as const,
+  mark: 'bar' as const,
   data: [
     { name: 'A', value: 10 },
     { name: 'B', value: 30 },
@@ -172,25 +172,36 @@ describe('compileChart', () => {
     expect(layout.legend.position).toBe('top');
   });
 
-  it('produces line and point marks with the registered renderer', () => {
+  it('produces line marks with dataPoints (no PointMarks by default)', () => {
     const layout = compileChart(lineSpec, { width: 600, height: 400 });
     expect(layout.marks.length).toBeGreaterThan(0);
 
     const lineMarks = layout.marks.filter((m) => m.type === 'line');
     const pointMarks = layout.marks.filter((m) => m.type === 'point');
     expect(lineMarks.length).toBeGreaterThan(0);
-    expect(pointMarks.length).toBeGreaterThan(0);
+    // Default: no PointMarks (voronoi overlay handles tooltips)
+    expect(pointMarks.length).toBe(0);
 
-    // Line marks should have points with valid coordinates
+    // Line marks should have points and dataPoints with valid coordinates
     for (const mark of lineMarks) {
       if (mark.type === 'line') {
         expect(mark.points.length).toBeGreaterThan(0);
         expect(mark.stroke).toBeTruthy();
         expect(mark.strokeWidth).toBeGreaterThan(0);
+        expect(mark.dataPoints).toBeDefined();
+        expect(mark.dataPoints!.length).toBeGreaterThan(0);
       }
     }
   });
 
+  it('produces PointMarks when mark.point is true', () => {
+    const specWithPoints = { ...lineSpec, mark: { type: 'line' as const, point: true as const } };
+    const layout = compileChart(specWithPoints, { width: 600, height: 400 });
+
+    const pointMarks = layout.marks.filter((m) => m.type === 'point');
+    expect(pointMarks.length).toBeGreaterThan(0);
+  });
+
   it('includes accessibility metadata with meaningful content', () => {
     const layout = compileChart(lineSpec, { width: 600, height: 400 });
     expect(layout.a11y.altText).toContain('Line chart');
@@ -312,7 +323,7 @@ describe('compileChart', () => {
 
   it('scale.clip filters data rows outside the y-axis domain', () => {
     const spec = {
-      type: 'scatter' as const,
+      mark: 'point' as const,
       data: [
         { x: 1, y: 5 },
         { x: 2, y: 15 },
@@ -337,7 +348,7 @@ describe('compileChart', () => {
 
   it('scale.clip filters data rows outside the x-axis domain', () => {
     const spec = {
-      type: 'scatter' as const,
+      mark: 'point' as const,
       data: [
         { x: 1, y: 10 },
         { x: 5, y: 20 },
@@ -362,7 +373,7 @@ describe('compileChart', () => {
 
   it('scale.clip=false does not filter data even with domain set', () => {
     const spec = {
-      type: 'scatter' as const,
+      mark: 'point' as const,
       data: [
         { x: 1, y: 5 },
         { x: 2, y: 15 },
@@ -446,7 +457,7 @@ describe('compileGraph', () => {
     expect(() =>
       compileGraph(
         {
-          type: 'scatter',
+          mark: 'point',
           data: [{ x: 1, y: 2 }],
           encoding: {
             x: { field: 'x', type: 'quantitative' },
@@ -455,12 +466,12 @@ describe('compileGraph', () => {
         },
         { width: 600, height: 400 },
       ),
-    ).toThrow('compileGraph received a scatter spec');
+    ).toThrow('compileGraph received a non-graph spec');
   });
 
   it('propagates tickAngle through the full compilation pipeline', () => {
     const columnSpec = {
-      type: 'column' as const,
+      mark: 'bar' as const,
       data: [
         { state: 'California', pop: 39000000 },
         { state: 'Texas', pop: 29000000 },
@@ -484,7 +495,7 @@ describe('compileGraph', () => {
 
   it('reserves extra bottom margin for rotated x-axis labels', () => {
     const baseColumnSpec = {
-      type: 'column' as const,
+      mark: 'bar' as const,
       data: [
         { state: 'California', pop: 39000000 },
         { state: 'Texas', pop: 29000000 },