@bluemarble/bi 0.5.0 → 0.6.0

package/dist/{DashboardDevtools-6v5HDe-A.js → DashboardDevtools-SCewfQGR.js}

@@ -1,6 +1,7 @@
-import { A as measureHome, C as AGGREGATION_LABEL, E as isAggregate, M as parseColumnRef, O as validateModel, P as referencedTables, S as AGGREGATIONS, _ as validateLayout, a as FILTER_FIELDS, c as chartOfType, d as filterReferences, h as orderedColumns, i as CARD_FIELDS, j as modelEdges, l as chartReferences, m as layoutModelWarnings, n as CANVAS_PRESETS, p as layoutFileContent, r as CARDS_FIELDS, s as chartColumns, t as BUILTIN_CHART_TYPES, v as canonicalJson, w as VALUE_FORMATS, x as toModelCode } from "./layout-QuOYFmp1.js";
+import { _ as referencedTables, a as AGGREGATIONS, d as validateModel, h as parseColumnRef, i as toModelCode, l as isAggregate, m as modelEdges, o as AGGREGATION_LABEL, p as measureHome, s as VALUE_FORMATS, t as canonicalJson } from "./codegen-DBe4-XW_.js";
 import { n as diffRows } from "./compare-DloZhg1T.js";
-import { d as useDashboard, f as errorMessage, h as parseLayoutItemKey, m as layoutItemKey, n as INSPECT_ATTRIBUTE, o as formatMeasure, p as LAYOUT_ITEM_ATTRIBUTE, t as ModelDictionary } from "./ModelDictionary-D3JzCd6x.js";
+import { C as RULE_OPERATOR_LABEL, S as RULE_OPERATORS, _ as tableColumns, a as FILTER_FIELDS, b as COLUMN_VERTICAL_ALIGNS, c as chartOfType, d as filterReferences, h as percentColumn, i as CARD_FIELDS, l as chartReferences, m as layoutModelWarnings, n as CANVAS_PRESETS, p as layoutFileContent, r as CARDS_FIELDS, s as chartColumns, t as BUILTIN_CHART_TYPES, v as validateLayout, w as UNARY_OPERATORS, x as NUMERIC_OPERATORS, y as COLUMN_ALIGNS } from "./layout-BS51SQcJ.js";
+import { d as useDashboard, f as errorMessage, h as parseLayoutItemKey, m as layoutItemKey, n as INSPECT_ATTRIBUTE, o as formatMeasure, p as LAYOUT_ITEM_ATTRIBUTE, t as ModelDictionary } from "./ModelDictionary-C2tzlOY8.js";
 import { Alert, Autocomplete, Box, Button, Checkbox, Chip, CircularProgress, Collapse, Dialog, DialogActions, DialogContent, DialogTitle, Divider, FormControlLabel, IconButton, List, ListItemButton, ListSubheader, Menu, MenuItem, MenuList, Paper, Popover, Popper, Portal, Tab, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, Tabs, TextField, ThemeProvider, ToggleButton, ToggleButtonGroup, Tooltip, Typography, createTheme } from "@mui/material";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -1761,23 +1762,84 @@ function FieldsForm({ fields, values, onSet: set, onSetMany, model, formatters,
 		label: measure.label
 	}));
 	const entries = Object.entries(fields);
+	const columnLabel = (name) => name.startsWith("%:") ? `% ${fieldLabelOf(model, name.slice(2))}` : fieldLabelOf(model, name);
+	const columnOptionsOf = (names) => names.map((name) => ({
+		name,
+		label: columnLabel(name)
+	}));
+	const fieldOptions = [
+		...columnOptionsOf(columns).map((option) => ({
+			...option,
+			group: "Colunas do gráfico"
+		})),
+		...dimensions.filter((option) => !columns.includes(option.name)).map((option) => ({
+			...option,
+			group: "Dimensões fora do gráfico"
+		})),
+		...measures.filter((option) => !columns.includes(option.name)).map((option) => ({
+			...option,
+			group: "Medidas fora do gráfico"
+		}))
+	];
 	const keyOf = (kind) => entries.find(([, spec]) => spec.kind === kind)?.[0];
 	const labelsKey = keyOf("labels");
 	const formatsKey = keyOf("formats");
