@sentropic/dataviz-svelte 0.1.0 → 0.2.0

package/dist/FieldPane.test.js

@@ -0,0 +1,36 @@
+import { render } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import {} from '@sentropic/dataviz-core';
+import FieldPane from './FieldPane.svelte';
+const model = {
+    dimensions: [
+        { id: 'country', label: 'Pays', type: 'discrete', folder: 'Geo' },
+        { id: 'age', label: 'Age', type: 'continuous' },
+    ],
+    measures: [{ id: 'revenue', label: 'Revenu', aggregation: 'sum', folder: 'Finance' }],
+};
+describe('FieldPane (svelte)', () => {
+    it('renders the core field tree through DS TreeView', () => {
+        const { getByText } = render(FieldPane, { props: { model } });
+        expect(getByText('Dimensions')).toBeTruthy();
+        expect(getByText('Measures')).toBeTruthy();
+        expect(getByText('Geo')).toBeTruthy();
+        expect(getByText('Pays')).toBeTruthy();
+        expect(getByText('Revenu')).toBeTruthy();
+    });
+    it('filters field groups with core field pane options', () => {
+        const { queryByText, getByText } = render(FieldPane, {
+            props: { model, includeDimensions: false },
+        });
+        expect(queryByText('Dimensions')).toBeNull();
+        expect(queryByText('Pays')).toBeNull();
+        expect(getByText('Measures')).toBeTruthy();
+        expect(getByText('Revenu')).toBeTruthy();
+    });
+    it('passes selectedId to the DS TreeView', () => {
+        const { getByText } = render(FieldPane, { props: { model, selectedId: 'measure:revenue' } });
+        expect(getByText('Revenu')
+            .closest('.st-treeView__row')
+            ?.classList.contains('st-treeView__row--selected')).toBe(true);
+    });
+});

package/dist/KpiCardGroup.svelte

