@bluemarble/bi 0.6.4 → 0.6.6

package/dist/client/index.js

@@ -1,126 +1,9 @@
-import { T as rowRuleStyles, _ as tableColumns, f as isBuiltinChart, h as percentColumn, o as chartCardStyle, u as customChartProps } from "../layout-nViz3MdU.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-Dib4Vk3i.js";
+import { D as matchesValueRule, O as rowRuleStyles, d as customChartProps, g as percentColumn, o as cardsGap, p as isBuiltinChart, s as chartCardStyle, v as tableColumns } from "../layout-CrZ00tB0.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-DUGFHBo-.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
-/**
-* Peças comuns dos gráficos ligados ao modelo: paleta, filtro por clique, legenda e os estados de
-* carregando/erro/vazio.
-*/
-/**
-* 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.
-*/
-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 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
-		]
-	});
-}
-//#endregion
 //#region src/client/seriesPivot.ts
 const EMPTY_SERIES_LABEL = "(em branco)";
 const OTHERS$1 = "Outros";
@@ -197,9 +80,52 @@ function pivotSeries(rows, dimension, series, measure, items, format = String) {
 }
 /** 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;
 /**
@@ -208,13 +134,14 @@ const ROW_HEIGHT = 28;
 * Com `series`, uma medida quebrada pelos valores de outra dimensão:
 * `<BarChart dimension="mes" series="tipo_descarga" measures={['volume']} stacked />`.
 */
-function BarChart({ dimension, measures: measureList, series, formatSeries = String, maxSeries = 6, orientation = "vertical", stacked = false, sort = "dimension", limit, formatDimension = String, hideEmpty = true, showValues = true, clickToFilter = false, height = 360, labels, formats: formatsByMeasure, queryLabel }) {
+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, valueRule, hideUnselected = false, colors, clickToFilter = false, height = 360, labels, formats: formatsByMeasure, queryLabel }) {
 	const { meta, filters, setFilter } = useDashboard();
+	const dimming = clickToFilter && !hideUnselected;
 	const measures = series ? measureList.slice(0, 1) : measureList;
 	const { rows, isLoading, error, inspectProps } = useModelQuery({
 		dimensions: series ? [dimension, series] : [dimension],
 		measures,
-		ignoreFilters: clickToFilter ? series ? [dimension, series] : [dimension] : void 0,
+		ignoreFilters: dimming ? series ? [dimension, series] : [dimension] : void 0,
 		label: queryLabel ?? `BarChart · ${dimension}`
 	});
 	const domain = useModelQuery({
@@ -224,6 +151,13 @@ function BarChart({ dimension, measures: measureList, series, formatSeries = Str
 		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) => dimming && 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));
@@ -241,6 +175,7 @@ function BarChart({ dimension, measures: measureList, series, formatSeries = Str
 		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
 		}));
@@ -249,7 +184,7 @@ function BarChart({ dimension, measures: measureList, series, formatSeries = Str
 		bars = measures.map((measure, index) => ({
 			dataKey: measure,
 			label: labelOf(measure),
-			color: seriesColor(index),
+			color: colors?.[measure] ?? seriesColor(index),
 			format: formats[index] ?? String
 		}));
 		data = rows.map((row) => {
@@ -262,18 +197,32 @@ function BarChart({ dimension, measures: measureList, series, formatSeries = Str
 			return point;
 		});
 	}
-	if (hideEmpty) data = data.filter((point) => bars.some((bar) => Number(point[bar.dataKey])));
+	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;
+	const loading = isLoading || domain.isLoading || categories.isLoading || showEmpty && !meta;
 	const state = chartPlaceholder({
 		height,
-		error: error ?? domain.error,
+		error: error ?? domain.error ?? categories.error,
 		isLoading: loading,
 		empty: !data.length
 	});
@@ -401,11 +350,11 @@ function BarChart({ dimension, measures: measureList, series, formatSeries = Str
 						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
@@ -467,16 +416,25 @@ function BarChart({ dimension, measures: measureList, series, formatSeries = Str
 								isAnimationActive: false,
 								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: isDimmed(point, bar) ? .35 : 1 }, String(point.value))), showLabels && !stacked && /* @__PURE__ */ jsx(LabelList, {
-									dataKey: bar.dataKey,
-									position: horizontal ? "right" : "top",
-									formatter: (value) => bar.format(value),
-									style: {
-										fontSize: 12,
-										fill: "#333",
-										fontWeight: 600
-									}
-								})]
+								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) || !matchesValueRule(valueRule, 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) => matchesValueRule(valueRule, Number(value)) ? (bars[0]?.format ?? String)(value) : "",
+										style: {
+											...labelStyle(true),
+											...valuePosition !== "outside" && { fill: "#333" },
+											fontWeight: 700
+										}
+									})
+								]
 							}, bar.dataKey))
 						]
 					})
