@bluemarble/bi 0.5.0 → 0.6.1

package/dist/client/index.d.ts

@@ -1,4 +1,4 @@
-import { C as ChartTypeSpec, T as ChartsLayout, U as ModelDef, W as ModelMeta, a as DashboardResult, b as ChartDef, i as DashboardQueryDebug, l as FilterValue, n as DashboardFilters$1, o as DashboardRow, r as DashboardQuery, v as CardStyle, w as ChartTypes, x as ChartNumberFormat } from "../types-FdrY0FOZ.js";
+import { A as DashboardRow, C as ColumnVerticalAlign, D as DashboardQuery, E as DashboardFilters$1, K as ModelDef, N as FilterValue, O as DashboardQueryDebug, S as ColumnAlign, d as ChartsLayout, i as CardStyle, k as DashboardResult, l as ChartTypeSpec, o as ChartDef, q as ModelMeta, s as ChartNumberFormat, u as ChartTypes, w as FormatRule } from "../layout-B7eYgNyR.js";
 import { ComponentType, MouseEvent, ReactNode } from "react";
 //#region src/client/BarChart.d.ts
 type BarChartProps = {
@@ -370,7 +370,11 @@ type DataTableProps = {
    * linhas.
    */
   showTotal?: boolean;
-  /** Coluna da ordem inicial (dimensão ou medida); quem usa reordena clicando no cabeçalho. */
+  /**
+   * Coluna da ordem inicial (dimensão, medida ou `%:medida`); quem usa reordena clicando no
+   * cabeçalho. Dimensão/medida fora da tabela entra na consulta sem coluna (ex.: número do mês para
+   * ordenar o nome do mês) — uma dimensão de fora divide as linhas se tiver mais de um valor por linha.
+   */
   sortBy?: string;
   sortDirection?: SortDirection;
   /** Clicar numa linha filtra o dashboard pela primeira dimensão. */
@@ -384,10 +388,27 @@ type DataTableProps = {
   /** Casas decimais das colunas de percentual. Padrão: 1. */
   percentDecimals?: number;
   /**
-   * Ordem das colunas misturando dimensões e medidas (ex.: `['custoTotal', 'navio']`); o que não
-   * estiver nela vai depois. Padrão: dimensões e depois medidas.
+   * Ordem das colunas misturando dimensões, medidas e percentuais (ex.: `['custoTotal',
+   * '%:custoTotal', 'navio']`); o que não estiver nela vai depois. Padrão: dimensões e depois
+   * medidas, cada percentual logo depois da medida.
    */
   columnOrder?: string[];
+  /**
+   * Formatação condicional: cor do texto/fundo e negrito da célula ou da linha conforme o valor de
+   * uma dimensão/medida (da tabela, de fora dela ou `%:medida`).
+   */
+  formatRules?: FormatRule[];
+  /** Bordas entre as células (grade). Padrão: só a linha embaixo de cada linha. */
+  cellBorders?: boolean;
+  /** Cor das bordas da grade. Padrão: `#e0e0e0`. */
+  borderColor?: string;
+  /**
+   * Alinhamento horizontal por coluna (`%:medida` para o percentual): cabeçalho, células e total.
+   * Padrão: dimensão à esquerda, número à direita.
+   */
+  align?: Record<string, ColumnAlign>;
+  /** Alinhamento vertical por coluna (`top`, `middle`, `bottom`). Padrão: `middle`. */
+  verticalAlign?: Record<string, ColumnVerticalAlign>;
   /** Nome da consulta no devtools. */
   queryLabel?: string;
 };
@@ -395,7 +416,7 @@ type DataTableProps = {
  * Tabela de medidas por dimensões, com total e ordenação pelo cabeçalho. Ex.:
  * `<DataTable dimensions={['navio']} measures={['volTotal', 'custoTotal', 'custoTon']} />`.
  */
-declare function DataTable({ dimensions, measures, percentOf, formatDimensions, showTotal, sortBy, sortDirection, clickToFilter, height, labels, formats: formatsByMeasure, percentDecimals, columnOrder, queryLabel }: DataTableProps): import("react").JSX.Element;
+declare function DataTable({ dimensions, measures, percentOf, formatDimensions, showTotal, sortBy, sortDirection, clickToFilter, height, labels, formats: formatsByMeasure, percentDecimals, columnOrder, formatRules, cellBorders, borderColor, align, verticalAlign, queryLabel }: DataTableProps): import("react").JSX.Element;
 //#endregion
 //#region src/client/DonutChart.d.ts
 type DonutChartProps = {

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-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-B26oLtPH.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))
 				})] })]
 			})