@opendata-ai/openchart-engine 8.0.0-rc.12 → 8.0.0-rc.3

package/src/compiler/__tests__/fixtures/vl-parity/layer-sort.json

@@ -0,0 +1,28 @@
+{
+  "layered": true,
+  "options": { "width": 600, "height": 400 },
+  "vl": {
+    "data": [{ "cat": "A", "value": 20 }, { "cat": "B", "value": 50 }, { "cat": "C", "value": 10 }],
+    "layer": [
+      {
+        "mark": "bar",
+        "encoding": {
+          "x": { "field": "cat", "type": "nominal", "sort": "-y" },
+          "y": { "field": "value", "type": "quantitative" }
+        }
+      }
+    ]
+  },
+  "canonical": {
+    "data": [{ "cat": "A", "value": 20 }, { "cat": "B", "value": 50 }, { "cat": "C", "value": 10 }],
+    "layer": [
+      {
+        "mark": "bar",
+        "encoding": {
+          "x": { "field": "cat", "type": "nominal", "scale": { "domain": ["B", "A", "C"] } },
+          "y": { "field": "value", "type": "quantitative" }
+        }
+      }
+    ]
+  }
+}

package/src/compiler/__tests__/fixtures/vl-parity/layer-theta.json

@@ -0,0 +1,28 @@
+{
+  "layered": true,
+  "options": { "width": 600, "height": 400 },
+  "vl": {
+    "data": [{ "category": "A", "amount": 30 }, { "category": "B", "amount": 70 }],
+    "layer": [
+      {
+        "mark": "arc",
+        "encoding": {
+          "theta": { "field": "amount", "type": "quantitative" },
+          "color": { "field": "category", "type": "nominal" }
+        }
+      }
+    ]
+  },
+  "canonical": {
+    "data": [{ "category": "A", "amount": 30 }, { "category": "B", "amount": 70 }],
+    "layer": [
+      {
+        "mark": "arc",
+        "encoding": {
+          "y": { "field": "amount", "type": "quantitative" },
+          "color": { "field": "category", "type": "nominal" }
+        }
+      }
+    ]
+  }
+}

package/src/compiler/__tests__/fixtures/vl-parity/layer-title.json

@@ -0,0 +1,30 @@
+{
+  "layered": true,
+  "options": { "width": 600, "height": 400 },
+  "vl": {
+    "title": "Layered revenue",
+    "data": [{ "cat": "A", "value": 10 }, { "cat": "B", "value": 20 }],
+    "layer": [
+      {
+        "mark": "bar",
+        "encoding": {
+          "x": { "field": "cat", "type": "nominal" },
+          "y": { "field": "value", "type": "quantitative" }
+        }
+      }
+    ]
+  },
+  "canonical": {
+    "chrome": { "title": "Layered revenue" },
+    "data": [{ "cat": "A", "value": 10 }, { "cat": "B", "value": 20 }],
+    "layer": [
+      {
+        "mark": "bar",
+        "encoding": {
+          "x": { "field": "cat", "type": "nominal" },
+          "y": { "field": "value", "type": "quantitative" }
+        }
+      }
+    ]
+  }
+}

package/src/compiler/__tests__/fixtures/vl-parity/layer-value-def.json

@@ -0,0 +1,29 @@
+{
+  "layered": true,
+  "options": { "width": 600, "height": 400 },
+  "vl": {
+    "data": [{ "cat": "A", "value": 10 }, { "cat": "B", "value": 20 }],
+    "layer": [
+      {
+        "mark": "bar",
+        "encoding": {
+          "x": { "field": "cat", "type": "nominal" },
+          "y": { "field": "value", "type": "quantitative" },
+          "color": { "value": "#1b7fa3" }
+        }
+      }
+    ]
+  },
+  "canonical": {
+    "data": [{ "cat": "A", "value": 10 }, { "cat": "B", "value": 20 }],
+    "layer": [
+      {
+        "mark": { "type": "bar", "fill": "#1b7fa3" },
+        "encoding": {
+          "x": { "field": "cat", "type": "nominal" },
+          "y": { "field": "value", "type": "quantitative" }
+        }
+      }
+    ]
+  }
+}

package/src/compiler/__tests__/fixtures/vl-parity/legend-null.json