@@ -1064,11 +1022,22 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 //#endregion
 //#region src/client/DonutChart.tsx
 const OTHERS = "Outros";
+/** Fatia abaixo dessa fração fica sem valor de fora (os rótulos se atropelariam); tem o tooltip. */
+const MIN_VALUE_SHARE = .02;
+const RADIAN = Math.PI / 180;
+/** Direção da caixa (rosca + legenda) conforme o lado da legenda. */
+const LEGEND_DIRECTION = {
+	right: "row",
+	left: "row-reverse",
+	top: "column-reverse",
+	bottom: "column"
+};
 /**
-* Rosca de uma medida por uma dimensão, com o total no centro e a legenda ao lado (nome, % e valor).
+* Rosca de uma medida por uma dimensão, com o total no centro e a legenda ao lado (nome, % e valor)
+* ou em cima/embaixo; `showValues` põe o valor de cada fatia do lado de fora.
 * Ex.: `<DonutChart dimension="operacao_status" measure="custoTotal" />`.
 */
-function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = String, clickToFilter = false, height = 300, labels, formats, percentDecimals = 1, queryLabel }) {
+function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = String, clickToFilter = false, height = 300, labels, formats, percentDecimals = 1, legendPosition = "right", showValues = false, valueContent = "both", showTotal = true, queryLabel }) {
 	const { meta } = useDashboard();
 	const { rows, isLoading, error, inspectProps } = useModelQuery({
 		dimensions: [dimension],
@@ -1111,6 +1080,26 @@ function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = Strin
 		if (slice?.value !== null && slice?.value !== void 0) filter.toggle(slice.value, event);
 	};
 	const dimmed = (slice) => filter.selected.length > 0 && (slice.value === null || filter.isDimmed(slice.value));
+	const valueText = (amount) => valueContent === "value" ? format(amount) : valueContent === "percent" ? percent(amount) : `${format(amount)} (${percent(amount)})`;
+	const SliceValue = ({ cx, cy, midAngle, outerRadius, payload }) => {
+		const slice = payload;
+		if (slice.amount / total < MIN_VALUE_SHARE) return null;
+		const radius = outerRadius + 10;
+		const cos = Math.cos(-midAngle * RADIAN);
+		const x = cx + radius * cos;
+		const y = cy + radius * Math.sin(-midAngle * RADIAN);
+		return /* @__PURE__ */ jsx("text", {
+			x,
+			y,
+			textAnchor: Math.abs(cos) < .15 ? "middle" : cos > 0 ? "start" : "end",
+			dominantBaseline: "central",
+			fontSize: 12,
+			fill: "#333",
+			opacity: dimmed(slice) ? .45 : 1,
+			children: valueText(slice.amount)
+		});
+	};
+	const side = legendPosition === "left" || legendPosition === "right";
 	const SliceTooltip = ({ active, payload }) => {
 		if (!active || !payload?.length) return null;
 		const slice = payload[0].payload;
@@ -1136,17 +1125,21 @@ function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = Strin
 			sx: {
 				height,
 				display: "flex",
-				alignItems: "center",
-				gap: 2,
+				flexDirection: LEGEND_DIRECTION[legendPosition],
+				alignItems: side ? "center" : "stretch",
+				gap: side ? 2 : 1,
 				opacity: isLoading ? .5 : 1,
 				transition: "opacity .2s"
 			},
 			children: [/* @__PURE__ */ jsxs(Box, {
 				sx: {
 					position: "relative",
-					height: "100%",
-					flex: "0 0 50%",
-					minWidth: 140
+					minWidth: 140,
+					minHeight: 0,
+					...side ? {
+						height: "100%",
+						flex: showValues ? "1 1 0" : "0 0 50%"
+					} : { flex: "1 1 0" }
 				},
 				children: [/* @__PURE__ */ jsx(ResponsiveContainer, {
 					width: "100%",
@@ -1155,13 +1148,15 @@ function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = Strin
 						data: slices,
 						dataKey: "amount",
 						nameKey: "label",
-						innerRadius: "62%",
-						outerRadius: "92%",
+						innerRadius: showValues ? "46%" : "62%",
+						outerRadius: showValues ? "68%" : "92%",
 						startAngle: 90,
 						endAngle: -270,
 						stroke: "#fff",
 						strokeWidth: 2,
 						isAnimationActive: false,
+						label: showValues ? SliceValue : false,
+						labelLine: false,
 						onClick: (_, index, event) => select(slices[index], event),
 						cursor: clickToFilter ? "pointer" : void 0,
 						children: slices.map((slice) => /* @__PURE__ */ jsx(Cell, {
@@ -1169,7 +1164,7 @@ function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = Strin
 							fillOpacity: dimmed(slice) ? .35 : 1
 						}, slice.key))
 					})] })
-				}), /* @__PURE__ */ jsxs(Box, {
+				}), showTotal && /* @__PURE__ */ jsxs(Box, {
 					sx: {
 						position: "absolute",
 						inset: 0,
@@ -1195,14 +1190,15 @@ function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = Strin
 						children: format(total)
 					})]
 				})]
