@bluemarble/bi 0.3.1 → 0.5.0

package/dist/client/index.js

@@ -1,5 +1,5 @@
-import { f as isBuiltinChart, o as chartCardStyle, u as customChartProps } from "../layout-DTR4vI-I.js";
-import { a as useDashboard, c as layoutItemKey, i as DashboardProvider, n as INSPECT_ATTRIBUTE, r as useModelQuery, s as LAYOUT_ITEM_ATTRIBUTE, t as ModelDictionary } from "../ModelDictionary-kUKcdbc8.js";
+import { f as isBuiltinChart, h as orderedColumns, o as chartCardStyle, u as customChartProps } from "../layout-QuOYFmp1.js";
+import { a as formatCurrency, c as measureFormat, d as useDashboard, i as fieldLabel, l as measureFormatter, m as layoutItemKey, n as INSPECT_ATTRIBUTE, o as formatMeasure, p as LAYOUT_ITEM_ATTRIBUTE, r as useModelQuery, s as formatNumber, t as ModelDictionary, u as DashboardProvider } from "../ModelDictionary-D3JzCd6x.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";
@@ -95,7 +95,8 @@ function chartPlaceholder({ height, error, isLoading, empty }) {
 		children: error ? "Erro ao carregar o gráfico" : isLoading ? "Carregando…" : "Sem dados para os filtros selecionados"
 	});
 }
