nuxt-ui-tools 1.1.0 → 1.3.0

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -49,6 +49,9 @@ function getPublicComponents(runtimeDir, options) {
     ...[
       "Grid",
       "Card",
+      "Filter",
+      "Filters",
+      "ViewTabs",
       "Stat",
       "Stats",
       "Gauge",
@@ -69,7 +72,8 @@ function getPublicComponents(runtimeDir, options) {
       "Table",
       "Legend",
       "Total",
-      "RelativeTime"
+      "RelativeTime",
+      "Page"
     ].map((part) => ({
       filePath: `${runtimeDir}/dashboard/components/dashboard-${toKebabCase(part)}.vue`,
       global: options.global,
@@ -147,13 +151,18 @@ function setupImports(runtimeDir) {
       { from: "table", name: "createTableFilterBuilder" },
       { from: "table", name: "defineTableSchema" },
       { from: "table", name: "prefetchTable" },
+      { from: "table", name: "remoteTableOptions" },
       { from: "table", name: "tableSource" },
       { from: "table", name: "useTable" }
     ]),
     // Dashboard
     ...withRuntime(runtimeDir, [
       { from: "dashboard", name: "defineDashboardSchema" },
+      { from: "dashboard", name: "defineDashboardView" },
+      { from: "dashboard", name: "injectDashboard" },
       { from: "dashboard", name: "useDashboard" },
+      { from: "dashboard", name: "useDashboardFormat" },
+      { from: "dashboard", name: "useDashboardView" },
       { from: "dashboard", name: "resolveDashboardComparisonRange" }
     ]),
     // Form

package/dist/runtime/dashboard/components/block/dashboard-block-state.d.vue.ts

@@ -2,6 +2,8 @@ import type { DashboardEmptyContent } from '../../types/index.js';
 type __VLS_Props = {
     kind: 'error' | 'empty';
     empty?: DashboardEmptyContent;
+    /** A retry is in flight: the button spins and waits for it. */
+    retrying?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     retry: () => any;

package/dist/runtime/dashboard/components/block/dashboard-block-state.vue

@@ -8,7 +8,8 @@ import { useDashboardUi } from "../../composables/use-dashboard-ui";
 import { resolveDashboardClasses } from "../../utils/ui";
 const props = defineProps({
   kind: { type: String, required: true },
-  empty: { type: Object, required: false }
+  empty: { type: Object, required: false },
+  retrying: { type: Boolean, required: false }
 });
 const emit = defineEmits(["retry"]);
 const { t } = useUiToolsLocale();
@@ -53,6 +54,8 @@ const classes = computed(
       size="xs"
       icon="i-lucide-rotate-cw"
       :label="t('dashboard.states.retry')"
+      :loading="retrying"
+      data-retry
       @click="emit('retry')"
     />
   </div>

package/dist/runtime/dashboard/components/block/dashboard-block-state.vue.d.ts

@@ -2,6 +2,8 @@ import type { DashboardEmptyContent } from '../../types/index.js';
 type __VLS_Props = {
     kind: 'error' | 'empty';
     empty?: DashboardEmptyContent;
+    /** A retry is in flight: the button spins and waits for it. */
+    retrying?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     retry: () => any;

package/dist/runtime/dashboard/components/block/dashboard-chips.d.vue.ts

@@ -0,0 +1,20 @@
+/**
+ * Removable chips in a block toolbar: the series a filter picks (with their color), or the
+ * drill-down filters narrowing the block (with their name).
+ */
+type __VLS_Props = {
+    chips: readonly {
+        key: string;
+        label: string;
+        /** Filter name shown before the value. */
+        prefix?: string;
+        /** CSS color of the series swatch. */
+        color?: string;
+        /** Accessible name of the remove button. */
+        removeLabel: string;
+        remove: () => void;
+    }[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/dashboard/components/block/dashboard-chips.vue

@@ -0,0 +1,42 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { useDashboardUi } from "../../composables/use-dashboard-ui";
+import { resolveDashboardClasses } from "../../utils/ui";
+const { chips } = defineProps({
+  chips: { type: Array, required: true }
+});
+const appUi = useDashboardUi();
+const classes = computed(
+  () => resolveDashboardClasses(
+    {
+      chip: "inline-flex h-7 max-w-full min-w-0 items-center gap-[7px] rounded-full bg-elevated pr-1.5 pl-2.5 text-[12.5px] font-medium text-default",
+      label: "text-muted",
+      remove: "grid size-[18px] flex-none place-items-center rounded-full text-dimmed transition-colors outline-none hover:bg-accented hover:text-default focus-visible:ring-2 focus-visible:ring-primary",
+      swatch: "size-2 flex-none rounded-[2px]"
+    },
+    appUi.value.chips
+  )
+);
+</script>
+
+<template>
+  <span v-for="chip in chips" :key="chip.key" :class="classes.chip" data-dashboard-chip>
+    <i
+      v-if="chip.color"
+      aria-hidden="true"
+      :class="classes.swatch"
+      :style="{ background: chip.color }"
+    />
+    <span v-if="chip.prefix" :class="classes.label">{{ chip.prefix }}</span>
+    <span class="truncate">{{ chip.label }}</span>
+    <button
+      type="button"
+      :class="classes.remove"
+      :aria-label="chip.removeLabel"
+      @click="chip.remove()"
+    >
+      <UIcon name="i-lucide-x" class="size-2.5" />
+    </button>
+  </span>
+</template>

package/dist/runtime/dashboard/components/block/dashboard-chips.vue.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Removable chips in a block toolbar: the series a filter picks (with their color), or the
+ * drill-down filters narrowing the block (with their name).
+ */
+type __VLS_Props = {
+    chips: readonly {
+        key: string;
+        label: string;
+        /** Filter name shown before the value. */
+        prefix?: string;
+        /** CSS color of the series swatch. */
+        color?: string;
+        /** Accessible name of the remove button. */
+        removeLabel: string;
+        remove: () => void;
+    }[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/dashboard/components/block/dashboard-series-picker.d.vue.ts

@@ -0,0 +1,8 @@
+import type { DashboardFilterControl } from '../../types/index.js';
+/** Header controls of a chart whose series a filter picks: add from the options, pick a preset. */
+type __VLS_Props = {
+    filter: DashboardFilterControl;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/dashboard/components/block/dashboard-series-picker.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import DashboardFilter from "../dashboard-filter.vue";
+defineProps({
+  filter: { type: Object, required: true }
+});
+const { t } = useUiToolsLocale();
+</script>
+
+<template>
+  <div class="flex items-center gap-1.5" data-series-picker>
+    <DashboardFilter
+      v-if="filter.items.length"
+      :filter
+      variant="button"
+      icon="i-lucide-plus"
+      :label="t('dashboard.series.add')"
+      list="options"
+    />
+    <DashboardFilter
+      v-if="filter.presets.length"
+      :filter
+      variant="button"
+      icon="i-lucide-layers"
+      :label="t('dashboard.filters.presets')"
+      list="presets"
+    />
+  </div>
+</template>

package/dist/runtime/dashboard/components/block/dashboard-series-picker.vue.d.ts

@@ -0,0 +1,8 @@
+import type { DashboardFilterControl } from '../../types/index.js';
+/** Header controls of a chart whose series a filter picks: add from the options, pick a preset. */
+type __VLS_Props = {
+    filter: DashboardFilterControl;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/dashboard/components/block/dashboard-skeleton.d.vue.ts

@@ -21,12 +21,12 @@ type __VLS_Props = {
     seed?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    columns: number;
     kind: DashboardSkeletonKind;
     layout: "side" | "stacked";
     height: number;
     count: number;
     series: number;
-    columns: number;
     diameter: number;
     seed: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/dashboard/components/block/dashboard-skeleton.vue

@@ -73,11 +73,14 @@ const funnelWidths = computed(
   </div>
 
   <!-- Feed: a rail of markers, two lines per event, and a time -->
-  <div v-else-if="kind === 'feed'" class="flex flex-col">
-    <div v-for="(width, index) in widths" :key="index" class="flex gap-3 pb-3.5">
+  <div v-else-if="kind === 'feed'" class="-my-2 flex flex-col">
+    <div v-for="(width, index) in widths" :key="index" class="flex gap-3 py-2">
       <div class="flex w-7 shrink-0 flex-col items-center">
         <div class="nut-dash-ghost size-7 rounded-full" />
-        <div v-if="index < widths.length - 1" class="mt-1 w-px flex-1 bg-[var(--nut-dash-grid)]" />
+        <div
+          v-if="index < widths.length - 1"
+          class="mt-1 -mb-4 w-px flex-1 bg-[var(--nut-dash-grid)]"
+        />
       </div>
       <div class="flex min-w-0 flex-1 flex-col gap-1.5 pt-1">
         <div class="flex items-center gap-3">

package/dist/runtime/dashboard/components/block/dashboard-skeleton.vue.d.ts

@@ -21,12 +21,12 @@ type __VLS_Props = {
     seed?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    columns: number;
     kind: DashboardSkeletonKind;
     layout: "side" | "stacked";
     height: number;
     count: number;
     series: number;
-    columns: number;
     diameter: number;
     seed: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/dashboard/components/block/dashboard-view-scope.d.vue.ts

@@ -0,0 +1,21 @@
+/**
+ * Renders the content of one view and tells the components inside which view it is, so a tab
+ * component resolves `useDashboardView(consumptionView)` to it. Keyed by view by its parent.
+ */
+type __VLS_Props = {
+    dashboard: object;
+    view: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/dashboard/components/block/dashboard-view-scope.vue

@@ -0,0 +1,12 @@
+<script setup>
+import { provideDashboardView } from "../../composables/use-dashboard-context";
+const { dashboard, view } = defineProps({
+  dashboard: { type: Object, required: true },
+  view: { type: String, required: true }
+});
+provideDashboardView(dashboard, view);
+</script>
+
+<template>
+  <slot />
+</template>

package/dist/runtime/dashboard/components/block/dashboard-view-scope.vue.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Renders the content of one view and tells the components inside which view it is, so a tab
+ * component resolves `useDashboardView(consumptionView)` to it. Keyed by view by its parent.
+ */
+type __VLS_Props = {
+    dashboard: object;
+    view: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/dashboard/components/dashboard-alerts.vue

@@ -42,19 +42,19 @@ const {
   title: { type: [String, Number, Function], required: false },
   subtitle: { type: [String, Number, Function], required: false },
   size: { type: String, required: false },
-  rows: { type: String, required: false },
   card: { type: Boolean, required: false },
   activation: { type: String, required: false },
   empty: { type: Object, required: false },
   menu: { type: [Boolean, Array, Function], required: false },
   actions: { type: Array, required: false },
+  filters: { type: Array, required: false },
   freshness: { type: Boolean, required: false },
   source: { type: Object, required: true },
   severity: { type: Function, required: true },
   label: { type: Function, required: true },
   description: { type: Function, required: false },
   value: { type: Function, required: false },
-  format: { type: Function, required: false },
+  format: { type: [String, Function], required: false, skipCheck: true },
   icon: { type: Function, required: false },
   action: { type: Function, required: false },
   order: { type: String, required: false },
@@ -108,7 +108,7 @@ const entries = computed(() => {
       raw,
       row,
       selected: selected?.(row, index) ?? false,
-      value: raw === null || raw === void 0 ? "" : isNumber(raw) ? (format ?? formats.number.value)(raw) : resolveTextValue(raw)
+      value: raw === null || raw === void 0 ? "" : isNumber(raw) ? formats.resolve(format)(raw) : resolveTextValue(raw)
     };
   });
   return order === "severity" ? rows.sort((a, b) => rank[a.level] - rank[b.level]) : rows;

package/dist/runtime/dashboard/components/dashboard-bar-chart.d.vue.ts

@@ -1,6 +1,6 @@
 import type { LazyTextValue } from '#ui-tools/shared/types/utils';
-import type { DashboardAxisOptions, DashboardBlockBaseProps, DashboardHighlight, DashboardReferenceLine, DashboardSelected, DashboardSelectEvent, DashboardSeries, DashboardSourceLike, DashboardValueFormat } from '../types/index.js';
-declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+import type { DashboardAxisOptions, DashboardBlockBaseProps, DashboardChartTotals, DashboardFilterControl, DashboardOptionValue, DashboardHighlight, DashboardReferenceLine, DashboardSelected, DashboardSelectEvent, DashboardSeries, DashboardSourceLike, DashboardValueFormat } from '../types/index.js';
+declare const __VLS_export: <TRow, TItem extends DashboardOptionValue = DashboardOptionValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<DashboardBlockBaseProps & {
         source: DashboardSourceLike<readonly TRow[] | undefined>;
         /** Category of each row (month, account…). Rows are plotted in order. */
@@ -8,7 +8,13 @@ declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS
         xFormat?: (value: string | number | Date) => string;
         /** Header of the category column in the table view and CSV export. */
         xLabel?: LazyTextValue;
-        series: readonly DashboardSeries<TRow>[];
+        /**
+         * The series, or a multiple filter whose picks become the series (one per option, in pick
+         * order): the chart then draws the picker and one removable chip per series.
+         */
+        series: readonly DashboardSeries<TRow>[] | DashboardFilterControl<unknown, TItem>;
+        /** With `series` bound to a filter: the value of one picked option's series in a row. */
+        seriesValue?: (row: TRow, item: TItem) => number | null | undefined;
         /** Dashed line drawn over the bars, e.g. the previous period. */
         comparison?: DashboardSeries<TRow>;
         stacked?: boolean;
@@ -28,6 +34,11 @@ declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS
         selected?: DashboardSelected<TRow>;
         /** Prints each group's value above its bars (the stack total when `stacked`). */
         labels?: boolean;
+        /**
+         * Footer totals of the solid series, formatted like their axis: `true` / `'sum'` adds each
+         * series up, `'average'` averages it. Footer slot content follows them.
+         */
+        totals?: DashboardChartTotals;
         /** A click on the chart selects the x position under the pointer. */
         onSelect?: (event: DashboardSelectEvent<TRow>) => void;
     }> & (typeof globalThis extends {

package/dist/runtime/dashboard/components/dashboard-bar-chart.vue

@@ -5,9 +5,13 @@ import {
   resolveDashboardExpandedHeight,
   useDashboardChart
 } from "../composables/use-dashboard-chart";
+import { useDashboardSeriesPicker } from "../composables/use-dashboard-series-picker";
+import DashboardChips from "./block/dashboard-chips.vue";
+import DashboardSeriesPicker from "./block/dashboard-series-picker.vue";
 import DashboardSkeleton from "./block/dashboard-skeleton.vue";
 import { dashboardChartRenderer } from "./charts/renderer";
 import DashboardCard from "./dashboard-card.vue";
+import DashboardTotal from "./dashboard-total.vue";
 const {
   source,
   card = true,
@@ -17,6 +21,7 @@ const {
   xFormat,
   xLabel,
   series,
+  seriesValue,
   comparison,
   stacked = false,
   yAxis,
@@ -28,29 +33,31 @@ const {
   highlight,
   selected,
   labels = false,
+  totals,
   onSelect,
   ...block
 } = defineProps({
   title: { type: [String, Number, Function], required: false },
   subtitle: { type: [String, Number, Function], required: false },
   size: { type: String, required: false },
-  rows: { type: String, required: false },
   card: { type: Boolean, required: false },
   activation: { type: String, required: false },
   empty: { type: Object, required: false },
   menu: { type: [Boolean, Array, Function], required: false },
   actions: { type: Array, required: false },
+  filters: { type: Array, required: false },
   freshness: { type: Boolean, required: false },
   ui: { type: Object, required: false },
   source: { type: Object, required: true },
   x: { type: Function, required: true },
   xFormat: { type: Function, required: false },
   xLabel: { type: [String, Number, Function], required: false },
-  series: { type: Array, required: true },
+  series: { type: [Array, Object], required: true },
+  seriesValue: { type: Function, required: false },
   comparison: { type: Object, required: false },
   stacked: { type: Boolean, required: false },
   yAxis: { type: Object, required: false },
-  format: { type: Function, required: false },
+  format: { type: [String, Function], required: false, skipCheck: true },
   reference: { type: [Object, Array], required: false },
   height: { type: Number, required: false },
   legend: { type: Boolean, required: false },
@@ -58,17 +65,23 @@ const {
   highlight: { type: [String, Function], required: false },
   selected: { type: Function, required: false },
   labels: { type: Boolean, required: false },
+  totals: { type: [Boolean, String], required: false },
   onSelect: { type: Function, required: false }
 });
 defineSlots();
 const mounted = useMounted();
+const picked = useDashboardSeriesPicker({
+  series: () => series,
+  value: () => seriesValue
+});
 const allSeries = computed(
-  () => comparison ? [...series, { color: "series-2", ...comparison, dashed: true, type: "line" }] : series
+  () => comparison ? [...picked.series.value, { color: "series-2", ...comparison, dashed: true, type: "line" }] : picked.series.value
 );
 const seed = computed(() => allSeries.value.map((entry) => entry.key).join("|"));
-const skeletonSeries = computed(() => series.length);
+const skeletonSeries = computed(() => picked.series.value.length || 1);
 const skeletonPoints = computed(() => source.data?.length || points);
 const chart = useDashboardChart({
+  totals: () => totals,
   defaultType: "bar",
   format: () => format,
   highlight: () => highlight,
@@ -93,7 +106,7 @@ const chart = useDashboardChart({
     :menu
     :freshness
     :source
-    :legend="legend ? chart.legend.value : void 0"
+    :legend="legend && !picked.picker.value ? chart.legend.value : void 0"
     :is-empty="chart.frame.value.data.length === 0 || chart.frame.value.series.length === 0"
     :tabulate="chart.tabulate"
   >
@@ -106,13 +119,21 @@ const chart = useDashboardChart({
         :seed
       />
     </template>
-    <template v-if="$slots['header-right']" #header-right>
+    <template v-if="$slots['header-right'] || picked.picker.value" #header-right>
+      <DashboardSeriesPicker v-if="picked.picker.value" :filter="picked.picker.value" />
       <slot name="header-right" />
     </template>
-    <template v-if="$slots.toolbar" #toolbar>
+    <template v-if="$slots.toolbar || picked.chips.value.length" #toolbar>
+      <DashboardChips v-if="picked.chips.value.length" :chips="picked.chips.value" />
       <slot name="toolbar" />
     </template>
-    <template v-if="$slots.footer" #footer>
+    <template v-if="$slots.footer || chart.totals.value.length" #footer>
+      <DashboardTotal
+        v-for="total in chart.totals.value"
+        :key="total.key"
+        :label="total.label"
+        :value="total.text"
+      />
       <slot name="footer" />
     </template>
 

package/dist/runtime/dashboard/components/dashboard-bar-chart.vue.d.ts

@@ -1,6 +1,6 @@
 import type { LazyTextValue } from '#ui-tools/shared/types/utils';
-import type { DashboardAxisOptions, DashboardBlockBaseProps, DashboardHighlight, DashboardReferenceLine, DashboardSelected, DashboardSelectEvent, DashboardSeries, DashboardSourceLike, DashboardValueFormat } from '../types/index.js';
-declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+import type { DashboardAxisOptions, DashboardBlockBaseProps, DashboardChartTotals, DashboardFilterControl, DashboardOptionValue, DashboardHighlight, DashboardReferenceLine, DashboardSelected, DashboardSelectEvent, DashboardSeries, DashboardSourceLike, DashboardValueFormat } from '../types/index.js';
+declare const __VLS_export: <TRow, TItem extends DashboardOptionValue = DashboardOptionValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<DashboardBlockBaseProps & {
         source: DashboardSourceLike<readonly TRow[] | undefined>;
         /** Category of each row (month, account…). Rows are plotted in order. */
@@ -8,7 +8,13 @@ declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS
         xFormat?: (value: string | number | Date) => string;
         /** Header of the category column in the table view and CSV export. */
         xLabel?: LazyTextValue;
-        series: readonly DashboardSeries<TRow>[];
+        /**
+         * The series, or a multiple filter whose picks become the series (one per option, in pick
+         * order): the chart then draws the picker and one removable chip per series.
+         */
+        series: readonly DashboardSeries<TRow>[] | DashboardFilterControl<unknown, TItem>;
+        /** With `series` bound to a filter: the value of one picked option's series in a row. */
+        seriesValue?: (row: TRow, item: TItem) => number | null | undefined;
         /** Dashed line drawn over the bars, e.g. the previous period. */
         comparison?: DashboardSeries<TRow>;
         stacked?: boolean;
@@ -28,6 +34,11 @@ declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS
         selected?: DashboardSelected<TRow>;
         /** Prints each group's value above its bars (the stack total when `stacked`). */
         labels?: boolean;
+        /**
+         * Footer totals of the solid series, formatted like their axis: `true` / `'sum'` adds each
+         * series up, `'average'` averages it. Footer slot content follows them.
+         */
+        totals?: DashboardChartTotals;
         /** A click on the chart selects the x position under the pointer. */
         onSelect?: (event: DashboardSelectEvent<TRow>) => void;
     }> & (typeof globalThis extends {

package/dist/runtime/dashboard/components/dashboard-bars.vue

@@ -39,19 +39,19 @@ const {
   title: { type: [String, Number, Function], required: false },
   subtitle: { type: [String, Number, Function], required: false },
   size: { type: String, required: false },
-  rows: { type: String, required: false },
   card: { type: Boolean, required: false },
   activation: { type: String, required: false },
   empty: { type: Object, required: false },
   menu: { type: [Boolean, Array, Function], required: false },
   actions: { type: Array, required: false },
+  filters: { type: Array, required: false },
   freshness: { type: Boolean, required: false },
   source: { type: Object, required: true },
   label: { type: Function, required: true },
   tag: { type: Function, required: false },
   value: { type: Function, required: true },
   meta: { type: Function, required: false },
-  format: { type: Function, required: false },
+  format: { type: [String, Function], required: false, skipCheck: true },
   max: { type: Number, required: false },
   color: { type: String, required: false },
   emphasis: { type: String, required: false },
@@ -90,7 +90,7 @@ const entries = computed(
       index,
       key: rowKey?.(row, index) ?? index,
       label: resolveTextValue(label(row)),
-      meta: meta ? resolveTextValue(meta(row)) : (format ?? formats.number.value)(amount),
+      meta: meta ? resolveTextValue(meta(row)) : formats.resolve(format)(amount),
       row,
       selected: selected?.(row, index) ?? false,
       tag: tag ? resolveTextValue(tag(row)) : ""
@@ -115,7 +115,7 @@ function tabulate() {
     ],
     rows: entries.value.map((entry) => [
       toDashboardCell(entry.tag ? `${entry.label} ${entry.tag}` : entry.label),
-      toDashboardCell(entry.amount, (format ?? formats.number.value)(entry.amount))
+      toDashboardCell(entry.amount, formats.resolve(format)(entry.amount))
     ])
   };
 }