@sentropic/dataviz-vue 0.1.0 → 0.2.0

package/dist/lib/DrillBarChart.d.ts

@@ -0,0 +1,117 @@
+import { type PropType } from 'vue';
+import { type BarChartTone } from '@sentropic/design-system-vue';
+import { type DashboardStore } from '@sentropic/dataviz-core';
+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;
+};
+/**
+ * A bar chart that drills through a dimension hierarchy: clicking a bar filters
+ * the clicked value and pushes the next level as group-by. At the deepest level
+ * a click toggles this view's selection (brushing) instead.
+ */
+export declare const DrillBarChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    store: {
+        type: PropType<DashboardStore>;
+        required: true;
+    };
+    viewId: {
+        type: StringConstructor;
+        required: true;
+    };
+    hierarchy: {
+        type: PropType<string[]>;
+        required: true;
+    };
+    measure: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    tone: {
+        type: PropType<BarChartTone>;
+        default: undefined;
+    };
+    orientation: {
+        type: PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+    width: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    height: {
+        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;
+        required: true;
+    };
+    hierarchy: {
+        type: PropType<string[]>;
+        required: true;
+    };
+    measure: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    tone: {
+        type: PropType<BarChartTone>;
+        default: undefined;
+    };
+    orientation: {
+        type: PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+    width: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    height: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    tone: BarChartTone;
+    orientation: "vertical" | "horizontal";
+    width: number;
+    height: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=DrillBarChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrillBarChart.d.ts","sourceRoot":"","sources":["../../src/lib/DrillBarChart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAA+B,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG3F,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;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa;;cAGG,QAAQ,CAAC,cAAc,CAAC;;;;;;;;cAErB,QAAQ,CAAC,MAAM,EAAE,CAAC;;;;;;;;;;;;cAGtB,QAAQ,CAAC,YAAY,CAAC;;;;cACf,QAAQ,CAAC,UAAU,GAAG,YAAY,CAAC;;;;;;;;;;;;;;;;;;;cANzC,QAAQ,CAAC,cAAc,CAAC;;;;;;;;cAErB,QAAQ,CAAC,MAAM,EAAE,CAAC;;;;;;;;;;;;cAGtB,QAAQ,CAAC,YAAY,CAAC;;;;cACf,QAAQ,CAAC,UAAU,GAAG,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;4EA0CpE,CAAC"}

package/dist/lib/DrillBarChart.js

@@ -0,0 +1,56 @@
+import { defineComponent, h } from 'vue';
+import { BarChart, } from '@sentropic/design-system-vue';
+import { findMeasure, groupAggregate } from '@sentropic/dataviz-core';
+import { useDashboard } from '../adapter.js';
+/**
+ * A bar chart that drills through a dimension hierarchy: clicking a bar filters
+ * the clicked value and pushes the next level as group-by. At the deepest level
+ * a click toggles this view's selection (brushing) instead.
+ */
+export const DrillBarChart = defineComponent({
+    name: 'DrillBarChart',
+    props: {
+        store: { type: Object, required: true },
+        viewId: { type: String, required: true },
+        hierarchy: { type: Array, required: true },
+        measure: { type: String, required: true },
+        label: { type: String, required: true },
+        tone: { type: String, default: undefined },
+        orientation: { type: String, default: 'vertical' },
+        width: { type: Number, default: undefined },
+        height: { type: Number, default: undefined },
+        class: { type: String, default: undefined },
+    },
+    setup(props) {
+        const state = useDashboard(props.store);
+        return () => {
+            const level = Math.min((state.value.drill[props.viewId] ?? []).length, Math.max(props.hierarchy.length - 1, 0));
+            const currentDim = props.hierarchy[level];
+            const canDrill = level < props.hierarchy.length - 1;
+            const m = findMeasure(props.store.model, props.measure);
+            const data = m && currentDim
+                ? groupAggregate(props.store.applyCrossfilter(props.viewId), currentDim, m).map(({ key, value }) => props.tone ? { label: key, value, tone: props.tone } : { label: key, value })
+                : [];
+            const onSelect = (key) => {
+                if (canDrill) {
+                    props.store.setFilter(currentDim, { kind: 'include', values: [key] });
+                    props.store.drillDown(props.viewId, props.hierarchy[level + 1]);
+                }
+                else {
+                    props.store.toggleSelection(props.viewId, key);
+                }
+            };
+            return h(BarChart, {
+                data,
+                label: props.label,
+                orientation: props.orientation,
+                width: props.width,
+                height: props.height,
+                class: props.class,
+                selectedKeys: canDrill ? [] : (state.value.selections[props.viewId] ?? []),
+                onSelect,
+            });
+        };
+    },
+});
+//# sourceMappingURL=DrillBarChart.js.map

package/dist/lib/DrillBarChart.js.map

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

package/dist/lib/DrillBreadcrumb.d.ts

@@ -0,0 +1,77 @@
+import { type PropType } from 'vue';
+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;
+};
+/**
+ * Drill trail (design-system Breadcrumb) plus a "go up one level" button that
+ * pops the drill path and clears the value-filter applied at that level.
+ */
+export declare const DrillBreadcrumb: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    store: {
+        type: PropType<DashboardStore>;
+        required: true;
+    };
+    viewId: {
+        type: StringConstructor;
+        required: true;
+    };
+    hierarchy: {
+        type: PropType<string[]>;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    backLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    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;
+    };
+    hierarchy: {
+        type: PropType<string[]>;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    backLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    label: string;
+    class: string;
+    backLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=DrillBreadcrumb.d.ts.map

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

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

package/dist/lib/DrillBreadcrumb.js

@@ -0,0 +1,42 @@
+import { defineComponent, h } from 'vue';
+import { Breadcrumb, Button, Inline } from '@sentropic/design-system-vue';
+import { findDimension } from '@sentropic/dataviz-core';
+import { useDashboard } from '../adapter.js';
+/**
+ * Drill trail (design-system Breadcrumb) plus a "go up one level" button that
+ * pops the drill path and clears the value-filter applied at that level.
+ */
+export const DrillBreadcrumb = defineComponent({
+    name: 'DrillBreadcrumb',
+    props: {
+        store: { type: Object, required: true },
+        viewId: { type: String, required: true },
+        hierarchy: { type: Array, required: true },
+        label: { type: String, default: 'Chemin de drill' },
+        backLabel: { type: String, default: 'Remonter' },
+        class: { type: String, default: undefined },
+    },
+    setup(props) {
+        const state = useDashboard(props.store);
+        const dimLabel = (id) => findDimension(props.store.model, id)?.label ?? id;
+        const back = () => {
+            const p = props.store.getState().drill[props.viewId] ?? [];
+            if (p.length === 0)
+                return;
+            props.store.drillUp(props.viewId);
+            props.store.clearFilter(props.hierarchy[p.length - 1]);
+        };
+        return () => {
+            const path = state.value.drill[props.viewId] ?? [];
+            const items = props.hierarchy
+                .slice(0, path.length + 1)
+                .map((dim, i) => ({ label: dimLabel(dim), current: i === path.length }));
+            const children = [h(Breadcrumb, { items, label: props.label })];
+            if (path.length > 0) {
+                children.push(h(Button, { variant: 'ghost', onClick: back }, { default: () => props.backLabel }));
+            }
+            return h(Inline, { gap: 2, class: props.class }, { default: () => children });
+        };
+    },
+});
+//# sourceMappingURL=DrillBreadcrumb.js.map

package/dist/lib/DrillBreadcrumb.js.map

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

package/dist/lib/FieldPane.d.ts

@@ -0,0 +1,91 @@
+import { type PropType } from 'vue';
+import { type TreeViewProps } from '@sentropic/design-system-vue';
+import { type DataModel, type FieldId } from '@sentropic/dataviz-core';
+export type FieldPaneProps = {
+    model: DataModel;
+    includeDimensions?: boolean;
+    includeMeasures?: boolean;
+    selectedId?: FieldId | string;
+    expandedIds?: TreeViewProps['expandedIds'];
+    defaultExpandedIds?: TreeViewProps['defaultExpandedIds'];
+    label?: string;
+    class?: string;
+};
+export declare const FieldPane: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    model: {
+        type: PropType<DataModel>;
+        required: true;
+    };
+    includeDimensions: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    includeMeasures: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    selectedId: {
+        type: PropType<FieldId | string>;
+        default: undefined;
+    };
+    expandedIds: {
+        type: PropType<TreeViewProps["expandedIds"]>;
+        default: undefined;
+    };
+    defaultExpandedIds: {
+        type: PropType<TreeViewProps["defaultExpandedIds"]>;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    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<{
+    model: {
+        type: PropType<DataModel>;
+        required: true;
+    };
+    includeDimensions: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    includeMeasures: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    selectedId: {
+        type: PropType<FieldId | string>;
+        default: undefined;
+    };
+    expandedIds: {
+        type: PropType<TreeViewProps["expandedIds"]>;
+        default: undefined;
+    };
+    defaultExpandedIds: {
+        type: PropType<TreeViewProps["defaultExpandedIds"]>;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    label: string;
+    class: string;
+    expandedIds: string[] | undefined;
+    defaultExpandedIds: string[] | undefined;
+    includeDimensions: boolean;
+    includeMeasures: boolean;
+    selectedId: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=FieldPane.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldPane.d.ts","sourceRoot":"","sources":["../../src/lib/FieldPane.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,OAAO,EACb,MAAM,yBAAyB,CAAC;AAEjC,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,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,kBAAkB,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,SAAS;;cAGO,QAAQ,CAAC,SAAS,CAAC;;;;;;;;;;;;cAGd,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC;;;;cACf,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;;;;cAEnD,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;;;;;;;;;;;;;;;cANhD,QAAQ,CAAC,SAAS,CAAC;;;;;;;;;;;;cAGd,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC;;;;cACf,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;;;;cAEnD,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;;;;;;;;;;;;;;;;;;;4EAuB3E,CAAC"}

package/dist/lib/FieldPane.js

@@ -0,0 +1,36 @@
+import { defineComponent, h } from 'vue';
+import { TreeView, } from '@sentropic/design-system-vue';
+import { buildFieldPaneTree, } from '@sentropic/dataviz-core';
+export const FieldPane = defineComponent({
+    name: 'FieldPane',
+    props: {
+        model: { type: Object, required: true },
+        includeDimensions: { type: Boolean, default: undefined },
+        includeMeasures: { type: Boolean, default: undefined },
+        selectedId: { type: String, default: undefined },
+        expandedIds: { type: Array, default: undefined },
+        defaultExpandedIds: {
+            type: Array,
+            default: undefined,
+        },
+        label: { type: String, default: 'Fields' },
+        class: { type: String, default: undefined },
+    },
+    setup(props) {
+        return () => {
+            const tree = buildFieldPaneTree(props.model, {
+                includeDimensions: props.includeDimensions,
+                includeMeasures: props.includeMeasures,
+            });
+            return h(TreeView, {
+                nodes: tree.nodes,
+                selectedId: props.selectedId,
+                expandedIds: props.expandedIds,
+                defaultExpandedIds: props.defaultExpandedIds ?? tree.defaultExpandedIds,
+                class: props.class,
+                'aria-label': props.label,
+            });
+        };
+    },
+});
+//# sourceMappingURL=FieldPane.js.map

package/dist/lib/FieldPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldPane.js","sourceRoot":"","sources":["../../src/lib/FieldPane.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAiB,MAAM,KAAK,CAAC;AACxD,OAAO,EACL,QAAQ,GAET,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,kBAAkB,GAGnB,MAAM,yBAAyB,CAAC;AAajC,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC;IACvC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,MAA6B,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC9D,iBAAiB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE;QACxD,eAAe,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE;QACtD,UAAU,EAAE,EAAE,IAAI,EAAE,MAAoC,EAAE,OAAO,EAAE,SAAS,EAAE;QAC9E,WAAW,EAAE,EAAE,IAAI,EAAE,KAA0D,EAAE,OAAO,EAAE,SAAS,EAAE;QACrG,kBAAkB,EAAE;YAClB,IAAI,EAAE,KAAiE;YACvE,OAAO,EAAE,SAAS;SACnB;QACD,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC1C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,CAAC,KAAK;QACT,OAAO,GAAG,EAAE;YACV,MAAM,IAAI,GAAG,kBAAkB,CAAC,KAAK,CAAC,KAAK,EAAE;gBAC3C,iBAAiB,EAAE,KAAK,CAAC,iBAAiB;gBAC1C,eAAe,EAAE,KAAK,CAAC,eAAe;aACvC,CAAC,CAAC;YAEH,OAAO,CAAC,CAAC,QAAQ,EAAE;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,UAAU,EAAE,KAAK,CAAC,UAAU;gBAC5B,WAAW,EAAE,KAAK,CAAC,WAAW;gBAC9B,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,IAAI,IAAI,CAAC,kBAAkB;gBACvE,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,YAAY,EAAE,KAAK,CAAC,KAAK;aAC1B,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/lib/KpiCardGroup.d.ts

@@ -0,0 +1,100 @@
+import { type PropType } from 'vue';
+import { type KpiCardDeltaFormat, type KpiCardFormat, type KpiCardSize, type KpiCardTone } from '@sentropic/design-system-vue';
+import { type DashboardStore, type KpiCardConfig, type Row } from '@sentropic/dataviz-core';
+export type KpiCardGroupProps = {
+    store: DashboardStore;
+    viewId?: string;
+    configs: KpiCardConfig[];
+    comparisonData?: readonly Row[];
+    format?: KpiCardFormat;
+    deltaFormat?: KpiCardDeltaFormat;
+    size?: KpiCardSize;
+    tone?: KpiCardTone;
+    class?: string;
+};
+export declare const KpiCardGroup: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    store: {
+        type: PropType<DashboardStore>;
+        required: true;
+    };
+    viewId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    configs: {
+        type: PropType<KpiCardConfig[]>;
+        required: true;
+    };
+    comparisonData: {
+        type: PropType<readonly Row[]>;
+        default: undefined;
+    };
+    format: {
+        type: PropType<KpiCardFormat>;
+        default: undefined;
+    };
+    deltaFormat: {
+        type: PropType<KpiCardDeltaFormat>;
+        default: string;
+    };
+    size: {
+        type: PropType<KpiCardSize>;
+        default: undefined;
+    };
+    tone: {
+        type: PropType<KpiCardTone>;
+        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;
+    };
+    configs: {
+        type: PropType<KpiCardConfig[]>;
+        required: true;
+    };
+    comparisonData: {
+        type: PropType<readonly Row[]>;
+        default: undefined;
+    };
+    format: {
+        type: PropType<KpiCardFormat>;
+        default: undefined;
+    };
+    deltaFormat: {
+        type: PropType<KpiCardDeltaFormat>;
+        default: string;
+    };
+    size: {
+        type: PropType<KpiCardSize>;
+        default: undefined;
+    };
+    tone: {
+        type: PropType<KpiCardTone>;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    size: KpiCardSize;
+    tone: KpiCardTone;
+    viewId: string;
+    comparisonData: readonly Row[];
+    format: KpiCardFormat;
+    deltaFormat: KpiCardDeltaFormat;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=KpiCardGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KpiCardGroup.d.ts","sourceRoot":"","sources":["../../src/lib/KpiCardGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,GAAG,EACT,MAAM,yBAAyB,CAAC;AAGjC,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;AAMF,eAAO,MAAM,YAAY;;cAGI,QAAQ,CAAC,cAAc,CAAC;;;;;;;;cAEZ,QAAQ,CAAC,aAAa,EAAE,CAAC;;;;cAClB,QAAQ,CAAC,SAAS,GAAG,EAAE,CAAC;;;;cAC1C,QAAQ,CAAC,aAAa,CAAC;;;;cAClB,QAAQ,CAAC,kBAAkB,CAAC;;;;cACnC,QAAQ,CAAC,WAAW,CAAC;;;;cACrB,QAAQ,CAAC,WAAW,CAAC;;;;;;;;;;;cAPpB,QAAQ,CAAC,cAAc,CAAC;;;;;;;;cAEZ,QAAQ,CAAC,aAAa,EAAE,CAAC;;;;cAClB,QAAQ,CAAC,SAAS,GAAG,EAAE,CAAC;;;;cAC1C,QAAQ,CAAC,aAAa,CAAC;;;;cAClB,QAAQ,CAAC,kBAAkB,CAAC;;;;cACnC,QAAQ,CAAC,WAAW,CAAC;;;;cACrB,QAAQ,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;4EA6B/C,CAAC"}

package/dist/lib/KpiCardGroup.js

@@ -0,0 +1,42 @@
+import { defineComponent, h } from 'vue';
+import { KpiCard, } from '@sentropic/design-system-vue';
+import { buildKpiCards, } from '@sentropic/dataviz-core';
+import { useDashboard } from '../adapter.js';
+function finite(value) {
+    return value === undefined || !Number.isFinite(value) ? undefined : value;
+}
+export const KpiCardGroup = defineComponent({
+    name: 'KpiCardGroup',
+    props: {
+        store: { type: Object, required: true },
+        viewId: { type: String, default: undefined },
+        configs: { type: Array, required: true },
+        comparisonData: { type: Array, default: undefined },
+        format: { type: String, default: undefined },
+        deltaFormat: { type: String, default: 'percent' },
+        size: { type: String, default: undefined },
+        tone: { type: String, default: undefined },
+        class: { type: String, default: undefined },
+    },
+    setup(props) {
+        const state = useDashboard(props.store);
+        return () => {
+            void state.value;
+            const cards = buildKpiCards(props.store.model, props.store.applyCrossfilter(props.viewId), props.configs, {
+                comparisonData: props.comparisonData,
+            });
+            return h('div', { class: props.class }, cards.map((card) => h(KpiCard, {
+                key: card.id,
+                value: card.value,
+                label: card.label,
+                delta: finite(props.deltaFormat === 'absolute' ? card.delta : card.deltaPercent),
+                deltaFormat: props.deltaFormat,
+                format: props.format,
+                size: props.size,
+                tone: props.tone,
+                sparkline: card.sparkline?.map((point) => point.value),
+            })));
+        };
+    },
+});
+//# sourceMappingURL=KpiCardGroup.js.map

package/dist/lib/KpiCardGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiCardGroup.js","sourceRoot":"","sources":["../../src/lib/KpiCardGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAiB,MAAM,KAAK,CAAC;AACxD,OAAO,EACL,OAAO,GAKR,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,aAAa,GAId,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAc7C,SAAS,MAAM,CAAC,KAAyB;IACvC,OAAO,KAAK,KAAK,SAAS,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;AAC5E,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;IAC1C,IAAI,EAAE,cAAc;IACpB,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,OAAO,EAAE,EAAE,IAAI,EAAE,KAA6C,EAAE,QAAQ,EAAE,IAAI,EAAE;QAChF,cAAc,EAAE,EAAE,IAAI,EAAE,KAA4C,EAAE,OAAO,EAAE,SAAS,EAAE;QAC1F,MAAM,EAAE,EAAE,IAAI,EAAE,MAAiC,EAAE,OAAO,EAAE,SAAS,EAAE;QACvE,WAAW,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;QACjF,IAAI,EAAE,EAAE,IAAI,EAAE,MAA+B,EAAE,OAAO,EAAE,SAAS,EAAE;QACnE,IAAI,EAAE,EAAE,IAAI,EAAE,MAA+B,EAAE,OAAO,EAAE,SAAS,EAAE;QACnE,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,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE;gBACxG,cAAc,EAAE,KAAK,CAAC,cAAc;aACrC,CAAC,CAAC;YACH,OAAO,CAAC,CACN,KAAK,EACL,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,EACtB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACjB,CAAC,CAAC,OAAO,EAAE;gBACT,GAAG,EAAE,IAAI,CAAC,EAAE;gBACZ,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC;gBAChF,WAAW,EAAE,KAAK,CAAC,WAAW;gBAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;gBACpB,IAAI,EAAE,KAAK,CAAC,IAAI;gBAChB,IAAI,EAAE,KAAK,CAAC,IAAI;gBAChB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC;aACvD,CAAC,CACH,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}