@opendata-ai/openchart-engine 8.0.0-rc.8 → 8.0.0

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

@@ -1,148 +0,0 @@
-/**
- * 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

@@ -1,177 +0,0 @@
-/**
- * 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

@@ -1,87 +0,0 @@
-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

@@ -1,19 +0,0 @@
-{
-  "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

@@ -1,20 +0,0 @@
-{
-  "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

@@ -1,22 +0,0 @@
-{
-  "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

@@ -1,19 +0,0 @@
-{
-  "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

@@ -1,14 +0,0 @@
-{
-  "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

@@ -1,34 +0,0 @@
-{
-  "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

@@ -1,22 +0,0 @@
-{
-  "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

@@ -1,41 +0,0 @@
-{
-  "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

@@ -1,38 +0,0 @@
-{
-  "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" }
-        }
-      }
-    ]
-  }
-}