@sentropic/dataviz-svelte 0.1.0 → 0.2.0

package/dist/CrossfilteredBarChart.svelte

@@ -0,0 +1,80 @@
+<script lang="ts" module>
+  import type { DashboardStore } from '@sentropic/dataviz-core';
+  import type { BarChartTone } from '@sentropic/design-system-svelte';
+
+  export type CrossfilteredBarChartProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** This chart's view id in the cross-filter graph. */
+    viewId: string;
+    /** Dimension id to group rows by (one bar per distinct value). */
+    dimension: string;
+    /** Measure id to aggregate into each bar's value. */
+    measure: string;
+    /** Accessible label of the chart (required by the design-system BarChart). */
+    label: string;
+    /** Bar colour tone from the design system. */
+    tone?: BarChartTone;
+    /**
+     * When true (default) clicking a bar toggles this view's selection
+     * (brushing input → `store.toggleSelection`); selected bars are highlighted.
+     * Set false for an output-only facet.
+     */
+    selectable?: boolean;
+    /** Fixed value-axis domain `[min, max]` for a shared scale across facets. */
+    domain?: [number, number];
+    orientation?: 'vertical' | 'horizontal';
+    width?: number;
+    height?: number;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { BarChart, type BarChartDatum } from '@sentropic/design-system-svelte';
+  import { findDimension, findMeasure, groupAggregate } from '@sentropic/dataviz-core';
+  import { useDashboard } from '../adapter.js';
+
+  let {
+    store,
+    viewId,
+    dimension,
+    measure,
+    label,
+    tone,
+    selectable = true,
+    domain,
+    orientation = 'vertical',
+    width,
+    height,
+    class: className,
+  }: CrossfilteredBarChartProps = $props();
+
+  // `$dash` establishes the reactive dependency so the chart re-aggregates on
+  // every store mutation; the rows visible to this view come from the core
+  // cross-filter scope.
+  const dash = $derived(useDashboard(store));
+  const data = $derived.by((): BarChartDatum[] => {
+    void $dash;
+    const dim = findDimension(store.model, dimension);
+    const m = findMeasure(store.model, measure);
+    if (!dim || !m) return [];
+    const rows = store.applyCrossfilter(viewId);
+    return groupAggregate(rows, dimension, m).map(({ key, value }) =>
+      tone ? { label: key, value, tone } : { label: key, value },
+    );
+  });
+  const selectedKeys = $derived($dash.selections[viewId] ?? []);
+</script>
+
+<BarChart
+  {data}
+  {label}
+  {orientation}
+  {width}
+  {height}
+  {domain}
+  class={className}
+  selectedKeys={selectable ? selectedKeys : []}
+  onSelect={selectable ? (key) => store.toggleSelection(viewId, key) : undefined}
+/>

package/dist/CrossfilteredBarChart.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { DashboardStore } from '@sentropic/dataviz-core';
+import type { BarChartTone } from '@sentropic/design-system-svelte';
+export type CrossfilteredBarChartProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** This chart's view id in the cross-filter graph. */
+    viewId: string;
+    /** Dimension id to group rows by (one bar per distinct value). */
+    dimension: string;
+    /** Measure id to aggregate into each bar's value. */
+    measure: string;
+    /** Accessible label of the chart (required by the design-system BarChart). */
+    label: string;
+    /** Bar colour tone from the design system. */
+    tone?: BarChartTone;
+    /**
+     * When true (default) clicking a bar toggles this view's selection
+     * (brushing input → `store.toggleSelection`); selected bars are highlighted.
+     * Set false for an output-only facet.
+     */
+    selectable?: boolean;
+    /** Fixed value-axis domain `[min, max]` for a shared scale across facets. */
+    domain?: [number, number];
+    orientation?: 'vertical' | 'horizontal';
+    width?: number;
+    height?: number;
+    class?: string;
+};
+declare const CrossfilteredBarChart: import("svelte").Component<CrossfilteredBarChartProps, {}, "">;
+type CrossfilteredBarChart = ReturnType<typeof CrossfilteredBarChart>;
+export default CrossfilteredBarChart;
+//# sourceMappingURL=CrossfilteredBarChart.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CrossfilteredBarChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CrossfilteredBarChart.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,0BAA0B,GAAG;IACvC,sCAAsC;IACtC,KAAK,EAAE,cAAc,CAAC;IACtB,sDAAsD;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,SAAS,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,OAAO,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAkDJ,QAAA,MAAM,qBAAqB,gEAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/CrossfilteredBarChart.test.js

