Add Chart Builder: no-JSON Vega-Lite composer from a dataset (M4)

This commit is contained in:
2026-06-05 23:46:21 +03:00
parent 693f5d7073
commit c11afc273d
16 changed files with 1856 additions and 26 deletions
+104
View File
@@ -0,0 +1,104 @@
import { beforeEach, describe, expect, test } from 'vitest';
import { createDataset } from '@core/dataset';
import { useChartBuilderStore } from './ChartBuilderStore';
import { useDatasetStore } from './DatasetStore';
import { useSnippetStore } from './SnippetStore';
const cb = () => useChartBuilderStore.getState();
const T = new Date('2026-06-01T00:00:00Z');
/** Seed a dataset directly into the store and return its id. */
function seedDataset(name: string, data: unknown): number {
const ds = createDataset({ name, data, format: 'json', source: 'inline', now: T });
useDatasetStore.getState().add(ds);
return ds.id;
}
beforeEach(() => {
cb().reset();
useDatasetStore.getState().reset();
useSnippetStore.getState().reset();
});
describe('init', () => {
test('pre-populates a smart default config from the dataset columns', () => {
const id = seedDataset('Traffic', [
{ day: '2026-01-01', visits: 10 },
{ day: '2026-01-02', visits: 20 },
]);
cb().init(id);
expect(cb().datasetId).toBe(id);
expect(cb().config.datasetName).toBe('Traffic');
// date × number → a Line time series, first col on X, second on Y.
expect(cb().config.mark).toBe('line');
expect(cb().config.encodings.x).toEqual({ field: 'day', type: 'temporal' });
expect(cb().config.encodings.y).toEqual({ field: 'visits', type: 'quantitative' });
});
test('lands empty when no dataset is found', () => {
cb().init(999);
expect(cb().datasetId).toBeNull();
expect(cb().config.encodings).toEqual({});
});
});
describe('channel editing', () => {
test('mapping a column seeds a channel-appropriate type (Size stays a measure)', () => {
const id = seedDataset('Mixed', [{ name: 'A', value: 5 }]);
cb().init(id);
// A numeric column on Size → Quantitative (allowed); a category cannot be chosen
// for Size in the UI, and the store keeps the type valid for the channel.
cb().setChannelColumn('size', 'value');
expect(cb().config.encodings.size).toEqual({ field: 'value', type: 'quantitative' });
});
test('swapXY flips the two axis mappings', () => {
const id = seedDataset('XY', [{ a: 'x', b: 1 }]);
cb().init(id);
const x0 = cb().config.encodings.x;
const y0 = cb().config.encodings.y;
cb().swapXY();
expect(cb().config.encodings.x).toEqual(y0);
expect(cb().config.encodings.y).toEqual(x0);
});
test('clearing a channel to None removes it from the config', () => {
const id = seedDataset('XY', [{ a: 'x', b: 1 }]);
cb().init(id);
cb().setChannelColumn('x', null);
expect(cb().config.encodings.x).toBeNull();
});
});
describe('createSnippet', () => {
test('builds a linked snippet, activates it, and resets the builder', () => {
const id = seedDataset('Sales', [
{ region: 'N', revenue: 100 },
{ region: 'S', revenue: 80 },
]);
cb().init(id);
expect(cb().createSnippet(T)).toBe(true);
const snippets = useSnippetStore.getState().snippets;
expect(snippets).toHaveLength(1);
const made = snippets[0];
// Linked to its dataset by name (§09F), and the spec references it.
expect(made.datasetRefs).toEqual(['Sales']);
expect(made.spec).toContain('"name": "Sales"');
expect(made.meta.createdWith).toBe('chart-builder');
expect(useSnippetStore.getState().activeSnippetId).toBe(made.id);
// Builder state is reset for a fresh next open.
expect(cb().datasetId).toBeNull();
});
test('refuses to create when no channel is mapped', () => {
const id = seedDataset('Empty', [{ a: 1 }]);
cb().init(id);
cb().setChannelColumn('x', null);
cb().setChannelColumn('y', null);
expect(cb().createSnippet(T)).toBe(false);
expect(useSnippetStore.getState().snippets).toHaveLength(0);
});
});