@sentropic/dataviz-vue 0.1.0 → 0.2.0

package/dist/lib/PivotDataTable.d.ts

@@ -0,0 +1,88 @@
+import { type PropType } from 'vue';
+import { type DashboardStore, type 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;
+};
+export declare const PivotDataTable: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    store: {
+        type: PropType<DashboardStore>;
+        required: true;
+    };
+    viewId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    rows: {
+        type: PropType<PivotConfig["rows"]>;
+        required: true;
+    };
+    columns: {
+        type: PropType<PivotConfig["columns"]>;
+        default: undefined;
+    };
+    measures: {
+        type: PropType<PivotConfig["measures"]>;
+        required: true;
+    };
+    caption: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    store: {
+        type: PropType<DashboardStore>;
+        required: true;
+    };
+    viewId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    rows: {
+        type: PropType<PivotConfig["rows"]>;
+        required: true;
+    };
+    columns: {
+        type: PropType<PivotConfig["columns"]>;
+        default: undefined;
+    };
+    measures: {
+        type: PropType<PivotConfig["measures"]>;
+        required: true;
+    };
+    caption: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    caption: string;
+    size: "sm" | "md" | "lg";
+    viewId: string;
+    columns: string[] | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=PivotDataTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PivotDataTable.d.ts","sourceRoot":"","sources":["../../src/lib/PivotDataTable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAC;AAMxD,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAGjC,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;AAWF,eAAO,MAAM,cAAc;;cAGE,QAAQ,CAAC,cAAc,CAAC;;;;;;;;cAEf,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;;;;cAC1B,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;;;;cAC/B,QAAQ,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;;;;;;;;cAE/C,QAAQ,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;;;;;;;;;;cAN3B,QAAQ,CAAC,cAAc,CAAC;;;;;;;;cAEf,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;;;;cAC1B,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;;;;cAC/B,QAAQ,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;;;;;;;;cAE/C,QAAQ,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;;;;;;;;;;;;4EA8BtD,CAAC"}

package/dist/lib/PivotDataTable.js

@@ -0,0 +1,54 @@
+import { defineComponent, h } from 'vue';
+import { DataTable, } from '@sentropic/design-system-vue';
+import { buildPivotTable, } from '@sentropic/dataviz-core';
+import { useDashboard } from '../adapter.js';
+function toColumns(columns) {
+    return columns.map((column) => ({
+        key: column.key,
+        label: column.label,
+        sortable: true,
+        align: column.kind === 'value' ? 'end' : 'start',
+    }));
+}
+export const PivotDataTable = defineComponent({
+    name: 'PivotDataTable',
+    props: {
+        store: { type: Object, required: true },
+        viewId: { type: String, default: undefined },
+        rows: { type: Array, required: true },
+        columns: { type: Array, default: undefined },
+        measures: { type: Array, required: true },
+        caption: { type: String, default: undefined },
+        size: { type: String, default: undefined },
+        class: { type: String, default: undefined },
+    },
+    setup(props) {
+        const state = useDashboard(props.store);
+        return () => {
+            void state.value;
+            let columns = [];
+            let rows = [];
+            try {
+                const pivot = buildPivotTable(props.store.model, props.store.applyCrossfilter(props.viewId), {
+                    rows: props.rows,
+                    columns: props.columns,
+                    measures: props.measures,
+                });
+                columns = toColumns(pivot.columns);
+                rows = pivot.rows;
+            }
+            catch {
+                columns = [];
+                rows = [];
+            }
+            return h(DataTable, {
+                columns,
+                rows,
+                caption: props.caption,
+                size: props.size,
+                class: props.class,
+            });
+        };
+    },
+});
+//# sourceMappingURL=PivotDataTable.js.map