@@ -0,0 +1,63 @@
+import { render } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import { describe, it, expect } from 'vitest';
+import { createDashboardStore } from '@sentropic/dataviz-core';
+import CrossfilteredBarChart from './CrossfilteredBarChart.svelte';
+const model = {
+    dimensions: [
+        { id: 'country', label: 'Pays', type: 'discrete' },
+        { id: 'product', label: 'Produit', type: 'discrete' },
+    ],
+    measures: [{ id: 'sales', label: 'Ventes', aggregation: 'sum' }],
+};
+const data = [
+    { country: 'FR', product: 'A', sales: 10 },
+    { country: 'FR', product: 'B', sales: 5 },
+    { country: 'US', product: 'A', sales: 20 },
+];
+const newStore = () => createDashboardStore({ model, data });
+const bars = (c) => c.querySelectorAll('.st-barChart__bar').length;
+const baseProps = { viewId: 'byCountry', dimension: 'country', measure: 'sales', label: 'Ventes par pays' };
+describe('CrossfilteredBarChart', () => {
+    it('exposes the chart with its accessible label', () => {
+        const { getByRole } = render(CrossfilteredBarChart, { props: { store: newStore(), ...baseProps } });
+        expect(getByRole('img', { name: 'Ventes par pays' })).toBeTruthy();
+    });
+    it('aggregates rows into one bar (and one selection chip) per distinct value', () => {
+        const { container, getByRole } = render(CrossfilteredBarChart, { props: { store: newStore(), ...baseProps } });
+        expect(bars(container)).toBe(2);
+        expect(getByRole('button', { name: /^FR:/ })).toBeTruthy();
+        expect(getByRole('button', { name: /^US:/ })).toBeTruthy();
+    });
+    it('toggles this view selection when a bar chip is clicked (brushing input)', () => {
+        const store = newStore();
+        const { getByRole } = render(CrossfilteredBarChart, { props: { store, ...baseProps } });
+        getByRole('button', { name: /^FR:/ }).click();
+        expect(store.getState().selections.byCountry).toEqual(['FR']);
+    });
+    it('re-aggregates reactively as the shared filter state narrows the rows', async () => {
+        const store = newStore();
+        const { container, queryByRole } = render(CrossfilteredBarChart, { props: { store, ...baseProps } });
+        expect(bars(container)).toBe(2);
+        store.setFilter('country', { kind: 'include', values: ['FR'] });
+        await tick();
+        expect(bars(container)).toBe(1);
+        expect(queryByRole('button', { name: /^US:/ })).toBeNull();
+    });
+    it('is output-only when selectable=false (no selection chips)', () => {
+        const { queryByRole } = render(CrossfilteredBarChart, {
+            props: { store: newStore(), ...baseProps, selectable: false },
+        });
+        expect(queryByRole('button', { name: /^FR:/ })).toBeNull();
+    });
+    it('renders no bars when the measure or dimension is unknown', () => {
+        const { container: c1 } = render(CrossfilteredBarChart, {
+            props: { store: newStore(), viewId: 'v', dimension: 'country', measure: 'nope', label: 'Vide' },
+        });
+        expect(bars(c1)).toBe(0);
+        const { container: c2 } = render(CrossfilteredBarChart, {
+            props: { store: newStore(), viewId: 'v', dimension: 'nope', measure: 'sales', label: 'Vide' },
+        });
+        expect(bars(c2)).toBe(0);
+    });
+});