-	const columnOptions = !!(labelsKey || formatsKey);
+	const alignsKey = keyOf("aligns");
+	const verticalKey = keyOf("verticalAligns");
+	const columnOptions = !!(labelsKey || formatsKey || alignsKey || verticalKey);
 	const formattersKey = columnOptions ? keyOf("formatters") : void 0;
 	const single = (kind) => entries.filter(([, spec]) => spec.kind === kind);
 	const formatterKey = columnOptions && single("dimension").length === 1 && single("formatter").length === 1 ? single("formatter")[0]?.[0] : void 0;
 	const labels = labelsKey && values[labelsKey] || {};
 	const formats = formatsKey && values[formatsKey] || {};
+	const aligns = alignsKey && values[alignsKey] || {};
+	const verticals = verticalKey && values[verticalKey] || {};
+	const alignProps = (column, defaultAlign) => ({
+		align: alignsKey ? aligns[column] ?? "" : void 0,
+		defaultAlign,
+		onAlign: (next) => alignsKey && set(alignsKey, pruned(withField(aligns, column, next), columns)),
+		verticalAlign: verticalKey ? verticals[column] ?? "" : void 0,
+		onVerticalAlign: (next) => verticalKey && set(verticalKey, pruned(withField(verticals, column, next), columns))
+	});
+	const resetAligns = (column, changes) => {
+		if (alignsKey) changes[alignsKey] = pruned(withField(aligns, column, void 0), columns);
+		if (verticalKey) changes[verticalKey] = pruned(withField(verticals, column, void 0), columns);
+	};
+	const setChanges = (changes) => {
+		if (onSetMany) onSetMany(changes);
+		else for (const [key, value] of Object.entries(changes)) set(key, value);
+	};
 	const dimensionFormatters = formattersKey && values[formattersKey] || {};
 	const optionsButton = (kind, name) => {
 		if (!columnOptions || !name) return null;
+		if (kind === "percent") {
+			if (!alignsKey && !verticalKey) return null;
+			const column = percentColumn(name);
+			return /* @__PURE__ */ jsx(ColumnOptions, {
+				kind,
+				name,
+				model,
+				label: void 0,
+				onLabel: () => {},
+				format: void 0,
+				onFormat: () => {},
+				formatter: void 0,
+				formatters,
+				onFormatter: () => {},
+				...alignProps(column, "right"),
+				onReset: () => {
+					const changes = {};
+					resetAligns(column, changes);
+					setChanges(changes);
+				}
+			});
+		}
 		const canFormatter = kind === "dimension" && !!(formattersKey || formatterKey);
 		return /* @__PURE__ */ jsx(ColumnOptions, {
 			kind,
 			name,
 			model,
+			...alignProps(name, kind === "dimension" ? "left" : "right"),
 			label: labelsKey ? labels[name] ?? "" : void 0,
 			onLabel: (text) => labelsKey && set(labelsKey, pruned(withField(labels, name, text), columns)),
 			format: kind === "measure" && formatsKey ? formats[name] ?? {} : void 0,
@@ -1797,6 +1859,7 @@ function FieldsForm({ fields, values, onSet: set, onSetMany, model, formatters,
 			onReset: () => {
 				const changes = {};
 				if (labelsKey) changes[labelsKey] = pruned(withField(labels, name, void 0), columns);
+				resetAligns(name, changes);
 				if (formatsKey && kind === "measure") changes[formatsKey] = pruned(withField(formats, name, void 0), chosenMeasures);
 				if (canFormatter && formattersKey) changes[formattersKey] = pruned(withField(dimensionFormatters, name, void 0), chosenDimensions);
 				else if (canFormatter && formatterKey) changes[formatterKey] = void 0;
@@ -1808,14 +1871,17 @@ function FieldsForm({ fields, values, onSet: set, onSetMany, model, formatters,
 	const merged = (() => {
 		for (const [dimensionsKey, spec] of entries) {
 			if (spec.kind !== "dimensions") continue;
-			const pair = entries.find(([, other]) => other.kind === "measures" && other.section === spec.section);
+			const pair = entries.find(([, other]) => other.kind === "measures" && !other.percent && other.section === spec.section);
 			if (!pair) continue;
 			const order = entries.find(([, other]) => other.kind === "columnOrder")?.[0];
+			const percents = order ? entries.find(([, other]) => other.kind === "measures" && other.percent && other.section === spec.section) : void 0;
 			return {
 				dimensions: dimensionsKey,
 				dimensionsSpec: spec,
 				measures: pair[0],
 				measuresSpec: pair[1],
+				percents: percents?.[0],
+				percentsSpec: percents?.[1],
 				order
 			};
 		}
@@ -1823,18 +1889,26 @@ function FieldsForm({ fields, values, onSet: set, onSetMany, model, formatters,
 	const mergedInput = (pair) => {
 		const dimensionNames = values[pair.dimensions] ?? [];
 		const measureNames = values[pair.measures] ?? [];
-		const all = [...dimensionNames.map((name) => ({
-			kind: "dimension",
-			name
-		})), ...measureNames.map((name) => ({
-			kind: "measure",
-			name
-		}))];
+		const percentNames = pair.percents ? values[pair.percents] ?? [] : [];
+		const all = [
+			...dimensionNames.map((name) => ({
+				kind: "dimension",
+				name
+			})),
+			...measureNames.map((name) => ({
+				kind: "measure",
+				name
+			})),
+			...percentNames.map((name) => ({
+				kind: "percent",
+				name
+			}))
+		];
 		const order = pair.order ? values[pair.order] : void 0;
-		const sortedNames = orderedColumns(all.map((item) => item.name), order);
+		const sortedColumns = tableColumns([...dimensionNames, ...measureNames], percentNames, order);
 		const pool = [...all];
-		const items = sortedNames.map((name) => {
-			const index = pool.findIndex((item) => item.name === name);
+		const items = sortedColumns.map((column) => {
+			const index = pool.findIndex((item) => itemColumn(item) === column);
 			return pool.splice(index, 1)[0];
 		});
 		const required = !!pair.dimensionsSpec.required || !!pair.measuresSpec.required;
@@ -1842,19 +1916,22 @@ function FieldsForm({ fields, values, onSet: set, onSetMany, model, formatters,
 			items,
 			options: {
 				dimension: options(pair.dimensionsSpec),
-				measure: options(pair.measuresSpec)
+				measure: options(pair.measuresSpec),
+				...pair.percentsSpec && { percent: options(pair.percentsSpec) }
 			},
 			extra: (item) => optionsButton(item.kind, item.name),
 			error: !!pair.measuresSpec.required && !measureNames.length || !!pair.dimensionsSpec.required && !dimensionNames.length || required && !items.length,
 			onChange: (next) => {
 				const dimensionList = next.filter((item) => item.kind === "dimension");
 				const measureList = next.filter((item) => item.kind === "measure");
-				const names = next.map((item) => item.name);
-				const standard = [...dimensionList, ...measureList].map((item) => item.name);
+				const percentList = next.filter((item) => item.kind === "percent").map((i) => i.name);
+				const names = next.map(itemColumn);
+				const standard = tableColumns([...dimensionList, ...measureList].map((item) => item.name), percentList);
 				const changes = {
 					[pair.dimensions]: dimensionList.length || pair.dimensionsSpec.required ? dimensionList.map((item) => item.name) : void 0,
 					[pair.measures]: measureList.length || pair.measuresSpec.required ? measureList.map((item) => item.name) : void 0
 				};
+				if (pair.percents) changes[pair.percents] = percentList.length ? percentList : void 0;
 				if (pair.order) changes[pair.order] = names.join("\0") === standard.join("\0") ? void 0 : names;
 				if (onSetMany) onSetMany(changes);
 				else for (const [key, value] of Object.entries(changes)) set(key, value);
@@ -1868,10 +1945,7 @@ function FieldsForm({ fields, values, onSet: set, onSetMany, model, formatters,
 			case "measure":
 			case "measures": return measures;
 			case "formatter": return formatters.map((name) => ({ name }));
-			case "column": return columns.map((name) => ({
-				name,
-				label: model.dimensions[name]?.label ?? model.measures[name]?.label
-			}));
+			case "column": return spec.outside ? fieldOptions : columnOptionsOf(columns);
 			case "enum": return spec.values.map((name) => ({
 				name,
 				label: spec.labels?.[name]
@@ -1958,6 +2032,13 @@ function FieldsForm({ fields, values, onSet: set, onSetMany, model, formatters,
 					}
 				});
 			}
+			case "formatRules": return /* @__PURE__ */ jsx(FormatRulesInput, {
+				rules: value ?? [],
+				fieldOptions,
+				columnOptions: columnOptionsOf(columns),
+				model,
+				onChange: (rules) => set(key, rules.length ? rules : void 0)
+			});
 			case "formatters": {
 				const map = value ?? {};
 				if (!chosenDimensions.length) return /* @__PURE__ */ jsx(Typography, {
@@ -2019,14 +2100,17 @@ function FieldsForm({ fields, values, onSet: set, onSetMany, model, formatters,
 	};
 	const hidden = new Set([
 		merged?.measures,
+		merged?.percents,
 		...entries.filter(([, spec]) => spec.kind === "columnOrder").map(([key]) => key),
 		labelsKey,
 		formatsKey,
+		alignsKey,
+		verticalKey,
 		formattersKey,
 		formatterKey
 	].filter(Boolean));
 	const sections = [...new Set(entries.filter(([key]) => !hidden.has(key)).map(([, spec]) => spec.section))];
-	const fullRow = (spec) => spec.kind === "dimensions" || spec.kind === "measures" || spec.kind === "formatters";
+	const fullRow = (spec) => spec.kind === "dimensions" || spec.kind === "measures" || spec.kind === "formatters" || spec.kind === "formatRules";
 	const gridColumn = (spec, key) => fullRow(spec) ? "1 / -1" : key === "title" && formColumns > 1 ? "span 2" : void 0;
 	return /* @__PURE__ */ jsx(Fragment, { children: sections.map((section) => {
 		const inSection = entries.filter(([, spec]) => spec.section === section);
@@ -2040,12 +2124,351 @@ function FieldsForm({ fields, values, onSet: set, onSetMany, model, formatters,
 						gridColumn: gridColumn(spec, key),
 						alignSelf: spec.kind === "boolean" ? "end" : void 0
 					},
-					children: spec.kind === "boolean" ? withHint(input(key, spec), spec.hint) : merged?.dimensions === key ? field("Dimensões e medidas", input(key, spec), `${merged.order ? "Em qualquer ordem: é a ordem das colunas. " : ""}${[spec.hint, merged.measuresSpec.hint].filter(Boolean).join(" · ")}`) : field(spec.label, input(key, spec), spec.hint)
+					children: spec.kind === "boolean" ? withHint(input(key, spec), spec.hint) : merged?.dimensions === key ? field(merged.percents ? "Dimensões, medidas e %" : "Dimensões e medidas", input(key, spec), `${merged.order ? "Em qualquer ordem: é a ordem das colunas. " : ""}${[
+						spec.hint,
+						merged.measuresSpec.hint,
+						merged.percentsSpec?.hint && `% do total: ${merged.percentsSpec.hint}`
+					].filter(Boolean).join(" · ")}`) : field(spec.label, input(key, spec), spec.hint)
 				}, key))]
 			})
 		}, section);
 	}) });
 }
+const fieldLabelOf = (model, name) => model.dimensions[name]?.label ?? model.measures[name]?.label ?? name;
+/** Exemplo de célula com o estilo de uma regra. */
+const RULE_SAMPLE = "Exemplo";
+const DEFAULT_RULE_BACKGROUND = "#ffe3e3";
+/**
+* Regras de formatação condicional, uma por cartão: "se <campo> <operador> <valor>, pinta <a célula
+* de uma coluna | a linha toda> com <texto, fundo, negrito>". A ordem importa (a de baixo ganha):
+* reordena com ↑/↓.
+*/
+function FormatRulesInput({ rules, fieldOptions, columnOptions, model, onChange }) {
+	const update = (index, change) => onChange(rules.map((rule, i) => i === index ? change(rule) : rule));
+	const columns = columnOptions.map((option) => option.name);
+	const parseValue = (rule, text) => {
+		const trimmed = text.trim();
+		if (!trimmed) return void 0;
+		const number = Number(trimmed.replace(",", "."));
+		if (NUMERIC_OPERATORS.includes(rule.operator)) return Number.isFinite(number) ? number : void 0;
+		if (rule.operator === "contains") return trimmed;
+		return !(model.dimensions[rule.field]?.type === "string") && Number.isFinite(number) ? number : trimmed;
+	};
+	const withOperator = (rule, operator) => {
+		const { value, to, ...rest } = rule;
+		if (UNARY_OPERATORS.includes(operator)) return {
+			...rest,
+			operator
+		};
+		const numeric = NUMERIC_OPERATORS.includes(operator);
+		const next = {
+			...rest,
+			operator,
+			value: numeric ? Number.isFinite(Number(value)) ? Number(value) : 0 : value ?? ""
+		};
+		if (operator === "between") next.to = to ?? next.value;
+		return next;
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: .75,
+			maxWidth: 760
+		},
+		children: [rules.map((rule, index) => {
+			const painted = rule.target === "row" ? void 0 : rule.column ?? rule.field;
+			const lost = painted !== void 0 && !columns.includes(painted);
+			return /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					border: 1,
+					borderColor: "divider",
+					borderRadius: 1,
+					p: .75,
+					display: "flex",
+					flexDirection: "column",
+					gap: .5,
+					"&:hover .row-actions": { visibility: "visible" }
+				},
+				children: [
+					/* @__PURE__ */ jsxs(Box, {
+						sx: {
+							display: "flex",
+							gap: .5,
+							alignItems: "center",
+							flexWrap: "wrap"
+						},
+						children: [
+							/* @__PURE__ */ jsxs(Typography, {
+								sx: {
+									fontSize: 12,
+									color: "text.secondary"
+								},
+								children: [index + 1, ". Se"]
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								sx: { flex: "2 1 140px" },
+								children: /* @__PURE__ */ jsx(NameSelect, {
+									value: rule.field,
+									options: fieldOptions,
+									required: true,
+									onChange: (field) => update(index, (current) => ({
+										...current,
+										field
+									}))
+								})
+							}),
+							/* @__PURE__ */ jsx(TextField, {
+								select: true,
+								size: "small",
+								value: rule.operator,
+								onChange: (e) => update(index, (current) => withOperator(current, e.target.value)),
+								sx: {
+									...inputSx$1,
+									flex: "1 1 110px"
+								},
+								children: RULE_OPERATORS.map((operator) => /* @__PURE__ */ jsx(MenuItem, {
+									value: operator,
+									children: RULE_OPERATOR_LABEL[operator]
+								}, operator))
+							}),
+							!UNARY_OPERATORS.includes(rule.operator) && /* @__PURE__ */ jsx(Box, {
+								sx: { flex: "1 1 80px" },
+								children: /* @__PURE__ */ jsx(CommitText, {
+									value: rule.value === void 0 ? "" : String(rule.value),
+									placeholder: "valor",
+									error: rule.value === void 0,
+									onCommit: (text) => update(index, (current) => ({
+										...current,
+										value: parseValue(current, text)
+									}))
+								})
+							}),
+							rule.operator === "between" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Typography, {
+								sx: {
+									fontSize: 12,
+									color: "text.secondary"
+								},
+								children: "e"
+							}), /* @__PURE__ */ jsx(Box, {
+								sx: { flex: "1 1 80px" },
+								children: /* @__PURE__ */ jsx(CommitText, {
+									value: rule.to === void 0 ? "" : String(rule.to),
+									placeholder: "até",
+									error: rule.to === void 0,
+									onCommit: (text) => update(index, (current) => {
+										const to = parseValue(current, text);
+										return {
+											...current,
+											to: typeof to === "number" ? to : void 0
+										};
+									})
+								})
+							})] }),
+							/* @__PURE__ */ jsxs(Box, {
+								className: "row-actions",
+								sx: {
+									display: "flex",
+									visibility: "hidden"
+								},
+								children: [
+									/* @__PURE__ */ jsx(SmallButton, {
+										title: "Subir",
+										disabled: index === 0,
+										onClick: () => onChange(moveTo(rules, index, index - 1)),
+										children: "↑"
+									}),
+									/* @__PURE__ */ jsx(SmallButton, {
+										title: "Descer",
+										disabled: index === rules.length - 1,
+										onClick: () => onChange(moveTo(rules, index, index + 2)),
+										children: "↓"
+									}),
+									/* @__PURE__ */ jsx(SmallButton, {
+										title: "Remover",
+										onClick: () => onChange(rules.filter((_, i) => i !== index)),
+										children: "×"
+									})
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs(Box, {
+						sx: {
+							display: "flex",
+							gap: .5,
+							alignItems: "center",
+							flexWrap: "wrap"
+						},
+						children: [
+							/* @__PURE__ */ jsx(Typography, {
+								sx: {
+									fontSize: 12,
+									color: "text.secondary"
+								},
+								children: "pinta"
+							}),
+							/* @__PURE__ */ jsxs(TextField, {
+								select: true,
+								size: "small",
+								value: rule.target === "row" ? "row" : "cell",
+								onChange: (e) => update(index, ({ target: _target, column: _column, ...rest }) => e.target.value === "row" ? {
+									...rest,
+									target: "row"
+								} : rest),
+								sx: {
+									...inputSx$1,
+									flex: "1 1 110px"
+								},
+								children: [/* @__PURE__ */ jsx(MenuItem, {
+									value: "cell",
+									children: "a célula de"
+								}), /* @__PURE__ */ jsx(MenuItem, {
+									value: "row",
+									children: "a linha toda"
+								})]
+							}),
+							rule.target !== "row" && /* @__PURE__ */ jsx(Box, {
+								sx: { flex: "2 1 140px" },
+								children: /* @__PURE__ */ jsx(NameSelect, {
+									value: rule.column ?? "",
+									options: columnOptions,
+									emptyLabel: `o próprio campo${columns.includes(rule.field) ? "" : " (fora do gráfico)"}`,
+									onChange: (column) => update(index, (current) => withField(current, "column", column || void 0))
+								})
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								sx: {
+									px: 1,
+									py: .25,
+									fontSize: 12,
+									border: 1,
+									borderColor: "divider",
+									color: rule.color,
+									bgcolor: rule.background,
+									fontWeight: rule.bold ? 700 : void 0
+								},
+								children: RULE_SAMPLE
+							})
+						]
+					}),
+					lost && /* @__PURE__ */ jsxs(Typography, {
+						sx: {
+							fontSize: 11,
+							color: "warning.main"
+						},
+						children: [
+							"\"",
+							painted,
+							"\" não é coluna do gráfico: escolha a coluna a pintar ou a linha toda"
+						]
+					}),
+					/* @__PURE__ */ jsxs(Box, {
+						sx: {
+							display: "grid",
+							gap: .5,
+							gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+							alignItems: "end"
+						},
+						children: [
+							field("Cor do texto", /* @__PURE__ */ jsx(ColorInput, {
+								value: rule.color,
+								fallback: "#000000",
+								onCommit: (color) => update(index, (current) => withField(current, "color", color))
+							})),
+							field("Fundo", /* @__PURE__ */ jsx(ColorInput, {
+								value: rule.background,
+								fallback: "#ffffff",
+								onCommit: (color) => update(index, (current) => withField(current, "background", color))
+							})),
+							field("Alinhamento", /* @__PURE__ */ jsxs(TextField, {
+								select: true,
+								size: "small",
+								fullWidth: true,
+								value: rule.align ?? "",
+								onChange: (e) => update(index, (current) => withField(current, "align", e.target.value || void 0)),
+								slotProps: { select: { displayEmpty: true } },
+								sx: inputSx$1,
+								children: [/* @__PURE__ */ jsx(MenuItem, {
+									value: "",
+									children: /* @__PURE__ */ jsx("em", { children: "não muda" })
+								}), COLUMN_ALIGNS.map((option) => /* @__PURE__ */ jsx(MenuItem, {
+									value: option,
+									children: ALIGN_LABEL[option]
+								}, option))]
+							})),
+							field("Vertical", /* @__PURE__ */ jsxs(TextField, {
+								select: true,
+								size: "small",
+								fullWidth: true,
+								value: rule.verticalAlign ?? "",
+								onChange: (e) => update(index, (current) => withField(current, "verticalAlign", e.target.value || void 0)),
+								slotProps: { select: { displayEmpty: true } },
+								sx: inputSx$1,
+								children: [/* @__PURE__ */ jsx(MenuItem, {
+									value: "",
+									children: /* @__PURE__ */ jsx("em", { children: "não muda" })
+								}), COLUMN_VERTICAL_ALIGNS.map((option) => /* @__PURE__ */ jsx(MenuItem, {
+									value: option,
+									children: VERTICAL_ALIGN_LABEL[option]
+								}, option))]
+							})),
+							/* @__PURE__ */ jsx(FormControlLabel, {
+								control: /* @__PURE__ */ jsx(Checkbox, {
+									size: "small",
+									checked: !!rule.bold,
+									onChange: (e) => update(index, (current) => withField(current, "bold", e.target.checked || void 0))
+								}),
+								label: /* @__PURE__ */ jsx(Typography, {
+									sx: { fontSize: 12 },
+									children: "Negrito"
+								})
+							})
+						]
+					})
+				]
+			}, index);
+		}), /* @__PURE__ */ jsx(Button, {
+			size: "small",
+			variant: "outlined",
+			disabled: !fieldOptions.length,
+			onClick: () => onChange([...rules, {
+				field: columns.find((name) => !name.startsWith("%:")) ?? "",
+				operator: ">",
+				value: 0,
+				background: DEFAULT_RULE_BACKGROUND
+			}]),
+			sx: {
+				alignSelf: "flex-start",
+				textTransform: "none"
+			},
+			children: "+ regra"
+		})]
+	});
+}
+/** Campo de texto que só manda o valor no Enter ou ao sair (número parcial não vira valor). */
+function CommitText({ value, placeholder, error, onCommit }) {
+	const [typing, setTyping] = useState(null);
+	const commit = () => {
+		if (typing === null) return;
+		setTyping(null);
+		if (typing !== value) onCommit(typing);
+	};
+	return /* @__PURE__ */ jsx(TextField, {
+		size: "small",
+		fullWidth: true,
+		value: typing ?? value,
+		placeholder,
+		error: error && typing === null,
+		onChange: (e) => setTyping(e.target.value),
+		onBlur: commit,
+		onKeyDown: (e) => {
+			if (e.key === "Enter") commit();
+			if (e.key === "Escape") setTyping(null);
+		},
+		sx: inputSx$1
+	});
+}
 /**
 * Cor com o seletor nativo. Mexer no seletor só muda a amostra: o valor vai para o editor quando
 * ele fecha — o `change` nativo; o `onChange` do React dispara a cada movimento. O texto entra no
@@ -2115,6 +2538,16 @@ function pruned(map, keep) {
 	const next = Object.fromEntries(Object.entries(map).filter(([key]) => keep.includes(key)));
 	return Object.keys(next).length ? next : void 0;
 }
+const ALIGN_LABEL = {
+	left: "à esquerda",
+	center: "centralizado",
+	right: "à direita"
+};
+const VERTICAL_ALIGN_LABEL = {
+	top: "em cima",
+	middle: "no meio",
+	bottom: "embaixo"
+};
 const FORMAT_LABEL = {
 	number: "número",
 	integer: "inteiro",
@@ -2128,11 +2561,11 @@ const SAMPLE = 1234567.891;
 * (dimensão) e formato (medida). Vazio = o do dicionário do modelo (que aparece como placeholder).
 * Opção ausente (`undefined`) = o tipo do gráfico não tem esse campo.
 */
-function ColumnOptions({ kind, name, model, label, onLabel, format, onFormat, formatter, formatters, onFormatter, onReset }) {
+function ColumnOptions({ kind, name, model, label, onLabel, format, onFormat, formatter, formatters, onFormatter, align, defaultAlign, onAlign, verticalAlign, onVerticalAlign, onReset }) {
 	const [anchor, setAnchor] = useState(null);
 	const fromModel = kind === "measure" ? model.measures[name] : model.dimensions[name];
 	const measureMeta = kind === "measure" ? model.measures[name] : void 0;
-	const customized = !!label || !!formatter || format !== void 0 && Object.keys(format).length > 0;
+	const customized = !!label || !!formatter || !!align || !!verticalAlign || format !== void 0 && Object.keys(format).length > 0;
 	const setFormat = (key, next) => onFormat(withField(format ?? {}, key, next));
 	const decimals = format?.decimals;
 	const resolved = {
@@ -2223,6 +2656,46 @@ function ColumnOptions({ kind, name, model, label, onLabel, format, onFormat, fo
 					onChange: (e) => onLabel(e.target.value),
 					sx: inputSx$1
 				}), "Legenda, tooltip e cabeçalho, só neste gráfico; vazio = rótulo do dicionário"),
+				align !== void 0 && field("Alinhamento", /* @__PURE__ */ jsxs(TextField, {
+					select: true,
+					size: "small",
+					fullWidth: true,
+					value: align,
+					onChange: (e) => onAlign(e.target.value || void 0),
+					slotProps: { select: { displayEmpty: true } },
+					sx: small,
+					children: [/* @__PURE__ */ jsx(MenuItem, {
+						value: "",
+						children: /* @__PURE__ */ jsxs("em", { children: [
+							"padrão (",
+							ALIGN_LABEL[defaultAlign],
+							")"
+						] })
+					}), COLUMN_ALIGNS.map((option) => /* @__PURE__ */ jsx(MenuItem, {
+						value: option,
+						children: ALIGN_LABEL[option]
+					}, option))]
+				}), "Horizontal: cabeçalho, células e total da coluna"),
+				verticalAlign !== void 0 && field("Alinhamento vertical", /* @__PURE__ */ jsxs(TextField, {
+					select: true,
+					size: "small",
+					fullWidth: true,
+					value: verticalAlign,
+					onChange: (e) => onVerticalAlign(e.target.value || void 0),
+					slotProps: { select: { displayEmpty: true } },
+					sx: small,
+					children: [/* @__PURE__ */ jsx(MenuItem, {
+						value: "",
+						children: /* @__PURE__ */ jsxs("em", { children: [
+							"padrão (",
+							VERTICAL_ALIGN_LABEL.middle,
+							")"
+						] })
+					}), COLUMN_VERTICAL_ALIGNS.map((option) => /* @__PURE__ */ jsx(MenuItem, {
+						value: option,
+						children: VERTICAL_ALIGN_LABEL[option]
+					}, option))]
+				}), "Aparece quando a linha tem texto em mais de uma linha"),
 				formatter !== void 0 && field("Formatter", /* @__PURE__ */ jsx(NameSelect, {
 					value: formatter,
 					options: formatters.map((option) => ({ name: option })),
@@ -2400,13 +2873,14 @@ function NameSelect({ value, options, required, emptyLabel, onChange }) {
 				value,
 				children: [value, " (não existe)"]
 			}),
-			options.map((option) => /* @__PURE__ */ jsx(MenuItem, {
+			options.flatMap((option, index) => [...option.group && option.group !== options[index - 1]?.group ? [/* @__PURE__ */ jsx(ListSubheader, { children: option.group }, `h:${option.group}`)] : [], /* @__PURE__ */ jsx(MenuItem, {
 				value: option.name,
 				children: /* @__PURE__ */ jsx(OptionText, { option })
-			}, option.name))
+			}, option.name)])
 		]
 	});
 }
+const itemColumn = (item) => item.kind === "percent" ? percentColumn(item.name) : item.name;
 const KIND_STYLE = {
 	dimension: {
 		icon: "◇",
@@ -2419,6 +2893,12 @@ const KIND_STYLE = {
 		color: "#F58220",
 		noun: "medida",
 		group: "Medidas"
+	},
+	percent: {
+		icon: "%",
+		color: "#9775fa",
+		noun: "% do total",
+		group: "% do total (da medida)"
 	}
 };
 /**
@@ -7631,4 +8111,4 @@ function ToggleButton$1({ draft, loading, problems, inspecting, onOpen }) {
 //#endregion
 export { DashboardDevtools as default };
 
-//# sourceMappingURL=DashboardDevtools-6v5HDe-A.js.map
+//# sourceMappingURL=DashboardDevtools-SCewfQGR.js.map