@bluemarble/bi 0.4.0 → 0.6.0

package/dist/client/index.js

@@ -1,5 +1,5 @@
-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 { T as rowRuleStyles, _ as tableColumns, f as isBuiltinChart, h as percentColumn, o as chartCardStyle, u as customChartProps } from "../layout-BS51SQcJ.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-C2tzlOY8.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";
@@ -121,75 +121,6 @@ function TooltipBox({ title, caption, children }) {
 	});
 }
 //#endregion
-//#region src/client/format.ts
-const formatters = /* @__PURE__ */ new Map();
-/** `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);
-	const key = `${decimals}:${compact}`;
-	let formatter = formatters.get(key);
-	if (!formatter) {
-		formatter = new Intl.NumberFormat("pt-BR", {
-			minimumFractionDigits: decimals,
-			maximumFractionDigits: decimals,
-			...compact && { notation: "compact" }
-		});
-		formatters.set(key, formatter);
-	}
-	return formatter.format(number);
-}
-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) 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":
-			text = formatCurrency(value, decimals, compact);
-			break;
-		case "percent": {
-			const number = formatNumber(Number(value) * 100, decimals, compact);
-			text = number && `${number}%`;
-			break;
-		}
-		default: text = formatNumber(value, decimals, compact);
-	}
-	return text && `${meta?.prefix ?? ""}${text}${meta?.suffix ?? ""}`;
-}
-/** 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
 const MAX_VALUE_LABELS = 30;
 /** Altura de cada categoria no modo horizontal (barras finas, com respiro). */
@@ -774,8 +705,7 @@ function DashboardCanvas({ layout, children }) {
 //#endregion
 //#region src/client/DataTable.tsx
 const EMPTY = [];
-/** Chave da coluna de percentual de uma medida (ordenação). */
-const PERCENT = "%:";
+const NO_RULES = [];
 function compare(a, b) {
 	if (typeof a === "number" && typeof b === "number") return a - b;
 	return String(a).localeCompare(String(b), "pt-BR", { numeric: true });
@@ -784,17 +714,25 @@ 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, labels, formats: formatsByMeasure, percentDecimals = 1, queryLabel }) {
+function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDimensions = {}, showTotal = true, sortBy, sortDirection = "desc", clickToFilter = false, height = 400, labels, formats: formatsByMeasure, percentDecimals = 1, columnOrder, formatRules = NO_RULES, cellBorders = false, borderColor = "#e0e0e0", align, verticalAlign, queryLabel }) {
 	const { meta } = useDashboard();
 	const name = queryLabel ?? `DataTable · ${dimensions.join(", ") || "total"}`;
 	const firstDimension = dimensions[0];
 	const ignoreFilters = clickToFilter && firstDimension ? [firstDimension] : void 0;
 	const extraMeasures = percentOf.filter((measure) => !measures.includes(measure));
+	const outside = [...new Set([sortBy, ...formatRules.map((rule) => rule.field)].filter(Boolean))].filter((field) => !field.startsWith("%:") && !dimensions.includes(field) && !measures.includes(field) && !extraMeasures.includes(field));
+	const waitingMeta = outside.length > 0 && !meta;
+	const queryDimensions = [...dimensions, ...outside.filter((field) => meta?.dimensions[field])];
 	const { rows, isLoading, error, inspectProps } = useModelQuery({
-		dimensions,
-		measures: [...measures, ...extraMeasures],
+		dimensions: queryDimensions,
+		measures: [
+			...measures,
+			...extraMeasures,
+			...outside.filter((field) => meta?.measures[field] && !meta.dimensions[field])
+		],
 		ignoreFilters,
-		label: name
+		label: name,
+		skip: waitingMeta
 	});
 	const totals = useModelQuery({
 		measures,
@@ -815,7 +753,7 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 			direction: sortDirection
 		});
 	}
