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

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__/animation.test.ts

@@ -0,0 +1,177 @@
+/**
+ * Tests for the animation resolver: resolveAnimation() and clampStaggerDelay().
+ *
+ * These are pure functions that normalize the various AnimationSpec shorthand
+ * forms into a fully resolved config with all defaults filled in.
+ */
+
+import { describe, expect, it } from 'vitest';
+import {
+  clampStaggerDelay,
+  ENTER_DEFAULTS,
+  EXIT_DEFAULTS,
+  resolveAnimation,
+  UPDATE_DEFAULTS,
+} from '../animation';
+
+// ---------------------------------------------------------------------------
+// resolveAnimation
+// ---------------------------------------------------------------------------
+
+describe('resolveAnimation', () => {
+  it('returns undefined for false', () => {
+    expect(resolveAnimation(false)).toBeUndefined();
+  });
+
+  it('returns undefined for undefined', () => {
+    expect(resolveAnimation(undefined)).toBeUndefined();
+  });
+
+  it('returns all three phases with defaults for true', () => {
+    const result = resolveAnimation(true);
+    expect(result).toEqual({
+      enter: { ...ENTER_DEFAULTS },
+      update: { ...UPDATE_DEFAULTS },
+      exit: { ...EXIT_DEFAULTS },
+      annotationDelay: 200,
+    });
+  });
+
+  it('resolves AnimationConfig with enter: true', () => {
+    const result = resolveAnimation({ enter: true });
+    expect(result).toBeDefined();
+    expect(result!.enter).toEqual(ENTER_DEFAULTS);
+    expect(result!.update).toEqual(UPDATE_DEFAULTS);
+    expect(result!.exit).toEqual(EXIT_DEFAULTS);
+    expect(result!.annotationDelay).toBe(200);
+  });
+
+  it('resolves custom enter config', () => {
+    const result = resolveAnimation({
+      enter: {
+        duration: 800,
+        ease: 'smooth',
+        stagger: { delay: 40, order: 'value' },
+      },
+    });
+    expect(result).toBeDefined();
+    expect(result!.enter).toEqual({
+      duration: 800,
+      ease: 'smooth',
+      staggerDelay: 40,
+      staggerOrder: 'value',
+    });
+    // Other phases still present with defaults
+    expect(result!.update).toEqual(UPDATE_DEFAULTS);
+    expect(result!.exit).toEqual(EXIT_DEFAULTS);
+  });
+
+  it('enter: false, update: true produces update present, no enter', () => {
+    const result = resolveAnimation({ enter: false, update: true });
+    expect(result).toBeDefined();
+    expect(result!.enter).toBeUndefined();
+    expect(result!.update).toEqual(UPDATE_DEFAULTS);
+    expect(result!.exit).toEqual(EXIT_DEFAULTS);
+  });
+
+  it('update: false produces enter + exit present, update absent', () => {
+    const result = resolveAnimation({ update: false });
+    expect(result).toBeDefined();
+    expect(result!.enter).toEqual(ENTER_DEFAULTS);
+    expect(result!.update).toBeUndefined();
+    expect(result!.exit).toEqual(EXIT_DEFAULTS);
+  });
+
+  it('all phases false returns undefined', () => {
+    expect(resolveAnimation({ enter: false, update: false, exit: false })).toBeUndefined();
+  });
+
+  it('resolves stagger: false to staggerDelay: 0', () => {
+    const result = resolveAnimation({ enter: { stagger: false } });
+    expect(result).toBeDefined();
+    expect(result!.enter!.staggerDelay).toBe(0);
+  });
+
+  it('uses custom annotationDelay', () => {
+    const result = resolveAnimation({ enter: true, annotationDelay: 500 });
+    expect(result).toBeDefined();
+    expect(result!.annotationDelay).toBe(500);
+  });
+
+  it('empty config resolves all phases with defaults (behaves like true)', () => {
+    const result = resolveAnimation({});
+    expect(result).toBeDefined();
+    expect(result!.enter).toEqual(ENTER_DEFAULTS);
+    expect(result!.update).toEqual(UPDATE_DEFAULTS);
+    expect(result!.exit).toEqual(EXIT_DEFAULTS);
+  });
+
+  it('preserves default annotationDelay when not overridden', () => {
+    const result = resolveAnimation({ enter: { duration: 1000 } });
+    expect(result!.annotationDelay).toBe(200);
+  });
+
+  it('enter phase uses ENTER_DEFAULTS for unspecified fields', () => {
+    const result = resolveAnimation({ enter: { duration: 1000 } });
+    expect(result!.enter).toEqual({
+      duration: 1000,
+      ease: 'smooth',
+      staggerDelay: 80,
+      staggerOrder: 'index',
+    });
+  });
+
+  it('update phase uses UPDATE_DEFAULTS (no stagger by default)', () => {
+    const result = resolveAnimation(true);
+    expect(result!.update).toEqual({
+      duration: 500,
+      ease: 'smooth',
+      staggerDelay: 0,
+      staggerOrder: 'index',
+    });
+  });
+
+  it('exit phase uses EXIT_DEFAULTS (shorter duration)', () => {
+    const result = resolveAnimation(true);
+    expect(result!.exit).toEqual({
+      duration: 300,
+      ease: 'smooth',
+      staggerDelay: 0,
+      staggerOrder: 'index',
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// clampStaggerDelay
+// ---------------------------------------------------------------------------
+
+describe('clampStaggerDelay', () => {
+  it('returns 0 for single element', () => {
+    expect(clampStaggerDelay(30, 1)).toBe(0);
+  });
+
+  it('returns 0 for zero elements', () => {
+    expect(clampStaggerDelay(30, 0)).toBe(0);
+  });
+
+  it('returns delay unchanged for small counts', () => {
+    // 30 * 10 = 300, well under 2000ms cap
+    expect(clampStaggerDelay(30, 10)).toBe(30);
+  });
+
+  it('clamps delay for large counts', () => {
+    // 30 * 200 = 6000 > 2000, so clamp to 2000/200 = 10
+    expect(clampStaggerDelay(30, 200)).toBe(10);
+  });
+
+  it('clamps to cap total at 2000ms', () => {
+    // 50 * 100 = 5000 > 2000, so clamp to 2000/100 = 20
+    expect(clampStaggerDelay(50, 100)).toBe(20);
+  });
+
+  it('does not increase delay when already under the cap', () => {
+    // 5 * 50 = 250 < 2000, keeps at 5
+    expect(clampStaggerDelay(5, 50)).toBe(5);
+  });
+});

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

@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest';
+import { compile } from '../index';
+import type { NormalizedChartSpec } from '../types';
+
+describe('compile (validate + normalize pipeline)', () => {
+  const validSpec = {
+    mark: 'line',
+    data: [
+      { date: '2020-01-01', value: 10 },
+      { date: '2021-01-01', value: 20 },
+    ],
+    encoding: {
+      x: { field: 'date', type: 'temporal' },
+      y: { field: 'value', type: 'quantitative' },
+    },
+    chrome: { title: 'Test Chart' },
+  };
+
+  it('returns a normalized spec for valid input', () => {
+    const result = compile(validSpec);
+    expect(result.spec).toBeDefined();
+    expect((result.spec as NormalizedChartSpec).markType).toBe('line');
+    expect(result.warnings).toBeInstanceOf(Array);
+  });
+
+  it('fills in defaults on the normalized spec', () => {
+    const result = compile(validSpec);
+    const spec = result.spec as NormalizedChartSpec;
+    expect(spec.responsive).toBe(true);
+    expect(spec.darkMode).toBe('off');
+    expect(spec.annotations).toEqual([]);
+  });
+
+  it('normalizes chrome strings', () => {
+    const result = compile(validSpec);
+    const spec = result.spec as NormalizedChartSpec;
+    expect(spec.chrome.title).toEqual({ text: 'Test Chart' });
+  });
+
+  it('throws on invalid spec', () => {
+    expect(() => compile(null)).toThrow('Invalid spec');
+    expect(() => compile({})).toThrow('Invalid spec');
+    expect(() =>
+      compile({
+        mark: 'line',
+        data: [],
+        encoding: {},
+      }),
+    ).toThrow('Invalid spec');
+  });
+
+  it('produces warnings for inferred types', () => {
+    const spec = {
+      mark: 'point',
+      data: [
+        { x: 10, y: 20 },
+        { x: 30, y: 40 },
+      ],
+      encoding: {
+        x: { field: 'x' },
+        y: { field: 'y' },
+      },
+    };
+
+    const result = compile(spec);
+    expect(result.warnings.length).toBeGreaterThan(0);
+    expect(result.warnings.some((w) => w.includes('Inferred'))).toBe(true);
+  });
+
+  it('works for table specs', () => {
+    const result = compile({
+      type: 'table',
+      data: [{ name: 'Alice', age: 30 }],
+      columns: [{ key: 'name' }],
+    });
+    expect(result.spec.type).toBe('table');
+  });
+
+  it('works for graph specs', () => {
+    const result = compile({
+      type: 'graph',
+      nodes: [{ id: 'a' }, { id: 'b' }],
+      edges: [{ source: 'a', target: 'b' }],
+    });
+    expect(result.spec.type).toBe('graph');
+  });
+});

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