@bluemarble/bi 0.6.6 → 0.7.0

package/dist/{DashboardDevtools-I00Iz0Z8.js → DashboardDevtools-D0pzwSgn.js}

@@ -1,7 +1,7 @@
 import { c as VALUE_FORMATS, f as validateModel, g as parseColumnRef, h as modelEdges, m as measureHome, o as AGGREGATIONS, s as AGGREGATION_LABEL, t as canonicalJson, u as isAggregate, v as referencedTables } from "./codegen-LoQzFAle.js";
 import { n as diffRows } from "./compare-DloZhg1T.js";
-import { C as RULE_OPERATORS, E as VALUE_RULE_OPERATORS, S as NUMERIC_OPERATORS, T as UNARY_OPERATORS, a as FILTER_FIELDS, b as COLUMN_ALIGNS, c as chartColumns, f as filterReferences, g as percentColumn, h as layoutModelWarnings, i as CARD_FIELDS, l as chartOfType, n as CANVAS_PRESETS, o as cardsGap, r as CARDS_FIELDS, t as BUILTIN_CHART_TYPES, u as chartReferences, v as tableColumns, w as RULE_OPERATOR_LABEL, x as COLUMN_VERTICAL_ALIGNS, y as validateLayout } from "./layout-CrZ00tB0.js";
-import { C as parseLayoutItemKey, S as layoutItemKey, b as errorMessage, f as SERIES_COLORS, n as INSPECT_ATTRIBUTE, o as formatMeasure, t as ModelDictionary, x as LAYOUT_ITEM_ATTRIBUTE, y as useDashboard } from "./ModelDictionary-DUGFHBo-.js";
+import { C as DEFAULT_SCALE_MIN_COLOR, D as UNARY_OPERATORS, E as RULE_OPERATOR_LABEL, O as VALUE_RULE_OPERATORS, S as COLUMN_VERTICAL_ALIGNS, T as RULE_OPERATORS, a as FILTER_FIELDS, b as COLOR_SCALE_TARGETS, c as chartColumns, f as filterReferences, g as percentColumn, h as layoutModelWarnings, i as CARD_FIELDS, l as chartOfType, n as CANVAS_PRESETS, o as cardsGap, r as CARDS_FIELDS, t as BUILTIN_CHART_TYPES, u as chartReferences, v as tableColumns, w as NUMERIC_OPERATORS, x as COLUMN_ALIGNS, y as validateLayout } from "./layout-BS3nO6OT.js";
+import { C as parseLayoutItemKey, S as layoutItemKey, b as errorMessage, f as SERIES_COLORS, n as INSPECT_ATTRIBUTE, o as formatMeasure, t as ModelDictionary, x as LAYOUT_ITEM_ATTRIBUTE, y as useDashboard } from "./ModelDictionary-Cw4sa8tW.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, Switch, 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";
@@ -2182,6 +2182,11 @@ function FieldsForm({ fields, values, onSet: set, onSetMany, model, formatters,
 				model,
 				onChange: (rules) => set(key, rules.length ? rules : void 0)
 			});
+			case "colorScales": return /* @__PURE__ */ jsx(ColorScalesInput, {
+				scales: value ?? [],
+				columnOptions: columnOptionsOf(columns.filter((name) => model.dimensions[name]?.type !== "string")),
+				onChange: (scales) => set(key, scales.length ? scales : void 0)
+			});
 			case "formatters": {
 				const map = value ?? {};
 				if (!chosenDimensions.length) return /* @__PURE__ */ jsx(Typography, {
@@ -2254,7 +2259,7 @@ function FieldsForm({ fields, values, onSet: set, onSetMany, model, formatters,
 		...pairedFormatters
 	].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" || spec.kind === "formatRules" || spec.kind === "colors" || spec.kind === "valueRule";
+	const fullRow = (spec) => spec.kind === "dimensions" || spec.kind === "measures" || spec.kind === "formatters" || spec.kind === "formatRules" || spec.kind === "colorScales" || spec.kind === "colors" || spec.kind === "valueRule";
 	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);
@@ -2590,6 +2595,202 @@ function FormatRulesInput({ rules, fieldOptions, columnOptions, model, onChange
 		})]
 	});
 }