-			}), /* @__PURE__ */ jsx(Box, {
+			}), side ? /* @__PURE__ */ jsx(Box, {
 				component: "ul",
 				sx: {
 					listStyle: "none",
 					m: 0,
 					p: 0,
 					minWidth: 0,
-					flex: 1,
+					flex: showValues ? "0 1 auto" : 1,
+					maxWidth: showValues ? "45%" : void 0,
 					overflow: "auto",
 					maxHeight: "100%"
 				},
@@ -1253,6 +1249,43 @@ function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = Strin
 						})
 					]
 				}, slice.key))
+			}) : /* @__PURE__ */ jsx(Box, {
+				component: "ul",
+				sx: {
+					listStyle: "none",
+					m: 0,
+					p: 0,
+					display: "flex",
+					flexWrap: "wrap",
+					justifyContent: "center",
+					columnGap: 1.5,
+					rowGap: .25,
+					flex: "0 0 auto",
+					maxHeight: "40%",
+					overflow: "auto"
+				},
+				children: slices.map((slice) => /* @__PURE__ */ jsxs(Box, {
+					component: "li",
+					title: `${format(slice.amount)} · ${percent(slice.amount)}`,
+					onClick: (event) => select(slice, event),
+					sx: {
+						display: "flex",
+						alignItems: "center",
+						gap: .5,
+						fontSize: 13,
+						color: "#333",
+						whiteSpace: "nowrap",
+						opacity: dimmed(slice) ? .45 : 1,
+						cursor: clickToFilter && slice.value !== null ? "pointer" : void 0
+					},
+					children: [/* @__PURE__ */ jsx(Box, { sx: {
+						width: 10,
+						height: 10,
+						borderRadius: "50%",
+						bgcolor: slice.color,
+						flex: "0 0 auto"
+					} }), slice.label]
+				}, slice.key))
 			})]
 		})
 	});
