@bluemarble/bi 0.6.2 → 0.6.4

package/dist/client/index.js

@@ -1,5 +1,5 @@
-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-BlDeDyAE.js";
+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 { 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,6 +121,83 @@ function TooltipBox({ title, caption, children }) {
 	});
 }
 //#endregion
+//#region src/client/seriesPivot.ts
+const EMPTY_SERIES_LABEL = "(em branco)";
+const OTHERS$1 = "Outros";
+const keyOf = (value) => value === null ? "\0" : String(value);
+/**
+* Séries a partir do domínio (série × medida sem filtros): ordenadas pelo total, maior primeiro, e
+* a cor segue essa ordem — como o domínio não depende dos filtros, cada valor tem sempre a mesma
+* cor. Além de `max`, as menores viram "Outros" (a última vaga), em cinza.
+*/
+function seriesItems(domain, series, measure, max, format = String) {
+	const ranked = domain.map((row) => ({
+		value: row[series] ?? null,
+		amount: Math.abs(numberOf(row, measure) ?? 0)
+	})).sort((a, b) => b.amount - a.amount);
+	const limit = Math.min(Math.max(max, 2), 8);
+	const kept = ranked.length > limit ? ranked.slice(0, limit - 1) : ranked;
+	const items = kept.map((item, index) => ({
+		dataKey: `s${index}`,
+		value: item.value,
+		label: item.value === null ? EMPTY_SERIES_LABEL : format(item.value),
+		color: seriesColor(index)
+	}));
+	if (ranked.length > kept.length) items.push(othersItem(ranked.length - kept.length));
+	return items;
+}
+const othersItem = (count) => ({
+	dataKey: "outros",
+	value: null,
+	label: count ? `${OTHERS$1} (${count})` : OTHERS$1,
+	color: OTHER_COLOR,
+	others: true
+});
+/**
+* Linhas (categoria, série, medida) → um ponto por categoria, na ordem da consulta, com o valor de
+* cada série em `dataKey`. Valor fora das séries soma em "Outros" (criado se o domínio não tinha).
+* Devolve só as séries com algum valor nos pontos (um filtro pode ter tirado uma delas).
+*/
+function pivotSeries(rows, dimension, series, measure, items, format = String) {
+	const all = [...items];
+	const byValue = new Map(all.filter((item) => !item.others).map((item) => [keyOf(item.value), item]));
+	const points = /* @__PURE__ */ new Map();
+	const used = /* @__PURE__ */ new Set();
+	for (const row of rows) {
+		const value = row[dimension] ?? "";
+		const key = String(value);
+		let point = points.get(key);
+		if (!point) {
+			point = {
+				value,
+				label: format(value)
+			};
+			for (const item of all) point[item.dataKey] = 0;
+			points.set(key, point);
+		}
+		let item = byValue.get(keyOf(row[series] ?? null));
+		if (!item) {
+			item = all.find((other) => other.others);
+			if (!item) {
+				item = othersItem();
+				all.push(item);
+				for (const other of points.values()) other[item.dataKey] = 0;
+			}
+		}
+		const amount = numberOf(row, measure);
+		if (amount) {
+			point[item.dataKey] = Number(point[item.dataKey] ?? 0) + amount;
+			used.add(item.dataKey);
+		}
+	}
+	return {
+		points: [...points.values()],
+		items: all.filter((item) => used.has(item.dataKey))
+	};
+}
+/** 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);
+//#endregion
 //#region src/client/BarChart.tsx
 const MAX_VALUE_LABELS = 30;
 /** Altura de cada categoria no modo horizontal (barras finas, com respiro). */