package/dist/DashboardFilterBar.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+  import type { DashboardStore } from '@sentropic/dataviz-core';
+
+  export type DashboardFilterBarProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** Aria-label of the filter group. */
+    label?: string;
+    /** Label of the "clear all" button (design-system default otherwise). */
+    clearAllLabel?: string;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { FilterBar, FilterPill } from '@sentropic/design-system-svelte';
+  import { findDimension, describeFilterSpec } from '@sentropic/dataviz-core';
+  import { useDashboard } from '../adapter.js';
+
+  let {
+    store,
+    label = 'Filtres actifs',
+    clearAllLabel,
+    class: className,
+  }: DashboardFilterBarProps = $props();
+
+  // `store` is read inside `$derived` (a reactive context) so the readable is
+  // re-created if the prop changes; `$dash` auto-subscribes (SSR-safe).
+  const dash = $derived(useDashboard(store));
+  const entries = $derived(Object.entries($dash.filters));
+</script>
+
+<FilterBar
+  {label}
+  {clearAllLabel}
+  class={className}
+  onClearAll={entries.length > 0
+    ? () => {
+        for (const id of Object.keys($dash.filters)) store.clearFilter(id);
+      }
+    : undefined}
+>
+  {#each entries as [dimensionId, spec] (dimensionId)}
+    {@const dimension = findDimension(store.model, dimensionId)}
+    <FilterPill
+      field={dimension?.label ?? dimensionId}
+      value={describeFilterSpec(spec, dimension)}
+      onRemove={() => store.clearFilter(dimensionId)}
+    />
+  {/each}
+</FilterBar>

package/dist/DashboardFilterBar.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { DashboardStore } from '@sentropic/dataviz-core';
+export type DashboardFilterBarProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** Aria-label of the filter group. */
+    label?: string;
+    /** Label of the "clear all" button (design-system default otherwise). */
+    clearAllLabel?: string;
+    class?: string;
+};
+declare const DashboardFilterBar: import("svelte").Component<DashboardFilterBarProps, {}, "">;
+type DashboardFilterBar = ReturnType<typeof DashboardFilterBar>;
+export default DashboardFilterBar;
+//# sourceMappingURL=DashboardFilterBar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardFilterBar.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DashboardFilterBar.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,MAAM,uBAAuB,GAAG;IACpC,sCAAsC;IACtC,KAAK,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAwCJ,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/DashboardFilterBar.test.js

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import { describe, it, expect } from 'vitest';
+import { createDashboardStore } from '@sentropic/dataviz-core';
+import DashboardFilterBar from './DashboardFilterBar.svelte';
+const model = {
+    dimensions: [
+        { id: 'country', label: 'Pays', type: 'discrete' },
+        { id: 'price', label: 'Prix', type: 'continuous' },
+    ],
+    measures: [{ id: 'sales', label: 'Ventes', aggregation: 'sum' }],
+};
+const newStore = () => createDashboardStore({ model, data: [] });
+describe('DashboardFilterBar', () => {
+    it('exposes the filter group with its aria-label', () => {
+        const store = newStore();
+        render(DashboardFilterBar, { props: { store, label: 'Filtres actifs' } });
+        expect(screen.getByRole('group', { name: 'Filtres actifs' })).toBeTruthy();
+    });
+    it('renders one pill per active filter, labelled by the dimension', () => {
+        const store = newStore();
+        store.setFilter('country', { kind: 'include', values: ['France', 'Italie'] });
+        render(DashboardFilterBar, { props: { store } });
+        expect(screen.getByText('Pays')).toBeTruthy();
+        expect(screen.getByText('France, Italie')).toBeTruthy();
+    });
+    it('clears a single filter via its pill remove button', () => {
+        const store = newStore();
+        store.setFilter('country', { kind: 'include', values: ['France'] });
+        render(DashboardFilterBar, { props: { store } });
+        const remove = screen.getByRole('button', { name: 'Retirer le filtre Pays' });
+        remove.click();
+        expect(store.getState().filters.country).toBeUndefined();
+    });
+    it('clears every filter — but preserves selections — via the clear-all button', () => {
+        const store = newStore();
+        store.setFilter('country', { kind: 'include', values: ['France'] });
+        store.setFilter('price', { kind: 'range', min: 10 });
+        store.toggleSelection('byCountry', 'FR');
+        render(DashboardFilterBar, { props: { store } });
+        screen.getByRole('button', { name: 'Tout effacer' }).click();
+        expect(Object.keys(store.getState().filters)).toHaveLength(0);
+        expect(store.getState().selections.byCountry).toEqual(['FR']);
+    });
+    it('shows no clear-all button when there are no filters', () => {
+        const store = newStore();
+        render(DashboardFilterBar, { props: { store } });
+        expect(screen.queryByRole('button', { name: 'Tout effacer' })).toBeNull();
+    });
+    it('reacts to a filter set after mount', async () => {
+        const store = newStore();
+        render(DashboardFilterBar, { props: { store } });
+        expect(screen.queryByText('≥ 5')).toBeNull();
+        store.setFilter('price', { kind: 'range', min: 5 });
+        await tick();
+        expect(screen.getByText('≥ 5')).toBeTruthy();
+        expect(screen.getByText('Prix')).toBeTruthy();
+    });
+});