@@ -0,0 +1,32 @@
+{
+  "options": { "width": 600, "height": 400 },
+  "vl": {
+    "mark": "line",
+    "data": [
+      { "date": "2020-01-01", "value": 1, "group": "A" },
+      { "date": "2021-01-01", "value": 2, "group": "A" },
+      { "date": "2020-01-01", "value": 3, "group": "B" },
+      { "date": "2021-01-01", "value": 4, "group": "B" }
+    ],
+    "encoding": {
+      "x": { "field": "date", "type": "temporal" },
+      "y": { "field": "value", "type": "quantitative" },
+      "color": { "field": "group", "type": "nominal", "legend": null }
+    }
+  },
+  "canonical": {
+    "mark": "line",
+    "legend": { "show": false },
+    "data": [
+      { "date": "2020-01-01", "value": 1, "group": "A" },
+      { "date": "2021-01-01", "value": 2, "group": "A" },
+      { "date": "2020-01-01", "value": 3, "group": "B" },
+      { "date": "2021-01-01", "value": 4, "group": "B" }
+    ],
+    "encoding": {
+      "x": { "field": "date", "type": "temporal" },
+      "y": { "field": "value", "type": "quantitative" },
+      "color": { "field": "group", "type": "nominal" }
+    }
+  }
+}

package/src/compiler/__tests__/fixtures/vl-parity/scheme.json

@@ -0,0 +1,25 @@
+{
+  "options": { "width": 600, "height": 400 },
+  "vl": {
+    "mark": "bar",
+    "data": [{ "cat": "A", "value": 10 }, { "cat": "B", "value": 20 }, { "cat": "C", "value": 30 }],
+    "encoding": {
+      "x": { "field": "cat", "type": "nominal" },
+      "y": { "field": "value", "type": "quantitative" },
+      "color": { "field": "value", "type": "quantitative", "scale": { "scheme": "blues" } }
+    }
+  },
+  "canonical": {
+    "mark": "bar",
+    "data": [{ "cat": "A", "value": 10 }, { "cat": "B", "value": 20 }, { "cat": "C", "value": 30 }],
+    "encoding": {
+      "x": { "field": "cat", "type": "nominal" },
+      "y": { "field": "value", "type": "quantitative" },
+      "color": {
+        "field": "value",
+        "type": "quantitative",
+        "scale": { "range": ["#deebf7", "#c6dbef", "#9ecae1", "#6baed6", "#3182bd", "#08519c"] }
+      }
+    }
+  }
+}

package/src/compiler/__tests__/fixtures/vl-parity/sort-by-value.json

@@ -0,0 +1,19 @@
+{
+  "options": { "width": 600, "height": 400 },
+  "vl": {
+    "mark": "bar",
+    "data": [{ "cat": "A", "value": 20 }, { "cat": "B", "value": 50 }, { "cat": "C", "value": 10 }],
+    "encoding": {
+      "x": { "field": "cat", "type": "nominal", "sort": "-y" },
+      "y": { "field": "value", "type": "quantitative" }
+    }
+  },
+  "canonical": {
+    "mark": "bar",
+    "data": [{ "cat": "A", "value": 20 }, { "cat": "B", "value": 50 }, { "cat": "C", "value": 10 }],
+    "encoding": {
+      "x": { "field": "cat", "type": "nominal", "scale": { "domain": ["B", "A", "C"] } },
+      "y": { "field": "value", "type": "quantitative" }
+    }
+  }
+}

package/src/compiler/__tests__/fixtures/vl-parity/theta-arc.json

@@ -0,0 +1,19 @@
+{
+  "options": { "width": 600, "height": 400 },
+  "vl": {
+    "mark": "arc",
+    "data": [{ "category": "A", "amount": 30 }, { "category": "B", "amount": 70 }],
+    "encoding": {
+      "theta": { "field": "amount", "type": "quantitative" },
+      "color": { "field": "category", "type": "nominal" }
+    }
+  },
+  "canonical": {
+    "mark": "arc",
+    "data": [{ "category": "A", "amount": 30 }, { "category": "B", "amount": 70 }],
+    "encoding": {
+      "y": { "field": "amount", "type": "quantitative" },
+      "color": { "field": "category", "type": "nominal" }
+    }
+  }
+}