@@ -128,16 +205,27 @@ 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} />`.
+* Com `series`, uma medida quebrada pelos valores de outra dimensão:
+* `<BarChart dimension="mes" series="tipo_descarga" measures={['volume']} stacked />`.
 */
-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();
+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 }) {
+	const { meta, filters, setFilter } = useDashboard();
+	const measures = series ? measureList.slice(0, 1) : measureList;
 	const { rows, isLoading, error, inspectProps } = useModelQuery({
-		dimensions: [dimension],
+		dimensions: series ? [dimension, series] : [dimension],
 		measures,
-		ignoreFilters: clickToFilter ? [dimension] : void 0,
+		ignoreFilters: clickToFilter ? series ? [dimension, series] : [dimension] : void 0,
 		label: queryLabel ?? `BarChart · ${dimension}`
 	});
+	const domain = useModelQuery({
+		dimensions: series ? [series] : [],
+		measures,
+		ignoreFilters: Object.keys(filters),
+		label: `${queryLabel ?? `BarChart · ${dimension}`} · séries`,
+		skip: !series
+	});
 	const filter = useClickFilter(dimension, clickToFilter);
+	const seriesFilter = useClickFilter(series, clickToFilter);
 	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;
@@ -145,61 +233,128 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 		...axisFormat,
 		decimals: axisFormat?.compact ? 1 : 0
 	}, 0);
+	let data;
+	let bars;
 	const first = measures[0];
-	let data = rows.filter((row) => !hideEmpty || measures.some((measure) => numberOf(row, measure))).map((row) => {
-		const value = row[dimension] ?? "";
-		const point = {
-			value,
-			label: formatDimension(value)
-		};
-		for (const measure of measures) point[measure] = numberOf(row, measure) ?? 0;
-		return point;
-	});
-	if (sort !== "dimension" && first) data = [...data].sort((a, b) => sort === "desc" ? Number(b[first]) - Number(a[first]) : Number(a[first]) - Number(b[first]));
+	if (series && first) {
+		const format = formats[0] ?? String;
+		const pivot = pivotSeries(rows, dimension, series, first, seriesItems(domain.rows, series, first, maxSeries, formatSeries), formatDimension);
+		bars = pivot.items.map((item) => ({
+			...item,
+			item,
+			format
+		}));
+		data = pivot.points;
+	} else {
+		bars = measures.map((measure, index) => ({
+			dataKey: measure,
+			label: labelOf(measure),
+			color: seriesColor(index),
+			format: formats[index] ?? String
+		}));
+		data = rows.map((row) => {
+			const value = row[dimension] ?? "";
+			const point = {
+				value,
+				label: formatDimension(value)
+			};
+			for (const measure of measures) point[measure] = numberOf(row, measure) ?? 0;
+			return point;
+		});
+	}
+	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 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 state = chartPlaceholder({
 		height,
-		error,
-		isLoading,
+		error: error ?? domain.error,
+		isLoading: loading,
 		empty: !data.length
 	});
 	const ChartTooltip = ({ active, payload }) => {
 		if (!active || !payload?.length) return null;
 		const point = payload[0].payload;
-		return /* @__PURE__ */ jsx(TooltipBox, {
+		const shown = series ? bars.filter((bar) => Number(point[bar.dataKey])) : bars;
+		const format = bars[0]?.format ?? String;
+		return /* @__PURE__ */ jsxs(TooltipBox, {
 			title: point.label,
 			caption: labelOf(dimension),
-			children: measures.map((measure, index) => /* @__PURE__ */ jsxs(Box, {
-				sx: {
-					display: "flex",
-					alignItems: "center",
-					gap: .75
-				},
-				children: [
-					/* @__PURE__ */ jsx(Box, { sx: {
-						width: 8,
-						height: 8,
-						borderRadius: "50%",
-						bgcolor: seriesColor(index)
-					} }),
-					labelOf(measure),
-					": ",
-					formats[index]?.(point[measure])
-				]
-			}, measure))
+			children: [
+				series && first && /* @__PURE__ */ jsxs(Box, {
+					sx: {
+						fontSize: 11,
+						color: "#777",
+						mt: .5
+					},
+					children: [
+						labelOf(first),
+						" por ",
+						labelOf(series).toLocaleLowerCase("pt-BR")
+					]
+				}),
+				shown.map((bar) => /* @__PURE__ */ jsxs(Box, {
+					sx: {
+						display: "flex",
+						alignItems: "center",
+						gap: .75
+					},
+					children: [
+						/* @__PURE__ */ jsx(Box, { sx: {
+							width: 8,
+							height: 8,
+							borderRadius: "50%",
+							bgcolor: bar.color
+						} }),
+						bar.label,
+						": ",
+						bar.format(Number(point[bar.dataKey]))
+					]
+				}, bar.dataKey)),
+				series && stacked && shown.length > 1 && /* @__PURE__ */ jsxs(Box, {
+					sx: {
+						fontWeight: 700,
+						mt: .5
+					},
+					children: ["Total: ", format(shown.reduce((total, bar) => total + Number(point[bar.dataKey]), 0))]
+				})
+			]
 		});
 	};
-	const handleClick = (index, event) => {
+	const handleClick = (index, bar, event) => {
 		event.stopPropagation();
 		const point = data[index];
-		if (point) filter.toggle(point.value, event);
+		if (!point) return;
+		const value = bar.item?.value;
+		if (!series || value === null || value === void 0) {
+			filter.toggle(point.value, event);
+			seriesFilter.clear();
+		} else if (event.ctrlKey || event.metaKey) {
+			filter.toggle(point.value, event);
+			seriesFilter.toggle(value, event);
+		} else {
+			const sole = (selected, item) => selected.length === 1 && selected[0] === item;
+			const again = sole(filter.selected, point.value) && sole(seriesFilter.selected, value);
+			setFilter(dimension, again ? [] : [point.value]);
+			setFilter(series, again ? [] : [value]);
+		}
+	};
+	const isDimmed = (point, bar) => {
+		if (filter.isDimmed(point.value)) return true;
+		if (!bar.item || !seriesFilter.selected.length) return false;
+		return bar.item.value === null || seriesFilter.isDimmed(bar.item.value);
+	};
+	const clearFilters = () => {
+		filter.clear();
+		seriesFilter.clear();
 	};
 	const radius = (index) => {
-		if (stacked && index < measures.length - 1) return [
+		if (stacked && index < bars.length - 1) return [
 			0,
 			0,
 			0,
@@ -221,17 +376,17 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 		...inspectProps,
 		sx: { minWidth: 0 },
 		children: [/* @__PURE__ */ jsx(Legend, {
-			items: measures.length > 1 ? measures.map((measure, index) => ({
-				label: labelOf(measure),
-				color: seriesColor(index)
+			items: series || bars.length > 1 ? bars.map(({ label, color }) => ({
+				label,
+				color
 			})) : [],
-			loading: isLoading
+			loading
 		}), state ?? /* @__PURE__ */ jsx(Box, {
-			onClick: filter.clear,
+			onClick: clearFilters,
 			sx: {
 				height,
 				overflowY: horizontal ? "auto" : "hidden",
-				opacity: isLoading ? .5 : 1,
+				opacity: loading ? .5 : 1,
 				transition: "opacity .2s"
 			},
 			children: /* @__PURE__ */ jsx(Box, {
@@ -302,27 +457,27 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 								content: /* @__PURE__ */ jsx(ChartTooltip, {}),
 								cursor: { fill: "rgba(0,0,0,.04)" }
 							}),
-							measures.map((measure, index) => /* @__PURE__ */ jsxs(Bar, {
-								dataKey: measure,
-								name: labelOf(measure),
-								fill: seriesColor(index),
+							bars.map((bar, index) => /* @__PURE__ */ jsxs(Bar, {
+								dataKey: bar.dataKey,
+								name: bar.label,
+								fill: bar.color,
 								stackId: stacked ? "stack" : void 0,
 								radius: radius(index),
 								maxBarSize: horizontal ? 18 : 56,
 								isAnimationActive: false,
-								onClick: clickToFilter ? (_bar, barIndex, event) => handleClick(barIndex, event) : void 0,
+								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: filter.isDimmed(point.value) ? .35 : 1 }, String(point.value))), showLabels && !stacked && /* @__PURE__ */ jsx(LabelList, {
-									dataKey: measure,
+								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) => formats[index]?.(value) ?? "",
+									formatter: (value) => bar.format(value),
 									style: {
 										fontSize: 12,
 										fill: "#333",
 										fontWeight: 600
 									}
 								})]
-							}, measure))
+							}, bar.dataKey))
 						]
 					})
 				})
@@ -1279,11 +1434,12 @@ function Chart({ chart, formatters }) {
 			});
 		}
 		case "bar": {
-			const { id, type, title, span, card, formatDimension, ...props } = chart;
+			const { id, type, title, span, card, formatDimension, formatSeries, ...props } = chart;
 			return /* @__PURE__ */ jsx(BarChart, {
 				...props,
 				queryLabel,
-				formatDimension: formatter(formatDimension)
+				formatDimension: formatter(formatDimension),
+				formatSeries: formatter(formatSeries)
 			});
 		}
 		case "donut": {