package/dist/lib/PivotDataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PivotDataTable.js","sourceRoot":"","sources":["../../src/lib/PivotDataTable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAiB,MAAM,KAAK,CAAC;AACxD,OAAO,EACL,SAAS,GAGV,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,eAAe,GAGhB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAa7C,SAAS,SAAS,CAAC,OAAsD;IACvE,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAC9B,GAAG,EAAE,MAAM,CAAC,GAAG;QACf,KAAK,EAAE,MAAM,CAAC,KAAK;QACnB,QAAQ,EAAE,IAAI;QACd,KAAK,EAAE,MAAM,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;KACjD,CAAC,CAAC,CAAC;AACN,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,eAAe,CAAC;IAC5C,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,MAAkC,EAAE,QAAQ,EAAE,IAAI,EAAE;QACnE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC5C,IAAI,EAAE,EAAE,IAAI,EAAE,KAAiD,EAAE,QAAQ,EAAE,IAAI,EAAE;QACjF,OAAO,EAAE,EAAE,IAAI,EAAE,KAAoD,EAAE,OAAO,EAAE,SAAS,EAAE;QAC3F,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAqD,EAAE,QAAQ,EAAE,IAAI,EAAE;QACzF,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;QAC1E,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,CAAC,KAAK;QACT,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACV,KAAK,KAAK,CAAC,KAAK,CAAC;YACjB,IAAI,OAAO,GAAsB,EAAE,CAAC;YACpC,IAAI,IAAI,GAAmB,EAAE,CAAC;YAC9B,IAAI,CAAC;gBACH,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;oBAC3F,IAAI,EAAE,KAAK,CAAC,IAAI;oBAChB,OAAO,EAAE,KAAK,CAAC,OAAO;oBACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ;iBACzB,CAAC,CAAC;gBACH,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBACnC,IAAI,GAAG,KAAK,CAAC,IAAsB,CAAC;YACtC,CAAC;YAAC,MAAM,CAAC;gBACP,OAAO,GAAG,EAAE,CAAC;gBACb,IAAI,GAAG,EAAE,CAAC;YACZ,CAAC;YACD,OAAO,CAAC,CAAC,SAAS,EAAE;gBAClB,OAAO;gBACP,IAAI;gBACJ,OAAO,EAAE,KAAK,CAAC,OAAO;gBACtB,IAAI,EAAE,KAAK,CAAC,IAAI;gBAChB,KAAK,EAAE,KAAK,CAAC,KAAK;aACnB,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/lib/RecordsTable.d.ts

@@ -0,0 +1,87 @@
+import { type PropType } from 'vue';
+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;
+};
+/**
+ * The underlying ("show records") rows for a view — the cross-filtered data
+ * rendered as a design-system DataTable. Columns come from the data model.
+ */
+export declare const RecordsTable: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    store: {
+        type: PropType<DashboardStore>;
+        required: true;
+    };
+    viewId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fields: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    caption: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        default: undefined;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    store: {
+        type: PropType<DashboardStore>;
+        required: true;
+    };
+    viewId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fields: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    caption: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        default: undefined;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    caption: string;
+    size: "sm" | "md" | "lg";
+    viewId: string;
+    pageSize: number;
+    fields: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=RecordsTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecordsTable.d.ts","sourceRoot":"","sources":["../../src/lib/RecordsTable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAC;AAMxD,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG3E,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;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY;;cAGI,QAAQ,CAAC,cAAc,CAAC;;;;;;;;cAExB,QAAQ,CAAC,MAAM,EAAE,CAAC;;;;;;;;cAEnB,QAAQ,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;;;;;;;;;;;;;;cAJ3B,QAAQ,CAAC,cAAc,CAAC;;;;;;;;cAExB,QAAQ,CAAC,MAAM,EAAE,CAAC;;;;;;;;cAEnB,QAAQ,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;;;;;;;;;;;;;;;;;4EAmCtD,CAAC"}

package/dist/lib/RecordsTable.js