+const COLOR_SCALE_TARGET_LABEL = {
+	background: "o fundo",
+	text: "o texto"
+};
+const DEFAULT_SCALE_COLOR = "#2e7d32";
+/**
+* Escalas de cor (gradiente), uma por cartão: "pinta <o fundo | o texto> de <coluna> de <cor
+* mínima> (em <mínimo>) a <cor máxima> (em <máximo>)". Mínimo/máximo vazios = da própria coluna.
+*/
+function ColorScalesInput({ scales, columnOptions, onChange }) {
+	const update = (index, change) => onChange(scales.map((scale, i) => i === index ? change(scale) : scale));
+	const columns = columnOptions.map((option) => option.name);
+	const parseNumber = (text) => {
+		const number = Number(text.trim().replace(",", "."));
+		return text.trim() && Number.isFinite(number) ? number : void 0;
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: .75,
+			maxWidth: 760
+		},
+		children: [scales.map((scale, index) => {
+			const minColor = scale.minColor ?? "#ffffff";
+			const inverted = scale.min !== void 0 && scale.max !== void 0 && scale.min >= scale.max;
+			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, ". Pinta"]
+							}),
+							/* @__PURE__ */ jsx(TextField, {
+								select: true,
+								size: "small",
+								value: scale.target ?? "background",
+								onChange: (e) => update(index, (current) => withField(current, "target", e.target.value === "background" ? void 0 : e.target.value)),
+								sx: {
+									...inputSx$1,
+									flex: "1 1 100px"
+								},
+								children: COLOR_SCALE_TARGETS.map((target) => /* @__PURE__ */ jsx(MenuItem, {
+									value: target,
+									children: COLOR_SCALE_TARGET_LABEL[target]
+								}, target))
+							}),
+							/* @__PURE__ */ jsx(Typography, {
+								sx: {
+									fontSize: 12,
+									color: "text.secondary"
+								},
+								children: "de"
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								sx: { flex: "2 1 140px" },
+								children: /* @__PURE__ */ jsx(NameSelect, {
+									value: scale.column,
+									options: columnOptions,
+									required: true,
+									onChange: (column) => update(index, (current) => ({
+										...current,
+										column
+									}))
+								})
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								title: "Prévia do gradiente",
+								sx: {
+									flex: "1 1 80px",
+									height: 20,
+									border: 1,
+									borderColor: "divider",
+									borderRadius: .5,
+									background: `linear-gradient(to right, ${minColor}, ${scale.color})`
+								}
+							}),
+							/* @__PURE__ */ jsxs(Box, {
+								className: "row-actions",
+								sx: {
+									display: "flex",
+									visibility: "hidden"
+								},
+								children: [
+									/* @__PURE__ */ jsx(SmallButton, {
+										title: "Subir",
+										disabled: index === 0,
+										onClick: () => onChange(moveTo(scales, index, index - 1)),
+										children: "↑"
+									}),
+									/* @__PURE__ */ jsx(SmallButton, {
+										title: "Descer",
+										disabled: index === scales.length - 1,
+										onClick: () => onChange(moveTo(scales, index, index + 2)),
+										children: "↓"
+									}),
+									/* @__PURE__ */ jsx(SmallButton, {
+										title: "Remover",
+										onClick: () => onChange(scales.filter((_, i) => i !== index)),
+										children: "×"
+									})
+								]
+							})
+						]
+					}),
+					scale.column && !columns.includes(scale.column) && /* @__PURE__ */ jsxs(Typography, {
+						sx: {
+							fontSize: 11,
+							color: "warning.main"
+						},
+						children: [
+							"\"",
+							scale.column,
+							"\" não é coluna numérica do gráfico: nada é pintado"
+						]
+					}),
+					/* @__PURE__ */ jsxs(Box, {
+						sx: {
+							display: "grid",
+							gap: .5,
+							gridTemplateColumns: "repeat(auto-fit, minmax(130px, 1fr))",
+							alignItems: "end"
+						},
+						children: [
+							field("Cor mínima", /* @__PURE__ */ jsx(ColorInput, {
+								value: scale.minColor,
+								fallback: DEFAULT_SCALE_MIN_COLOR,
+								onCommit: (color) => update(index, (current) => withField(current, "minColor", color === "#ffffff" ? void 0 : color))
+							})),
+							field("Mínimo", /* @__PURE__ */ jsx(CommitText, {
+								value: scale.min === void 0 ? "" : String(scale.min),
+								placeholder: "menor da coluna",
+								error: inverted,
+								onCommit: (text) => update(index, (current) => withField(current, "min", parseNumber(text)))
+							})),
+							field("Cor máxima", /* @__PURE__ */ jsx(ColorInput, {
+								value: scale.color,
+								fallback: DEFAULT_SCALE_COLOR,
+								onCommit: (color) => update(index, (current) => ({
+									...current,
+									color: color ?? DEFAULT_SCALE_COLOR
+								}))
+							})),
+							field("Máximo", /* @__PURE__ */ jsx(CommitText, {
+								value: scale.max === void 0 ? "" : String(scale.max),
+								placeholder: "maior da coluna",
+								error: inverted,
+								onCommit: (text) => update(index, (current) => withField(current, "max", parseNumber(text)))
+							}))
+						]
+					}),
+					inverted && /* @__PURE__ */ jsx(Typography, {
+						sx: {
+							fontSize: 11,
+							color: "error.main"
+						},
+						children: "O mínimo precisa ser menor que o máximo"
+					})
+				]
+			}, index);
+		}), /* @__PURE__ */ jsx(Button, {
+			size: "small",
+			variant: "outlined",
+			disabled: !columnOptions.length,
+			onClick: () => onChange([...scales, {
+				column: columns.find((name) => !scales.some((scale) => scale.column === name)) ?? columns[0] ?? "",
+				color: DEFAULT_SCALE_COLOR
+			}]),
+			sx: {
+				alignSelf: "flex-start",
+				textTransform: "none"
+			},
+			children: "+ escala"
+		})]
+	});
+}
 /** 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);
@@ -8381,4 +8582,4 @@ function ToggleButton$1({ draft, loading, problems, inspecting, onOpen }) {
 //#endregion
 export { DashboardDevtools as default };
 
-//# sourceMappingURL=DashboardDevtools-I00Iz0Z8.js.map
+//# sourceMappingURL=DashboardDevtools-D0pzwSgn.js.map