(null);
const [failed, setFailed] = useState(false);
@@ -37,7 +47,7 @@ export function LandingChart({
// Width-responsive: the chart fills its host (a definite-width `.chartNode`)
// and keeps a natural height — right for every landing surface (hero pane,
// builder, theme gallery).
- const prepared: unknown = prepareSpecForRender(spec, { fitMode: 'width' });
+ const prepared: unknown = prepareSpecForRender(spec, { fitMode });
handle = await renderSpec(node, prepared as VisualizationSpec, config);
if (cancelled) {
handle.destroy();
@@ -57,7 +67,7 @@ export function LandingChart({
handle?.destroy();
handle = null;
};
- }, [spec, config]);
+ }, [spec, config, fitMode]);
return (
diff --git a/src/landing/showcase-specs.test.ts b/src/landing/showcase-specs.test.ts
new file mode 100644
index 0000000..b18f534
--- /dev/null
+++ b/src/landing/showcase-specs.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, test } from 'vitest';
+import { compile } from 'vega-lite';
+import { SHOWCASE_DEMOS, showcaseDisplaySpec, showcaseFitMode } from './showcase-specs';
+
+// Same promise as the example gallery (examples.test.ts): every showcase chart
+// must render — each spec is valid, self-contained Vega-Lite.
+describe('landing showcase demos', () => {
+ test('ids are unique and demos are non-empty', () => {
+ const ids = SHOWCASE_DEMOS.map((d) => d.id);
+ expect(ids.length).toBeGreaterThan(0);
+ expect(new Set(ids).size).toBe(ids.length);
+ });
+
+ test('composed demos render at their declared sizes, single views fit the card', () => {
+ const byId = (id: string) => SHOWCASE_DEMOS.find((d) => d.id === id)!;
+ expect(showcaseFitMode(byId('tooltip'))).toBe('width'); // single view
+ expect(showcaseFitMode(byId('brush'))).toBe('default'); // vconcat
+ expect(showcaseFitMode(byId('facet'))).toBe('default'); // facet
+ });
+
+ describe.each(SHOWCASE_DEMOS.map((d) => [d.id, d] as const))('demo: %s', (_id, demo) => {
+ test('carries inline data and compiles as valid Vega-Lite', () => {
+ const data = demo.spec.data as { values?: unknown[] };
+ expect(Array.isArray(data?.values)).toBe(true);
+ expect(() => compile(demo.spec as unknown as Parameters[0])).not.toThrow();
+ });
+
+ test('the displayed spec swaps inline data for a name reference, all else equal', () => {
+ const display = showcaseDisplaySpec(demo);
+ expect(display.data).toEqual({ name: demo.datasetName });
+ const { data: _a, ...restDisplay } = display;
+ const { data: _b, ...restReal } = demo.spec;
+ expect(restDisplay).toEqual(restReal);
+ });
+ });
+});
diff --git a/src/landing/showcase-specs.ts b/src/landing/showcase-specs.ts
new file mode 100644
index 0000000..589d290
--- /dev/null
+++ b/src/landing/showcase-specs.ts
@@ -0,0 +1,207 @@
+/**
+ * The "What Vega-Lite can do" showcase — the landing's popularization
+ * centerpiece. Three live, *interactive* charts, each beside the spec that
+ * produces it: the argument is that a page of JSON is a working chart.
+ *
+ * Same constraints as the app's example gallery (`@core/examples`): inline
+ * `data.values` (self-contained, renders offline), valid Vega-Lite (asserted in
+ * showcase-specs.test.ts). Rendered specs carry the data inline; the *displayed*
+ * spec shows `data: { name: … }` instead — the app's own dataset-by-reference
+ * idiom — so the text beside each chart stays the length of the idea, not of
+ * the data, and reads exactly like a snippet in Astrolabe.
+ */
+
+import type { FitMode } from '@core/rendering';
+import { VEGA_LITE_SCHEMA_URL } from '@core/snippet';
+
+export interface ShowcaseDemo {
+ /** Stable key — React list key and test identity. */
+ id: string;
+ /** Short heading over the demo row. */
+ title: string;
+ /** One or two sentences: the capability this demo argues. */
+ blurb: string;
+ /** The try-it nudge shown under the live chart. */
+ hint: string;
+ /** Dataset name shown in the displayed spec's `data: { name: … }`. */
+ datasetName: string;
+ /** The full spec (inline data) that actually renders. */
+ spec: Record;
+ /** Demo custom-theme id (see demo-themes.ts) this chart renders in. */
+ themeId: number;
+}
+
+const TEMPS = [
+ { month: '2025-01-01', city: 'Kyiv', temp: -3.1 },
+ { month: '2025-02-01', city: 'Kyiv', temp: -1.4 },
+ { month: '2025-03-01', city: 'Kyiv', temp: 4.2 },
+ { month: '2025-04-01', city: 'Kyiv', temp: 11.3 },
+ { month: '2025-05-01', city: 'Kyiv', temp: 17.6 },
+ { month: '2025-06-01', city: 'Kyiv', temp: 20.8 },
+ { month: '2025-07-01', city: 'Kyiv', temp: 22.9 },
+ { month: '2025-08-01', city: 'Kyiv', temp: 22.1 },
+ { month: '2025-01-01', city: 'Lisbon', temp: 11.6 },
+ { month: '2025-02-01', city: 'Lisbon', temp: 12.4 },
+ { month: '2025-03-01', city: 'Lisbon', temp: 14.5 },
+ { month: '2025-04-01', city: 'Lisbon', temp: 15.9 },
+ { month: '2025-05-01', city: 'Lisbon', temp: 18.2 },
+ { month: '2025-06-01', city: 'Lisbon', temp: 21.4 },
+ { month: '2025-07-01', city: 'Lisbon', temp: 23.6 },
+ { month: '2025-08-01', city: 'Lisbon', temp: 24.0 },
+ { month: '2025-01-01', city: 'Oslo', temp: -4.8 },
+ { month: '2025-02-01', city: 'Oslo', temp: -4.1 },
+ { month: '2025-03-01', city: 'Oslo', temp: 0.4 },
+ { month: '2025-04-01', city: 'Oslo', temp: 5.9 },
+ { month: '2025-05-01', city: 'Oslo', temp: 11.8 },
+ { month: '2025-06-01', city: 'Oslo', temp: 15.7 },
+ { month: '2025-07-01', city: 'Oslo', temp: 17.4 },
+ { month: '2025-08-01', city: 'Oslo', temp: 16.3 },
+];
+
+const ENGINES = [
+ { power: 68, efficiency: 22.4, origin: 'Japan' },
+ { power: 75, efficiency: 20.8, origin: 'Japan' },
+ { power: 88, efficiency: 19.1, origin: 'Japan' },
+ { power: 97, efficiency: 17.5, origin: 'Japan' },
+ { power: 110, efficiency: 15.9, origin: 'Japan' },
+ { power: 130, efficiency: 13.6, origin: 'Japan' },
+ { power: 118, efficiency: 14.8, origin: 'Japan' },
+ { power: 72, efficiency: 18.9, origin: 'Europe' },
+ { power: 85, efficiency: 17.8, origin: 'Europe' },
+ { power: 100, efficiency: 16.2, origin: 'Europe' },
+ { power: 115, efficiency: 14.7, origin: 'Europe' },
+ { power: 140, efficiency: 12.1, origin: 'Europe' },
+ { power: 165, efficiency: 10.4, origin: 'Europe' },
+ { power: 90, efficiency: 15.3, origin: 'USA' },
+ { power: 105, efficiency: 14.1, origin: 'USA' },
+ { power: 125, efficiency: 12.8, origin: 'USA' },
+ { power: 150, efficiency: 11.2, origin: 'USA' },
+ { power: 200, efficiency: 8.6, origin: 'USA' },
+];
+
+const SIGNUPS = [
+ { week: '2025-05-05', plan: 'Free', signups: 84 },
+ { week: '2025-05-12', plan: 'Free', signups: 96 },
+ { week: '2025-05-19', plan: 'Free', signups: 110 },
+ { week: '2025-05-26', plan: 'Free', signups: 103 },
+ { week: '2025-06-02', plan: 'Free', signups: 121 },
+ { week: '2025-06-09', plan: 'Free', signups: 137 },
+ { week: '2025-05-05', plan: 'Pro', signups: 22 },
+ { week: '2025-05-12', plan: 'Pro', signups: 27 },
+ { week: '2025-05-19', plan: 'Pro', signups: 25 },
+ { week: '2025-05-26', plan: 'Pro', signups: 34 },
+ { week: '2025-06-02', plan: 'Pro', signups: 39 },
+ { week: '2025-06-09', plan: 'Pro', signups: 45 },
+ { week: '2025-05-05', plan: 'Team', signups: 6 },
+ { week: '2025-05-12', plan: 'Team', signups: 9 },
+ { week: '2025-05-19', plan: 'Team', signups: 11 },
+ { week: '2025-05-26', plan: 'Team', signups: 10 },
+ { week: '2025-06-02', plan: 'Team', signups: 14 },
+ { week: '2025-06-09', plan: 'Team', signups: 18 },
+];
+
+export const SHOWCASE_DEMOS: ReadonlyArray = [
+ {
+ id: 'tooltip',
+ title: 'Tooltips are one word',
+ blurb:
+ 'Interaction is declared like any other property. The tooltips on this chart cost a single one: "tooltip": true.',
+ hint: 'Hover the points.',
+ datasetName: 'city-temperatures',
+ themeId: 1, // Editorial
+ spec: {
+ $schema: VEGA_LITE_SCHEMA_URL,
+ description: 'Monthly average temperature by city.',
+ data: { values: TEMPS },
+ mark: { type: 'line', point: true, tooltip: true },
+ encoding: {
+ x: { field: 'month', type: 'temporal', title: 'Month' },
+ y: { field: 'temp', type: 'quantitative', title: '°C' },
+ color: { field: 'city', type: 'nominal' },
+ },
+ },
+ },
+ {
+ id: 'brush',
+ title: 'Selections drive other views',
+ blurb:
+ 'A named selection in one view becomes a filter in another. Declare a param and a filter, and the views are linked — there is no event-handler code to write.',
+ hint: 'Drag a rectangle on the scatter — the bars recount.',
+ datasetName: 'engines',
+ themeId: 2, // Blueprint
+ spec: {
+ $schema: VEGA_LITE_SCHEMA_URL,
+ description: 'Engine power vs efficiency; brushing filters the count below.',
+ data: { values: ENGINES },
+ // Declared sizes, not container fit: Vega-Lite can't fit-size concat
+ // children (autosize falls back to pad and the axes overflow the card).
+ vconcat: [
+ {
+ width: 380,
+ height: 210,
+ params: [{ name: 'brush', select: 'interval' }],
+ mark: 'point',
+ encoding: {
+ x: { field: 'power', type: 'quantitative', title: 'Power (hp)' },
+ y: { field: 'efficiency', type: 'quantitative', title: 'km / l' },
+ color: {
+ condition: { param: 'brush', field: 'origin', type: 'nominal' },
+ value: 'lightgray',
+ },
+ },
+ },
+ {
+ width: 380,
+ height: 80,
+ transform: [{ filter: { param: 'brush' } }],
+ mark: 'bar',
+ encoding: {
+ y: { field: 'origin', type: 'nominal', title: null },
+ x: { aggregate: 'count', title: 'Engines in brush' },
+ color: { field: 'origin', type: 'nominal', legend: null },
+ },
+ },
+ ],
+ },
+ },
+ {
+ id: 'facet',
+ title: 'One spec, a chart per group',
+ blurb:
+ 'Add a facet and the grammar repeats the chart for every value of a field — same axes, same scales, honest comparison for free.',
+ hint: 'One declaration made three charts.',
+ datasetName: 'weekly-signups',
+ themeId: 3, // Sunset
+ spec: {
+ $schema: VEGA_LITE_SCHEMA_URL,
+ description: 'Weekly signups, one panel per plan.',
+ data: { values: SIGNUPS },
+ facet: { column: { field: 'plan', title: null } },
+ spec: {
+ width: 130,
+ height: 150,
+ mark: { type: 'area', line: true, tooltip: true },
+ encoding: {
+ x: { field: 'week', type: 'temporal', title: null },
+ y: { field: 'signups', type: 'quantitative', title: 'Signups' },
+ color: { field: 'plan', type: 'nominal', legend: null },
+ },
+ },
+ },
+ },
+];
+
+/** The spec as shown beside the chart: data by name, the app's own idiom. */
+export function showcaseDisplaySpec(demo: ShowcaseDemo): Record {
+ return { ...demo.spec, data: { name: demo.datasetName } };
+}
+
+/**
+ * Sizing contract for a demo's live render. Composed specs (facet/concat/repeat)
+ * keep their declared per-view sizes — the width-fit recursion can't size their
+ * children (see LandingChart) — while single and layered views fit the card.
+ */
+export function showcaseFitMode(demo: ShowcaseDemo): FitMode {
+ const composed = ['facet', 'vconcat', 'hconcat', 'concat', 'repeat'];
+ return composed.some((k) => k in demo.spec) ? 'default' : 'width';
+}