-function TooltipBox({ title, children }) {
+/** `caption`: o que é o título (ex.: o rótulo da dimensão), em cinza acima dele. */
+function TooltipBox({ title, caption, children }) {
 	return /* @__PURE__ */ jsxs(Box, {
 		sx: {
 			bgcolor: "#fff",
@@ -103,55 +104,23 @@ function TooltipBox({ title, children }) {
 			p: 1,
 			fontSize: 13
 		},
-		children: [/* @__PURE__ */ jsx(Box, {
-			sx: { fontWeight: 700 },
-			children: title
-		}), children]
+		children: [
+			caption && /* @__PURE__ */ jsx(Box, {
+				sx: {
+					fontSize: 11,
+					color: "#777"
+				},
+				children: caption
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				sx: { fontWeight: 700 },
+				children: title
+			}),
+			children
+		]
 	});
 }
 //#endregion
-//#region src/client/format.ts
-const formatters = /* @__PURE__ */ new Map();
-function formatNumber(value, decimals = 2) {
-	if (value === null || value === void 0 || value === "") return "";
-	const number = Number(value);
-	if (Number.isNaN(number)) return String(value);
-	let formatter = formatters.get(decimals);
-	if (!formatter) {
-		formatter = new Intl.NumberFormat("pt-BR", {
-			minimumFractionDigits: decimals,
-			maximumFractionDigits: decimals
-		});
-		formatters.set(decimals, formatter);
-	}
-	return formatter.format(number);
-}
-const formatCurrency = (value, decimals = 2) => {
-	const text = formatNumber(value, decimals);
-	return text && `R$ ${text}`;
-};
-/**
-* Formata pelo dicionário do modelo (`format`/`decimals` da medida). `fallbackDecimals` é o padrão
-* do componente quando a medida não define `decimals`.
-*/
-function formatMeasure(value, meta, fallbackDecimals = 2) {
-	const decimals = meta?.decimals ?? (meta?.format === "integer" ? 0 : fallbackDecimals);
-	switch (meta?.format) {
-		case "currency": return formatCurrency(value, decimals);
-		case "percent": {
-			if (value === null || value === void 0 || value === "") return "";
-			const text = formatNumber(Number(value) * 100, decimals);
-			return text && `${text}%`;
-		}
-		default: return formatNumber(value, decimals);
-	}
-}
-/** Formatter de uma medida pelo dicionário do modelo; sem `format`, número com `fallbackDecimals`. */
-function measureFormatter(meta, measure, fallbackDecimals = 2) {
-	const measureMeta = meta?.measures[measure];
-	return (value) => formatMeasure(value, measureMeta, fallbackDecimals);
-}
-//#endregion
 //#region src/client/BarChart.tsx
 const MAX_VALUE_LABELS = 30;
 /** Altura de cada categoria no modo horizontal (barras finas, com respiro). */
@@ -160,7 +129,7 @@ const ROW_HEIGHT = 28;
 * Barras de uma ou mais medidas por uma dimensão. Ex.:
 * `<BarChart dimension="navio" measures={['custoTotal']} orientation="horizontal" sort="desc" limit={10} />`.
 */
-function BarChart({ dimension, measures, orientation = "vertical", stacked = false, sort = "dimension", limit, formatDimension = String, hideEmpty = true, showValues = true, clickToFilter = false, height = 360, queryLabel }) {
+function BarChart({ dimension, measures, orientation = "vertical", stacked = false, sort = "dimension", limit, formatDimension = String, hideEmpty = true, showValues = true, clickToFilter = false, height = 360, labels, formats: formatsByMeasure, queryLabel }) {
 	const { meta } = useDashboard();
 	const { rows, isLoading, error, inspectProps } = useModelQuery({
 		dimensions: [dimension],
@@ -169,8 +138,13 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 		label: queryLabel ?? `BarChart · ${dimension}`
 	});
 	const filter = useClickFilter(dimension, clickToFilter);
-	const formats = measures.map((measure) => measureFormatter(meta, measure, 0));
-	const labelOf = (measure) => meta?.measures[measure]?.label ?? measure;
+	const formats = measures.map((measure) => measureFormatter(meta, measure, 0, formatsByMeasure));
+	const labelOf = (name) => fieldLabel(meta, name, labels);
+	const axisFormat = measures[0] ? measureFormat(meta, measures[0], formatsByMeasure) : void 0;
+	const formatTick = (value) => formatMeasure(value, {
+		...axisFormat,
+		decimals: axisFormat?.compact ? 1 : 0
+	}, 0);
 	const first = measures[0];
 	let data = rows.filter((row) => !hideEmpty || measures.some((measure) => numberOf(row, measure))).map((row) => {
 		const value = row[dimension] ?? "";
@@ -184,7 +158,7 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 	if (sort !== "dimension" && first) data = [...data].sort((a, b) => sort === "desc" ? Number(b[first]) - Number(a[first]) : Number(a[first]) - Number(b[first]));
 	if (limit) data = data.slice(0, limit);
 	const horizontal = orientation === "horizontal";
-	const labels = showValues && data.length <= MAX_VALUE_LABELS;
+	const showLabels = showValues && data.length <= MAX_VALUE_LABELS;
 	const chartHeight = horizontal ? Math.max(height, data.length * ROW_HEIGHT + 24) : height;
 	const longest = Math.max(0, ...data.map((point) => point.label.length));
 	const state = chartPlaceholder({
@@ -198,6 +172,7 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 		const point = payload[0].payload;
 		return /* @__PURE__ */ jsx(TooltipBox, {
 			title: point.label,
+			caption: labelOf(dimension),
 			children: measures.map((measure, index) => /* @__PURE__ */ jsxs(Box, {
 				sx: {
 					display: "flex",
@@ -271,11 +246,11 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 						barCategoryGap: "20%",
 						margin: horizontal ? {
 							top: 4,
-							right: labels ? 96 : 16,
+							right: showLabels ? 96 : 16,
 							left: 8,
 							bottom: 4
 						} : {
-							top: labels ? 24 : 8,
+							top: showLabels ? 24 : 8,
 							right: 8,
 							left: 8,
 							bottom: 0
@@ -288,11 +263,12 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 							}),
 							horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
 								type: "number",
-								hide: labels,
+								hide: showLabels,
 								tick: {
 									fontSize: 12,
 									fill: "#555"
-								}
+								},
+								tickFormatter: formatTick
 							}), /* @__PURE__ */ jsx(YAxis, {
 								type: "category",
 								dataKey: "label",
@@ -314,12 +290,12 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 								tickLine: false,
 								axisLine: { stroke: "#ccc" }
 							}), /* @__PURE__ */ jsx(YAxis, {
-								hide: labels,
+								hide: showLabels,
 								tick: {
 									fontSize: 12,
 									fill: "#555"
 								},
-								tickFormatter: (value) => formatNumber(value, 0),
+								tickFormatter: formatTick,
 								width: 72
 							})] }),
 							/* @__PURE__ */ jsx(Tooltip$1, {
@@ -336,7 +312,7 @@ function BarChart({ dimension, measures, orientation = "vertical", stacked = fal
 								isAnimationActive: false,
 								onClick: clickToFilter ? (_bar, barIndex, event) => handleClick(barIndex, event) : void 0,
 								cursor: clickToFilter ? "pointer" : void 0,
-								children: [clickToFilter && data.map((point) => /* @__PURE__ */ jsx(Cell, { fillOpacity: filter.isDimmed(point.value) ? .35 : 1 }, String(point.value))), labels && !stacked && /* @__PURE__ */ jsx(LabelList, {
+								children: [clickToFilter && data.map((point) => /* @__PURE__ */ jsx(Cell, { fillOpacity: filter.isDimmed(point.value) ? .35 : 1 }, String(point.value))), showLabels && !stacked && /* @__PURE__ */ jsx(LabelList, {
 									dataKey: measure,
 									position: horizontal ? "right" : "top",
 									formatter: (value) => formats[index]?.(value) ?? "",
@@ -365,18 +341,26 @@ 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, 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, queryLabel }) {
 	const { meta, filters, setFilter } = useDashboard();
-	const fromModel = (measure, decimals, fallback) => {
-		const measureMeta = meta?.measures[measure];
-		return measureMeta?.format ? (value) => formatMeasure(value, measureMeta, decimals) : fallback;
+	const fromModel = (measure, fallback) => {
+		const format = measureFormat(meta, measure, formats);
+		const resolved = format?.format ? format : {
+			...fallback,
+			...format
+		};
+		return (value) => formatMeasure(value, resolved, fallback.decimals);
 	};
-	formatBar ??= fromModel(bar, 0, (value) => formatCurrency(value, 0));
-	formatLine ??= fromModel(line, 2, (value) => formatNumber(value, 2));
-	formatDetail ??= detail ? fromModel(detail, 3, (value) => formatNumber(value, 3)) : (value) => formatNumber(value, 3);
-	barLabel ??= meta?.measures[bar]?.label ?? bar;
-	lineLabel ??= meta?.measures[line]?.label ?? line;
-	detailLabel ??= detail && (meta?.measures[detail]?.label ?? detail);
+	formatBar ??= fromModel(bar, {
+		format: "currency",
+		decimals: 0
+	});
+	formatLine ??= fromModel(line, { decimals: 2 });
+	formatDetail ??= detail ? fromModel(detail, { decimals: 3 }) : (value) => formatNumber(value, 3);
+	barLabel ??= fieldLabel(meta, bar, labels);
+	lineLabel ??= fieldLabel(meta, line, labels);
+	detailLabel ??= detail && fieldLabel(meta, detail, labels);
+	const dimensionLabel = fieldLabel(meta, dimension, labels);
 	const { rows, isLoading, error, inspectProps } = useModelQuery({
 		dimensions: [dimension],
 		measures: detail ? [
@@ -467,6 +451,13 @@ function ComboChart({ dimension, bar, line, detail, barLabel, lineLabel, detailL
 				fontSize: 13
 			},
 			children: [
+				/* @__PURE__ */ jsx(Typography, {
+					sx: {
+						fontSize: 11,
+						color: "#777"
+					},
+					children: dimensionLabel
+				}),
 				/* @__PURE__ */ jsx(Typography, {
 					sx: {
 						fontWeight: 700,
@@ -716,7 +707,6 @@ function DashboardCanvas({ layout, children }) {
 const EMPTY = [];
 /** Chave da coluna de percentual de uma medida (ordenação). */
 const PERCENT = "%:";
-const formatPercent = (value) => value === null ? "" : `${formatNumber(value * 100, 1)}%`;
 function compare(a, b) {
 	if (typeof a === "number" && typeof b === "number") return a - b;
 	return String(a).localeCompare(String(b), "pt-BR", { numeric: true });
@@ -725,7 +715,7 @@ 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, queryLabel }) {
+function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDimensions = {}, showTotal = true, sortBy, sortDirection = "desc", clickToFilter = false, height = 400, labels, formats: formatsByMeasure, percentDecimals = 1, columnOrder, queryLabel }) {
 	const { meta } = useDashboard();
 	const name = queryLabel ?? `DataTable · ${dimensions.join(", ") || "total"}`;
 	const firstDimension = dimensions[0];
@@ -763,9 +753,10 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 		if (y === null || y === void 0) return -1;
 		return sort.direction === "asc" ? compare(x, y) : compare(y, x);
 	}) : rows;
-	const formats = Object.fromEntries(measures.map((measure) => [measure, measureFormatter(meta, measure, 2)]));
+	const formats = Object.fromEntries(measures.map((measure) => [measure, measureFormatter(meta, measure, 2, formatsByMeasure)]));
+	const formatPercent = (value) => value === null ? "" : `${formatNumber(value * 100, percentDecimals)}%`;
 	const dimensionText = (dimension, value) => value === null || value === void 0 ? "(vazio)" : (formatDimensions[dimension] ?? String)(value);
-	const labelOf = (column) => meta?.dimensions[column]?.label ?? meta?.measures[column]?.label ?? column;
+	const labelOf = (column) => fieldLabel(meta, column, labels);
 	const headerOf = (column) => {
 		if (!column.startsWith(PERCENT)) return labelOf(column);
 		const measure = column.slice(2);
@@ -777,7 +768,9 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 		const total = sums[measure];
 		return value === null || value === void 0 || !total ? null : Number(value) / total;
 	};
-	const valueColumns = [...measures.flatMap((measure) => percentOf.includes(measure) ? [measure, `${PERCENT}${measure}`] : [measure]), ...extraMeasures.map((measure) => `${PERCENT}${measure}`)];
+	const columns = [...orderedColumns([...dimensions, ...measures], columnOrder).flatMap((column) => percentOf.includes(column) && !dimensions.includes(column) ? [column, `${PERCENT}${column}`] : [column]), ...extraMeasures.map((measure) => `${PERCENT}${measure}`)];
+	const isDimension = (column) => dimensions.includes(column);
+	const totalLabelColumn = columns.find(isDimension);
 	const cellText = (row, column) => column.startsWith(PERCENT) ? formatPercent(percentOfRow(row, column.slice(2))) : formats[column]?.(row[column]);
 	const toggleSort = (column) => setSort((current) => current.by === column ? {
 		by: column,
@@ -832,10 +825,10 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 				size: "small",
 				stickyHeader: true,
 				sx: { "& td, & th": { fontSize: 13 } },
-				children: [/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [dimensions.map((dimension) => header(dimension, false)), valueColumns.map((column) => header(column, true))] }) }), /* @__PURE__ */ jsxs(TableBody, { children: [sorted.map((row) => {
+				children: [/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((column) => header(column, !isDimension(column))) }) }), /* @__PURE__ */ jsxs(TableBody, { children: [sorted.map((row) => {
 					const value = firstDimension ? row[firstDimension] : null;
 					const clickable = clickToFilter && value !== null && value !== void 0;
-					return /* @__PURE__ */ jsxs(TableRow, {
+					return /* @__PURE__ */ jsx(TableRow, {
 						hover: true,
 						onClick: clickable ? (event) => filter.toggle(value, event) : void 0,
 						selected: clickable && filter.selected.includes(value),
@@ -843,13 +836,13 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 							cursor: clickable ? "pointer" : void 0,
 							opacity: clickable && filter.isDimmed(value) ? .5 : 1
 						},
-						children: [dimensions.map((dimension) => /* @__PURE__ */ jsx(TableCell, { children: dimensionText(dimension, row[dimension]) }, dimension)), valueColumns.map((column) => /* @__PURE__ */ jsx(TableCell, {
+						children: columns.map((column) => isDimension(column) ? /* @__PURE__ */ jsx(TableCell, { children: dimensionText(column, row[column]) }, column) : /* @__PURE__ */ jsx(TableCell, {
 							align: "right",
 							sx: { whiteSpace: "nowrap" },
 							children: cellText(row, column)
-						}, column))]
+						}, column))
 					}, dimensions.map((dimension) => String(row[dimension])).join("\0"));
-				}), totalRow && /* @__PURE__ */ jsxs(TableRow, {
+				}), totalRow && /* @__PURE__ */ jsx(TableRow, {
 					sx: { "& td": {
 						fontWeight: 700,
 						position: "sticky",
@@ -857,11 +850,11 @@ function DataTable({ dimensions = EMPTY, measures, percentOf = EMPTY, formatDime
 						bgcolor: "#f3f3f3",
 						borderTop: "2px solid #ddd"
 					} },
-					children: [dimensions.map((dimension, index) => /* @__PURE__ */ jsx(TableCell, { children: index === 0 ? "Total" : "" }, dimension)), valueColumns.map((column) => /* @__PURE__ */ jsx(TableCell, {
+					children: columns.map((column) => isDimension(column) ? /* @__PURE__ */ jsx(TableCell, { children: column === totalLabelColumn ? "Total" : "" }, column) : /* @__PURE__ */ jsx(TableCell, {
 						align: "right",
 						sx: { whiteSpace: "nowrap" },
 						children: column.startsWith(PERCENT) ? formatPercent(sums[column.slice(2)] ? 1 : null) : formats[column]?.(totalRow[column])
-					}, column))]
+					}, column))
 				})] })]
 			})
 		})]
@@ -874,7 +867,7 @@ const OTHERS = "Outros";
 * Rosca de uma medida por uma dimensão, com o total no centro e a legenda ao lado (nome, % e valor).
 * Ex.: `<DonutChart dimension="operacao_status" measure="custoTotal" />`.
 */
-function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = String, clickToFilter = false, height = 300, queryLabel }) {
+function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = String, clickToFilter = false, height = 300, labels, formats, percentDecimals = 1, queryLabel }) {
 	const { meta } = useDashboard();
 	const { rows, isLoading, error, inspectProps } = useModelQuery({
 		dimensions: [dimension],
@@ -883,7 +876,7 @@ function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = Strin
 		label: queryLabel ?? `DonutChart · ${dimension}`
 	});
 	const filter = useClickFilter(dimension, clickToFilter);
-	const format = measureFormatter(meta, measure, 0);
+	const format = measureFormatter(meta, measure, 0, formats);
 	const positive = rows.map((row) => ({
 		value: row[dimension] ?? "",
 		amount: numberOf(row, measure) ?? 0
@@ -906,7 +899,7 @@ function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = Strin
 		color: OTHER_COLOR
 	});
 	const total = slices.reduce((sum, slice) => sum + slice.amount, 0);
-	const percent = (amount) => `${formatNumber(amount / total * 100, 1)}%`;
+	const percent = (amount) => `${formatNumber(amount / total * 100, percentDecimals)}%`;
 	const placeholder = chartPlaceholder({
 		height,
 		error,
@@ -922,7 +915,10 @@ function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = Strin
 		const slice = payload[0].payload;
 		return /* @__PURE__ */ jsxs(TooltipBox, {
 			title: slice.label,
+			caption: fieldLabel(meta, dimension, labels),
 			children: [
+				fieldLabel(meta, measure, labels),
+				": ",
 				format(slice.amount),
 				" · ",
 				percent(slice.amount)
@@ -1067,7 +1063,7 @@ 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, queryLabel }) {
+function KpiCard({ measure, label, secondary, secondaryLabel, labels, formats, queryLabel }) {
 	const { meta } = useDashboard();
 	const { rows, isLoading, error, inspectProps } = useModelQuery({
 		measures: secondary ? [measure, secondary] : [measure],
@@ -1076,6 +1072,7 @@ function KpiCard({ measure, label, secondary, secondaryLabel, queryLabel }) {
 	const row = rows[0];
 	const value = row ? numberOf(row, measure) : null;
 	const extra = row && secondary ? numberOf(row, secondary) : null;
+	label ??= labels?.[measure];
 	return /* @__PURE__ */ jsxs(Box, {
 		...inspectProps,
 		sx: {
@@ -1112,7 +1109,7 @@ function KpiCard({ measure, label, secondary, secondaryLabel, queryLabel }) {
 					opacity: isLoading ? .5 : 1,
 					transition: "opacity .2s"
 				},
-				children: error ? "Erro" : value === null ? "—" : measureFormatter(meta, measure, 0)(value)
+				children: error ? "Erro" : value === null ? "—" : measureFormatter(meta, measure, 0, formats)(value)
 			}),
 			secondary && /* @__PURE__ */ jsxs(Box, {
 				sx: {
@@ -1122,7 +1119,7 @@ function KpiCard({ measure, label, secondary, secondaryLabel, queryLabel }) {
 					minHeight: 20
 				},
 				children: [
-					secondaryLabel ?? meta?.measures[secondary]?.label ?? secondary,
+					secondaryLabel ?? fieldLabel(meta, secondary, labels),
 					":",
 					" ",
 					/* @__PURE__ */ jsx(Box, {
@@ -1131,7 +1128,7 @@ function KpiCard({ measure, label, secondary, secondaryLabel, queryLabel }) {
 							fontWeight: 600,
 							color: "#444"
 						},
-						children: extra === null ? "—" : measureFormatter(meta, secondary, 2)(extra)
+						children: extra === null ? "—" : measureFormatter(meta, secondary, 2, formats)(extra)
 					})
 				]
 			})
@@ -1364,6 +1361,6 @@ function DashboardFilters({ layout, formatters = {}, gap = 2 }) {
 	});
 }
 //#endregion
-export { BarChart, ComboChart, DashboardCanvas, DashboardCharts, DashboardFilters, DashboardProvider, DataTable, DonutChart, FilterSelect, INSPECT_ATTRIBUTE, KpiCard, Legend, ModelDictionary, OTHER_COLOR, SERIES_COLORS, TooltipBox, chartPlaceholder, formatCurrency, formatMeasure, formatNumber, measureFormatter, numberOf, seriesColor, useClickFilter, useDashboard, useModelQuery };
+export { BarChart, ComboChart, DashboardCanvas, DashboardCharts, DashboardFilters, DashboardProvider, DataTable, DonutChart, FilterSelect, INSPECT_ATTRIBUTE, KpiCard, Legend, ModelDictionary, OTHER_COLOR, SERIES_COLORS, TooltipBox, chartPlaceholder, fieldLabel, formatCurrency, formatMeasure, formatNumber, measureFormat, measureFormatter, numberOf, seriesColor, useClickFilter, useDashboard, useModelQuery };
 
 //# sourceMappingURL=index.js.map