package/src/compiler/__tests__/fixtures/vl-parity/title-subtitle.json

@@ -0,0 +1,21 @@
+{
+  "options": { "width": 600, "height": 400 },
+  "vl": {
+    "mark": "line",
+    "title": { "text": "Revenue", "subtitle": "By quarter" },
+    "data": [{ "date": "2020-01-01", "value": 1 }, { "date": "2021-01-01", "value": 2 }],
+    "encoding": {
+      "x": { "field": "date", "type": "temporal" },
+      "y": { "field": "value", "type": "quantitative" }
+    }
+  },
+  "canonical": {
+    "mark": "line",
+    "chrome": { "title": "Revenue", "subtitle": "By quarter" },
+    "data": [{ "date": "2020-01-01", "value": 1 }, { "date": "2021-01-01", "value": 2 }],
+    "encoding": {
+      "x": { "field": "date", "type": "temporal" },
+      "y": { "field": "value", "type": "quantitative" }
+    }
+  }
+}

package/src/compiler/__tests__/fixtures/vl-parity/width-height.json

@@ -0,0 +1,23 @@
+{
+  "options": { "width": 400, "height": 300 },
+  "vlOptions": { "width": 800, "height": 600 },
+  "vl": {
+    "mark": "bar",
+    "width": 400,
+    "height": 300,
+    "data": [{ "cat": "A", "value": 10 }, { "cat": "B", "value": 20 }],
+    "encoding": {
+      "x": { "field": "cat", "type": "nominal" },
+      "y": { "field": "value", "type": "quantitative" }
+    }
+  },
+  "canonical": {
+    "mark": "bar",
+    "responsive": false,
+    "data": [{ "cat": "A", "value": 10 }, { "cat": "B", "value": 20 }],
+    "encoding": {
+      "x": { "field": "cat", "type": "nominal" },
+      "y": { "field": "value", "type": "quantitative" }
+    }
+  }
+}

package/src/compiler/__tests__/keys.test.ts

@@ -0,0 +1,83 @@
+/**
+ * Tests for mark key utilities: serializeKeyValue() and dedupeKeys().
+ */
+
+import { describe, expect, it } from 'vitest';
+import { dedupeKeys, serializeKeyValue } from '../keys';
+
+// ---------------------------------------------------------------------------
+// serializeKeyValue
+// ---------------------------------------------------------------------------
+
+describe('serializeKeyValue', () => {
+  it('serializes strings as-is', () => {
+    expect(serializeKeyValue('hello')).toBe('hello');
+    expect(serializeKeyValue('')).toBe('');
+  });
+
+  it('serializes numbers to string', () => {
+    expect(serializeKeyValue(42)).toBe('42');
+    expect(serializeKeyValue(0)).toBe('0');
+    expect(serializeKeyValue(-3.14)).toBe('-3.14');
+  });
+
+  it('serializes booleans to string', () => {
+    expect(serializeKeyValue(true)).toBe('true');
+    expect(serializeKeyValue(false)).toBe('false');
+  });
+
+  it('serializes null to sentinel', () => {
+    expect(serializeKeyValue(null)).toBe('∅');
+  });
+
+  it('serializes undefined to sentinel', () => {
+    expect(serializeKeyValue(undefined)).toBe('∅');
+  });
+
+  it('serializes Date to epoch ms (not locale string)', () => {
+    const d = new Date('2024-01-15T00:00:00Z');
+    const result = serializeKeyValue(d);
+    expect(result).toBe(String(d.getTime()));
+    // Confirm it's purely numeric
+    expect(Number(result)).toBe(d.getTime());
+    // Confirm it does NOT use Date.toString
+    expect(result).not.toContain('Jan');
+    expect(result).not.toContain('Mon');
+  });
+
+  it('two Dates with same epoch produce same key', () => {
+    const d1 = new Date('2024-06-01T12:00:00Z');
+    const d2 = new Date(d1.getTime());
+    expect(serializeKeyValue(d1)).toBe(serializeKeyValue(d2));
+  });
+});
+
+// ---------------------------------------------------------------------------
+// dedupeKeys
+// ---------------------------------------------------------------------------
+
+describe('dedupeKeys', () => {
+  it('passes unique keys through unchanged', () => {
+    expect(dedupeKeys(['a', 'b', 'c'])).toEqual(['a', 'b', 'c']);
+  });
+
+  it('suffixes duplicates with occurrence index', () => {
+    expect(dedupeKeys(['a', 'a', 'a'])).toEqual(['a⸱0', 'a⸱1', 'a⸱2']);
+  });
+
+  it('only suffixes keys that appear more than once', () => {
+    expect(dedupeKeys(['a', 'b', 'a'])).toEqual(['a⸱0', 'b', 'a⸱1']);
+  });
+
+  it('handles empty array', () => {
+    expect(dedupeKeys([])).toEqual([]);
+  });
+
+  it('handles single element', () => {
+    expect(dedupeKeys(['x'])).toEqual(['x']);
+  });
+
+  it('handles multiple duplicate groups', () => {
+    expect(dedupeKeys(['x', 'y', 'x', 'y', 'z'])).toEqual(['x⸱0', 'y⸱0', 'x⸱1', 'y⸱1', 'z']);
+  });
+});