@@ -1338,26 +1371,52 @@ function KpiCard({ measure, label, secondary, secondaryLabel, labels, formats, q
 }
 //#endregion
 //#region src/client/DashboardCharts.tsx
+const px = (value) => value === void 0 ? void 0 : `${value}px`;
+/** Tira as chaves `undefined`, para o estilo do layout só sobrepor o que foi definido. */
+const defined = (object) => Object.fromEntries(Object.entries(object).filter(([, value]) => value !== void 0));
+/**
+* `sx` da moldura de um card com o estilo do layout (`card` do `panel`). Só traz o que o layout
+* definiu, para um `panel` do app espalhar por cima do visual dele:
+* `<Paper sx={{ p: 2, borderRadius: 0, ...chartCardSx(card) }}>`.
+*/
+function chartCardSx(card) {
+	return {
+		boxSizing: "border-box",
+		...defined({
+			p: px(card.padding),
+			bgcolor: card.background,
+			borderWidth: px(card.borderWidth),
+			borderStyle: card.borderWidth === void 0 ? void 0 : "solid",
+			borderColor: card.borderColor,
+			borderRadius: px(card.borderRadius),
+			boxShadow: card.shadow
+		})
+	};
+}
+/** `sx` do título de um card com o estilo do layout (idem `chartCardSx`). */
+function chartTitleSx(card) {
+	return defined({
+		color: card.titleColor,
+		fontSize: px(card.titleSize),
+		textAlign: card.titleAlign
+	});
+}
 function DefaultPanel({ title, card, children }) {
-	const px = (value) => value === void 0 ? void 0 : `${value}px`;
 	return /* @__PURE__ */ jsxs(Paper, {
-		elevation: card.shadow ?? 0,
+		elevation: 0,
 		sx: {
-			p: px(card.padding) ?? 1.5,
+			p: 1.5,
 			minWidth: 0,
 			height: "100%",
-			bgcolor: card.background,
-			border: `${card.borderWidth ?? 1}px solid`,
-			borderColor: card.borderColor ?? "divider",
-			borderRadius: px(card.borderRadius)
+			border: "1px solid",
+			borderColor: "divider",
+			...chartCardSx(card)
 		},
 		children: [title && /* @__PURE__ */ jsx(Typography, {
 			sx: {
 				fontWeight: 700,
 				mb: 1,
-				color: card.titleColor,
-				fontSize: px(card.titleSize),
-				textAlign: card.titleAlign
+				...chartTitleSx(card)
 			},
 			children: title
 		}), children]
@@ -1378,10 +1437,12 @@ function DashboardCharts({ layout, formatters = {}, panel: Panel = DefaultPanel,
 	const { charts } = current;
 	const fixed = useFixedCanvas();
 	const columns = `repeat(12, minmax(0, 1fr))`;
+	const space = cardsGap(current.cards);
 	return /* @__PURE__ */ jsx(Box, {
 		sx: {
 			display: "grid",
-			gap: current.cards?.gap === void 0 ? gap : `${current.cards.gap}px`,
+			rowGap: px(space.row) ?? gap,
+			columnGap: px(space.column) ?? gap,
 			gridTemplateColumns: fixed ? columns : {
 				xs: "1fr",
 				lg: columns
@@ -1563,6 +1624,6 @@ function DashboardFilters({ layout, formatters = {}, gap = 2 }) {
 	});
 }
 //#endregion
-export { BarChart, ComboChart, DashboardCanvas, DashboardCharts, DashboardFilters, DashboardProvider, DataTable, DonutChart, FilterSelect, INSPECT_ATTRIBUTE, KpiCard, Legend, ModelDictionary, OTHER_COLOR, SERIES_COLORS, TooltipBox, chartPlaceholder, fieldLabel, formatCurrency, formatMeasure, formatNumber, measureFormat, measureFormatter, numberOf, seriesColor, useClickFilter, useDashboard, useModelQuery };
+export { BarChart, ComboChart, DashboardCanvas, DashboardCharts, DashboardFilters, DashboardProvider, DataTable, DonutChart, FilterSelect, INSPECT_ATTRIBUTE, KpiCard, Legend, ModelDictionary, OTHER_COLOR, SERIES_COLORS, TooltipBox, chartCardSx, chartPlaceholder, chartTitleSx, fieldLabel, formatCurrency, formatMeasure, formatNumber, measureFormat, measureFormatter, numberOf, seriesColor, useClickFilter, useDashboard, useModelQuery };
 
 //# sourceMappingURL=index.js.map