@sentropic/dataviz-svelte 0.1.0 → 0.2.1

package/dist/lib/ExportMenu.svelte

@@ -0,0 +1,74 @@
+<script lang="ts" module>
+  import type { DashboardStore, Row } from '@sentropic/dataviz-core';
+
+  export type ExportMenuProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** View whose cross-filtered rows are exported (omit for global filters). */
+    viewId?: string;
+    /** Field ids (and order) to export; defaults to all model fields. */
+    fields?: string[];
+    /** Downloaded file name. */
+    filename?: string;
+    /** Button label. */
+    label?: string;
+    class?: string;
+  };
+
+  function escapeCsv(value: unknown): string {
+    const s = value == null ? '' : String(value);
+    return /[",\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+  }
+
+  /** Pure: rows + columns → a CSV string (RFC-4180-ish escaping). */
+  export function rowsToCsv(
+    rows: readonly Row[],
+    columns: { key: string; label: string }[],
+  ): string {
+    const header = columns.map((c) => escapeCsv(c.label)).join(',');
+    const body = rows
+      .map((r) => columns.map((c) => escapeCsv(r[c.key] ?? '')).join(','))
+      .join('\n');
+    return body ? `${header}\n${body}` : header;
+  }
+</script>
+
+<script lang="ts">
+  import { Button } from '@sentropic/design-system-svelte';
+  import { findMeasure } from '@sentropic/dataviz-core';
+
+  let {
+    store,
+    viewId,
+    fields,
+    filename = 'export.csv',
+    label = 'Exporter (CSV)',
+    class: className,
+  }: ExportMenuProps = $props();
+
+  function columns() {
+    const ids = fields ?? [
+      ...store.model.dimensions.map((d) => d.id),
+      ...store.model.measures.map((m) => m.id),
+    ];
+    return 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 };
+    });
+  }
+
+  function exportCsv() {
+    const csv = rowsToCsv(store.applyCrossfilter(viewId), columns());
+    if (typeof URL === 'undefined' || typeof URL.createObjectURL !== 'function') return;
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+</script>
+
+<Button variant="secondary" class={className} onclick={exportCsv}>{label}</Button>

package/dist/lib/ExportMenu.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { DashboardStore, Row } from '@sentropic/dataviz-core';
+export type ExportMenuProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** View whose cross-filtered rows are exported (omit for global filters). */
+    viewId?: string;
+    /** Field ids (and order) to export; defaults to all model fields. */
+    fields?: string[];
+    /** Downloaded file name. */
+    filename?: string;
+    /** Button label. */
+    label?: string;
+    class?: string;
+};
+/** Pure: rows + columns → a CSV string (RFC-4180-ish escaping). */
+export declare function rowsToCsv(rows: readonly Row[], columns: {
+    key: string;
+    label: string;
+}[]): string;
+declare const ExportMenu: import("svelte").Component<ExportMenuProps, {}, "">;
+type ExportMenu = ReturnType<typeof ExportMenu>;
+export default ExportMenu;
+//# sourceMappingURL=ExportMenu.svelte.d.ts.map

package/dist/lib/ExportMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExportMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/ExportMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAEnE,MAAM,MAAM,eAAe,GAAG;IAC5B,sCAAsC;IACtC,KAAK,EAAE,cAAc,CAAC;IACtB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,mEAAmE;AACnE,wBAAgB,SAAS,CACvB,IAAI,EAAE,SAAS,GAAG,EAAE,EACpB,OAAO,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,GACxC,MAAM,CAMR;AAkDH,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/lib/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/lib/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/lib/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"}

package/dist/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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"}

package/dist/lib/TopNFilter.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+  import type { DashboardStore } from '@sentropic/dataviz-core';
+
+  export type TopNFilterProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** Dimension to restrict to its top-N values. */
+    dimension: string;
+    /** Measure used to rank the dimension's values (descending). */
+    measure: string;
+    /** Initial N. Defaults to 5. */
+    defaultN?: number;
+    /** Field label of the number input. */
+    label?: string;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { NumberInput } from '@sentropic/design-system-svelte';
+  import { findMeasure, groupAggregate, type Row } from '@sentropic/dataviz-core';
+
+  let {
+    store,
+    dimension,
+    measure,
+    defaultN = 5,
+    label = 'Top N',
+    class: className,
+  }: TopNFilterProps = $props();
+
+  // Uncontrolled initial value captured intentionally from the prop.
+  let n = $state(untrack(() => defaultN));
+
+  // Apply (and keep in sync) an `include` filter of the dimension's top-N values
+  // by the measure, ranked over the full dataset (a stable, predictable Top-N).
+  $effect(() => {
+    const count = n;
+    const m = findMeasure(store.model, measure);
+    if (!m || !Number.isFinite(count) || count < 1) return;
+    const ranked = groupAggregate([...(store.data as readonly Row[])], dimension, m)
+      .slice()
+      .sort((a, b) => b.value - a.value)
+      .slice(0, count)
+      .map((r) => r.key);
+    store.setFilter(dimension, { kind: 'include', values: ranked });
+  });
+</script>
+
+<NumberInput {label} bind:value={n} min={1} step={1} class={className} />

package/dist/lib/TopNFilter.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { DashboardStore } from '@sentropic/dataviz-core';
+export type TopNFilterProps = {
+    /** The dashboard store to bind to. */
+    store: DashboardStore;
+    /** Dimension to restrict to its top-N values. */
+    dimension: string;
+    /** Measure used to rank the dimension's values (descending). */
+    measure: string;
+    /** Initial N. Defaults to 5. */
+    defaultN?: number;
+    /** Field label of the number input. */
+    label?: string;
+    class?: string;
+};
+declare const TopNFilter: import("svelte").Component<TopNFilterProps, {}, "">;
+type TopNFilter = ReturnType<typeof TopNFilter>;
+export default TopNFilter;
+//# sourceMappingURL=TopNFilter.svelte.d.ts.map

package/dist/lib/TopNFilter.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNFilter.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/TopNFilter.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC5B,sCAAsC;IACtC,KAAK,EAAE,cAAc,CAAC;IACtB,iDAAiD;IACjD,SAAS,EAAE,MAAM,CAAC;IAClB,gEAAgE;IAChE,OAAO,EAAE,MAAM,CAAC;IAChB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6CJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}