@@ -0,0 +1,52 @@
+import { defineComponent, h } from 'vue';
+import { DataTable, } from '@sentropic/design-system-vue';
+import { findMeasure } from '@sentropic/dataviz-core';
+import { useDashboard } from '../adapter.js';
+/**
+ * The underlying ("show records") rows for a view — the cross-filtered data
+ * rendered as a design-system DataTable. Columns come from the data model.
+ */
+export const RecordsTable = defineComponent({
+    name: 'RecordsTable',
+    props: {
+        store: { type: Object, required: true },
+        viewId: { type: String, default: undefined },
+        fields: { type: Array, default: undefined },
+        caption: { type: String, default: undefined },
+        size: { type: String, default: undefined },
+        pageSize: { type: Number, default: undefined },
+        class: { type: String, default: undefined },
+    },
+    setup(props) {
+        const state = useDashboard(props.store);
+        return () => {
+            void state.value;
+            const ids = props.fields ?? [
+                ...props.store.model.dimensions.map((d) => d.id),
+                ...props.store.model.measures.map((m) => m.id),
+            ];
+            const columns = ids.map((id) => {
+                const dim = props.store.model.dimensions.find((d) => d.id === id);
+                const meas = findMeasure(props.store.model, id);
+                return {
+                    key: id,
+                    label: dim?.label ?? meas?.label ?? id,
+                    sortable: true,
+                    align: meas ? 'end' : 'start',
+                };
+            });
+            const rows = props.store
+                .applyCrossfilter(props.viewId)
+                .map((row, i) => ({ ...row, id: String(i) }));
+            return h(DataTable, {
+                columns,
+                rows,
+                caption: props.caption,
+                size: props.size,
+                pageSize: props.pageSize,
+                class: props.class,
+            });
+        };
+    },
+});
+//# sourceMappingURL=RecordsTable.js.map

package/dist/lib/RecordsTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecordsTable.js","sourceRoot":"","sources":["../../src/lib/RecordsTable.ts"],"names":[],"mappings":"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"}

package/dist/lib/SelectionLegend.d.ts