package/dist/DrillBarChart.svelte

@@ -0,0 +1,83 @@
+<script lang="ts" module>
+  import type { DashboardStore } from '@sentropic/dataviz-core';
+  import type { BarChartTone } from '@sentropic/design-system-svelte';
+
+  export type DrillBarChartProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** This view's id (drill state + cross-filter scope live under it). */
+    viewId: string;
+    /** Ordered dimension hierarchy; bars group by the current drill level. */
+    hierarchy: string[];
+    /** Measure id aggregated into each bar's value. */
+    measure: string;
+    /** Accessible label of the chart. */
+    label: string;
+    tone?: BarChartTone;
+    orientation?: 'vertical' | 'horizontal';
+    width?: number;
+    height?: number;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { BarChart, type BarChartDatum } from '@sentropic/design-system-svelte';
+  import { findMeasure, groupAggregate } from '@sentropic/dataviz-core';
+  import { useDashboard } from '../adapter.js';
+
+  let {
+    store,
+    viewId,
+    hierarchy,
+    measure,
+    label,
+    tone,
+    orientation = 'vertical',
+    width,
+    height,
+    class: className,
+  }: DrillBarChartProps = $props();
+
+  const dash = $derived(useDashboard(store));
+  // Current depth = length of the drill path, capped at the deepest level.
+  const level = $derived(
+    Math.min(($dash.drill[viewId] ?? []).length, Math.max(hierarchy.length - 1, 0)),
+  );
+  const currentDim = $derived(hierarchy[level]);
+  const canDrill = $derived(level < hierarchy.length - 1);
+
+  const data = $derived.by((): BarChartDatum[] => {
+    void $dash;
+    const m = findMeasure(store.model, measure);
+    if (!m || !currentDim) return [];
+    return groupAggregate(store.applyCrossfilter(viewId), currentDim, m).map(({ key, value }) =>
+      tone ? { label: key, value, tone } : { label: key, value },
+    );
+  });
+
+  const selectedKeys = $derived($dash.selections[viewId] ?? []);
+
+  // Clicking a bar drills one level deeper (filter the clicked value, push the
+  // next hierarchy dimension as group-by). At the deepest level there is nowhere
+  // to drill, so a click toggles this view's selection (brushing) instead.
+  function onSelect(key: string) {
+    if (canDrill) {
+      store.setFilter(currentDim, { kind: 'include', values: [key] });
+      store.drillDown(viewId, hierarchy[level + 1]);
+    } else {
+      store.toggleSelection(viewId, key);
+    }
+  }
+</script>
+
+<BarChart
+  {data}
+  {label}
+  {orientation}
+  {width}
+  {height}
+  class={className}
+  selectedKeys={canDrill ? [] : selectedKeys}
+  {onSelect}
+/>

package/dist/DrillBarChart.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { DashboardStore } from '@sentropic/dataviz-core';
+import type { BarChartTone } from '@sentropic/design-system-svelte';
+export type DrillBarChartProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** This view's id (drill state + cross-filter scope live under it). */
+    viewId: string;
+    /** Ordered dimension hierarchy; bars group by the current drill level. */
+    hierarchy: string[];
+    /** Measure id aggregated into each bar's value. */
+    measure: string;
+    /** Accessible label of the chart. */
+    label: string;
+    tone?: BarChartTone;
+    orientation?: 'vertical' | 'horizontal';
+    width?: number;
+    height?: number;
+    class?: string;
+};
+declare const DrillBarChart: import("svelte").Component<DrillBarChartProps, {}, "">;
+type DrillBarChart = ReturnType<typeof DrillBarChart>;
+export default DrillBarChart;
+//# sourceMappingURL=DrillBarChart.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrillBarChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DrillBarChart.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,kBAAkB,GAAG;IAC/B,sCAAsC;IACtC,KAAK,EAAE,cAAc,CAAC;IACtB,uEAAuE;IACvE,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+DJ,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/DrillBarChart.test.js