-	const sortKey = sort.by?.startsWith(PERCENT) ? sort.by.slice(2) : sort.by;
+	const sortKey = sort.by?.startsWith("%:") ? sort.by.slice(2) : sort.by;
 	const sorted = sortKey ? [...rows].sort((a, b) => {
 		const [x, y] = [a[sortKey], b[sortKey]];
 		if (x === null || x === void 0) return 1;
@@ -827,7 +765,7 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 	const dimensionText = (dimension, value) => value === null || value === void 0 ? "(vazio)" : (formatDimensions[dimension] ?? String)(value);
 	const labelOf = (column) => fieldLabel(meta, column, labels);
 	const headerOf = (column) => {
-		if (!column.startsWith(PERCENT)) return labelOf(column);
+		if (!column.startsWith("%:")) return labelOf(column);
 		const measure = column.slice(2);
 		return measures.includes(measure) ? "%" : `% ${labelOf(measure)}`;
 	};
@@ -837,8 +775,25 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 		const total = sums[measure];
 		return value === null || value === void 0 || !total ? null : Number(value) / total;
 	};
-	const valueColumns = [...measures.flatMap((measure) => percentOf.includes(measure) ? [measure, `${PERCENT}${measure}`] : [measure]), ...extraMeasures.map((measure) => `${PERCENT}${measure}`)];
-	const cellText = (row, column) => column.startsWith(PERCENT) ? formatPercent(percentOfRow(row, column.slice(2))) : formats[column]?.(row[column]);
+	const columns = tableColumns([...dimensions, ...measures], percentOf.filter((measure) => !dimensions.includes(measure)), columnOrder);
+	const ruleStyles = (row) => {
+		if (!formatRules.length) return void 0;
+		const evaluated = { ...row };
+		for (const measure of percentOf) evaluated[percentColumn(measure)] = percentOfRow(row, measure);
+		return rowRuleStyles(formatRules, evaluated, columns);
+	};
+	const ruleSx = (style) => style && {
+		...style.color && { color: style.color },
+		...style.background && { bgcolor: style.background },
+		...style.bold && { fontWeight: 700 },
+		...style.align && { textAlign: style.align },
+		...style.verticalAlign && { verticalAlign: style.verticalAlign }
+	};
+	const isDimension = (column) => dimensions.includes(column);
+	const alignOf = (column) => align?.[column] ?? (isDimension(column) ? "left" : "right");
+	const verticalOf = (column) => verticalAlign?.[column] ?? "middle";
+	const totalLabelColumn = columns.find(isDimension);
+	const cellText = (row, column) => column.startsWith("%:") ? formatPercent(percentOfRow(row, column.slice(2))) : formats[column]?.(row[column]);
 	const toggleSort = (column) => setSort((current) => current.by === column ? {
 		by: column,
 		direction: current.direction === "asc" ? "desc" : "asc"
@@ -847,19 +802,21 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 		direction: dimensions.includes(column) ? "asc" : "desc"
 	});
 	const totalRow = dimensions.length ? totals.rows[0] : void 0;
+	const loading = isLoading || waitingMeta;
 	const placeholder = chartPlaceholder({
 		height: 160,
 		error,
-		isLoading,
+		isLoading: loading,
 		empty: !rows.length
 	});
 	const header = (column, numeric) => /* @__PURE__ */ jsx(TableCell, {
-		align: numeric ? "right" : "left",
+		align: alignOf(column),
 		sortDirection: sort.by === column ? sort.direction : false,
 		sx: {
 			fontWeight: 700,
 			bgcolor: "#f3f3f3",
-			whiteSpace: "nowrap"
+			whiteSpace: "nowrap",
+			verticalAlign: verticalOf(column)
 		},
 		children: /* @__PURE__ */ jsx(TableSortLabel, {
 			active: sort.by === column,
@@ -874,7 +831,7 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 			minWidth: 0,
 			position: "relative"
 		},
-		children: [isLoading && /* @__PURE__ */ jsx(CircularProgress, {
+		children: [loading && /* @__PURE__ */ jsx(CircularProgress, {
 			size: 14,
 			sx: {
 				position: "absolute",
@@ -885,17 +842,21 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 			sx: {
 				maxHeight: height,
 				overflow: "auto",
-				opacity: isLoading ? .5 : 1,
+				opacity: loading ? .5 : 1,
 				transition: "opacity .2s"
 			},
 			children: /* @__PURE__ */ jsxs(Table, {
 				size: "small",
 				stickyHeader: true,
-				sx: { "& td, & th": { fontSize: 13 } },
-				children: [/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [dimensions.map((dimension) => header(dimension, false)), valueColumns.map((column) => header(column, true))] }) }), /* @__PURE__ */ jsxs(TableBody, { children: [sorted.map((row) => {
+				sx: { "& td, & th": {
+					fontSize: 13,
+					...cellBorders && { border: `1px solid ${borderColor}` }
+				} },
+				children: [/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((column) => header(column, !isDimension(column))) }) }), /* @__PURE__ */ jsxs(TableBody, { children: [sorted.map((row) => {
 					const value = firstDimension ? row[firstDimension] : null;
 					const clickable = clickToFilter && value !== null && value !== void 0;
-					return /* @__PURE__ */ jsxs(TableRow, {
+					const styles = ruleStyles(row);
+					return /* @__PURE__ */ jsx(TableRow, {
 						hover: true,
 						onClick: clickable ? (event) => filter.toggle(value, event) : void 0,
 						selected: clickable && filter.selected.includes(value),
@@ -903,13 +864,24 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 							cursor: clickable ? "pointer" : void 0,
 							opacity: clickable && filter.isDimmed(value) ? .5 : 1
 						},
-						children: [dimensions.map((dimension) => /* @__PURE__ */ jsx(TableCell, { children: dimensionText(dimension, row[dimension]) }, dimension)), valueColumns.map((column) => /* @__PURE__ */ jsx(TableCell, {
-							align: "right",
-							sx: { whiteSpace: "nowrap" },
+						children: columns.map((column) => isDimension(column) ? /* @__PURE__ */ jsx(TableCell, {
+							align: alignOf(column),
+							sx: {
+								verticalAlign: verticalOf(column),
+								...ruleSx(styles?.[column])
+							},
+							children: dimensionText(column, row[column])
+						}, column) : /* @__PURE__ */ jsx(TableCell, {
+							align: alignOf(column),
+							sx: {
+								whiteSpace: "nowrap",
+								verticalAlign: verticalOf(column),
+								...ruleSx(styles?.[column])
+							},
 							children: cellText(row, column)
-						}, column))]
-					}, dimensions.map((dimension) => String(row[dimension])).join("\0"));
-				}), totalRow && /* @__PURE__ */ jsxs(TableRow, {
+						}, column))
+					}, queryDimensions.map((dimension) => String(row[dimension])).join("\0"));
+				}), totalRow && /* @__PURE__ */ jsx(TableRow, {
 					sx: { "& td": {
 						fontWeight: 700,
 						position: "sticky",
@@ -917,11 +889,18 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 						bgcolor: "#f3f3f3",
 						borderTop: "2px solid #ddd"
 					} },
-					children: [dimensions.map((dimension, index) => /* @__PURE__ */ jsx(TableCell, { children: index === 0 ? "Total" : "" }, dimension)), valueColumns.map((column) => /* @__PURE__ */ jsx(TableCell, {
-						align: "right",
-						sx: { whiteSpace: "nowrap" },
-						children: column.startsWith(PERCENT) ? formatPercent(sums[column.slice(2)] ? 1 : null) : formats[column]?.(totalRow[column])
-					}, column))]
+					children: columns.map((column) => isDimension(column) ? /* @__PURE__ */ jsx(TableCell, {
+						align: alignOf(column),
+						sx: { verticalAlign: verticalOf(column) },
+						children: column === totalLabelColumn ? "Total" : ""
+					}, column) : /* @__PURE__ */ jsx(TableCell, {
+						align: alignOf(column),
+						sx: {
+							whiteSpace: "nowrap",
+							verticalAlign: verticalOf(column)
+						},
+						children: column.startsWith("%:") ? formatPercent(sums[column.slice(2)] ? 1 : null) : formats[column]?.(totalRow[column])
+					}, column))
 				})] })]
 			})
 		})]