@@ -0,0 +1,57 @@
+import { type PropType } from 'vue';
+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;
+};
+/**
+ * Per-view selections rendered as design-system `SelectionChip`s. Renders
+ * nothing while there is no active selection.
+ */
+export declare const SelectionLegend: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    store: {
+        type: PropType<DashboardStore>;
+        required: true;
+    };
+    labels: {
+        type: PropType<Record<string, string>>;
+        default: () => {};
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    store: {
+        type: PropType<DashboardStore>;
+        required: true;
+    };
+    labels: {
+        type: PropType<Record<string, string>>;
+        default: () => {};
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    label: string;
+    class: string;
+    labels: Record<string, string>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=SelectionLegend.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionLegend.d.ts","sourceRoot":"","sources":["../../src/lib/SelectionLegend.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAC;AAExD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,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;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe;;cAGC,QAAQ,CAAC,cAAc,CAAC;;;;cACvB,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;;;;;;;;;;;;cADjC,QAAQ,CAAC,cAAc,CAAC;;;;cACvB,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;;;;;;;;;;;;4EA0B5D,CAAC"}

package/dist/lib/SelectionLegend.js

@@ -0,0 +1,34 @@
+import { defineComponent, h } from 'vue';
+import { Inline, SelectionChip } from '@sentropic/design-system-vue';
+import {} from '@sentropic/dataviz-core';
+import { useDashboard } from '../adapter.js';
+/**
+ * Per-view selections rendered as design-system `SelectionChip`s. Renders
+ * nothing while there is no active selection.
+ */
+export const SelectionLegend = defineComponent({
+    name: 'SelectionLegend',
+    props: {
+        store: { type: Object, required: true },
+        labels: { type: Object, default: () => ({}) },
+        label: { type: String, default: 'Sélections actives' },
+        class: { type: String, default: undefined },
+    },
+    setup(props) {
+        const state = useDashboard(props.store);
+        return () => {
+            const entries = Object.entries(state.value.selections).filter(([, keys]) => keys.length > 0);
+            if (entries.length === 0)
+                return null;
+            return h(Inline, { role: 'group', 'aria-label': props.label, gap: 2, wrap: true, class: props.class }, {
+                default: () => entries.map(([viewId, keys]) => h(SelectionChip, {
+                    key: viewId,
+                    label: props.labels[viewId] ?? viewId,
+                    count: keys.length,
+                    onClear: () => props.store.clearSelection(viewId),
+                })),
+            });
+        };
+    },
+});
+//# sourceMappingURL=SelectionLegend.js.map

package/dist/lib/SelectionLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionLegend.js","sourceRoot":"","sources":["../../src/lib/SelectionLegend.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAiB,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAuB,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAY7C;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC;IAC7C,IAAI,EAAE,iBAAiB;IACvB,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,MAAkC,EAAE,QAAQ,EAAE,IAAI,EAAE;QACnE,MAAM,EAAE,EAAE,IAAI,EAAE,MAA0C,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;QACjF,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,EAAE;QACtD,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,CAAC,KAAK;QACT,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACV,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAC7F,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAO,IAAI,CAAC;YACtC,OAAO,CAAC,CACN,MAAM,EACN,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,EACpF;gBACE,OAAO,EAAE,GAAG,EAAE,CACZ,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,CAC7B,CAAC,CAAC,aAAa,EAAE;oBACf,GAAG,EAAE,MAAM;oBACX,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,MAAM;oBACrC,KAAK,EAAE,IAAI,CAAC,MAAM;oBAClB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;iBAClD,CAAC,CACH;aACJ,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/lib/SmallMultiples.d.ts

@@ -0,0 +1,109 @@
+import { type PropType } from 'vue';
+import { type BarChartTone } from '@sentropic/design-system-vue';
+import { type DashboardStore } from '@sentropic/dataviz-core';
+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;
+};
+/**
+ * Faceting / trellis: one design-system `BarChart` per distinct `facetBy`
+ * value, laid out in a `Grid`, all sharing a single value `domain` so the
+ * facets are visually comparable.
+ */
+export declare const SmallMultiples: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    store: {
+        type: PropType<DashboardStore>;
+        required: true;
+    };
+    viewId: {
+        type: StringConstructor;
+        required: true;
+    };
+    facetBy: {
+        type: StringConstructor;
+        required: true;
+    };
+    dimension: {
+        type: StringConstructor;
+        required: true;
+    };
+    measure: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    columns: {
+        type: NumberConstructor;
+        default: number;
+    };
+    tone: {
+        type: PropType<BarChartTone>;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    store: {
+        type: PropType<DashboardStore>;
+        required: true;
+    };
+    viewId: {
+        type: StringConstructor;
+        required: true;
+    };
+    facetBy: {
+        type: StringConstructor;
+        required: true;
+    };
+    dimension: {
+        type: StringConstructor;
+        required: true;
+    };
+    measure: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    columns: {
+        type: NumberConstructor;
+        default: number;
+    };
+    tone: {
+        type: PropType<BarChartTone>;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    tone: BarChartTone;
+    columns: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=SmallMultiples.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SmallMultiples.d.ts","sourceRoot":"","sources":["../../src/lib/SmallMultiples.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC,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;AAIF;;;;GAIG;AACH,eAAO,MAAM,cAAc;;cAGE,QAAQ,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAOzB,QAAQ,CAAC,YAAY,CAAC;;;;;;;;;;;cAPrB,QAAQ,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAOzB,QAAQ,CAAC,YAAY,CAAC;;;;;;;;;;;4EAmDhD,CAAC"}

package/dist/lib/SmallMultiples.js

@@ -0,0 +1,67 @@
+import { defineComponent, h } from 'vue';
+import { Grid, BarChart, } from '@sentropic/design-system-vue';
+import { findDimension, findMeasure, groupAggregate, } from '@sentropic/dataviz-core';
+import { useDashboard } from '../adapter.js';
+const keyOf = (v) => (v == null ? 'null' : String(v));
+/**
+ * Faceting / trellis: one design-system `BarChart` per distinct `facetBy`
+ * value, laid out in a `Grid`, all sharing a single value `domain` so the
+ * facets are visually comparable.
+ */
+export const SmallMultiples = defineComponent({
+    name: 'SmallMultiples',
+    props: {
+        store: { type: Object, required: true },
+        viewId: { type: String, required: true },
+        facetBy: { type: String, required: true },
+        dimension: { type: String, required: true },
+        measure: { type: String, required: true },
+        label: { type: String, required: true },
+        columns: { type: Number, default: 2 },
+        tone: { type: String, default: undefined },
+        class: { type: String, default: undefined },
+    },
+    setup(props) {
+        const state = useDashboard(props.store);
+        return () => {
+            void state.value;
+            const fdim = findDimension(props.store.model, props.facetBy);
+            const dim = findDimension(props.store.model, props.dimension);
+            const m = findMeasure(props.store.model, props.measure);
+            let panels = [];
+            let domain;
+            if (fdim && dim && m) {
+                const rows = props.store.applyCrossfilter(props.viewId);
+                const keys = [];
+                const seen = new Set();
+                for (const row of rows) {
+                    const k = keyOf(row[props.facetBy]);
+                    if (!seen.has(k)) {
+                        seen.add(k);
+                        keys.push(k);
+                    }
+                }
+                let max = 0;
+                panels = keys.map((k) => {
+                    const facetRows = rows.filter((row) => keyOf(row[props.facetBy]) === k);
+                    const data = groupAggregate(facetRows, props.dimension, m).map(({ key: barKey, value }) => {
+                        if (value > max)
+                            max = value;
+                        return props.tone ? { label: barKey, value, tone: props.tone } : { label: barKey, value };
+                    });
+                    return { key: k, data };
+                });
+                domain = panels.length ? [0, max] : undefined;
+            }
+            return h(Grid, { columns: props.columns, gap: 4, class: props.class, role: 'group', 'aria-label': props.label }, {
+                default: () => panels.map((panel) => h(BarChart, {
+                    key: panel.key,
+                    data: panel.data,
+                    label: `${props.label} — ${panel.key}`,
+                    domain,
+                })),
+            });
+        };
+    },
+});
+//# sourceMappingURL=SmallMultiples.js.map

package/dist/lib/SmallMultiples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmallMultiples.js","sourceRoot":"","sources":["../../src/lib/SmallMultiples.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAiB,MAAM,KAAK,CAAC;AACxD,OAAO,EACL,IAAI,EACJ,QAAQ,GAGT,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,aAAa,EACb,WAAW,EACX,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAsB7C,MAAM,KAAK,GAAG,CAAC,CAAU,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AAE/D;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,eAAe,CAAC;IAC5C,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,MAAkC,EAAE,QAAQ,EAAE,IAAI,EAAE;QACnE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;QACxC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;QACzC,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC3C,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;QACzC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;QACvC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE;QACrC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAgC,EAAE,OAAO,EAAE,SAAS,EAAE;QACpE,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,CAAC,KAAK;QACT,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACV,KAAK,KAAK,CAAC,KAAK,CAAC;YACjB,MAAM,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;YAC7D,MAAM,GAAG,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;YAC9D,MAAM,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;YACxD,IAAI,MAAM,GAA6C,EAAE,CAAC;YAC1D,IAAI,MAAoC,CAAC;YACzC,IAAI,IAAI,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC;gBACrB,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;gBACxD,MAAM,IAAI,GAAa,EAAE,CAAC;gBAC1B,MAAM,IAAI,GAAG,IAAI,GAAG,EAAU,CAAC;gBAC/B,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;oBACvB,MAAM,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;oBACpC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;wBACjB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;wBACZ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;oBACf,CAAC;gBACH,CAAC;gBACD,IAAI,GAAG,GAAG,CAAC,CAAC;gBACZ,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;oBACtB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;oBACxE,MAAM,IAAI,GAAG,cAAc,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;wBACxF,IAAI,KAAK,GAAG,GAAG;4BAAE,GAAG,GAAG,KAAK,CAAC;wBAC7B,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;oBAC5F,CAAC,CAAC,CAAC;oBACH,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC;gBAC1B,CAAC,CAAC,CAAC;gBACH,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YAChD,CAAC;YACD,OAAO,CAAC,CACN,IAAI,EACJ,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,KAAK,EAAE,EAChG;gBACE,OAAO,EAAE,GAAG,EAAE,CACZ,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACnB,CAAC,CAAC,QAAQ,EAAE;oBACV,GAAG,EAAE,KAAK,CAAC,GAAG;oBACd,IAAI,EAAE,KAAK,CAAC,IAAI;oBAChB,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK,MAAM,KAAK,CAAC,GAAG,EAAE;oBACtC,MAAM;iBACP,CAAC,CACH;aACJ,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/dataviz-vue",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Vue 3 adapter for @sentropic/dataviz-core, built on @sentropic/design-system-vue.",
   "type": "module",
   "license": "MIT",
@@ -27,8 +27,8 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@sentropic/dataviz-core": "0.1.0",
-    "@sentropic/design-system-vue": "0.16.0",
+    "@sentropic/dataviz-core": "0.2.0",
+    "@sentropic/design-system-vue": "0.18.0",
     "@sentropic/design-system-themes": "0.11.0"
   },
   "peerDependencies": {