@@ -0,0 +1,52 @@
+import { render } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import { describe, it, expect } from 'vitest';
+import { createDashboardStore } from '@sentropic/dataviz-core';
+import DrillBarChart from './DrillBarChart.svelte';
+const model = {
+    dimensions: [
+        { id: 'region', label: 'Région', type: 'discrete' },
+        { id: 'city', label: 'Ville', type: 'discrete' },
+    ],
+    measures: [{ id: 'sales', label: 'Ventes', aggregation: 'sum' }],
+};
+const data = [
+    { region: 'Nord', city: 'Lille', sales: 10 },
+    { region: 'Nord', city: 'Lille', sales: 5 },
+    { region: 'Nord', city: 'Rouen', sales: 7 },
+    { region: 'Sud', city: 'Nice', sales: 20 },
+];
+const newStore = () => createDashboardStore({ model, data });
+const base = { viewId: 'd', hierarchy: ['region', 'city'], measure: 'sales', label: 'Ventes' };
+describe('DrillBarChart', () => {
+    it('groups by the first hierarchy level initially', () => {
+        const { getByRole } = render(DrillBarChart, { props: { store: newStore(), ...base } });
+        expect(getByRole('button', { name: /^Nord:/ })).toBeTruthy();
+        expect(getByRole('button', { name: /^Sud:/ })).toBeTruthy();
+    });
+    it('drills down on bar click: filters the clicked value and pushes the next level', () => {
+        const store = newStore();
+        const { getByRole } = render(DrillBarChart, { props: { store, ...base } });
+        getByRole('button', { name: /^Nord:/ }).click();
+        expect(store.getState().drill.d).toEqual(['city']);
+        expect(store.getState().filters.region).toEqual({ kind: 'include', values: ['Nord'] });
+    });
+    it('shows the cities of the drilled value after drilling', async () => {
+        const store = newStore();
+        const { getByRole, queryByRole } = render(DrillBarChart, { props: { store, ...base } });
+        getByRole('button', { name: /^Nord:/ }).click();
+        await tick();
+        expect(getByRole('button', { name: /^Lille:/ })).toBeTruthy();
+        expect(getByRole('button', { name: /^Rouen:/ })).toBeTruthy();
+        expect(queryByRole('button', { name: /^Nice:/ })).toBeNull();
+    });
+    it('toggles selection at the deepest level instead of drilling', async () => {
+        const store = newStore();
+        const { getByRole } = render(DrillBarChart, { props: { store, ...base } });
+        getByRole('button', { name: /^Nord:/ }).click();
+        await tick();
+        getByRole('button', { name: /^Lille:/ }).click();
+        expect(store.getState().selections.d).toEqual(['Lille']);
+        expect(store.getState().drill.d).toEqual(['city']);
+    });
+});

