@opendata-ai/openchart-engine 7.11.0 → 8.0.0-rc.2

package/src/compiler/__tests__/a11y-warnings.test.ts

@@ -0,0 +1,148 @@
+/**
+ * Dev-mode WCAG contrast warnings.
+ *
+ * Unit tests for collectContrastWarnings plus compileChart integration:
+ * warnings only fire with { dev: true }, name both colors and the ratio,
+ * and never throw.
+ */
+
+import { resolveTheme } from '@opendata-ai/openchart-core';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { compileChart } from '../../compile';
+import { computeScales } from '../../layout/scales';
+import { collectContrastWarnings } from '../a11y-warnings';
+import type { NormalizedChartSpec } from '../types';
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const AREA = { x: 0, y: 0, width: 500, height: 300 };
+
+/** Stacked column spec with an explicit two-color range. */
+function stackedBarSpec(range: [string, string]) {
+  return {
+    mark: 'bar' as const,
+    data: [
+      { month: 'Jan', series: 'A', value: 10 },
+      { month: 'Jan', series: 'B', value: 20 },
+      { month: 'Feb', series: 'A', value: 15 },
+      { month: 'Feb', series: 'B', value: 25 },
+    ],
+    encoding: {
+      x: { field: 'month', type: 'nominal' as const },
+      y: { field: 'value', type: 'quantitative' as const, stack: 'zero' as const },
+      color: { field: 'series', type: 'nominal' as const, scale: { range } },
+    },
+  };
+}
+
+function scalesFor(spec: ReturnType<typeof stackedBarSpec>) {
+  return computeScales(
+    { ...spec, markType: 'bar' } as unknown as NormalizedChartSpec,
+    AREA,
+    spec.data,
+  );
+}
+
+const theme = resolveTheme({});
+
+// ---------------------------------------------------------------------------
+// collectContrastWarnings (unit)
+// ---------------------------------------------------------------------------
+
+describe('collectContrastWarnings', () => {
+  it('warns on adjacent stacked series below 3:1, naming both colors and the ratio', () => {
+    const spec = stackedBarSpec(['#1a5276', '#21618c']);
+    const warnings = collectContrastWarnings(scalesFor(spec), 'bar', theme);
+
+    const adjacent = warnings.find((w) => w.includes('Adjacent series'));
+    expect(adjacent).toBeDefined();
+    expect(adjacent).toContain('#1a5276');
+    expect(adjacent).toContain('#21618c');
+    expect(adjacent).toContain('"A"');
+    expect(adjacent).toContain('"B"');
+    expect(adjacent).toMatch(/\d\.\d{2}:1/);
+    expect(adjacent).toContain('WCAG 1.4.11');
+    // Suggested replacement is a concrete color
+    expect(adjacent).toMatch(/Nearest passing color for "B": #[0-9a-f]{6}/i);
+  });
+
+  it('stays silent for well-separated series colors', () => {
+    const spec = stackedBarSpec(['#0b3040', '#f5b942']);
+    const warnings = collectContrastWarnings(scalesFor(spec), 'bar', theme);
+    expect(warnings.filter((w) => w.includes('Adjacent series'))).toEqual([]);
+  });
+
+  it('skips adjacency checks for line marks (series are not adjacent fills)', () => {
+    const spec = stackedBarSpec(['#1a5276', '#21618c']);
+    const warnings = collectContrastWarnings(scalesFor(spec), 'line', theme);
+    expect(warnings.filter((w) => w.includes('Adjacent series'))).toEqual([]);
+  });
+
+  it('warns when a series color falls below 3:1 against an opaque background', () => {
+    const whiteBg = resolveTheme({ colors: { background: '#ffffff' } });
+    const spec = stackedBarSpec(['#f2f3f4', '#0b3040']);
+    const warnings = collectContrastWarnings(scalesFor(spec), 'bar', whiteBg);
+    const bg = warnings.find((w) => w.includes('against the background'));
+    expect(bg).toBeDefined();
+    expect(bg).toContain('#f2f3f4');
+  });
+
+  it('warns on text tokens below 4.5:1', () => {
+    const lowContrastTheme = resolveTheme({
+      colors: { background: '#ffffff', text: '#bbbbbb' },
+    });
+    const spec = stackedBarSpec(['#0b3040', '#111111']);
+    const warnings = collectContrastWarnings(scalesFor(spec), 'bar', lowContrastTheme);
+    const text = warnings.find((w) => w.includes('theme.colors.text'));
+    expect(text).toBeDefined();
+    expect(text).toContain('WCAG 1.4.3');
+  });
+
+  it('skips background-relative checks when the background is transparent (default)', () => {
+    const spec = stackedBarSpec(['#f2f3f4', '#0b3040']);
+    const warnings = collectContrastWarnings(scalesFor(spec), 'bar', theme);
+    expect(warnings.filter((w) => w.includes('against the background'))).toEqual([]);
+  });
+
+  it('passes cleanly when series contrast both each other and the background', () => {
+    const spec = stackedBarSpec(['#767676', '#111111']);
+    expect(collectContrastWarnings(scalesFor(spec), 'bar', theme)).toEqual([]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// compileChart integration (dev gate)
+// ---------------------------------------------------------------------------
+
+describe('compileChart dev-mode gating', () => {
+  beforeEach(() => {
+    vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('logs contrast warnings only when dev: true', () => {
+    const spec = stackedBarSpec(['#1a5276', '#21618c']);
+
+    compileChart(spec, { width: 600, height: 400 });
+    const withoutDev = (console.warn as ReturnType<typeof vi.fn>).mock.calls.filter((c) =>
+      String(c[0]).includes('[openchart a11y]'),
+    );
+    expect(withoutDev).toEqual([]);
+
+    compileChart(spec, { width: 600, height: 400, dev: true });
+    const withDev = (console.warn as ReturnType<typeof vi.fn>).mock.calls.filter((c) =>
+      String(c[0]).includes('[openchart a11y]'),
+    );
+    expect(withDev.length).toBeGreaterThan(0);
+  });
+
+  it('never throws, even for unparseable colors', () => {
+    const spec = stackedBarSpec(['not-a-color', 'also-not-a-color']);
+    expect(() => compileChart(spec, { width: 600, height: 400, dev: true })).not.toThrow();
+  });
+});

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

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

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

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

package/src/compiler/__tests__/fixtures/vl-parity/count-aggregate.json

@@ -0,0 +1,22 @@
+{
+  "options": { "width": 600, "height": 400 },
+  "vl": {
+    "mark": "bar",
+    "data": [{ "cat": "A", "v": 1 }, { "cat": "A", "v": 2 }, { "cat": "B", "v": 3 }],
+    "encoding": {
+      "x": { "field": "cat", "type": "nominal" },
+      "y": { "aggregate": "count" }
+    }
+  },
+  "canonical": {
+    "mark": "bar",
+    "data": [{ "cat": "A", "v": 1 }, { "cat": "A", "v": 2 }, { "cat": "B", "v": 3 }],
+    "transform": [
+      { "aggregate": [{ "op": "count", "field": "__count", "as": "__count" }], "groupby": ["cat"] }
+    ],
+    "encoding": {
+      "x": { "field": "cat", "type": "nominal" },
+      "y": { "field": "__count", "type": "quantitative", "title": "Count" }
+    }
+  }
+}

package/src/compiler/__tests__/fixtures/vl-parity/data-values.json

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

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

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

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

@@ -0,0 +1,34 @@
+{
+  "layered": true,
+  "options": { "width": 600, "height": 400 },
+  "vl": {
+    "data": [{ "cat": "A", "v": 1 }, { "cat": "A", "v": 2 }, { "cat": "B", "v": 3 }],
+    "layer": [
+      {
+        "mark": "bar",
+        "encoding": {
+          "x": { "field": "cat", "type": "nominal" },
+          "y": { "aggregate": "count" }
+        }
+      }
+    ]
+  },
+  "canonical": {
+    "data": [{ "cat": "A", "v": 1 }, { "cat": "A", "v": 2 }, { "cat": "B", "v": 3 }],
+    "layer": [
+      {
+        "mark": "bar",
+        "transform": [
+          {
+            "aggregate": [{ "op": "count", "field": "__count", "as": "__count" }],
+            "groupby": ["cat"]
+          }
+        ],
+        "encoding": {
+          "x": { "field": "cat", "type": "nominal" },
+          "y": { "field": "__count", "type": "quantitative", "title": "Count" }
+        }
+      }
+    ]
+  }
+}

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

@@ -0,0 +1,22 @@
+{
+  "layered": true,
+  "options": { "width": 600, "height": 400 },
+  "vl": {
+    "data": {
+      "values": [{ "date": "2020-01-01", "a": 1, "b": 4 }, { "date": "2021-01-01", "a": 2, "b": 3 }]
+    },
+    "encoding": { "x": { "field": "date", "type": "temporal" } },
+    "layer": [
+      { "mark": "line", "encoding": { "y": { "field": "a", "type": "quantitative" } } },
+      { "mark": "line", "encoding": { "y": { "field": "b", "type": "quantitative" } } }
+    ]
+  },
+  "canonical": {
+    "data": [{ "date": "2020-01-01", "a": 1, "b": 4 }, { "date": "2021-01-01", "a": 2, "b": 3 }],
+    "encoding": { "x": { "field": "date", "type": "temporal" } },
+    "layer": [
+      { "mark": "line", "encoding": { "y": { "field": "a", "type": "quantitative" } } },
+      { "mark": "line", "encoding": { "y": { "field": "b", "type": "quantitative" } } }
+    ]
+  }
+}

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

@@ -0,0 +1,41 @@
+{
+  "layered": true,
+  "options": { "width": 600, "height": 400 },
+  "vl": {
+    "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": { "color": { "field": "group", "type": "nominal", "legend": null } },
+    "layer": [
+      {
+        "mark": "line",
+        "encoding": {
+          "x": { "field": "date", "type": "temporal" },
+          "y": { "field": "value", "type": "quantitative" }
+        }
+      }
+    ]
+  },
+  "canonical": {
+    "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": { "color": { "field": "group", "type": "nominal" } },
+    "layer": [
+      {
+        "mark": "line",
+        "encoding": {
+          "x": { "field": "date", "type": "temporal" },
+          "y": { "field": "value", "type": "quantitative" }
+        }
+      }
+    ]
+  }
+}

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

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

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" }
+    }
+  }
+}