@bluemarble/bi 0.3.1 → 0.4.0

package/dist/client/index.js

@@ -1,5 +1,5 @@
-import { f as isBuiltinChart, o as chartCardStyle, u as customChartProps } from "../layout-DTR4vI-I.js";
-import { a as useDashboard, c as layoutItemKey, i as DashboardProvider, n as INSPECT_ATTRIBUTE, r as useModelQuery, s as LAYOUT_ITEM_ATTRIBUTE, t as ModelDictionary } from "../ModelDictionary-kUKcdbc8.js";
+import { f as isBuiltinChart, o as chartCardStyle, u as customChartProps } from "../layout-676sEvvb.js";
+import { a as useDashboard, c as layoutItemKey, i as DashboardProvider, n as INSPECT_ATTRIBUTE, r as useModelQuery, s as LAYOUT_ITEM_ATTRIBUTE, t as ModelDictionary } from "../ModelDictionary-Y7W9oK1J.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";
@@ -95,7 +95,8 @@ function chartPlaceholder({ height, error, isLoading, empty }) {
 		children: error ? "Erro ao carregar o gráfico" : isLoading ? "Carregando…" : "Sem dados para os filtros selecionados"
 	});
 }
-function TooltipBox({ title, children }) {
+/** `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",
@@ -103,53 +104,90 @@ function TooltipBox({ title, children }) {
 			p: 1,
 			fontSize: 13
 		},
-		children: [/* @__PURE__ */ jsx(Box, {
-			sx: { fontWeight: 700 },
-			children: title
-		}), children]
+		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/format.ts
 const formatters = /* @__PURE__ */ new Map();