package/dist/DrillBreadcrumb.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" module>
+  import type { DashboardStore } from '@sentropic/dataviz-core';
+
+  export type DrillBreadcrumbProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** This view's id (must match the DrillBarChart it accompanies). */
+    viewId: string;
+    /** The same ordered dimension hierarchy used by the DrillBarChart. */
+    hierarchy: string[];
+    /** Aria-label of the breadcrumb trail. */
+    label?: string;
+    /** Label of the "go up one level" button. */
+    backLabel?: string;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { Breadcrumb, Button, Inline } from '@sentropic/design-system-svelte';
+  import { findDimension } from '@sentropic/dataviz-core';
+  import { useDashboard } from '../adapter.js';
+
+  let {
+    store,
+    viewId,
+    hierarchy,
+    label = 'Chemin de drill',
+    backLabel = 'Remonter',
+    class: className,
+  }: DrillBreadcrumbProps = $props();
+
+  const dash = $derived(useDashboard(store));
+  const path = $derived($dash.drill[viewId] ?? []);
+  const dimLabel = (id: string) => findDimension(store.model, id)?.label ?? id;
+  const items = $derived(
+    hierarchy
+      .slice(0, path.length + 1)
+      .map((dim, i) => ({ label: dimLabel(dim), current: i === path.length })),
+  );
+
+  // Going up pops the drill path and clears the value-filter that was applied
+  // when drilling away from the level we are returning to (see DrillBarChart).
+  function back() {
+    const p = store.getState().drill[viewId] ?? [];
+    if (p.length === 0) return;
+    store.drillUp(viewId);
+    store.clearFilter(hierarchy[p.length - 1]);
+  }
+</script>
+
+<Inline gap={2} class={className}>
+  <Breadcrumb {items} {label} />
+  {#if path.length > 0}
+    <Button variant="ghost" onclick={back}>{backLabel}</Button>
+  {/if}
+</Inline>

package/dist/DrillBreadcrumb.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { DashboardStore } from '@sentropic/dataviz-core';
+export type DrillBreadcrumbProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** This view's id (must match the DrillBarChart it accompanies). */
+    viewId: string;
+    /** The same ordered dimension hierarchy used by the DrillBarChart. */
+    hierarchy: string[];
+    /** Aria-label of the breadcrumb trail. */
+    label?: string;
+    /** Label of the "go up one level" button. */
+    backLabel?: string;
+    class?: string;
+};
+declare const DrillBreadcrumb: import("svelte").Component<DrillBreadcrumbProps, {}, "">;
+type DrillBreadcrumb = ReturnType<typeof DrillBreadcrumb>;
+export default DrillBreadcrumb;
+//# sourceMappingURL=DrillBreadcrumb.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrillBreadcrumb.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DrillBreadcrumb.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,oEAAoE;IACpE,MAAM,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmDJ,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/DrillBreadcrumb.test.js

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import { createDashboardStore } from '@sentropic/dataviz-core';
+import DrillBreadcrumb from './DrillBreadcrumb.svelte';
+const model = {
+    dimensions: [
+        { id: 'region', label: 'Région', type: 'discrete' },
+        { id: 'city', label: 'Ville', type: 'discrete' },
+    ],
+    measures: [{ id: 'sales', label: 'Ventes', aggregation: 'sum' }],
+};
+const newStore = () => createDashboardStore({ model, data: [] });
+const base = { viewId: 'd', hierarchy: ['region', 'city'] };
+describe('DrillBreadcrumb', () => {
+    it('shows only the root level and no back button initially', () => {
+        render(DrillBreadcrumb, { props: { store: newStore(), ...base } });
+        expect(screen.getByText('Région')).toBeTruthy();
+        expect(screen.queryByRole('button', { name: 'Remonter' })).toBeNull();
+    });
+    it('shows the drilled trail and a back button after drilling', () => {
+        const store = newStore();
+        store.drillDown('d', 'city');
+        render(DrillBreadcrumb, { props: { store, ...base } });
+        expect(screen.getByText('Région')).toBeTruthy();
+        expect(screen.getByText('Ville')).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Remonter' })).toBeTruthy();
+    });
+    it('back pops the drill path and clears the level filter', () => {
+        const store = newStore();
+        store.setFilter('region', { kind: 'include', values: ['Nord'] });
+        store.drillDown('d', 'city');
+        render(DrillBreadcrumb, { props: { store, ...base } });
+        screen.getByRole('button', { name: 'Remonter' }).click();
+        expect(store.getState().drill.d ?? []).toEqual([]);
+        expect(store.getState().filters.region).toBeUndefined();
+    });
+});

package/dist/FieldPane.svelte

@@ -0,0 +1,38 @@
+<script lang="ts" module>
+  import type { DataModel, FieldId } from '@sentropic/dataviz-core';
+
+  export type FieldPaneProps = {
+    model: DataModel;
+    includeDimensions?: boolean;
+    includeMeasures?: boolean;
+    selectedId?: FieldId | string;
+    defaultExpandedIds?: string[];
+    label?: string;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { TreeView } from '@sentropic/design-system-svelte';
+  import { buildFieldPaneTree } from '@sentropic/dataviz-core';
+
+  let {
+    model,
+    includeDimensions,
+    includeMeasures,
+    selectedId,
+    defaultExpandedIds,
+    label = 'Fields',
+    class: className,
+  }: FieldPaneProps = $props();
+
+  const tree = $derived(buildFieldPaneTree(model, { includeDimensions, includeMeasures }));
+</script>
+
+<TreeView
+  nodes={tree.nodes}
+  selected={selectedId}
+  defaultExpanded={defaultExpandedIds ?? tree.defaultExpandedIds}
+  {label}
+  class={className}
+/>

package/dist/FieldPane.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { DataModel, FieldId } from '@sentropic/dataviz-core';
+export type FieldPaneProps = {
+    model: DataModel;
+    includeDimensions?: boolean;
+    includeMeasures?: boolean;
+    selectedId?: FieldId | string;
+    defaultExpandedIds?: string[];
+    label?: string;
+    class?: string;
+};
+declare const FieldPane: import("svelte").Component<FieldPaneProps, {}, "">;
+type FieldPane = ReturnType<typeof FieldPane>;
+export default FieldPane;
+//# sourceMappingURL=FieldPane.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldPane.svelte.d.ts","sourceRoot":"","sources":["../src/lib/FieldPane.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElE,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6BJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}