@bluemarble/bi 0.6.3 → 0.6.5

package/dist/client/index.js

@@ -1,143 +1,164 @@
-import { T as rowRuleStyles, _ as tableColumns, f as isBuiltinChart, h as percentColumn, o as chartCardStyle, u as customChartProps } from "../layout-DAFeHIuP.js";
-import { a as formatCurrency, c as measureFormat, d as useDashboard, i as fieldLabel, l as measureFormatter, m as layoutItemKey, n as INSPECT_ATTRIBUTE, o as formatMeasure, p as LAYOUT_ITEM_ATTRIBUTE, r as useModelQuery, s as formatNumber, t as ModelDictionary, u as DashboardProvider } from "../ModelDictionary-Dc3_LKqr.js";
+import { T as rowRuleStyles, _ as tableColumns, f as isBuiltinChart, h as percentColumn, o as chartCardStyle, u as customChartProps } from "../layout-CBzYDoqE.js";
+import { S as layoutItemKey, _ as useClickFilter, a as formatCurrency, c as measureFormat, d as OTHER_COLOR, f as SERIES_COLORS, g as seriesColor, h as numberOf, i as fieldLabel, l as measureFormatter, m as chartPlaceholder, n as INSPECT_ATTRIBUTE, o as formatMeasure, p as TooltipBox, r as useModelQuery, s as formatNumber, t as ModelDictionary, u as Legend, v as DashboardProvider, x as LAYOUT_ITEM_ATTRIBUTE, y as useDashboard } from "../ModelDictionary-CyeYU6ZJ.js";
 import { Box, Checkbox, CircularProgress, FormControl, InputLabel, ListItemText, MenuItem, OutlinedInput, Paper, Select, Table, TableBody, TableCell, TableHead, TableRow, TableSortLabel, Typography } from "@mui/material";
 import { Bar, BarChart as BarChart$1, CartesianGrid, Cell, ComposedChart, LabelList, Line, Pie, PieChart, ResponsiveContainer, Tooltip as Tooltip$1, XAxis, YAxis } from "recharts";
 import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/client/chartKit.tsx
+//#region src/client/seriesPivot.ts
+const EMPTY_SERIES_LABEL = "(em branco)";
+const OTHERS$1 = "Outros";
+const keyOf = (value) => value === null ? "\0" : String(value);
 /**
-* Peças comuns dos gráficos ligados ao modelo: paleta, filtro por clique, legenda e os estados de
-* carregando/erro/vazio.
+* Séries a partir do domínio (série × medida sem filtros): ordenadas pelo total, maior primeiro, e
+* a cor segue essa ordem — como o domínio não depende dos filtros, cada valor tem sempre a mesma
+* cor. Além de `max`, as menores viram "Outros" (a última vaga), em cinza.
 */
+function seriesItems(domain, series, measure, max, format = String) {
+	const ranked = domain.map((row) => ({
+		value: row[series] ?? null,
+		amount: Math.abs(numberOf(row, measure) ?? 0)
+	})).sort((a, b) => b.amount - a.amount);
+	const limit = Math.min(Math.max(max, 2), 8);
+	const kept = ranked.length > limit ? ranked.slice(0, limit - 1) : ranked;
+	const items = kept.map((item, index) => ({
+		dataKey: `s${index}`,
+		value: item.value,
+		label: item.value === null ? EMPTY_SERIES_LABEL : format(item.value),
+		color: seriesColor(index)
+	}));
+	if (ranked.length > kept.length) items.push(othersItem(ranked.length - kept.length));
+	return items;
+}
+const othersItem = (count) => ({
+	dataKey: "outros",
+	value: null,
+	label: count ? `${OTHERS$1} (${count})` : OTHERS$1,
+	color: OTHER_COLOR,
+	others: true
+});
 /**
-* Paleta categórica, sempre nesta ordem (a série N tem sempre a mesma cor). Laranja Rocha primeiro;
-* a ordem passa no validador de daltonismo (CVD ΔE ≥ 9 entre vizinhas) e de visão normal (≥ 19).
-*/
-const SERIES_COLORS = [
-	"#F58220",
-	"#2a78d6",
-	"#1baf7a",
-	"#eda100",
-	"#e87ba4",
-	"#008300",
-	"#6250d6",
-	"#e34948"
-];
-/** "Outros" (fatias agrupadas) fica neutro, fora da paleta. */
-const OTHER_COLOR = "#9e9e9e";
-const seriesColor = (index) => SERIES_COLORS[index % SERIES_COLORS.length];
-/** Valor numérico de uma coluna da linha (`null` quando vazio). */
-const numberOf = (row, key) => key && row[key] !== null && row[key] !== void 0 ? Number(row[key]) : null;
-/**
-* Filtro cruzado a partir do gráfico: clicar num valor filtra o dashboard por ele (Ctrl/Cmd+clique
-* acumula; clicar de novo no único selecionado limpa). O gráfico deve ignorar o próprio filtro na
-* consulta (`ignoreFilters`) e só destacar a seleção.
+* Linhas (categoria, série, medida) → um ponto por categoria, na ordem da consulta, com o valor de
+* cada série em `dataKey`. Valor fora das séries soma em "Outros" (criado se o domínio não tinha).
+* Devolve só as séries com algum valor nos pontos (um filtro pode ter tirado uma delas).
 */