-function formatNumber(value, decimals = 2) {
+/** `compact`: notação curta do pt-BR (1,2 mil / 3,4 mi / 5,6 bi). */
+function formatNumber(value, decimals = 2, compact = false) {
 	if (value === null || value === void 0 || value === "") return "";
 	const number = Number(value);
 	if (Number.isNaN(number)) return String(value);
-	let formatter = formatters.get(decimals);
+	const key = `${decimals}:${compact}`;
+	let formatter = formatters.get(key);
 	if (!formatter) {
 		formatter = new Intl.NumberFormat("pt-BR", {
 			minimumFractionDigits: decimals,
-			maximumFractionDigits: decimals
+			maximumFractionDigits: decimals,
+			...compact && { notation: "compact" }
 		});
-		formatters.set(decimals, formatter);
+		formatters.set(key, formatter);
 	}
 	return formatter.format(number);
 }
-const formatCurrency = (value, decimals = 2) => {
-	const text = formatNumber(value, decimals);
+const formatCurrency = (value, decimals = 2, compact = false) => {
+	const text = formatNumber(value, decimals, compact);
 	return text && `R$ ${text}`;
 };
 /**
-* Formata pelo dicionário do modelo (`format`/`decimals` da medida). `fallbackDecimals` é o padrão
-* do componente quando a medida não define `decimals`.
+* Formata pelo dicionário do modelo (`format`/`decimals` da medida) ou pelo formato do gráfico.
+* `fallbackDecimals` é o padrão do componente quando nenhum dos dois define `decimals`.
 */
 function formatMeasure(value, meta, fallbackDecimals = 2) {
+	if (value === null || value === void 0 || value === "") return "";
 	const decimals = meta?.decimals ?? (meta?.format === "integer" ? 0 : fallbackDecimals);
+	const compact = meta?.compact ?? false;
+	let text;
 	switch (meta?.format) {
-		case "currency": return formatCurrency(value, decimals);
+		case "currency":
+			text = formatCurrency(value, decimals, compact);
+			break;
 		case "percent": {
-			if (value === null || value === void 0 || value === "") return "";
-			const text = formatNumber(Number(value) * 100, decimals);
-			return text && `${text}%`;
+			const number = formatNumber(Number(value) * 100, decimals, compact);
+			text = number && `${number}%`;
+			break;
 		}
-		default: return formatNumber(value, decimals);
+		default: text = formatNumber(value, decimals, compact);
 	}
+	return text && `${meta?.prefix ?? ""}${text}${meta?.suffix ?? ""}`;
 }
-/** Formatter de uma medida pelo dicionário do modelo; sem `format`, número com `fallbackDecimals`. */
-function measureFormatter(meta, measure, fallbackDecimals = 2) {
-	const measureMeta = meta?.measures[measure];
-	return (value) => formatMeasure(value, measureMeta, fallbackDecimals);
+/** Dicionário do modelo com o formato do gráfico por cima. */
+function measureFormat(meta, measure, formats) {
+	const fromModel = meta?.measures[measure];
+	const fromChart = formats?.[measure];
+	if (!fromChart) return fromModel;
+	return {
+		...fromModel?.format !== void 0 && { format: fromModel.format },
+		...fromModel?.decimals !== void 0 && { decimals: fromModel.decimals },
+		...fromChart
+	};
+}
+/**
+* Formatter de uma medida: o `formats` do gráfico (se houver) por cima do dicionário do modelo; sem
+* `format`, número com `fallbackDecimals`.
+*/
+function measureFormatter(meta, measure, fallbackDecimals = 2, formats) {
+	const format = measureFormat(meta, measure, formats);
+	return (value) => formatMeasure(value, format, fallbackDecimals);
+}
+/** Rótulo de uma dimensão/medida: o `labels` do gráfico, o dicionário do modelo ou o nome. */
+function fieldLabel(meta, name, labels) {
+	return labels?.[name] || meta?.dimensions[name]?.label || meta?.measures[name]?.label || name;
 }
 //#endregion
 //#region src/client/BarChart.tsx
@@ -160,7 +198,7 @@ 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} />`.
 */
-function BarChart({ dimension, measures, orientation = "vertical", stacked = false, sort = "dimension", limit, formatDimension = String, hideEmpty = true, showValues = true, clickToFilter = false, height = 360, queryLabel }) {
+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();
 	const { rows, isLoading, error, inspectProps } = useModelQuery({
 		dimensions: [dimension],
@@ -169,8 +207,13 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 		label: queryLabel ?? `BarChart · ${dimension}`
 	});
 	const filter = useClickFilter(dimension, clickToFilter);
-	const formats = measures.map((measure) => measureFormatter(meta, measure, 0));
-	const labelOf = (measure) => meta?.measures[measure]?.label ?? measure;
+	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;
+	const formatTick = (value) => formatMeasure(value, {
+		...axisFormat,
+		decimals: axisFormat?.compact ? 1 : 0
+	}, 0);
 	const first = measures[0];
 	let data = rows.filter((row) => !hideEmpty || measures.some((measure) => numberOf(row, measure))).map((row) => {
 		const value = row[dimension] ?? "";
@@ -184,7 +227,7 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 	if (sort !== "dimension" && first) data = [...data].sort((a, b) => sort === "desc" ? Number(b[first]) - Number(a[first]) : Number(a[first]) - Number(b[first]));
 	if (limit) data = data.slice(0, limit);
 	const horizontal = orientation === "horizontal";
-	const labels = showValues && data.length <= MAX_VALUE_LABELS;
+	const showLabels = showValues && data.length <= MAX_VALUE_LABELS;
 	const chartHeight = horizontal ? Math.max(height, data.length * ROW_HEIGHT + 24) : height;
 	const longest = Math.max(0, ...data.map((point) => point.label.length));
 	const state = chartPlaceholder({
@@ -198,6 +241,7 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 		const point = payload[0].payload;
 		return /* @__PURE__ */ jsx(TooltipBox, {
 			title: point.label,
+			caption: labelOf(dimension),
 			children: measures.map((measure, index) => /* @__PURE__ */ jsxs(Box, {
 				sx: {
 					display: "flex",
@@ -271,11 +315,11 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 						barCategoryGap: "20%",
 						margin: horizontal ? {
 							top: 4,
-							right: labels ? 96 : 16,
+							right: showLabels ? 96 : 16,
 							left: 8,
 							bottom: 4
 						} : {
-							top: labels ? 24 : 8,
+							top: showLabels ? 24 : 8,
 							right: 8,
 							left: 8,
 							bottom: 0
@@ -288,11 +332,12 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 							}),
 							horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
 								type: "number",
-								hide: labels,
+								hide: showLabels,
 								tick: {
 									fontSize: 12,
 									fill: "#555"
-								}
+								},
+								tickFormatter: formatTick
 							}), /* @__PURE__ */ jsx(YAxis, {
 								type: "category",
 								dataKey: "label",
@@ -314,12 +359,12 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 								tickLine: false,
 								axisLine: { stroke: "#ccc" }
 							}), /* @__PURE__ */ jsx(YAxis, {
-								hide: labels,
+								hide: showLabels,
 								tick: {
 									fontSize: 12,
 									fill: "#555"
 								},
-								tickFormatter: (value) => formatNumber(value, 0),
+								tickFormatter: formatTick,
 								width: 72
 							})] }),
 							/* @__PURE__ */ jsx(Tooltip$1, {
@@ -336,7 +381,7 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 								isAnimationActive: false,
 								onClick: clickToFilter ? (_bar, barIndex, event) => handleClick(barIndex, 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))), labels && !stacked && /* @__PURE__ */ jsx(LabelList, {
+								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) ?? "",
@@ -365,18 +410,26 @@ const lineDomain = ([min, max]) => {
 * Barras + linha de uma dimensão, consultando o modelo do `DashboardProvider` (com os filtros dele).
 * Ex.: `<ComboChart dimension="mes" bar="custoTotal" line="custoTon" detail="volTotal" />`.
 */
-function ComboChart({ dimension, bar, line, detail, barLabel, lineLabel, detailLabel, formatDimension = String, formatBar, formatLine, formatDetail, hideEmpty = true, height = 360, maxLabels = 24, barColor = "#F58220", lineColor = "#555", clickToFilter = false, queryLabel }) {
+function ComboChart({ dimension, bar, line, detail, barLabel, lineLabel, detailLabel, formatDimension = String, formatBar, formatLine, formatDetail, labels, formats, hideEmpty = true, height = 360, maxLabels = 24, barColor = "#F58220", lineColor = "#555", clickToFilter = false, queryLabel }) {
 	const { meta, filters, setFilter } = useDashboard();
-	const fromModel = (measure, decimals, fallback) => {
-		const measureMeta = meta?.measures[measure];
-		return measureMeta?.format ? (value) => formatMeasure(value, measureMeta, decimals) : fallback;
+	const fromModel = (measure, fallback) => {
+		const format = measureFormat(meta, measure, formats);
+		const resolved = format?.format ? format : {
+			...fallback,
+			...format
+		};
+		return (value) => formatMeasure(value, resolved, fallback.decimals);
 	};
-	formatBar ??= fromModel(bar, 0, (value) => formatCurrency(value, 0));
-	formatLine ??= fromModel(line, 2, (value) => formatNumber(value, 2));
-	formatDetail ??= detail ? fromModel(detail, 3, (value) => formatNumber(value, 3)) : (value) => formatNumber(value, 3);
-	barLabel ??= meta?.measures[bar]?.label ?? bar;
-	lineLabel ??= meta?.measures[line]?.label ?? line;
-	detailLabel ??= detail && (meta?.measures[detail]?.label ?? detail);
+	formatBar ??= fromModel(bar, {
+		format: "currency",
+		decimals: 0
+	});
+	formatLine ??= fromModel(line, { decimals: 2 });
+	formatDetail ??= detail ? fromModel(detail, { decimals: 3 }) : (value) => formatNumber(value, 3);
+	barLabel ??= fieldLabel(meta, bar, labels);
+	lineLabel ??= fieldLabel(meta, line, labels);
+	detailLabel ??= detail && fieldLabel(meta, detail, labels);
+	const dimensionLabel = fieldLabel(meta, dimension, labels);
 	const { rows, isLoading, error, inspectProps } = useModelQuery({
 		dimensions: [dimension],
 		measures: detail ? [
@@ -467,6 +520,13 @@ function ComboChart({ dimension, bar, line, detail, barLabel, lineLabel, detailL
 				fontSize: 13
 			},
 			children: [
+				/* @__PURE__ */ jsx(Typography, {
+					sx: {
+						fontSize: 11,
+						color: "#777"
+					},
+					children: dimensionLabel
+				}),
 				/* @__PURE__ */ jsx(Typography, {
 					sx: {
 						fontWeight: 700,
@@ -716,7 +776,6 @@ function DashboardCanvas({ layout, children }) {
 const EMPTY = [];
 /** Chave da coluna de percentual de uma medida (ordenação). */
 const PERCENT = "%:";
-const formatPercent = (value) => value === null ? "" : `${formatNumber(value * 100, 1)}%`;
 function compare(a, b) {
 	if (typeof a === "number" && typeof b === "number") return a - b;
 	return String(a).localeCompare(String(b), "pt-BR", { numeric: true });
@@ -725,7 +784,7 @@ function compare(a, b) {
 * Tabela de medidas por dimensões, com total e ordenação pelo cabeçalho. Ex.:
 * `<DataTable dimensions={['navio']} measures={['volTotal', 'custoTotal', 'custoTon']} />`.
 */
-function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDimensions = {}, showTotal = true, sortBy, sortDirection = "desc", clickToFilter = false, height = 400, queryLabel }) {
+function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDimensions = {}, showTotal = true, sortBy, sortDirection = "desc", clickToFilter = false, height = 400, labels, formats: formatsByMeasure, percentDecimals = 1, queryLabel }) {
 	const { meta } = useDashboard();
 	const name = queryLabel ?? `DataTable · ${dimensions.join(", ") || "total"}`;
 	const firstDimension = dimensions[0];
@@ -763,9 +822,10 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 		if (y === null || y === void 0) return -1;
 		return sort.direction === "asc" ? compare(x, y) : compare(y, x);
 	}) : rows;
-	const formats = Object.fromEntries(measures.map((measure) => [measure, measureFormatter(meta, measure, 2)]));
+	const formats = Object.fromEntries(measures.map((measure) => [measure, measureFormatter(meta, measure, 2, formatsByMeasure)]));
+	const formatPercent = (value) => value === null ? "" : `${formatNumber(value * 100, percentDecimals)}%`;
 	const dimensionText = (dimension, value) => value === null || value === void 0 ? "(vazio)" : (formatDimensions[dimension] ?? String)(value);
-	const labelOf = (column) => meta?.dimensions[column]?.label ?? meta?.measures[column]?.label ?? column;
+	const labelOf = (column) => fieldLabel(meta, column, labels);
 	const headerOf = (column) => {
 		if (!column.startsWith(PERCENT)) return labelOf(column);
 		const measure = column.slice(2);
@@ -874,7 +934,7 @@ const OTHERS = "Outros";
 * Rosca de uma medida por uma dimensão, com o total no centro e a legenda ao lado (nome, % e valor).
 * Ex.: `<DonutChart dimension="operacao_status" measure="custoTotal" />`.
 */
-function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = String, clickToFilter = false, height = 300, queryLabel }) {
+function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = String, clickToFilter = false, height = 300, labels, formats, percentDecimals = 1, queryLabel }) {
 	const { meta } = useDashboard();
 	const { rows, isLoading, error, inspectProps } = useModelQuery({
 		dimensions: [dimension],
@@ -883,7 +943,7 @@ function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = Strin
 		label: queryLabel ?? `DonutChart · ${dimension}`
 	});
 	const filter = useClickFilter(dimension, clickToFilter);
-	const format = measureFormatter(meta, measure, 0);
+	const format = measureFormatter(meta, measure, 0, formats);
 	const positive = rows.map((row) => ({
 		value: row[dimension] ?? "",
 		amount: numberOf(row, measure) ?? 0
@@ -906,7 +966,7 @@ function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = Strin
 		color: OTHER_COLOR
 	});
 	const total = slices.reduce((sum, slice) => sum + slice.amount, 0);
-	const percent = (amount) => `${formatNumber(amount / total * 100, 1)}%`;
+	const percent = (amount) => `${formatNumber(amount / total * 100, percentDecimals)}%`;
 	const placeholder = chartPlaceholder({
 		height,
 		error,
@@ -922,7 +982,10 @@ function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = Strin
 		const slice = payload[0].payload;
 		return /* @__PURE__ */ jsxs(TooltipBox, {
 			title: slice.label,
+			caption: fieldLabel(meta, dimension, labels),
 			children: [
+				fieldLabel(meta, measure, labels),
+				": ",
 				format(slice.amount),
 				" · ",
 				percent(slice.amount)
@@ -1067,7 +1130,7 @@ function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = Strin
 * dimensões: razões (custo/t) saem do total, não de uma média. Ex.:
 * `<KpiCard label="Custo total" measure="custoTotal" secondary="custoTon" />`.
 */
-function KpiCard({ measure, label, secondary, secondaryLabel, queryLabel }) {
+function KpiCard({ measure, label, secondary, secondaryLabel, labels, formats, queryLabel }) {
 	const { meta } = useDashboard();
 	const { rows, isLoading, error, inspectProps } = useModelQuery({
 		measures: secondary ? [measure, secondary] : [measure],
@@ -1076,6 +1139,7 @@ function KpiCard({ measure, label, secondary, secondaryLabel, queryLabel }) {
 	const row = rows[0];
 	const value = row ? numberOf(row, measure) : null;
 	const extra = row && secondary ? numberOf(row, secondary) : null;
+	label ??= labels?.[measure];
 	return /* @__PURE__ */ jsxs(Box, {
 		...inspectProps,
 		sx: {
@@ -1112,7 +1176,7 @@ function KpiCard({ measure, label, secondary, secondaryLabel, queryLabel }) {
 					opacity: isLoading ? .5 : 1,
 					transition: "opacity .2s"
 				},
-				children: error ? "Erro" : value === null ? "—" : measureFormatter(meta, measure, 0)(value)
+				children: error ? "Erro" : value === null ? "—" : measureFormatter(meta, measure, 0, formats)(value)
 			}),
 			secondary && /* @__PURE__ */ jsxs(Box, {
 				sx: {
@@ -1122,7 +1186,7 @@ function KpiCard({ measure, label, secondary, secondaryLabel, queryLabel }) {
 					minHeight: 20
 				},
 				children: [
-					secondaryLabel ?? meta?.measures[secondary]?.label ?? secondary,
+					secondaryLabel ?? fieldLabel(meta, secondary, labels),
 					":",
 					" ",
 					/* @__PURE__ */ jsx(Box, {
@@ -1131,7 +1195,7 @@ function KpiCard({ measure, label, secondary, secondaryLabel, queryLabel }) {
 							fontWeight: 600,
 							color: "#444"
 						},
-						children: extra === null ? "—" : measureFormatter(meta, secondary, 2)(extra)
+						children: extra === null ? "—" : measureFormatter(meta, secondary, 2, formats)(extra)
 					})
 				]
 			})
@@ -1364,6 +1428,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, formatCurrency, formatMeasure, formatNumber, 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, chartPlaceholder, fieldLabel, formatCurrency, formatMeasure, formatNumber, measureFormat, measureFormatter, numberOf, seriesColor, useClickFilter, useDashboard, useModelQuery };
 
 //# sourceMappingURL=index.js.map