@bluemarble/bi 0.8.0 → 0.8.1

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 { 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-DZiYK1mV.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]
 	});
 }
@@ -1457,6 +1490,29 @@ function DashboardCharts({ layout, formatters = {}, panel: Panel = DefaultPanel,
 	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);
@@ -1470,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)) {
@@ -1618,6 +1711,40 @@ 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
@@ -1625,14 +1752,14 @@ function FilterSelect({ dimension, label, formatLabel = String, width = 200 }) {
 */
 function DashboardFilters({ layout, formatters = {}, gap = 2 }) {
 	formatters = withBuiltinFormatters(formatters);
-	const { filters = [] } = useLayout(layout, "filters", formatters);
-	return /* @__PURE__ */ jsx(Box, {
+	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
@@ -1643,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 { BUILTIN_FORMATTERS, 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, toDate, toMonthName, 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