package/src/compiler/__tests__/normalize-highlight.test.ts

@@ -0,0 +1,103 @@
+import type { ChartSpec } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { compile } from '../index';
+import { normalizeSpec } from '../normalize';
+import type { NormalizedChartSpec } from '../types';
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+const data = [
+  { date: '2020', country: 'Germany', value: 100 },
+  { date: '2020', country: 'France', value: 90 },
+  { date: '2020', country: 'Italy', value: 80 },
+  { date: '2021', country: 'Germany', value: 110 },
+  { date: '2021', country: 'France', value: 95 },
+  { date: '2021', country: 'Italy', value: 85 },
+];
+
+function makeSpec(highlight?: string | string[]): ChartSpec {
+  const colorChannel: Record<string, unknown> = {
+    field: 'country',
+    type: 'nominal',
+  };
+  if (highlight !== undefined) {
+    colorChannel.highlight = highlight;
+  }
+  return {
+    mark: 'line',
+    data,
+    encoding: {
+      x: { field: 'date', type: 'temporal' },
+      y: { field: 'value', type: 'quantitative' },
+      color: colorChannel,
+    },
+  } as ChartSpec;
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('normalizeSpec — highlight', () => {
+  it('normalizes a single string highlight to an array', () => {
+    const result = normalizeSpec(makeSpec('Germany')) as NormalizedChartSpec;
+    expect(result.highlight).toEqual(['Germany']);
+  });
+
+  it('preserves an array highlight as-is', () => {
+    const result = normalizeSpec(makeSpec(['Germany', 'France'])) as NormalizedChartSpec;
+    expect(result.highlight).toEqual(['Germany', 'France']);
+  });
+
+  it('defaults to an empty array when no highlight is specified', () => {
+    const result = normalizeSpec(makeSpec()) as NormalizedChartSpec;
+    expect(result.highlight).toEqual([]);
+  });
+
+  it('defaults to an empty array when there is no color encoding', () => {
+    const spec: ChartSpec = {
+      mark: 'line',
+      data,
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+    const result = normalizeSpec(spec) as NormalizedChartSpec;
+    expect(result.highlight).toEqual([]);
+  });
+
+  it('warns when a highlight value does not appear in data', () => {
+    const { warnings } = compile(makeSpec(['Spain']));
+    const highlightWarning = warnings.find((w) => w.includes('Spain') && w.includes('highlight'));
+    expect(highlightWarning).toBeDefined();
+  });
+
+  it('does not warn when all highlight values appear in data', () => {
+    const { warnings } = compile(makeSpec(['Germany', 'France']));
+    const highlightWarning = warnings.find((w) => w.includes('highlight'));
+    expect(highlightWarning).toBeUndefined();
+  });
+
+  it('warns when highlight is combined with explicit scale.range', () => {
+    const spec: ChartSpec = {
+      mark: 'line',
+      data,
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative' },
+        color: {
+          field: 'country',
+          type: 'nominal',
+          highlight: ['Germany'],
+          scale: { range: ['red', 'blue', 'green'] },
+        },
+      },
+    };
+    const { warnings } = compile(spec);
+    const rangeWarning = warnings.find((w) => w.includes('scale.range') && w.includes('highlight'));
+    expect(rangeWarning).toBeDefined();
+  });
+});