-function useClickFilter(dimension, enabled) {
-	const { filters, setFilter } = useDashboard();
-	const selected = enabled && dimension ? filters[dimension] ?? [] : [];
-	const toggle = (value, event) => {
-		if (!enabled || !dimension) return;
-		if (event?.ctrlKey || event?.metaKey) setFilter(dimension, selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value]);
-		else setFilter(dimension, selected.length === 1 && selected[0] === value ? [] : [value]);
-	};
-	return {
-		selected,
-		/** Há seleção e este valor não está nela. */
-		isDimmed: (value) => selected.length > 0 && !selected.includes(value),
-		toggle,
-		clear: () => {
-			if (enabled && dimension && selected.length) setFilter(dimension, []);
+function pivotSeries(rows, dimension, series, measure, items, format = String) {
+	const all = [...items];
+	const byValue = new Map(all.filter((item) => !item.others).map((item) => [keyOf(item.value), item]));
+	const points = /* @__PURE__ */ new Map();
+	const used = /* @__PURE__ */ new Set();
+	for (const row of rows) {
+		const value = row[dimension] ?? "";
+		const key = String(value);
+		let point = points.get(key);
+		if (!point) {
+			point = {
+				value,
+				label: format(value)
+			};
+			for (const item of all) point[item.dataKey] = 0;
+			points.set(key, point);
 		}
+		let item = byValue.get(keyOf(row[series] ?? null));
+		if (!item) {
+			item = all.find((other) => other.others);
+			if (!item) {
+				item = othersItem();
+				all.push(item);
+				for (const other of points.values()) other[item.dataKey] = 0;
+			}
+		}
+		const amount = numberOf(row, measure);
+		if (amount) {
+			point[item.dataKey] = Number(point[item.dataKey] ?? 0) + amount;
+			used.add(item.dataKey);
+		}
+	}
+	return {
+		points: [...points.values()],
+		items: all.filter((item) => used.has(item.dataKey))
 	};
 }
-function Legend({ items, loading }) {
-	return /* @__PURE__ */ jsxs(Box, {
-		sx: {
-			display: "flex",
-			flexWrap: "wrap",
-			columnGap: 1.5,
-			rowGap: .5,
-			mb: 1,
-			fontSize: 14,
-			color: "#555",
-			minHeight: 21
-		},
-		children: [items.map((item) => /* @__PURE__ */ jsxs(Box, {
-			sx: {
-				display: "flex",
-				alignItems: "center",
-				gap: .5
-			},
-			children: [/* @__PURE__ */ jsx(Box, { sx: {
-				width: 9,
-				height: 9,
-				borderRadius: "50%",
-				bgcolor: item.color
-			} }), item.label]
-		}, item.label)), loading && /* @__PURE__ */ jsx(CircularProgress, {
-			size: 14,
-			sx: { ml: "auto" }
-		})]
-	});
-}
-/** Erro / carregando / sem dados no lugar do gráfico; `null` quando há o que desenhar (função, não componente). */
-function chartPlaceholder({ height, error, isLoading, empty }) {
-	if (!error && !empty) return null;
-	return /* @__PURE__ */ jsx(Box, {
-		sx: {
-			height,
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-			color: error ? "error.main" : "#999"
-		},
-		children: error ? "Erro ao carregar o gráfico" : isLoading ? "Carregando…" : "Sem dados para os filtros selecionados"
-	});
-}
-/** `caption`: o que é o título (ex.: o rótulo da dimensão), em cinza acima dele. */
-function TooltipBox({ title, caption, children }) {
-	return /* @__PURE__ */ jsxs(Box, {
-		sx: {
-			bgcolor: "#fff",
-			border: "1px solid #ccc",
-			p: 1,
-			fontSize: 13
-		},
-		children: [
-			caption && /* @__PURE__ */ jsx(Box, {
-				sx: {
-					fontSize: 11,
-					color: "#777"
-				},
-				children: caption
-			}),
-			/* @__PURE__ */ jsx(Box, {
-				sx: { fontWeight: 700 },
-				children: title
-			}),
-			children
-		]
-	});
+/** Soma das séries de um ponto (a altura da barra empilhada). */
+const pointTotal = (point, items) => items.reduce((total, item) => total + Number(point[item.dataKey] ?? 0), 0);
+/**
+* Todas as categorias da dimensão (consulta só da dimensão, sem medidas), na ordem dela, com os
+* valores dos pontos que vieram da consulta e zero nas que não têm dado (o "Mostrar itens sem
+* dados" do Power BI). Ponto fora da lista (não deveria haver) vai no fim.
+*/
+function fillCategories(points, categories, dimension, dataKeys, format = String) {
+	const byValue = new Map(points.map((point) => [String(point.value), point]));
+	const seen = /* @__PURE__ */ new Set();
+	const filled = [];
+	for (const row of categories) {
+		const value = row[dimension] ?? "";
+		const key = String(value);
+		if (seen.has(key)) continue;
+		seen.add(key);
+		const point = byValue.get(key);
+		if (point) filled.push(point);
+		else filled.push({
+			value,
+			label: format(value),
+			...Object.fromEntries(dataKeys.map((dataKey) => [dataKey, 0]))
+		});
+	}
+	return [...filled, ...points.filter((point) => !seen.has(String(point.value)))];
 }
 //#endregion
 //#region src/client/BarChart.tsx
 const MAX_VALUE_LABELS = 30;
+/** Coluna do total da pilha no ponto (para o rótulo do `showTotal`). */
+const TOTAL_KEY = "\0total";
+/** Posição do valor no Recharts, conforme a orientação. */
+const LABEL_POSITION = {
+	vertical: {
+		outside: "top",
+		insideEnd: "insideTop",
+		center: "center",
+		insideBase: "insideBottom"
+	},
+	horizontal: {
+		outside: "right",
+		insideEnd: "insideRight",
+		center: "center",
+		insideBase: "insideLeft"
+	}
+};
+/** Chave de uma série em `colors`: o valor, "(em branco)" ou "Outros". */
+const seriesColorKey = (item) => item.others ? "Outros" : item.value === null ? EMPTY_SERIES_LABEL : String(item.value);
 /** Altura de cada categoria no modo horizontal (barras finas, com respiro). */
 const ROW_HEIGHT = 28;
 /**
 * Barras de uma ou mais medidas por uma dimensão. Ex.:
 * `<BarChart dimension="navio" measures={['custoTotal']} orientation="horizontal" sort="desc" limit={10} />`.
+* Com `series`, uma medida quebrada pelos valores de outra dimensão:
+* `<BarChart dimension="mes" series="tipo_descarga" measures={['volume']} stacked />`.
 */
-function BarChart({ dimension, measures, orientation = "vertical", stacked = false, sort = "dimension", limit, formatDimension = String, hideEmpty = true, showValues = true, clickToFilter = false, height = 360, labels, formats: formatsByMeasure, queryLabel }) {
-	const { meta } = useDashboard();
+function BarChart({ dimension, measures: measureList, series, formatSeries = String, maxSeries = 6, orientation = "vertical", stacked = false, sort = "dimension", limit, formatDimension = String, hideEmpty = true, showEmpty = false, showValues = true, valuePosition = "outside", valueColor, valueSize = 12, showTotal = false, colors, clickToFilter = false, height = 360, labels, formats: formatsByMeasure, queryLabel }) {
+	const { meta, filters, setFilter } = useDashboard();
+	const measures = series ? measureList.slice(0, 1) : measureList;
 	const { rows, isLoading, error, inspectProps } = useModelQuery({
-		dimensions: [dimension],
+		dimensions: series ? [dimension, series] : [dimension],
 		measures,
-		ignoreFilters: clickToFilter ? [dimension] : void 0,
+		ignoreFilters: clickToFilter ? series ? [dimension, series] : [dimension] : void 0,
 		label: queryLabel ?? `BarChart · ${dimension}`
 	});
+	const domain = useModelQuery({
+		dimensions: series ? [series] : [],
+		measures,
+		ignoreFilters: Object.keys(filters),
+		label: `${queryLabel ?? `BarChart · ${dimension}`} · séries`,
+		skip: !series
+	});
+	const table = meta?.dimensions[dimension]?.table;
+	const categories = useModelQuery({
+		dimensions: [dimension],
+		ignoreFilters: Object.keys(filters).filter((name) => clickToFilter && name === dimension || !table || meta?.dimensions[name]?.table !== table),
+		label: `${queryLabel ?? `BarChart · ${dimension}`} · categorias`,
+		skip: !showEmpty || !meta
+	});
 	const filter = useClickFilter(dimension, clickToFilter);
+	const seriesFilter = useClickFilter(series, clickToFilter);
 	const formats = measures.map((measure) => measureFormatter(meta, measure, 0, formatsByMeasure));
 	const labelOf = (name) => fieldLabel(meta, name, labels);
 	const axisFormat = measures[0] ? measureFormat(meta, measures[0], formatsByMeasure) : void 0;
@@ -145,61 +166,143 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 		...axisFormat,
 		decimals: axisFormat?.compact ? 1 : 0
 	}, 0);
+	let data;
+	let bars;
 	const first = measures[0];
-	let data = rows.filter((row) => !hideEmpty || measures.some((measure) => numberOf(row, measure))).map((row) => {
-		const value = row[dimension] ?? "";
-		const point = {
-			value,
-			label: formatDimension(value)
-		};
-		for (const measure of measures) point[measure] = numberOf(row, measure) ?? 0;
-		return point;
-	});
-	if (sort !== "dimension" && first) data = [...data].sort((a, b) => sort === "desc" ? Number(b[first]) - Number(a[first]) : Number(a[first]) - Number(b[first]));
+	if (series && first) {
+		const format = formats[0] ?? String;
+		const pivot = pivotSeries(rows, dimension, series, first, seriesItems(domain.rows, series, first, maxSeries, formatSeries), formatDimension);
+		bars = pivot.items.map((item) => ({
+			...item,
+			color: colors?.[seriesColorKey(item)] ?? item.color,
+			item,
+			format
+		}));
+		data = pivot.points;
+	} else {
+		bars = measures.map((measure, index) => ({
+			dataKey: measure,
+			label: labelOf(measure),
+			color: colors?.[measure] ?? seriesColor(index),
+			format: formats[index] ?? String
+		}));
+		data = rows.map((row) => {
+			const value = row[dimension] ?? "";
+			const point = {
+				value,
+				label: formatDimension(value)
+			};
+			for (const measure of measures) point[measure] = numberOf(row, measure) ?? 0;
+			return point;
+		});
+	}
+	if (showEmpty) data = fillCategories(data, categories.rows, dimension, bars.map((bar) => bar.dataKey), formatDimension);
+	else if (hideEmpty) data = data.filter((point) => bars.some((bar) => Number(point[bar.dataKey])));
+	const sortValue = (point) => series ? pointTotal(point, bars.map((bar) => bar.item).filter((item) => !!item)) : Number(point[first ?? ""]);
+	if (sort !== "dimension" && first) data = [...data].sort((a, b) => sort === "desc" ? sortValue(b) - sortValue(a) : sortValue(a) - sortValue(b));
 	if (limit) data = data.slice(0, limit);
 	const horizontal = orientation === "horizontal";
 	const showLabels = showValues && data.length <= MAX_VALUE_LABELS;
+	const segmentLabels = showLabels && (!stacked || valuePosition !== "outside");
+	const totalLabel = showLabels && stacked && showTotal && bars.length > 0;
+	const labelsOutside = segmentLabels && valuePosition === "outside" || totalLabel;
+	if (totalLabel) data = data.map((point) => ({
+		...point,
+		[TOTAL_KEY]: bars.reduce((total, bar) => total + Number(point[bar.dataKey] ?? 0), 0)
+	}));
+	const labelStyle = (outside) => ({
+		fontSize: valueSize,
+		fill: valueColor ?? (outside ? "#333" : "#fff"),
+		fontWeight: 600
+	});
+	const position = LABEL_POSITION[orientation === "horizontal" ? "horizontal" : "vertical"];
 	const chartHeight = horizontal ? Math.max(height, data.length * ROW_HEIGHT + 24) : height;
 	const longest = Math.max(0, ...data.map((point) => point.label.length));
+	const loading = isLoading || domain.isLoading || categories.isLoading || showEmpty && !meta;
 	const state = chartPlaceholder({
 		height,
-		error,
-		isLoading,
+		error: error ?? domain.error ?? categories.error,
+		isLoading: loading,
 		empty: !data.length
 	});
 	const ChartTooltip = ({ active, payload }) => {
 		if (!active || !payload?.length) return null;
 		const point = payload[0].payload;
-		return /* @__PURE__ */ jsx(TooltipBox, {
+		const shown = series ? bars.filter((bar) => Number(point[bar.dataKey])) : bars;
+		const format = bars[0]?.format ?? String;
+		return /* @__PURE__ */ jsxs(TooltipBox, {
 			title: point.label,
 			caption: labelOf(dimension),
-			children: measures.map((measure, index) => /* @__PURE__ */ jsxs(Box, {
-				sx: {
-					display: "flex",
-					alignItems: "center",
-					gap: .75
-				},
-				children: [
-					/* @__PURE__ */ jsx(Box, { sx: {
-						width: 8,
-						height: 8,
-						borderRadius: "50%",
-						bgcolor: seriesColor(index)
-					} }),
-					labelOf(measure),
-					": ",
-					formats[index]?.(point[measure])
-				]
-			}, measure))
+			children: [
+				series && first && /* @__PURE__ */ jsxs(Box, {
+					sx: {
+						fontSize: 11,
+						color: "#777",
+						mt: .5
+					},
+					children: [
+						labelOf(first),
+						" por ",
+						labelOf(series).toLocaleLowerCase("pt-BR")
+					]
+				}),
+				shown.map((bar) => /* @__PURE__ */ jsxs(Box, {
+					sx: {
+						display: "flex",
+						alignItems: "center",
+						gap: .75
+					},
+					children: [
+						/* @__PURE__ */ jsx(Box, { sx: {
+							width: 8,
+							height: 8,
+							borderRadius: "50%",
+							bgcolor: bar.color
+						} }),
+						bar.label,
+						": ",
+						bar.format(Number(point[bar.dataKey]))
+					]
+				}, bar.dataKey)),
+				series && stacked && shown.length > 1 && /* @__PURE__ */ jsxs(Box, {
+					sx: {
+						fontWeight: 700,
+						mt: .5
+					},
+					children: ["Total: ", format(shown.reduce((total, bar) => total + Number(point[bar.dataKey]), 0))]
+				})
+			]
 		});
 	};
-	const handleClick = (index, event) => {
+	const handleClick = (index, bar, event) => {
 		event.stopPropagation();
 		const point = data[index];
-		if (point) filter.toggle(point.value, event);
+		if (!point) return;
+		const value = bar.item?.value;
+		if (!series || value === null || value === void 0) {
+			filter.toggle(point.value, event);
+			seriesFilter.clear();
+		} else if (event.ctrlKey || event.metaKey) {
+			filter.toggle(point.value, event);
+			seriesFilter.toggle(value, event);
+		} else {
+			const sole = (selected, item) => selected.length === 1 && selected[0] === item;
+			const again = sole(filter.selected, point.value) && sole(seriesFilter.selected, value);
+			setFilter(dimension, again ? [] : [point.value]);
+			setFilter(series, again ? [] : [value]);
+		}
+	};
+	const isDimmed = (point, bar) => {
+		if (filter.isDimmed(point.value)) return true;
+		if (!bar.item || !seriesFilter.selected.length) return false;
+		return bar.item.value === null || seriesFilter.isDimmed(bar.item.value);
+	};
+	const clearFilters = () => {
+		filter.clear();
+		seriesFilter.clear();
 	};
 	const radius = (index) => {
-		if (stacked && index < measures.length - 1) return [
+		if (stacked && index < bars.length - 1) return [
 			0,
 			0,
 			0,
@@ -221,17 +324,17 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 		...inspectProps,
 		sx: { minWidth: 0 },
 		children: [/* @__PURE__ */ jsx(Legend, {
-			items: measures.length > 1 ? measures.map((measure, index) => ({
-				label: labelOf(measure),
-				color: seriesColor(index)
+			items: series || bars.length > 1 ? bars.map(({ label, color }) => ({
+				label,
+				color
 			})) : [],
-			loading: isLoading
+			loading
 		}), state ?? /* @__PURE__ */ jsx(Box, {
-			onClick: filter.clear,
+			onClick: clearFilters,
 			sx: {
 				height,
 				overflowY: horizontal ? "auto" : "hidden",
-				opacity: isLoading ? .5 : 1,
+				opacity: loading ? .5 : 1,
 				transition: "opacity .2s"
 			},
 			children: /* @__PURE__ */ jsx(Box, {
@@ -246,11 +349,11 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 						barCategoryGap: "20%",
 						margin: horizontal ? {
 							top: 4,
-							right: showLabels ? 96 : 16,
+							right: labelsOutside ? 96 : 16,
 							left: 8,
 							bottom: 4
 						} : {
-							top: showLabels ? 24 : 8,
+							top: labelsOutside ? valueSize + 12 : 8,
 							right: 8,
 							left: 8,
 							bottom: 0
@@ -302,27 +405,36 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 								content: /* @__PURE__ */ jsx(ChartTooltip, {}),
 								cursor: { fill: "rgba(0,0,0,.04)" }
 							}),
-							measures.map((measure, index) => /* @__PURE__ */ jsxs(Bar, {
-								dataKey: measure,
-								name: labelOf(measure),
-								fill: seriesColor(index),
+							bars.map((bar, index) => /* @__PURE__ */ jsxs(Bar, {
+								dataKey: bar.dataKey,
+								name: bar.label,
+								fill: bar.color,
 								stackId: stacked ? "stack" : void 0,
 								radius: radius(index),
 								maxBarSize: horizontal ? 18 : 56,
 								isAnimationActive: false,
-								onClick: clickToFilter ? (_bar, barIndex, event) => handleClick(barIndex, event) : void 0,
+								onClick: clickToFilter ? (_bar, barIndex, event) => handleClick(barIndex, bar, event) : void 0,
 								cursor: clickToFilter ? "pointer" : void 0,
-								children: [clickToFilter && data.map((point) => /* @__PURE__ */ jsx(Cell, { fillOpacity: filter.isDimmed(point.value) ? .35 : 1 }, String(point.value))), showLabels && !stacked && /* @__PURE__ */ jsx(LabelList, {
-									dataKey: measure,
-									position: horizontal ? "right" : "top",
-									formatter: (value) => formats[index]?.(value) ?? "",
-									style: {
-										fontSize: 12,
-										fill: "#333",
-										fontWeight: 600
-									}
-								})]
-							}, measure))
+								children: [
+									clickToFilter && data.map((point) => /* @__PURE__ */ jsx(Cell, { fillOpacity: isDimmed(point, bar) ? .35 : 1 }, String(point.value))),
+									segmentLabels && /* @__PURE__ */ jsx(LabelList, {
+										dataKey: bar.dataKey,
+										position: position[valuePosition],
+										formatter: (value) => stacked && !Number(value) ? "" : bar.format(value),
+										style: labelStyle(valuePosition === "outside")
+									}),
+									totalLabel && index === bars.length - 1 && /* @__PURE__ */ jsx(LabelList, {
+										dataKey: TOTAL_KEY,
+										position: position.outside,
+										formatter: (value) => (bars[0]?.format ?? String)(value),
+										style: {
+											...labelStyle(true),
+											...valuePosition !== "outside" && { fill: "#333" },
+											fontWeight: 700
+										}
+									})
+								]
+							}, bar.dataKey))
 						]
 					})
 				})
@@ -1279,11 +1391,12 @@ function Chart({ chart, formatters }) {
 			});
 		}
 		case "bar": {
-			const { id, type, title, span, card, formatDimension, ...props } = chart;
+			const { id, type, title, span, card, formatDimension, formatSeries, ...props } = chart;
 			return /* @__PURE__ */ jsx(BarChart, {
 				...props,
 				queryLabel,
-				formatDimension: formatter(formatDimension)
+				formatDimension: formatter(formatDimension),
+				formatSeries: formatter(formatSeries)
 			});
 		}
 		case "donut": {