@opendata-ai/openchart-engine 3.0.0 → 6.1.0

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

@@ -0,0 +1,386 @@
+import type { ChartSpec, LayerSpec } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { compileLayer } from '../compile';
+import { flattenLayers } from '../compiler/normalize';
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+const sharedData = [
+  { month: 'Jan', sales: 100, target: 80, region: 'West' },
+  { month: 'Feb', sales: 150, target: 120, region: 'West' },
+  { month: 'Mar', sales: 130, target: 140, region: 'East' },
+  { month: 'Apr', sales: 200, target: 160, region: 'East' },
+];
+
+const compileOpts = { width: 600, height: 400 };
+
+// ---------------------------------------------------------------------------
+// flattenLayers
+// ---------------------------------------------------------------------------
+
+describe('flattenLayers', () => {
+  it('flattens a simple two-layer spec into two ChartSpecs', () => {
+    const spec: LayerSpec = {
+      layer: [
+        {
+          mark: 'bar',
+          data: sharedData,
+          encoding: {
+            x: { field: 'sales', type: 'quantitative' },
+            y: { field: 'month', type: 'nominal' },
+          },
+        },
+        {
+          mark: 'line',
+          data: sharedData,
+          encoding: {
+            x: { field: 'month', type: 'nominal' },
+            y: { field: 'target', type: 'quantitative' },
+          },
+        },
+      ],
+    };
+
+    const leaves = flattenLayers(spec);
+    expect(leaves).toHaveLength(2);
+    expect(leaves[0].mark).toBe('bar');
+    expect(leaves[1].mark).toBe('line');
+  });
+
+  it('inherits shared data from parent when child has none', () => {
+    // When children have data: [], they keep it. But if data is undefined, parent is used.
+    const specNoChildData: LayerSpec = {
+      data: sharedData,
+      layer: [
+        {
+          mark: 'bar',
+          encoding: {
+            x: { field: 'sales', type: 'quantitative' },
+            y: { field: 'month', type: 'nominal' },
+          },
+        } as ChartSpec,
+        {
+          mark: 'line',
+          encoding: {
+            x: { field: 'month', type: 'nominal' },
+            y: { field: 'target', type: 'quantitative' },
+          },
+        } as ChartSpec,
+      ],
+    };
+
+    const leaves = flattenLayers(specNoChildData);
+    expect(leaves).toHaveLength(2);
+    expect(leaves[0].data).toEqual(sharedData);
+    expect(leaves[1].data).toEqual(sharedData);
+  });
+
+  it('inherits shared encoding from parent, child channels override', () => {
+    const spec: LayerSpec = {
+      data: sharedData,
+      encoding: {
+        x: { field: 'month', type: 'nominal' },
+        color: { field: 'region', type: 'nominal' },
+      },
+      layer: [
+        {
+          mark: 'bar',
+          encoding: {
+            y: { field: 'sales', type: 'quantitative' },
+          },
+        } as ChartSpec,
+        {
+          mark: 'line',
+          encoding: {
+            y: { field: 'target', type: 'quantitative' },
+            // Override x from parent
+            x: { field: 'month', type: 'ordinal' },
+          },
+        } as ChartSpec,
+      ],
+    };
+
+    const leaves = flattenLayers(spec);
+    expect(leaves).toHaveLength(2);
+
+    // First leaf: inherits x and color from parent, has own y
+    expect(leaves[0].encoding.x?.field).toBe('month');
+    expect(leaves[0].encoding.x?.type).toBe('nominal');
+    expect(leaves[0].encoding.y?.field).toBe('sales');
+    expect(leaves[0].encoding.color).toEqual({ field: 'region', type: 'nominal' });
+
+    // Second leaf: overrides x, inherits color from parent, has own y
+    expect(leaves[1].encoding.x?.type).toBe('ordinal');
+    expect(leaves[1].encoding.y?.field).toBe('target');
+    expect(leaves[1].encoding.color).toEqual({ field: 'region', type: 'nominal' });
+  });
+
+  it('chains parent transforms before child transforms', () => {
+    const spec: LayerSpec = {
+      data: sharedData,
+      transform: [{ filter: { field: 'region', equal: 'West' } }],
+      layer: [
+        {
+          mark: 'bar',
+          transform: [{ filter: { field: 'sales', gt: 100 } }],
+          encoding: {
+            x: { field: 'sales', type: 'quantitative' },
+            y: { field: 'month', type: 'nominal' },
+          },
+        } as ChartSpec,
+      ],
+    };
+
+    const leaves = flattenLayers(spec);
+    expect(leaves).toHaveLength(1);
+    expect(leaves[0].transform).toHaveLength(2);
+    // Parent transform first
+    expect(leaves[0].transform![0]).toEqual({ filter: { field: 'region', equal: 'West' } });
+    // Child transform second
+    expect(leaves[0].transform![1]).toEqual({ filter: { field: 'sales', gt: 100 } });
+  });
+
+  it('handles nested layers recursively', () => {
+    const spec: LayerSpec = {
+      data: sharedData,
+      layer: [
+        {
+          // Nested LayerSpec
+          layer: [
+            {
+              mark: 'bar',
+              encoding: {
+                x: { field: 'sales', type: 'quantitative' },
+                y: { field: 'month', type: 'nominal' },
+              },
+            } as ChartSpec,
+            {
+              mark: 'line',
+              encoding: {
+                x: { field: 'month', type: 'nominal' },
+                y: { field: 'target', type: 'quantitative' },
+              },
+            } as ChartSpec,
+          ],
+        } as LayerSpec,
+        {
+          mark: 'point',
+          encoding: {
+            x: { field: 'month', type: 'nominal' },
+            y: { field: 'sales', type: 'quantitative' },
+          },
+        } as ChartSpec,
+      ],
+    };
+
+    const leaves = flattenLayers(spec);
+    expect(leaves).toHaveLength(3);
+    expect(leaves[0].mark).toBe('bar');
+    expect(leaves[1].mark).toBe('line');
+    expect(leaves[2].mark).toBe('point');
+    // All should inherit data from the top-level parent
+    for (const leaf of leaves) {
+      expect(leaf.data).toEqual(sharedData);
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// compileLayer
+// ---------------------------------------------------------------------------
+
+describe('compileLayer', () => {
+  it('compiles a basic two-layer spec into a single ChartLayout', () => {
+    const spec: LayerSpec = {
+      layer: [
+        {
+          mark: 'bar' as const,
+          data: [
+            { name: 'A', value: 10 },
+            { name: 'B', value: 30 },
+            { name: 'C', value: 20 },
+          ],
+          encoding: {
+            x: { field: 'value', type: 'quantitative' as const },
+            y: { field: 'name', type: 'nominal' as const },
+          },
+        },
+        {
+          mark: 'bar' as const,
+          data: [
+            { name: 'A', value: 15 },
+            { name: 'B', value: 25 },
+            { name: 'C', value: 18 },
+          ],
+          encoding: {
+            x: { field: 'value', type: 'quantitative' as const },
+            y: { field: 'name', type: 'nominal' as const },
+          },
+        },
+      ],
+    };
+
+    const layout = compileLayer(spec, compileOpts);
+
+    // Should have a valid chart area
+    expect(layout.area.width).toBeGreaterThan(0);
+    expect(layout.area.height).toBeGreaterThan(0);
+
+    // Should have marks from both layers
+    expect(layout.marks.length).toBeGreaterThan(0);
+  });
+
+  it('produces combined marks from all layers', () => {
+    const spec: LayerSpec = {
+      layer: [
+        {
+          mark: 'bar' as const,
+          data: [
+            { name: 'A', value: 10 },
+            { name: 'B', value: 20 },
+          ],
+          encoding: {
+            x: { field: 'value', type: 'quantitative' as const },
+            y: { field: 'name', type: 'nominal' as const },
+          },
+        },
+        {
+          mark: 'bar' as const,
+          data: [
+            { name: 'A', value: 5 },
+            { name: 'B', value: 15 },
+          ],
+          encoding: {
+            x: { field: 'value', type: 'quantitative' as const },
+            y: { field: 'name', type: 'nominal' as const },
+          },
+        },
+      ],
+    };
+
+    const layout = compileLayer(spec, compileOpts);
+    // Two layers each with 2 data points should produce marks from both
+    expect(layout.marks.length).toBeGreaterThanOrEqual(4);
+  });
+
+  it('uses layer-level chrome over leaf chrome', () => {
+    const spec: LayerSpec = {
+      chrome: {
+        title: 'Layer Title',
+        subtitle: 'Combined view',
+      },
+      layer: [
+        {
+          mark: 'bar' as const,
+          data: [{ name: 'A', value: 10 }],
+          encoding: {
+            x: { field: 'value', type: 'quantitative' as const },
+            y: { field: 'name', type: 'nominal' as const },
+          },
+          chrome: {
+            title: 'Bar Title',
+          },
+        },
+      ],
+    };
+
+    const layout = compileLayer(spec, compileOpts);
+    // The layer-level chrome should be used
+    expect(layout.chrome.title?.text).toBe('Layer Title');
+    expect(layout.chrome.subtitle?.text).toBe('Combined view');
+  });
+
+  it('unions scale domains across layers for shared scales', () => {
+    // Layer 1 has values 0-50, layer 2 has values 0-100.
+    // The shared scale should encompass 0-100.
+    const spec: LayerSpec = {
+      layer: [
+        {
+          mark: 'bar' as const,
+          data: [{ name: 'A', value: 50 }],
+          encoding: {
+            x: { field: 'value', type: 'quantitative' as const },
+            y: { field: 'name', type: 'nominal' as const },
+          },
+        },
+        {
+          mark: 'bar' as const,
+          data: [{ name: 'A', value: 100 }],
+          encoding: {
+            x: { field: 'value', type: 'quantitative' as const },
+            y: { field: 'name', type: 'nominal' as const },
+          },
+        },
+      ],
+    };
+
+    const layout = compileLayer(spec, compileOpts);
+    // Layout should compile without error and have marks
+    expect(layout.marks.length).toBeGreaterThan(0);
+    expect(layout.area.width).toBeGreaterThan(0);
+  });
+
+  it('compiles a single-layer LayerSpec identically to a ChartSpec', () => {
+    const chartData = [
+      { name: 'A', value: 10 },
+      { name: 'B', value: 30 },
+    ];
+
+    const layerSpec: LayerSpec = {
+      layer: [
+        {
+          mark: 'bar' as const,
+          data: chartData,
+          encoding: {
+            x: { field: 'value', type: 'quantitative' as const },
+            y: { field: 'name', type: 'nominal' as const },
+          },
+        },
+      ],
+    };
+
+    const layout = compileLayer(layerSpec, compileOpts);
+    expect(layout.area.width).toBeGreaterThan(0);
+    expect(layout.marks.length).toBeGreaterThan(0);
+  });
+
+  it('deduplicates legend entries when layers share a color field', () => {
+    const spec: LayerSpec = {
+      layer: [
+        {
+          mark: 'bar' as const,
+          data: [
+            { name: 'A', value: 10, cat: 'X' },
+            { name: 'B', value: 20, cat: 'Y' },
+          ],
+          encoding: {
+            x: { field: 'value', type: 'quantitative' as const },
+            y: { field: 'name', type: 'nominal' as const },
+            color: { field: 'cat', type: 'nominal' as const },
+          },
+        },
+        {
+          mark: 'bar' as const,
+          data: [
+            { name: 'A', value: 5, cat: 'X' },
+            { name: 'B', value: 15, cat: 'Y' },
+          ],
+          encoding: {
+            x: { field: 'value', type: 'quantitative' as const },
+            y: { field: 'name', type: 'nominal' as const },
+            color: { field: 'cat', type: 'nominal' as const },
+          },
+        },
+      ],
+    };
+
+    const layout = compileLayer(spec, compileOpts);
+    // Should have exactly 2 legend entries (X, Y), not 4
+    const uniqueLabels = new Set(layout.legend.entries.map((e) => e.label));
+    expect(uniqueLabels.size).toBe(2);
+    expect(uniqueLabels.has('X')).toBe(true);
+    expect(uniqueLabels.has('Y')).toBe(true);
+  });
+});

package/src/__tests__/dimensions.test.ts

@@ -5,7 +5,8 @@ import type { NormalizedChartSpec } from '../compiler/types';
 import { computeDimensions } from '../layout/dimensions';
 
 const baseSpec: NormalizedChartSpec = {
-  type: 'line',
+  markType: 'line',
+  markDef: { type: 'line' },
   data: [
     { date: '2020-01-01', value: 10 },
     { date: '2021-01-01', value: 20 },
@@ -152,7 +153,8 @@ describe('computeDimensions', () => {
   it('reserves extra bottom space for rotated x-axis labels', () => {
     const rotatedSpec: NormalizedChartSpec = {
       ...baseSpec,
-      type: 'column',
+      markType: 'bar',
+      markDef: { type: 'bar', orient: 'vertical' },
       data: [
         { category: 'California', value: 10 },
         { category: 'New York', value: 20 },
@@ -165,7 +167,8 @@ describe('computeDimensions', () => {
     };
     const normalSpec: NormalizedChartSpec = {
       ...baseSpec,
-      type: 'column',
+      markType: 'bar',
+      markDef: { type: 'bar', orient: 'vertical' },
       data: rotatedSpec.data,
       encoding: {
         x: { field: 'category', type: 'nominal' },

package/src/__tests__/legend.test.ts

@@ -5,7 +5,8 @@ import type { NormalizedChartSpec } from '../compiler/types';
 import { computeLegend } from '../legend/compute';
 
 const specWithColor: NormalizedChartSpec = {
-  type: 'line',
+  markType: 'line',
+  markDef: { type: 'line' },
   data: [
     { date: '2020', value: 10, country: 'US' },
     { date: '2021', value: 20, country: 'UK' },
@@ -116,7 +117,8 @@ describe('computeLegend', () => {
 
     const barSpec: NormalizedChartSpec = {
       ...specWithColor,
-      type: 'bar',
+      markType: 'bar',
+      markDef: { type: 'bar' },
       encoding: {
         x: { field: 'value', type: 'quantitative' },
         y: { field: 'date', type: 'nominal' },
@@ -128,7 +130,8 @@ describe('computeLegend', () => {
 
     const scatterSpec: NormalizedChartSpec = {
       ...specWithColor,
-      type: 'scatter',
+      markType: 'point',
+      markDef: { type: 'point' },
       encoding: {
         x: { field: 'value', type: 'quantitative' },
         y: { field: 'value', type: 'quantitative' },

package/src/__tests__/scales.test.ts

@@ -3,7 +3,8 @@ import type { NormalizedChartSpec } from '../compiler/types';
 import { computeScales } from '../layout/scales';
 
 const lineSpec: NormalizedChartSpec = {
-  type: 'line',
+  markType: 'line',
+  markDef: { type: 'line' },
   data: [
     { date: '2020-01-01', value: 10, country: 'US' },
     { date: '2021-01-01', value: 50, country: 'US' },
@@ -23,7 +24,8 @@ const lineSpec: NormalizedChartSpec = {
 };
 
 const barSpec: NormalizedChartSpec = {
-  type: 'bar',
+  markType: 'bar',
+  markDef: { type: 'bar' },
   data: [
     { category: 'A', count: 10 },
     { category: 'B', count: 30 },
@@ -107,3 +109,175 @@ describe('computeScales', () => {
     expect(xDomain[1]).toBeGreaterThanOrEqual(30);
   });
 });
+
+// ---------------------------------------------------------------------------
+// Expanded scale type tests
+// ---------------------------------------------------------------------------
+
+/** Helper to make a spec with an explicit scale type on the y axis. */
+function makeQuantSpec(scaleConfig: Record<string, unknown>): NormalizedChartSpec {
+  return {
+    markType: 'line',
+    markDef: { type: 'line' },
+    data: [
+      { x: 1, y: 1 },
+      { x: 2, y: 10 },
+      { x: 3, y: 100 },
+      { x: 4, y: 1000 },
+    ],
+    encoding: {
+      x: { field: 'x', type: 'quantitative' },
+      y: { field: 'y', type: 'quantitative', scale: scaleConfig },
+    },
+    chrome: {},
+    annotations: [],
+    responsive: true,
+    theme: {},
+    darkMode: 'off',
+    labels: { density: 'auto', format: '' },
+  } as NormalizedChartSpec;
+}
+
+describe('expanded scale types', () => {
+  it('creates a log scale with explicit type override', () => {
+    const spec = makeQuantSpec({ type: 'log' });
+    const scales = computeScales(spec, chartArea, spec.data);
+    expect(scales.y!.type).toBe('log');
+    // Log scale maps multiplicatively - position for 10 should be between 1 and 100
+    const pos1 = scales.y!.scale(1) as number;
+    const pos10 = scales.y!.scale(10) as number;
+    const pos100 = scales.y!.scale(100) as number;
+    expect(pos10).toBeLessThan(pos1); // Y is inverted
+    expect(pos10).toBeGreaterThan(pos100);
+  });
+
+  it('applies base config to log scale', () => {
+    const spec = makeQuantSpec({ type: 'log', base: 2 });
+    const scales = computeScales(spec, chartArea, spec.data);
+    expect(scales.y!.type).toBe('log');
+  });
+
+  it('creates a pow scale with exponent', () => {
+    const spec = makeQuantSpec({ type: 'pow', exponent: 2 });
+    const scales = computeScales(spec, chartArea, spec.data);
+    expect(scales.y!.type).toBe('pow');
+    // Pow scale should still map data to pixel range
+    const pos = scales.y!.scale(50) as number;
+    expect(pos).toBeGreaterThanOrEqual(chartArea.y);
+    expect(pos).toBeLessThanOrEqual(chartArea.y + chartArea.height);
+  });
+
+  it('creates a sqrt scale', () => {
+    const spec = makeQuantSpec({ type: 'sqrt' });
+    const scales = computeScales(spec, chartArea, spec.data);
+    expect(scales.y!.type).toBe('sqrt');
+  });
+
+  it('creates a symlog scale with constant', () => {
+    const spec = makeQuantSpec({ type: 'symlog', constant: 2 });
+    const scales = computeScales(spec, chartArea, spec.data);
+    expect(scales.y!.type).toBe('symlog');
+  });
+
+  it('creates a utc scale for explicit utc type', () => {
+    const spec: NormalizedChartSpec = {
+      markType: 'line',
+      markDef: { type: 'line' },
+      data: [
+        { date: '2020-01-01', value: 10 },
+        { date: '2022-01-01', value: 30 },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal', scale: { type: 'utc' } },
+        y: { field: 'value', type: 'quantitative' },
+      },
+      chrome: {},
+      annotations: [],
+      responsive: true,
+      theme: {},
+      darkMode: 'off',
+      labels: { density: 'auto', format: '' },
+    };
+    const scales = computeScales(spec, chartArea, spec.data);
+    expect(scales.x!.type).toBe('utc');
+  });
+
+  it('creates a quantile scale', () => {
+    const spec = makeQuantSpec({ type: 'quantile' });
+    const scales = computeScales(spec, chartArea, spec.data);
+    expect(scales.y!.type).toBe('quantile');
+  });
+
+  it('creates a quantize scale', () => {
+    const spec = makeQuantSpec({ type: 'quantize' });
+    const scales = computeScales(spec, chartArea, spec.data);
+    expect(scales.y!.type).toBe('quantize');
+  });
+
+  it('creates a threshold scale', () => {
+    const spec = makeQuantSpec({ type: 'threshold', domain: [10, 100] });
+    const scales = computeScales(spec, chartArea, spec.data);
+    expect(scales.y!.type).toBe('threshold');
+  });
+});
+
+describe('scale config properties', () => {
+  it('applies clamp to linear scale', () => {
+    const spec = makeQuantSpec({ type: 'linear', domain: [0, 100], clamp: true });
+    const scales = computeScales(spec, chartArea, spec.data);
+    // Values outside domain should be clamped to range edges
+    const posAbove = scales.y!.scale(200) as number;
+    const posAtMax = scales.y!.scale(100) as number;
+    expect(posAbove).toBe(posAtMax);
+  });
+
+  it('applies reverse to linear scale', () => {
+    const specNormal = makeQuantSpec({ type: 'linear' });
+    const specReversed = makeQuantSpec({ type: 'linear', reverse: true });
+    const normal = computeScales(specNormal, chartArea, specNormal.data);
+    const reversed = computeScales(specReversed, chartArea, specReversed.data);
+
+    // In a reversed scale, higher values should map to the opposite end
+    const normalRange = normal.y!.scale.range() as number[];
+    const reversedRange = reversed.y!.scale.range() as number[];
+    expect(normalRange[0]).toBe(reversedRange[1]);
+    expect(normalRange[1]).toBe(reversedRange[0]);
+  });
+
+  it('applies padding to band scale', () => {
+    const specDefault: NormalizedChartSpec = {
+      ...barSpec,
+      encoding: {
+        x: { field: 'count', type: 'quantitative' },
+        y: { field: 'category', type: 'nominal' },
+      },
+    };
+    const specPadded: NormalizedChartSpec = {
+      ...barSpec,
+      encoding: {
+        x: { field: 'count', type: 'quantitative' },
+        y: { field: 'category', type: 'nominal', scale: { padding: 0.1 } },
+      },
+    };
+
+    const defaultScales = computeScales(specDefault, chartArea, specDefault.data);
+    const paddedScales = computeScales(specPadded, chartArea, specPadded.data);
+
+    // Smaller padding = wider bands
+    const defaultBandwidth = defaultScales.y!.scale.bandwidth!() as number;
+    const paddedBandwidth = paddedScales.y!.scale.bandwidth!() as number;
+    expect(paddedBandwidth).toBeGreaterThan(defaultBandwidth);
+  });
+
+  it('backward compatible: existing specs still work', () => {
+    // lineSpec and barSpec from before should still produce valid scales
+    const lineScales = computeScales(lineSpec, chartArea, lineSpec.data);
+    expect(lineScales.x!.type).toBe('time');
+    expect(lineScales.y!.type).toBe('linear');
+    expect(lineScales.color!.type).toBe('ordinal');
+
+    const barScales = computeScales(barSpec, chartArea, barSpec.data);
+    expect(barScales.x!.type).toBe('linear');
+    expect(barScales.y!.type).toBe('band');
+  });
+});

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

@@ -26,7 +26,8 @@ const compactStrategy: LayoutStrategy = {
 
 function makeSpec(annotations: Annotation[]): NormalizedChartSpec {
   return {
-    type: 'line',
+    markType: 'line',
+    markDef: { type: 'line' },
     data: [
       { date: '2019-01-01', value: 10 },
       { date: '2020-01-01', value: 20 },
@@ -139,7 +140,8 @@ describe('computeAnnotations', () => {
 
     it('interpolates range position for values between ordinal data points', () => {
       const ordinalSpec: NormalizedChartSpec = {
-        type: 'line',
+        markType: 'line',
+        markDef: { type: 'line' },
         data: [
           { year: '2005', value: 10 },
           { year: '2007', value: 20 },
@@ -182,7 +184,8 @@ describe('computeAnnotations', () => {
 
     it('clamps interpolation for values outside the ordinal domain range', () => {
       const ordinalSpec: NormalizedChartSpec = {
-        type: 'line',
+        markType: 'line',
+        markDef: { type: 'line' },
         data: [
           { year: '2005', value: 10 },
           { year: '2007', value: 20 },
@@ -209,7 +212,8 @@ describe('computeAnnotations', () => {
 
     it('returns null for non-numeric ordinal domain values', () => {
       const catSpec: NormalizedChartSpec = {
-        type: 'column',
+        markType: 'bar',
+        markDef: { type: 'bar', orient: 'vertical' },
         data: [
           { category: 'Jan', value: 10 },
           { category: 'Feb', value: 20 },