@bluemarble/bi 0.7.0 → 0.8.1

package/dist/client/index.d.ts

@@ -1,4 +1,4 @@
-import { $ as ModelDef, C as BarValuePosition, E as CardStyle, L as DonutLegendPosition, M as ChartTypes, N as ChartsLayout, O as ChartDef, R as DonutValueContent, a as ValueRule, d as DashboardQueryDebug, et as ModelMeta, f as DashboardResult, g as FilterValue, i as FormatRule, j as ChartTypeSpec, k as ChartNumberFormat, l as DashboardFilters$1, n as ColumnAlign, p as DashboardRow, r as ColumnVerticalAlign, t as ColorScale, u as DashboardQuery } from "../formatRules-DxA9vMvz.js";
+import { A as ChartNumberFormat, D as CardStyle, M as ChartTypeSpec, N as ChartTypes, P as ChartsLayout, R as DonutLegendPosition, a as ValueRule, d as DashboardQueryDebug, et as ModelDef, f as DashboardResult, g as FilterValue, i as FormatRule, k as ChartDef, l as DashboardFilters$1, n as ColumnAlign, p as DashboardRow, r as ColumnVerticalAlign, t as ColorScale, tt as ModelMeta, u as DashboardQuery, w as BarValuePosition, z as DonutValueContent } from "../formatRules-C1PW2EiL.js";
 import { ComponentType, MouseEvent, ReactNode } from "react";
 //#region src/client/BarChart.d.ts
 type BarChartProps = {
@@ -62,6 +62,8 @@ type BarChartProps = {
   labels?: Record<string, string>;
   /** Formato por medida (sobrepõe o dicionário do modelo). */
   formats?: Record<string, ChartNumberFormat>;
+  /** Dimensões cujos filtros o gráfico não respeita (além da própria, com `clickToFilter`). */
+  ignoreFilters?: string[];
   /** Nome da consulta no devtools. */
   queryLabel?: string;
 };
@@ -71,7 +73,7 @@ type BarChartProps = {
  * Com `series`, uma medida quebrada pelos valores de outra dimensão:
  * `<BarChart dimension="mes" series="tipo_descarga" measures={['volume']} stacked />`.
  */
-declare function BarChart({ dimension, measures: measureList, series, formatSeries, maxSeries, orientation, stacked, sort, limit, formatDimension, hideEmpty, showEmpty, showValues, valuePosition, valueColor, valueSize, showTotal, valueRule, hideUnselected, colors, clickToFilter, height, labels, formats: formatsByMeasure, queryLabel }: BarChartProps): import("react").JSX.Element;
+declare function BarChart({ dimension, measures: measureList, series, formatSeries, maxSeries, orientation, stacked, sort, limit, formatDimension, hideEmpty, showEmpty, showValues, valuePosition, valueColor, valueSize, showTotal, valueRule, hideUnselected, colors, clickToFilter, height, labels, formats: formatsByMeasure, ignoreFilters, queryLabel }: BarChartProps): import("react").JSX.Element;
 //#endregion
 //#region src/client/ComboChart.d.ts
 type ComboChartProps = {
@@ -111,6 +113,8 @@ type ComboChartProps = {
    * destaca a seleção, como o filtro cruzado do Power BI.
    */
   clickToFilter?: boolean;
+  /** Dimensões cujos filtros o gráfico não respeita (além da própria, com `clickToFilter`). */
+  ignoreFilters?: string[];
   /** Nome da consulta no devtools (padrão: `ComboChart · <dimensão>`). */
   queryLabel?: string;
 };
@@ -118,7 +122,7 @@ type ComboChartProps = {
  * Barras + linha de uma dimensão, consultando o modelo do `DashboardProvider` (com os filtros dele).
  * Ex.: `<ComboChart dimension="mes" bar="custoTotal" line="custoTon" detail="volTotal" />`.
  */
-declare function ComboChart({ dimension, bar, line, detail, barLabel, lineLabel, detailLabel, formatDimension, formatBar, formatLine, formatDetail, labels, formats, hideEmpty, height, maxLabels, barColor, lineColor, clickToFilter, queryLabel }: ComboChartProps): import("react").JSX.Element;
+declare function ComboChart({ dimension, bar, line, detail, barLabel, lineLabel, detailLabel, formatDimension, formatBar, formatLine, formatDetail, labels, formats, hideEmpty, height, maxLabels, barColor, lineColor, clickToFilter, ignoreFilters, queryLabel }: ComboChartProps): import("react").JSX.Element;
 //#endregion
 //#region src/client/chartKit.d.ts
 /**
@@ -202,7 +206,7 @@ type ChartPanelProps = {
 type DashboardChartsProps = {
   /** Layout importado do JSON (`src/dashboard/layouts/<id>.json`). */
   layout: ChartsLayout;
-  /** Formatters por nome, referenciados no JSON por `formatDimension`. */
+  /** Formatters por nome, referenciados no JSON por `formatDimension` (além dos built-in `to_*`). */
   formatters?: Record<string, (value: FilterValue) => string>;
   /** Moldura de cada gráfico (título + conteúdo). */
   panel?: ComponentType<ChartPanelProps>;
@@ -230,6 +234,16 @@ declare function chartTitleSx(card: CardStyle): Partial<{
   fontSize: string | undefined;
   textAlign: "center" | "left" | "right" | undefined;
 }>;
+/**
+ * `sx` da caixa que envolve o título: o espaço até o conteúdo (`contentGap`) e, com `titleDivider`,
+ * a linha abaixo do título e o espaço até ela (`titleGap`). Um `panel` do app põe isto na caixa do
+ * título para herdar divisor e espaçamentos do card (global `cards` ou por gráfico `card`).
+ */
+declare function chartTitleBoxSx(card: CardStyle): {
+  mb: string | undefined;
+  pb?: string | undefined;
+  borderBottom?: string | undefined;
+};
 /**
  * Renderiza os gráficos de um layout declarativo num grid de 12 colunas (no celular, um por linha;
  * dentro de um `<DashboardCanvas>` de tamanho fixo, sempre as 12). Em desenvolvimento, a aba
@@ -246,7 +260,7 @@ declare function DashboardCharts({ layout, formatters, panel: Panel, gap }: Dash
 type DashboardFiltersProps = {
   /** O mesmo layout do `<DashboardCharts>` (`filters` do JSON). */
   layout: ChartsLayout;
-  /** Formatters por nome, referenciados no JSON por `formatLabel`. */
+  /** Formatters por nome, referenciados no JSON por `formatLabel` (além dos built-in `to_*`). */
   formatters?: Record<string, (value: FilterValue) => string>;
   gap?: number;
 };
@@ -376,6 +390,9 @@ type DashboardContextValue = {
   model: string;
   filters: DashboardFilters$1;
   setFilter: (dimension: string, values: FilterValue[]) => void;
+  /** Medida escolhida de cada parâmetro de medida do layout: `{ [name]: medida }`. */
+  parameters: Record<string, string>;
+  setParameter: (name: string, measure: string) => void;
   fetcher: DashboardFetcher;
   /** Dicionário do modelo (rótulos, descrições, formatos); `null` até carregar. */
   meta: ModelMeta | null;
@@ -474,6 +491,10 @@ type DataTableProps = {
   cellBorders?: boolean;
   /** Cor das bordas da grade. Padrão: `#e0e0e0`. */
   borderColor?: string;
+  /** Padding vertical das células (linhas). Padrão: `8px` (MUI default). */
+  cellPadding?: number | string;
+  /** Tamanho da fonte das células e do cabeçalho (px). Padrão: 13. */
+  fontSize?: number;
   /**
    * Alinhamento horizontal por coluna (`%:medida` para o percentual): cabeçalho, células e total.
    * Padrão: dimensão à esquerda, número à direita.
@@ -481,6 +502,8 @@ type DataTableProps = {
   align?: Record<string, ColumnAlign>;
   /** Alinhamento vertical por coluna (`top`, `middle`, `bottom`). Padrão: `middle`. */
   verticalAlign?: Record<string, ColumnVerticalAlign>;
+  /** Dimensões cujos filtros a tabela não respeita (além da 1ª, com `clickToFilter`). */
+  ignoreFilters?: string[];
   /** Nome da consulta no devtools. */
   queryLabel?: string;
 };
@@ -488,7 +511,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, formatRules, colorScales, cellBorders, borderColor, align, verticalAlign, queryLabel }: DataTableProps): import("react").JSX.Element;
+declare function DataTable({ dimensions, measures, percentOf, formatDimensions, showTotal, sortBy, sortDirection, clickToFilter, height, labels, formats: formatsByMeasure, percentDecimals, columnOrder, formatRules, colorScales, cellBorders, borderColor, align, verticalAlign, cellPadding, fontSize, ignoreFilters: ignoreProp, queryLabel }: DataTableProps): import("react").JSX.Element;
 //#endregion
 //#region src/client/DonutChart.d.ts
 type DonutChartProps = {
@@ -515,6 +538,8 @@ type DonutChartProps = {
   valueContent?: DonutValueContent;
   /** Total no furo da rosca. Padrão: `true`. */
   showTotal?: boolean;
+  /** Dimensões cujos filtros a rosca não respeita (além da própria, com `clickToFilter`). */
+  ignoreFilters?: string[];
   /** Nome da consulta no devtools. */
   queryLabel?: string;
 };
@@ -523,7 +548,7 @@ type DonutChartProps = {
  * ou em cima/embaixo; `showValues` põe o valor de cada fatia do lado de fora.
  * Ex.: `<DonutChart dimension="operacao_status" measure="custoTotal" />`.
  */
-declare function DonutChart({ dimension, measure, maxSlices, formatDimension, clickToFilter, height, labels, formats, percentDecimals, legendPosition, showValues, valueContent, showTotal, queryLabel }: DonutChartProps): import("react").JSX.Element;
+declare function DonutChart({ dimension, measure, maxSlices, formatDimension, clickToFilter, height, labels, formats, percentDecimals, legendPosition, showValues, valueContent, showTotal, ignoreFilters, queryLabel }: DonutChartProps): import("react").JSX.Element;
 //#endregion
 //#region src/client/FilterSelect.d.ts
 type FilterSelectProps = {
@@ -558,6 +583,18 @@ declare function measureFormat(meta: ModelMeta | null, measure: string, formats?
 declare function measureFormatter(meta: ModelMeta | null, measure: string, fallbackDecimals?: number, formats?: Record<string, ChartNumberFormat>): (value: number | string | null | undefined) => string;
 /** Rótulo de uma dimensão/medida: o `labels` do gráfico, o dicionário do modelo ou o nome. */
 declare function fieldLabel(meta: ModelMeta | null, name: string, labels?: Record<string, string>): string;
+/** `3` → "Março"; aceita também uma data ISO (usa o mês dela). Fora de 1–12, o próprio valor. */
+declare function toMonthName(value: FilterValue): string;
+/**
+ * Data ISO → `dd/mm/aaaa`. Só a data (`2026-10-01`) não passa por fuso; com hora (o `Date` do
+ * banco chega como ISO em UTC), vira o horário local e a hora só aparece quando não é meia-noite.
+ */
+declare function toDate(value: FilterValue): string;
+/**
+ * Formatters que todo `<DashboardCharts>`/`<DashboardFilters>` já tem, pelo nome (os do app com o
+ * mesmo nome vão por cima).
+ */
+declare const BUILTIN_FORMATTERS: Record<string, (value: FilterValue) => string>;
 //#endregion
 //#region src/client/KpiCard.d.ts
 type KpiCardProps = {
@@ -573,6 +610,8 @@ type KpiCardProps = {
   labels?: Record<string, string>;
   /** Formato por medida (sobrepõe o dicionário). */
   formats?: Record<string, ChartNumberFormat>;
+  /** Dimensões cujos filtros o KPI não respeita (ex.: um total que ignora um slicer). */
+  ignoreFilters?: string[];
   /** Nome da consulta no devtools. */
   queryLabel?: string;
 };
@@ -581,7 +620,7 @@ type KpiCardProps = {
  * dimensões: razões (custo/t) saem do total, não de uma média. Ex.:
  * `<KpiCard label="Custo total" measure="custoTotal" secondary="custoTon" />`.
  */
-declare function KpiCard({ measure, label, secondary, secondaryLabel, labels, formats, queryLabel }: KpiCardProps): import("react").JSX.Element;
+declare function KpiCard({ measure, label, secondary, secondaryLabel, labels, formats, ignoreFilters, queryLabel }: KpiCardProps): import("react").JSX.Element;
 //#endregion
 //#region src/client/ModelDictionary.d.ts
 /**
@@ -617,5 +656,5 @@ declare function useModelQuery({ dimensions, measures, ignoreFilters, label, ski
   };
 };
 //#endregion
-export { BarChart, type ChartComponentProps, type ChartComponentSpec, type ChartPanelProps, ComboChart, DashboardCanvas, DashboardCharts, type DashboardFetcher, DashboardFilters, DashboardProvider, DataTable, DonutChart, FilterSelect, INSPECT_ATTRIBUTE, KpiCard, Legend, ModelDictionary, OTHER_COLOR, SERIES_COLORS, TooltipBox, chartCardSx, chartPlaceholder, chartTitleSx, fieldLabel, formatCurrency, formatMeasure, formatNumber, measureFormat, measureFormatter, numberOf, seriesColor, useClickFilter, useDashboard, useModelQuery };
+export { BUILTIN_FORMATTERS, BarChart, type ChartComponentProps, type ChartComponentSpec, type ChartPanelProps, ComboChart, DashboardCanvas, DashboardCharts, type DashboardFetcher, DashboardFilters, DashboardProvider, DataTable, DonutChart, FilterSelect, INSPECT_ATTRIBUTE, KpiCard, Legend, ModelDictionary, OTHER_COLOR, SERIES_COLORS, TooltipBox, chartCardSx, chartPlaceholder, chartTitleBoxSx, chartTitleSx, fieldLabel, formatCurrency, formatMeasure, formatNumber, measureFormat, measureFormatter, numberOf, seriesColor, toDate, toMonthName, useClickFilter, useDashboard, useModelQuery };
 //# sourceMappingURL=index.d.ts.map

package/dist/client/index.js

@@ -1,8 +1,8 @@
-import { A as contrastText, M as rowRuleStyles, d as customChartProps, g as percentColumn, j as matchesValueRule, k as colorScaleStyles, o as cardsGap, p as isBuiltinChart, s as chartCardStyle, v as tableColumns } from "../layout-BS3nO6OT.js";
-import { S as layoutItemKey, _ as useClickFilter, a as formatCurrency, c as measureFormat, d as OTHER_COLOR, f as SERIES_COLORS, g as seriesColor, h as numberOf, i as fieldLabel, l as measureFormatter, m as chartPlaceholder, n as INSPECT_ATTRIBUTE, o as formatMeasure, p as TooltipBox, r as useModelQuery, s as formatNumber, t as ModelDictionary, u as Legend, v as DashboardProvider, x as LAYOUT_ITEM_ATTRIBUTE, y as useDashboard } from "../ModelDictionary-Cw4sa8tW.js";
+import { A as colorScaleStyles, M as matchesValueRule, N as rowRuleStyles, _ as percentColumn, c as chartCardStyle, f as customChartProps, j as contrastText, m as isBuiltinChart, s as cardsGap, y as tableColumns } from "../layout-BuZhfoRI.js";
+import { C as useDashboard, E as layoutItemKey, S as DashboardProvider, T as LAYOUT_ITEM_ATTRIBUTE, _ as TooltipBox, a as fieldLabel, b as seriesColor, c as formatNumber, d as toDate, f as toMonthName, g as SERIES_COLORS, h as OTHER_COLOR, i as BUILTIN_FORMATTERS, l as measureFormat, m as Legend, n as INSPECT_ATTRIBUTE, o as formatCurrency, p as withBuiltinFormatters, r as useModelQuery, s as formatMeasure, t as ModelDictionary, u as measureFormatter, v as chartPlaceholder, x as useClickFilter, y as numberOf } from "../ModelDictionary-g5d84D0n.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";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/client/seriesPivot.ts
 const EMPTY_SERIES_LABEL = "(em branco)";
@@ -134,14 +134,15 @@ const ROW_HEIGHT = 28;
 * Com `series`, uma medida quebrada pelos valores de outra dimensão:
 * `<BarChart dimension="mes" series="tipo_descarga" measures={['volume']} stacked />`.
 */
-function BarChart({ dimension, measures: measureList, series, formatSeries = String, maxSeries = 6, orientation = "vertical", stacked = false, sort = "dimension", limit, formatDimension = String, hideEmpty = true, showEmpty = false, showValues = true, valuePosition = "outside", valueColor, valueSize = 12, showTotal = false, valueRule, hideUnselected = false, colors, clickToFilter = false, height = 360, labels, formats: formatsByMeasure, queryLabel }) {
+function BarChart({ dimension, measures: measureList, series, formatSeries = String, maxSeries = 6, orientation = "vertical", stacked = false, sort = "dimension", limit, formatDimension = String, hideEmpty = true, showEmpty = false, showValues = true, valuePosition = "outside", valueColor, valueSize = 12, showTotal = false, valueRule, hideUnselected = false, colors, clickToFilter = false, height = 360, labels, formats: formatsByMeasure, ignoreFilters, queryLabel }) {
 	const { meta, filters, setFilter } = useDashboard();
 	const dimming = clickToFilter && !hideUnselected;
+	const configuredIgnore = ignoreFilters ?? [];
 	const measures = series ? measureList.slice(0, 1) : measureList;
 	const { rows, isLoading, error, inspectProps } = useModelQuery({
 		dimensions: series ? [dimension, series] : [dimension],
 		measures,
-		ignoreFilters: dimming ? series ? [dimension, series] : [dimension] : void 0,
+		ignoreFilters: [...configuredIgnore, ...dimming ? series ? [dimension, series] : [dimension] : []],
 		label: queryLabel ?? `BarChart · ${dimension}`
 	});
 	const domain = useModelQuery({
@@ -154,7 +155,7 @@ function BarChart({ dimension, measures: measureList, series, formatSeries = Str
 	const table = meta?.dimensions[dimension]?.table;
 	const categories = useModelQuery({
 		dimensions: [dimension],
-		ignoreFilters: Object.keys(filters).filter((name) => dimming && name === dimension || !table || meta?.dimensions[name]?.table !== table),
+		ignoreFilters: Object.keys(filters).filter((name) => configuredIgnore.includes(name) || dimming && name === dimension || !table || meta?.dimensions[name]?.table !== table),
 		label: `${queryLabel ?? `BarChart · ${dimension}`} · categorias`,
 		skip: !showEmpty || !meta
 	});
@@ -454,8 +455,9 @@ const lineDomain = ([min, max]) => {
 * Barras + linha de uma dimensão, consultando o modelo do `DashboardProvider` (com os filtros dele).
 * Ex.: `<ComboChart dimension="mes" bar="custoTotal" line="custoTon" detail="volTotal" />`.
 */
-function ComboChart({ dimension, bar, line, detail, barLabel, lineLabel, detailLabel, formatDimension = String, formatBar, formatLine, formatDetail, labels, formats, hideEmpty = true, height = 360, maxLabels = 24, barColor = "#F58220", lineColor = "#555", clickToFilter = false, queryLabel }) {
+function ComboChart({ dimension, bar, line, detail, barLabel, lineLabel, detailLabel, formatDimension = String, formatBar, formatLine, formatDetail, labels, formats, hideEmpty = true, height = 360, maxLabels = 24, barColor = "#F58220", lineColor = "#555", clickToFilter = false, ignoreFilters, queryLabel }) {
 	const { meta, filters, setFilter } = useDashboard();
+	const ignore = [...ignoreFilters ?? [], ...clickToFilter ? [dimension] : []];
 	const fromModel = (measure, fallback) => {
 		const format = measureFormat(meta, measure, formats);
 		const resolved = format?.format ? format : {
@@ -481,7 +483,7 @@ function ComboChart({ dimension, bar, line, detail, barLabel, lineLabel, detailL
 			line,
 			detail
 		] : [bar, line],
-		ignoreFilters: clickToFilter ? [dimension] : void 0,
+		ignoreFilters: ignore.length ? ignore : void 0,
 		label: queryLabel ?? `ComboChart · ${dimension}`
 	});
 	const num = (row, key) => key && row[key] !== null && row[key] !== void 0 ? Number(row[key]) : null;
@@ -828,11 +830,12 @@ 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, formatRules = NO_RULES, colorScales = NO_SCALES, cellBorders = false, borderColor = "#e0e0e0", align, verticalAlign, 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, colorScales = NO_SCALES, cellBorders = false, borderColor = "#e0e0e0", align, verticalAlign, cellPadding, fontSize = 13, ignoreFilters: ignoreProp = EMPTY, queryLabel }) {
 	const { meta } = useDashboard();
 	const name = queryLabel ?? `DataTable · ${dimensions.join(", ") || "total"}`;
 	const firstDimension = dimensions[0];
-	const ignoreFilters = clickToFilter && firstDimension ? [firstDimension] : void 0;
+	const ignore = [...ignoreProp, ...clickToFilter && firstDimension ? [firstDimension] : []];
+	const ignoreFilters = ignore.length ? ignore : 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;
@@ -928,6 +931,8 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 	const verticalOf = (column) => verticalAlign?.[column] ?? "middle";
 	const totalLabelColumn = columns.find(isDimension);
 	const cellText = (row, column) => column.startsWith("%:") ? formatPercent(percentOfRow(row, column.slice(2))) : formats[column]?.(row[column]);
+	const cellPaddingValue = cellPadding ?? 8;
+	const cellPaddingStyle = typeof cellPaddingValue === "number" ? `${cellPaddingValue}px` : cellPaddingValue;
 	const toggleSort = (column) => setSort((current) => current.by === column ? {
 		by: column,
 		direction: current.direction === "asc" ? "desc" : "asc"
@@ -983,7 +988,7 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 				size: "small",
 				stickyHeader: true,
 				sx: { "& td, & th": {
-					fontSize: 13,
+					fontSize,
 					...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) => {
@@ -1002,6 +1007,8 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 							align: alignOf(column),
 							sx: {
 								verticalAlign: verticalOf(column),
+								paddingTop: cellPaddingStyle,
+								paddingBottom: cellPaddingStyle,
 								...ruleSx(styles?.[column])
 							},
 							children: dimensionText(column, row[column])
@@ -1010,6 +1017,8 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 							sx: {
 								whiteSpace: "nowrap",
 								verticalAlign: verticalOf(column),
+								paddingTop: cellPaddingStyle,
+								paddingBottom: cellPaddingStyle,
 								...ruleSx(styles?.[column])
 							},
 							children: cellText(row, column)
@@ -1025,13 +1034,19 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 					} },
 					children: columns.map((column) => isDimension(column) ? /* @__PURE__ */ jsx(TableCell, {
 						align: alignOf(column),
-						sx: { verticalAlign: verticalOf(column) },
+						sx: {
+							verticalAlign: verticalOf(column),
+							paddingTop: cellPaddingStyle,
+							paddingBottom: cellPaddingStyle
+						},
 						children: column === totalLabelColumn ? "Total" : ""
 					}, column) : /* @__PURE__ */ jsx(TableCell, {
 						align: alignOf(column),
 						sx: {
 							whiteSpace: "nowrap",
-							verticalAlign: verticalOf(column)
+							verticalAlign: verticalOf(column),
+							paddingTop: cellPaddingStyle,
+							paddingBottom: cellPaddingStyle
 						},
 						children: column.startsWith("%:") ? formatPercent(sums[column.slice(2)] ? 1 : null) : formats[column]?.(totalRow[column])
 					}, column))
@@ -1058,12 +1073,13 @@ const LEGEND_DIRECTION = {
 * ou em cima/embaixo; `showValues` põe o valor de cada fatia do lado de fora.
 * Ex.: `<DonutChart dimension="operacao_status" measure="custoTotal" />`.
 */
-function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = String, clickToFilter = false, height = 300, labels, formats, percentDecimals = 1, legendPosition = "right", showValues = false, valueContent = "both", showTotal = true, queryLabel }) {
+function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = String, clickToFilter = false, height = 300, labels, formats, percentDecimals = 1, legendPosition = "right", showValues = false, valueContent = "both", showTotal = true, ignoreFilters, queryLabel }) {
 	const { meta } = useDashboard();
+	const ignore = [...ignoreFilters ?? [], ...clickToFilter ? [dimension] : []];
 	const { rows, isLoading, error, inspectProps } = useModelQuery({
 		dimensions: [dimension],
 		measures: [measure],
-		ignoreFilters: clickToFilter ? [dimension] : void 0,
+		ignoreFilters: ignore.length ? ignore : void 0,
 		label: queryLabel ?? `DonutChart · ${dimension}`
 	});
 	const filter = useClickFilter(dimension, clickToFilter);
@@ -1318,10 +1334,11 @@ function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = Strin
 * dimensões: razões (custo/t) saem do total, não de uma média. Ex.:
 * `<KpiCard label="Custo total" measure="custoTotal" secondary="custoTon" />`.
 */
-function KpiCard({ measure, label, secondary, secondaryLabel, labels, formats, queryLabel }) {
+function KpiCard({ measure, label, secondary, secondaryLabel, labels, formats, ignoreFilters, queryLabel }) {
 	const { meta } = useDashboard();
 	const { rows, isLoading, error, inspectProps } = useModelQuery({
 		measures: secondary ? [measure, secondary] : [measure],
+		ignoreFilters: ignoreFilters?.length ? ignoreFilters : void 0,
 		label: queryLabel ?? `KpiCard · ${measure}`
 	});
 	const row = rows[0];
@@ -1422,6 +1439,20 @@ function chartTitleSx(card) {
 		textAlign: card.titleAlign
 	});
 }
+/**
+* `sx` da caixa que envolve o título: o espaço até o conteúdo (`contentGap`) e, com `titleDivider`,
+* a linha abaixo do título e o espaço até ela (`titleGap`). Um `panel` do app põe isto na caixa do
+* título para herdar divisor e espaçamentos do card (global `cards` ou por gráfico `card`).
+*/
+function chartTitleBoxSx(card) {
+	return {
+		mb: px(card.contentGap ?? 8),
+		...card.titleDivider && {
+			pb: px(card.titleGap ?? 4),
+			borderBottom: `1px solid ${card.titleDividerColor ?? "#e0e0e0"}`
+		}
+	};
+}
 function DefaultPanel({ title, card, children }) {
 	return /* @__PURE__ */ jsxs(Paper, {
 		elevation: 0,
@@ -1433,13 +1464,15 @@ function DefaultPanel({ title, card, children }) {
 			borderColor: "divider",
 			...chartCardSx(card)
 		},
-		children: [title && /* @__PURE__ */ jsx(Typography, {
-			sx: {
-				fontWeight: 700,
-				mb: 1,
-				...chartTitleSx(card)
-			},
-			children: title
+		children: [title && /* @__PURE__ */ jsx(Box, {
+			sx: chartTitleBoxSx(card),
+			children: /* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontWeight: 700,
+					...chartTitleSx(card)
+				},
+				children: title
+			})
 		}), children]
 	});
 }
@@ -1454,8 +1487,32 @@ function DefaultPanel({ title, card, children }) {
 * ```
 */
 function DashboardCharts({ layout, formatters = {}, panel: Panel = DefaultPanel, gap = 1.5 }) {
+	formatters = withBuiltinFormatters(formatters);
 	const current = useLayout(layout, "charts", formatters);
 	const { charts } = current;
+	const { parameters, meta } = useDashboard();
+	const ignoredByFilter = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const filter of current.filters ?? []) for (const id of filter.ignoredBy ?? []) map.set(id, [...map.get(id) ?? [], filter.dimension]);
+		return map;
+	}, [current.filters]);
+	const measureOverride = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		const byName = new Map((current.parameters ?? []).map((parameter) => [parameter.name, parameter]));
+		for (const chart of charts) {
+			const linked = chart.measureParameter;
+			if (typeof linked !== "string") continue;
+			const parameter = byName.get(linked);
+			if (!parameter) continue;
+			const selected = parameters[parameter.name] ?? parameter.default ?? parameter.measures[0];
+			if (selected) map.set(chart.id, selected);
+		}
+		return map;
+	}, [
+		current.parameters,
+		parameters,
+		charts
+	]);
 	const fixed = useFixedCanvas();
 	const columns = `repeat(12, minmax(0, 1fr))`;
 	const space = cardsGap(current.cards);
@@ -1469,27 +1526,64 @@ function DashboardCharts({ layout, formatters = {}, panel: Panel = DefaultPanel,
 				lg: columns
 			}
 		},
-		children: charts.map((chart) => /* @__PURE__ */ jsx(Box, {
-			[LAYOUT_ITEM_ATTRIBUTE]: layoutItemKey(layout.id, {
-				kind: "chart",
-				key: chart.id
-			}),
-			sx: {
-				minWidth: 0,
-				gridColumn: fixed ? `span ${chart.span ?? 12}` : { lg: `span ${chart.span ?? 12}` }
-			},
-			children: /* @__PURE__ */ jsx(Panel, {
-				title: chart.title,
-				chart,
-				card: chartCardStyle(current, chart),
-				children: /* @__PURE__ */ jsx(Chart, {
+		children: charts.map((chart) => {
+			const override = measureOverride.get(chart.id);
+			const effective = withMeasure(withFilterIgnores(chart, ignoredByFilter.get(chart.id)), override);
+			const measure = override ?? chart.measure;
+			const title = resolveTitle(chart.title, typeof measure === "string" ? measure : void 0, meta);
+			return /* @__PURE__ */ jsx(Box, {
+				[LAYOUT_ITEM_ATTRIBUTE]: layoutItemKey(layout.id, {
+					kind: "chart",
+					key: chart.id
+				}),
+				sx: {
+					minWidth: 0,
+					gridColumn: fixed ? `span ${chart.span ?? 12}` : { lg: `span ${chart.span ?? 12}` }
+				},
+				children: /* @__PURE__ */ jsx(Panel, {
+					title,
 					chart,
-					formatters
+					card: chartCardStyle(current, chart),
+					children: /* @__PURE__ */ jsx(Chart, {
+						chart: effective,
+						formatters
+					})
 				})
-			})
-		}, chart.id))
+			}, chart.id);
+		})
 	});
 }
+/**
+* Soma ao `ignoreFilters` do gráfico as dimensões dos filtros que o marcaram em `ignoredBy`, sem
+* duplicar. Vazio = devolve o gráfico como está (sem recriar o objeto).
+*/
+function withFilterIgnores(chart, fromFilters) {
+	if (!fromFilters?.length) return chart;
+	const ignoreFilters = [.../* @__PURE__ */ new Set([...chart.ignoreFilters ?? [], ...fromFilters])];
+	return {
+		...chart,
+		ignoreFilters
+	};
+}
+/** Troca a medida do gráfico pela escolhida num parâmetro de medida (vazio = gráfico como está). */
+function withMeasure(chart, measure) {
+	if (!measure || chart.measure === measure) return chart;
+	return {
+		...chart,
+		measure
+	};
+}
+const TITLE_TOKEN = /\{\{\s*medida\s*\}\}/g;
+/**
+* Resolve `{{medida}}` no título para a descrição da medida atual do gráfico (ou o rótulo, se não
+* houver descrição; vazio, se o gráfico não tem medida única). Com um parâmetro de medida, a medida
+* atual muda com o slicer, então o título acompanha. Sem token, devolve o título como está.
+*/
+function resolveTitle(title, measure, meta) {
+	if (!title.includes("{{")) return title;
+	const name = measure ? meta?.measures[measure]?.description || fieldLabel(meta, measure) : "";
+	return title.replace(TITLE_TOKEN, name);
+}
 function Chart({ chart, formatters }) {
 	const { chartTypes, chartComponents } = useDashboard();
 	if (!isBuiltinChart(chart)) {
@@ -1617,20 +1711,55 @@ function FilterSelect({ dimension, label, formatLabel = String, width = 200 }) {
 	});
 }
 //#endregion
+//#region src/client/MeasureSelect.tsx
+/**
+* Slicer de um parâmetro de medida ("medida dinâmica"): escolhe UMA medida entre `measures`. A
+* escolha fica no `DashboardProvider` (`parameters[name]`) e o `<DashboardCharts>` troca a medida
+* dos gráficos de medida única que seguem o parâmetro. Os rótulos vêm do dicionário do modelo.
+*/
+function MeasureSelect({ name, measures, label = "Medida", default: fallback, width = 200 }) {
+	const { meta, parameters, setParameter } = useDashboard();
+	const selected = parameters[name] ?? fallback ?? measures[0];
+	if (!selected) return null;
+	return /* @__PURE__ */ jsxs(FormControl, {
+		size: "small",
+		sx: { width },
+		children: [/* @__PURE__ */ jsx(InputLabel, {
+			shrink: true,
+			children: label
+		}), /* @__PURE__ */ jsx(Select, {
+			value: selected,
+			onChange: (event) => setParameter(name, event.target.value),
+			input: /* @__PURE__ */ jsx(OutlinedInput, {
+				notched: true,
+				label
+			}),
+			MenuProps: { slotProps: { paper: { sx: { maxHeight: 360 } } } },
+			sx: { bgcolor: "#fff" },
+			children: measures.map((measure) => /* @__PURE__ */ jsx(MenuItem, {
+				value: measure,
+				dense: true,
+				children: fieldLabel(meta, measure)
+			}, measure))
+		})]
+	});
+}
+//#endregion
 //#region src/client/DashboardFilters.tsx
 /**
 * Filtros (slicers) declarados em `layout.filters`, na ordem. Em desenvolvimento, a aba Layout do
 * devtools adiciona, remove, reordena e edita os filtros ao vivo.
 */
 function DashboardFilters({ layout, formatters = {}, gap = 2 }) {
-	const { filters = [] } = useLayout(layout, "filters", formatters);
-	return /* @__PURE__ */ jsx(Box, {
+	formatters = withBuiltinFormatters(formatters);
+	const { filters = [], parameters = [] } = useLayout(layout, "filters", formatters);
+	return /* @__PURE__ */ jsxs(Box, {
 		sx: {
 			display: "flex",
 			flexWrap: "wrap",
 			gap
 		},
-		children: filters.map((filter) => /* @__PURE__ */ jsx(Box, {
+		children: [filters.map((filter) => /* @__PURE__ */ jsx(Box, {
 			[LAYOUT_ITEM_ATTRIBUTE]: layoutItemKey(layout.id, {
 				kind: "filter",
 				key: filter.dimension
@@ -1641,10 +1770,22 @@ function DashboardFilters({ layout, formatters = {}, gap = 2 }) {
 				width: filter.width,
 				formatLabel: filter.formatLabel ? formatters[filter.formatLabel] : void 0
 			})
-		}, filter.dimension))
+		}, filter.dimension)), parameters.map((parameter) => /* @__PURE__ */ jsx(Box, {
+			[LAYOUT_ITEM_ATTRIBUTE]: layoutItemKey(layout.id, {
+				kind: "parameter",
+				key: parameter.name
+			}),
+			children: /* @__PURE__ */ jsx(MeasureSelect, {
+				name: parameter.name,
+				measures: parameter.measures,
+				label: parameter.label,
+				default: parameter.default,
+				width: parameter.width
+			})
+		}, `param:${parameter.name}`))]
 	});
 }
 //#endregion
-export { BarChart, ComboChart, DashboardCanvas, DashboardCharts, DashboardFilters, DashboardProvider, DataTable, DonutChart, FilterSelect, INSPECT_ATTRIBUTE, KpiCard, Legend, ModelDictionary, OTHER_COLOR, SERIES_COLORS, TooltipBox, chartCardSx, chartPlaceholder, chartTitleSx, fieldLabel, formatCurrency, formatMeasure, formatNumber, measureFormat, measureFormatter, numberOf, seriesColor, useClickFilter, useDashboard, useModelQuery };
+export { BUILTIN_FORMATTERS, BarChart, ComboChart, DashboardCanvas, DashboardCharts, DashboardFilters, DashboardProvider, DataTable, DonutChart, FilterSelect, INSPECT_ATTRIBUTE, KpiCard, Legend, ModelDictionary, OTHER_COLOR, SERIES_COLORS, TooltipBox, chartCardSx, chartPlaceholder, chartTitleBoxSx, chartTitleSx, fieldLabel, formatCurrency, formatMeasure, formatNumber, measureFormat, measureFormatter, numberOf, seriesColor, toDate, toMonthName, useClickFilter, useDashboard, useModelQuery };
 
 //# sourceMappingURL=index.js.map