@@ -0,0 +1,63 @@
+<script lang="ts" module>
+  import type { DashboardStore, KpiCardConfig, Row } from '@sentropic/dataviz-core';
+  import type {
+    KpiCardDeltaFormat,
+    KpiCardFormat,
+    KpiCardSize,
+    KpiCardTone,
+  } from '@sentropic/design-system-svelte';
+
+  export type KpiCardGroupProps = {
+    store: DashboardStore;
+    viewId?: string;
+    configs: KpiCardConfig[];
+    comparisonData?: readonly Row[];
+    format?: KpiCardFormat;
+    deltaFormat?: KpiCardDeltaFormat;
+    size?: KpiCardSize;
+    tone?: KpiCardTone;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { KpiCard } from '@sentropic/design-system-svelte';
+  import { buildKpiCards } from '@sentropic/dataviz-core';
+  import { useDashboard } from '../adapter.js';
+
+  let {
+    store,
+    viewId,
+    configs,
+    comparisonData,
+    format,
+    deltaFormat = 'percent',
+    size,
+    tone,
+    class: className,
+  }: KpiCardGroupProps = $props();
+
+  const dash = $derived(useDashboard(store));
+  const cards = $derived.by(() => {
+    void $dash;
+    return buildKpiCards(store.model, store.applyCrossfilter(viewId), configs, { comparisonData });
+  });
+
+  const finite = (value: number | undefined): number | undefined =>
+    value === undefined || !Number.isFinite(value) ? undefined : value;
+</script>
+
+<div class={className}>
+  {#each cards as card (card.id)}
+    <KpiCard
+      value={card.value}
+      label={card.label}
+      delta={finite(deltaFormat === 'absolute' ? card.delta : card.deltaPercent)}
+      {deltaFormat}
+      {format}
+      {size}
+      {tone}
+      sparkline={card.sparkline?.map((point) => point.value)}
+    />
+  {/each}
+</div>

package/dist/KpiCardGroup.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { DashboardStore, KpiCardConfig, Row } from '@sentropic/dataviz-core';
+import type { KpiCardDeltaFormat, KpiCardFormat, KpiCardSize, KpiCardTone } from '@sentropic/design-system-svelte';
+export type KpiCardGroupProps = {
+    store: DashboardStore;
+    viewId?: string;
+    configs: KpiCardConfig[];
+    comparisonData?: readonly Row[];
+    format?: KpiCardFormat;
+    deltaFormat?: KpiCardDeltaFormat;
+    size?: KpiCardSize;
+    tone?: KpiCardTone;
+    class?: string;
+};
+declare const KpiCardGroup: import("svelte").Component<KpiCardGroupProps, {}, "">;
+type KpiCardGroup = ReturnType<typeof KpiCardGroup>;
+export default KpiCardGroup;
+//# sourceMappingURL=KpiCardGroup.svelte.d.ts.map

package/dist/KpiCardGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiCardGroup.svelte.d.ts","sourceRoot":"","sources":["../src/lib/KpiCardGroup.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,WAAW,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,cAAc,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4CJ,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/KpiCardGroup.test.js

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import { describe, it, expect } from 'vitest';
+import { createDashboardStore } from '@sentropic/dataviz-core';
+import KpiCardGroup from './KpiCardGroup.svelte';
+const model = {
+    dimensions: [{ id: 'month', label: 'Mois', type: 'discrete' }],
+    measures: [{ id: 'sales', label: 'Ventes', aggregation: 'sum' }],
+};
+const data = [
+    { month: 'Jan', sales: 10 },
+    { month: 'Feb', sales: 20 },
+];
+describe('KpiCardGroup (svelte)', () => {
+    it('renders DS KPI cards from core KPI configs', () => {
+        const store = createDashboardStore({ model, data });
+        const { getByText } = render(KpiCardGroup, {
+            props: { store, configs: [{ id: 'sales', measure: 'sales', sparklineDimension: 'month' }] },
+        });
+        expect(getByText('Ventes')).toBeTruthy();
+        expect(getByText('30')).toBeTruthy();
+    });
+    it('updates when the shared filter state changes', async () => {
+        const store = createDashboardStore({ model, data });
+        const { getByText } = render(KpiCardGroup, {
+            props: { store, configs: [{ id: 'sales', measure: 'sales' }] },
+        });
+        expect(getByText('30')).toBeTruthy();
+        store.setFilter('month', { kind: 'include', values: ['Jan'] });
+        await tick();
+        expect(getByText('10')).toBeTruthy();
+    });
+});

package/dist/PivotDataTable.svelte

@@ -0,0 +1,62 @@
+<script lang="ts" module>
+  import type { DashboardStore, PivotConfig } from '@sentropic/dataviz-core';
+  import type { DataTableColumn, DataTableRow } from '@sentropic/design-system-svelte';
+
+  export type PivotDataTableProps = {
+    store: DashboardStore;
+    viewId?: string;
+    rows: PivotConfig['rows'];
+    columns?: PivotConfig['columns'];
+    measures: PivotConfig['measures'];
+    caption?: string;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+  };
+
+  type TableView = {
+    columns: DataTableColumn[];
+    rows: DataTableRow[];
+  };
+</script>
+
+<script lang="ts">
+  import { DataTable } from '@sentropic/design-system-svelte';
+  import { buildPivotTable } from '@sentropic/dataviz-core';
+  import { useDashboard } from '../adapter.js';
+
+  let {
+    store,
+    viewId,
+    rows,
+    columns,
+    measures,
+    caption,
+    size,
+    class: className,
+  }: PivotDataTableProps = $props();
+
+  const dash = $derived(useDashboard(store));
+  const table = $derived.by((): TableView => {
+    void $dash;
+    try {
+      const pivot = buildPivotTable(store.model, store.applyCrossfilter(viewId), {
+        rows,
+        columns,
+        measures,
+      });
+      return {
+        columns: pivot.columns.map((column) => ({
+          key: column.key,
+          label: column.label,
+          sortable: true,
+          align: column.kind === 'value' ? 'end' : 'start',
+        })),
+        rows: pivot.rows,
+      };
+    } catch {
+      return { columns: [], rows: [] };
+    }
+  });
+</script>
+
+<DataTable columns={table.columns} rows={table.rows} {caption} {size} class={className} />

package/dist/PivotDataTable.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { DashboardStore, PivotConfig } from '@sentropic/dataviz-core';
+export type PivotDataTableProps = {
+    store: DashboardStore;
+    viewId?: string;
+    rows: PivotConfig['rows'];
+    columns?: PivotConfig['columns'];
+    measures: PivotConfig['measures'];
+    caption?: string;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+};
+declare const PivotDataTable: import("svelte").Component<PivotDataTableProps, {}, "">;
+type PivotDataTable = ReturnType<typeof PivotDataTable>;
+export default PivotDataTable;
+//# sourceMappingURL=PivotDataTable.svelte.d.ts.map

package/dist/PivotDataTable.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PivotDataTable.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PivotDataTable.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3E,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA0DJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/PivotDataTable.test.js

@@ -0,0 +1,37 @@
+import { render } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import { describe, it, expect } from 'vitest';
+import { createDashboardStore } from '@sentropic/dataviz-core';
+import PivotDataTable from './PivotDataTable.svelte';
+const model = {
+    dimensions: [{ id: 'country', label: 'Pays', type: 'discrete' }],
+    measures: [{ id: 'sales', label: 'Ventes', aggregation: 'sum' }],
+};
+const data = [
+    { country: 'FR', sales: 10 },
+    { country: 'FR', sales: 5 },
+    { country: 'US', sales: 20 },
+];
+const newStore = () => createDashboardStore({ model, data });
+describe('PivotDataTable (svelte)', () => {
+    it('renders a DS DataTable from the core pivot model', () => {
+        const { getByText } = render(PivotDataTable, {
+            props: { store: newStore(), rows: ['country'], measures: ['sales'], caption: 'Pivot' },
+        });
+        expect(getByText('Pivot')).toBeTruthy();
+        expect(getByText('Pays')).toBeTruthy();
+        expect(getByText('Ventes')).toBeTruthy();
+        expect(getByText('FR')).toBeTruthy();
+        expect(getByText('15')).toBeTruthy();
+    });
+    it('updates when the shared filter state changes', async () => {
+        const store = newStore();
+        const { getByText, queryByText } = render(PivotDataTable, {
+            props: { store, rows: ['country'], measures: ['sales'] },
+        });
+        expect(getByText('US')).toBeTruthy();
+        store.setFilter('country', { kind: 'include', values: ['FR'] });
+        await tick();
+        expect(queryByText('US')).toBeNull();
+    });
+});

package/dist/RecordsTable.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+  import type { DashboardStore } from '@sentropic/dataviz-core';
+
+  export type RecordsTableProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** This view's id in the cross-filter graph (rows shown are its visible rows). */
+    viewId?: string;
+    /** Field ids (and order) to show as columns; defaults to all model fields. */
+    fields?: string[];
+    caption?: string;
+    size?: 'sm' | 'md' | 'lg';
+    pageSize?: number;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { DataTable, type DataTableColumn, type DataTableRow } from '@sentropic/design-system-svelte';
+  import { findMeasure } from '@sentropic/dataviz-core';
+  import { useDashboard } from '../adapter.js';
+
+  let { store, viewId, fields, caption, size, pageSize, class: className }: RecordsTableProps = $props();
+
+  const dash = $derived(useDashboard(store));
+  // The underlying ("show records") rows for this view: the cross-filtered data
+  // rendered as a design-system DataTable. Columns come from the data model.
+  const view = $derived.by((): { columns: DataTableColumn[]; rows: DataTableRow[] } => {
+    void $dash;
+    const ids = fields ?? [
+      ...store.model.dimensions.map((d) => d.id),
+      ...store.model.measures.map((m) => m.id),
+    ];
+    const columns: DataTableColumn[] = ids.map((id) => {
+      const dim = store.model.dimensions.find((d) => d.id === id);
+      const meas = findMeasure(store.model, id);
+      return { key: id, label: dim?.label ?? meas?.label ?? id, sortable: true, align: meas ? 'end' : 'start' };
+    });
+    const rows: DataTableRow[] = store
+      .applyCrossfilter(viewId)
+      .map((row, i) => ({ ...row, id: String(i) }));
+    return { columns, rows };
+  });
+</script>
+
+<DataTable
+  columns={view.columns}
+  rows={view.rows}
+  {caption}
+  {size}
+  {pageSize}
+  class={className}
+/>

package/dist/RecordsTable.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { DashboardStore } from '@sentropic/dataviz-core';
+export type RecordsTableProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** This view's id in the cross-filter graph (rows shown are its visible rows). */
+    viewId?: string;
+    /** Field ids (and order) to show as columns; defaults to all model fields. */
+    fields?: string[];
+    caption?: string;
+    size?: 'sm' | 'md' | 'lg';
+    pageSize?: number;
+    class?: string;
+};
+declare const RecordsTable: import("svelte").Component<RecordsTableProps, {}, "">;
+type RecordsTable = ReturnType<typeof RecordsTable>;
+export default RecordsTable;
+//# sourceMappingURL=RecordsTable.svelte.d.ts.map

package/dist/RecordsTable.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecordsTable.svelte.d.ts","sourceRoot":"","sources":["../src/lib/RecordsTable.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,sCAAsC;IACtC,KAAK,EAAE,cAAc,CAAC;IACtB,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAyCJ,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/RecordsTable.test.js

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import { describe, it, expect } from 'vitest';
+import { createDashboardStore } from '@sentropic/dataviz-core';
+import RecordsTable from './RecordsTable.svelte';
+const model = {
+    dimensions: [{ id: 'country', label: 'Pays', type: 'discrete' }],
+    measures: [{ id: 'sales', label: 'Ventes', aggregation: 'sum' }],
+};
+const data = [
+    { country: 'FR', sales: 10 },
+    { country: 'US', sales: 20 },
+];
+const newStore = () => createDashboardStore({ model, data });
+const bodyRows = (c) => c.querySelectorAll('tbody tr').length;
+describe('RecordsTable', () => {
+    it('renders a table with a column per model field', () => {
+        const { container } = render(RecordsTable, { props: { store: newStore() } });
+        expect(container.querySelector('table')).toBeTruthy();
+        expect(screen.getByText('Pays')).toBeTruthy();
+        expect(screen.getByText('Ventes')).toBeTruthy();
+    });
+    it('renders one row per visible record', () => {
+        const { container } = render(RecordsTable, { props: { store: newStore() } });
+        expect(bodyRows(container)).toBe(2);
+        expect(screen.getByText('FR')).toBeTruthy();
+        expect(screen.getByText('US')).toBeTruthy();
+    });
+    it('reflects the cross-filtered rows', async () => {
+        const store = newStore();
+        const { container } = render(RecordsTable, { props: { store } });
+        expect(bodyRows(container)).toBe(2);
+        store.setFilter('country', { kind: 'include', values: ['FR'] });
+        await tick();
+        expect(bodyRows(container)).toBe(1);
+        expect(screen.queryByText('US')).toBeNull();
+    });
+    it('respects a fields subset/order', () => {
+        render(RecordsTable, { props: { store: newStore(), fields: ['sales'] } });
+        expect(screen.getByText('Ventes')).toBeTruthy();
+        expect(screen.queryByText('Pays')).toBeNull();
+    });
+});

package/dist/SelectionLegend.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+  import type { DashboardStore } from '@sentropic/dataviz-core';
+
+  export type SelectionLegendProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** Map of viewId -> human label for the legend chips (falls back to the id). */
+    labels?: Record<string, string>;
+    /** Aria-label of the legend group. */
+    label?: string;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { Inline, SelectionChip } from '@sentropic/design-system-svelte';
+  import { useDashboard } from '../adapter.js';
+
+  let {
+    store,
+    labels = {},
+    label = 'Sélections actives',
+    class: className,
+  }: SelectionLegendProps = $props();
+
+  const dash = $derived(useDashboard(store));
+  const entries = $derived(
+    Object.entries($dash.selections).filter(([, keys]) => keys.length > 0),
+  );
+</script>
+
+{#if entries.length > 0}
+  <Inline role="group" aria-label={label} gap={2} wrap class={className}>
+    {#each entries as [viewId, keys] (viewId)}
+      <SelectionChip
+        label={labels[viewId] ?? viewId}
+        count={keys.length}
+        onClear={() => store.clearSelection(viewId)}
+      />
+    {/each}
+  </Inline>
+{/if}

package/dist/SelectionLegend.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { DashboardStore } from '@sentropic/dataviz-core';
+export type SelectionLegendProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** Map of viewId -> human label for the legend chips (falls back to the id). */
+    labels?: Record<string, string>;
+    /** Aria-label of the legend group. */
+    label?: string;
+    class?: string;
+};
+declare const SelectionLegend: import("svelte").Component<SelectionLegendProps, {}, "">;
+type SelectionLegend = ReturnType<typeof SelectionLegend>;
+export default SelectionLegend;
+//# sourceMappingURL=SelectionLegend.svelte.d.ts.map

package/dist/SelectionLegend.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionLegend.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SelectionLegend.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,MAAM,oBAAoB,GAAG;IACjC,sCAAsC;IACtC,KAAK,EAAE,cAAc,CAAC;IACtB,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmCJ,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/SelectionLegend.test.js

@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import { describe, it, expect } from 'vitest';
+import { createDashboardStore } from '@sentropic/dataviz-core';
+import SelectionLegend from './SelectionLegend.svelte';
+const model = {
+    dimensions: [{ id: 'country', label: 'Pays', type: 'discrete' }],
+    measures: [{ id: 'sales', label: 'Ventes', aggregation: 'sum' }],
+};
+const newStore = () => createDashboardStore({ model, data: [] });
+describe('SelectionLegend', () => {
+    it('renders nothing while there are no selections', () => {
+        const store = newStore();
+        const { container } = render(SelectionLegend, { props: { store } });
+        expect(container.querySelector('[role="group"]')).toBeNull();
+    });
+    it('renders one chip per view with a selection count and a friendly label', () => {
+        const store = newStore();
+        store.toggleSelection('byCountry', 'FR');
+        store.toggleSelection('byCountry', 'US');
+        render(SelectionLegend, { props: { store, labels: { byCountry: 'Carte' } } });
+        expect(screen.getByRole('group', { name: 'Sélections actives' })).toBeTruthy();
+        expect(screen.getByText('Carte')).toBeTruthy();
+        expect(screen.getByText('(2)')).toBeTruthy();
+    });
+    it('falls back to the view id when no label is supplied', () => {
+        const store = newStore();
+        store.toggleSelection('byCountry', 'FR');
+        render(SelectionLegend, { props: { store } });
+        expect(screen.getByText('byCountry')).toBeTruthy();
+    });
+    it('clears a view selection via the chip clear button', () => {
+        const store = newStore();
+        store.toggleSelection('byCountry', 'FR');
+        render(SelectionLegend, { props: { store, labels: { byCountry: 'Carte' } } });
+        screen.getByRole('button', { name: 'Effacer Carte' }).click();
+        expect(store.getState().selections.byCountry).toBeUndefined();
+    });
+    it('appears reactively when a selection is made after mount', async () => {
+        const store = newStore();
+        const { container } = render(SelectionLegend, { props: { store } });
+        expect(container.querySelector('[role="group"]')).toBeNull();
+        store.toggleSelection('byCountry', 'FR');
+        await tick();
+        expect(container.querySelector('[role="group"]')).not.toBeNull();
+    });
+});

package/dist/SmallMultiples.svelte

@@ -0,0 +1,81 @@
+<script lang="ts" module>
+  import type { DashboardStore } from '@sentropic/dataviz-core';
+  import type { BarChartTone } from '@sentropic/design-system-svelte';
+
+  export type SmallMultiplesProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** This view's id in the cross-filter graph. */
+    viewId: string;
+    /** Dimension whose distinct values each produce one facet (panel). */
+    facetBy: string;
+    /** Dimension to group rows by inside each facet (bar categories). */
+    dimension: string;
+    /** Measure id aggregated into each bar's value. */
+    measure: string;
+    /** Accessible label; each facet chart is "<label> — <facet key>". */
+    label: string;
+    /** Number of grid columns (design-system Grid). Defaults to 2. */
+    columns?: number;
+    /** Bar colour tone from the design system. */
+    tone?: BarChartTone;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { Grid, BarChart, type BarChartDatum } from '@sentropic/design-system-svelte';
+  import { findDimension, findMeasure, groupAggregate } from '@sentropic/dataviz-core';
+  import { useDashboard } from '../adapter.js';
+
+  let {
+    store,
+    viewId,
+    facetBy,
+    dimension,
+    measure,
+    label,
+    columns = 2,
+    tone,
+    class: className,
+  }: SmallMultiplesProps = $props();
+
+  const key = (v: unknown) => (v == null ? 'null' : String(v));
+
+  const dash = $derived(useDashboard(store));
+  // One panel per distinct `facetBy` value, all sharing a single value domain so
+  // the facets are visually comparable (the small-multiples invariant).
+  const view = $derived.by((): { panels: { key: string; data: BarChartDatum[] }[]; domain?: [number, number] } => {
+    void $dash;
+    const fdim = findDimension(store.model, facetBy);
+    const dim = findDimension(store.model, dimension);
+    const m = findMeasure(store.model, measure);
+    if (!fdim || !dim || !m) return { panels: [] };
+    const rows = store.applyCrossfilter(viewId);
+    const keys: string[] = [];
+    const seen = new Set<string>();
+    for (const row of rows) {
+      const k = key(row[facetBy]);
+      if (!seen.has(k)) {
+        seen.add(k);
+        keys.push(k);
+      }
+    }
+    let max = 0;
+    const panels = keys.map((k) => {
+      const facetRows = rows.filter((row) => key(row[facetBy]) === k);
+      const data = groupAggregate(facetRows, dimension, m).map(({ key: barKey, value }) => {
+        if (value > max) max = value;
+        return tone ? { label: barKey, value, tone } : { label: barKey, value };
+      });
+      return { key: k, data };
+    });
+    return { panels, domain: panels.length ? [0, max] : undefined };
+  });
+</script>
+
+<Grid {columns} gap={4} class={className} role="group" aria-label={label}>
+  {#each view.panels as panel (panel.key)}
+    <BarChart data={panel.data} label={`${label} — ${panel.key}`} domain={view.domain} />
+  {/each}
+</Grid>

package/dist/SmallMultiples.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { DashboardStore } from '@sentropic/dataviz-core';
+import type { BarChartTone } from '@sentropic/design-system-svelte';
+export type SmallMultiplesProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** This view's id in the cross-filter graph. */
+    viewId: string;
+    /** Dimension whose distinct values each produce one facet (panel). */
+    facetBy: string;
+    /** Dimension to group rows by inside each facet (bar categories). */
+    dimension: string;
+    /** Measure id aggregated into each bar's value. */
+    measure: string;
+    /** Accessible label; each facet chart is "<label> — <facet key>". */
+    label: string;
+    /** Number of grid columns (design-system Grid). Defaults to 2. */
+    columns?: number;
+    /** Bar colour tone from the design system. */
+    tone?: BarChartTone;
+    class?: string;
+};
+declare const SmallMultiples: import("svelte").Component<SmallMultiplesProps, {}, "">;
+type SmallMultiples = ReturnType<typeof SmallMultiples>;
+export default SmallMultiples;
+//# sourceMappingURL=SmallMultiples.svelte.d.ts.map

package/dist/SmallMultiples.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmallMultiples.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SmallMultiples.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAEpE,MAAM,MAAM,mBAAmB,GAAG;IAChC,sCAAsC;IACtC,KAAK,EAAE,cAAc,CAAC;IACtB,gDAAgD;IAChD,MAAM,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,OAAO,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,SAAS,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoEJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}