@bluemarble/bi 0.5.0 → 0.6.0

package/dist/client/index.js

@@ -1,5 +1,5 @@
-import { f as isBuiltinChart, h as orderedColumns, o as chartCardStyle, u as customChartProps } from "../layout-QuOYFmp1.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-D3JzCd6x.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";
@@ -705,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 });
@@ -715,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, columnOrder, 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,
@@ -746,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;
@@ -758,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)}`;
 	};
@@ -768,10 +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 columns = [...orderedColumns([...dimensions, ...measures], columnOrder).flatMap((column) => percentOf.includes(column) && !dimensions.includes(column) ? [column, `${PERCENT}${column}`] : [column]), ...extraMeasures.map((measure) => `${PERCENT}${measure}`)];
+	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(PERCENT) ? formatPercent(percentOfRow(row, column.slice(2))) : formats[column]?.(row[column]);
+	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"
@@ -780,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,
@@ -807,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",
@@ -818,16 +842,20 @@ 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 } },
+				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;
+					const styles = ruleStyles(row);
 					return /* @__PURE__ */ jsx(TableRow, {
 						hover: true,
 						onClick: clickable ? (event) => filter.toggle(value, event) : void 0,
@@ -836,12 +864,23 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 							cursor: clickable ? "pointer" : void 0,
 							opacity: clickable && filter.isDimmed(value) ? .5 : 1
 						},
-						children: columns.map((column) => isDimension(column) ? /* @__PURE__ */ jsx(TableCell, { children: dimensionText(column, row[column]) }, 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"));
+					}, queryDimensions.map((dimension) => String(row[dimension])).join("\0"));
 				}), totalRow && /* @__PURE__ */ jsx(TableRow, {
 					sx: { "& td": {
 						fontWeight: 700,
@@ -850,10 +889,17 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 						bgcolor: "#f3f3f3",
 						borderTop: "2px solid #ddd"
 					} },
-					children: columns.map((column) => isDimension(column) ? /* @__PURE__ */ jsx(TableCell, { children: column === totalLabelColumn ? "Total" : "" }, column) : /* @__PURE__ */ jsx(TableCell, {
-						align: "right",
-						sx: { whiteSpace: "nowrap" },
-						children: column.startsWith(PERCENT) ? formatPercent(sums[column.slice(2)] ? 1 : null) : formats[column]?.(totalRow[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))
 				})] })]
 			})