@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/components/chart/chart.js

@@ -1,4 +1,5 @@
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { THEMES } from "./chart.types.js";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -49,8 +50,12 @@ ${colorConfig.map(([key, itemConfig]) => {
 `).join("\n") } });
 };
 var ChartTooltip = RechartsPrimitive.Tooltip;
-function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
+function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, radius, elevation }) {
 	const { config } = useChart();
+	const axes = useStyleAxes({
+		radius,
+		elevation
+	}, ["radius", "elevation"]);
 	const tooltipLabel = React$1.useMemo(() => {
 		if (hideLabel || !payload?.length) return null;
 		const [item] = payload;
@@ -77,7 +82,8 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
 	if (!active || !payload?.length) return null;
 	const nestLabel = payload.length === 1 && indicator !== "dot";
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("grid min-w-[10rem] items-start gap-2.5 rounded-lg border border-border/50 bg-background px-4 py-3 text-xs shadow-xl", className),
+		className: cn("grid min-w-[10rem] items-start gap-2.5 rounded-[var(--espd-own-radius,var(--espd-radius-overlay,var(--radius-lg)))] border border-border/50 bg-background px-4 py-3 text-xs shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-overlay,var(--shadow-xl)))]", className),
+		style: axes.style,
 		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("div", {
 			className: "grid gap-2.5",
 			children: payload.filter((item) => item.type !== "none").map((item, index) => {
@@ -135,6 +141,124 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
 		})
 	});
 }
+var defaultLegendValueFormatter = (value) => value.toLocaleString();
+function chunkColumns(items, columns) {
+	const count = Math.max(1, Math.min(Math.floor(columns), items.length));
+	const perColumn = Math.ceil(items.length / count);
+	const groups = [];
+	for (let i = 0; i < items.length; i += perColumn) groups.push(items.slice(i, i + perColumn));
+	return groups;
+}
+/**
+* Legend as a list: swatch, label, then the value (and/or percentage) aligned
+* right. Charts render it for `legendLayout="rows" | "columns"`; use it
+* directly next to a custom `ChartContainer`, passing explicit `color`s.
+*/
+function ChartLegendList({ items, layout = "rows", columns = 2, value = "value", valueFormatter = defaultLegendValueFormatter, total: totalProp, className, style, ...props }) {
+	if (!items.length) return null;
+	const showPercent = value === "percent" || value === "both";
+	const showValue = value === "value" || value === "both";
+	const total = totalProp ?? items.reduce((sum, item) => typeof item.value === "number" && Number.isFinite(item.value) ? sum + item.value : sum, 0);
+	const groups = chunkColumns(items, layout === "columns" ? columns : 1);
+	const tracks = [
+		"auto",
+		"minmax(0,1fr)",
+		showPercent ? "auto" : null,
+		showValue ? "auto" : null
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chart-legend",
+		"data-layout": layout,
+		className: cn("@container w-full min-w-0 text-sm", className),
+		style,
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("grid gap-x-8 gap-y-2.5", groups.length > 1 && "@md:grid-cols-[repeat(var(--chart-legend-columns),minmax(0,1fr))]"),
+			style: { "--chart-legend-columns": groups.length },
+			children: groups.map((group, groupIndex) => /* @__PURE__ */ jsx("ul", {
+				className: "grid content-start items-center gap-x-3 gap-y-2.5",
+				style: { gridTemplateColumns: tracks },
+				children: group.map((item) => {
+					const itemValue = typeof item.value === "number" && Number.isFinite(item.value) ? item.value : void 0;
+					const Icon = item.icon;
+					return /* @__PURE__ */ jsxs("li", {
+						"data-slot": "chart-legend-item",
+						className: "col-span-full grid grid-cols-subgrid items-center",
+						children: [
+							Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "size-2.5 shrink-0 rounded-full",
+								style: { backgroundColor: item.color ?? `var(--color-${item.key})` }
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "truncate text-foreground",
+								children: item.label ?? item.key
+							}),
+							showPercent && /* @__PURE__ */ jsx("span", {
+								className: "min-w-[4ch] text-right text-muted-foreground tabular-nums",
+								children: itemValue !== void 0 ? `${total > 0 ? Math.round(itemValue / total * 100) : 0}%` : null
+							}),
+							showValue && /* @__PURE__ */ jsx("span", {
+								className: "min-w-[3ch] text-right font-medium text-foreground tabular-nums",
+								children: itemValue !== void 0 ? valueFormatter(itemValue, item.key) : null
+							})
+						]
+					}, item.key);
+				})
+			}, groupIndex))
+		})
+	});
+}
+/** Builds legend entries for series keys, totalling each series across `data`. */
+function buildSeriesLegendItems(keys, config, data) {
+	return keys.map((key) => {
+		let total = 0;
+		for (const row of data) {
+			const v = Number(row[key]);
+			if (Number.isFinite(v)) total += v;
+		}
+		return {
+			key,
+			label: config[key]?.label ?? key,
+			icon: config[key]?.icon,
+			value: total
+		};
+	});
+}
+/** The `rows` / `columns` legend for a chart's legend props, or `null` for `inline` / hidden. */
+function renderChartLegendList(showLegend, { legendLayout = "inline", legendColumns, legendValue, legendValueFormatter, legendClassName }, items, total) {
+	if (!showLegend || legendLayout === "inline") return null;
+	return /* @__PURE__ */ jsx(ChartLegendList, {
+		items,
+		layout: legendLayout,
+		columns: legendColumns,
+		value: legendValue,
+		valueFormatter: legendValueFormatter,
+		className: legendClassName,
+		total
+	});
+}
+/** A CSS-safe chart id; `ChartContainer` scopes `--color-*` to `[data-chart=<id>]`. */
+function useChartScope() {
+	const id = React$1.useId().replace(/[^a-zA-Z0-9_-]/g, "");
+	return {
+		id,
+		chartId: `chart-${id}`
+	};
+}
+/**
+* Places a list legend below a chart. The wrapper carries the chart's
+* `data-chart` id so the legend sees the same `--color-*` variables.
+*/
+function ChartLegendFrame({ chartId, legend, children }) {
+	if (!legend) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chart-frame",
+		"data-chart": chartId,
+		className: "flex w-full min-w-0 flex-col gap-4",
+		children: [children, legend]
+	});
+}
 function getPayloadConfigFromPayload(config, payload, key) {
 	if (typeof payload !== "object" || payload === null) return;
 	const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
@@ -144,4 +268,4 @@ function getPayloadConfigFromPayload(config, payload, key) {
 	return configLabelKey in config ? config[configLabelKey] : config[key];
 }
 //#endregion
-export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartLegendFrame, ChartLegendList, ChartStyle, ChartTooltip, ChartTooltipContent, buildSeriesLegendItems, renderChartLegendList, useChartScope };

package/dist/components/chart/composed-chart.js

@@ -1,5 +1,5 @@
 import { cn } from "../../utils/cn.js";
-import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartLegendFrame, ChartTooltip, ChartTooltipContent, buildSeriesLegendItems, renderChartLegendList, useChartScope } from "./chart.js";
 import { buildAutoSeriesConfig, coerceSeriesValuesToNumbers, inferCategoryKey } from "./chart-series-data.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -64,7 +64,8 @@ function buildDefaultSeries(config) {
 		type: "bar"
 	}));
 }
-var ComposedChart$1 = React$1.forwardRef(function ComposedChart$2({ data, config: explicitConfig, categoryKey, series: explicitSeries, showTooltip = true, showLegend = false, showGrid = false, hideXAxis = false, hideYAxis = false, hideRightYAxis = true, xAxisTickFormatter, yAxisTickFormatter, rightYAxisTickFormatter, yAxisTickCount, rightYAxisTickCount, yAxisDomain, rightYAxisDomain, rightYAxisTicks, labelFormatter, tooltipFormatter, tooltipContent, defs, barGap, categoryGap, className, margin }, ref) {
+var ComposedChart$1 = React$1.forwardRef(function ComposedChart$2({ data, config: explicitConfig, tooltipRadius, tooltipElevation, categoryKey, series: explicitSeries, showTooltip = true, showLegend = false, showGrid = false, hideXAxis = false, hideYAxis = false, hideRightYAxis = true, xAxisTickFormatter, yAxisTickFormatter, rightYAxisTickFormatter, yAxisTickCount, rightYAxisTickCount, yAxisDomain, rightYAxisDomain, rightYAxisTicks, labelFormatter, tooltipFormatter, tooltipContent, defs, barGap, categoryGap, className, margin, ...legendOptions }, ref) {
+	const scope = useChartScope();
 	const resolvedCategoryKey = React$1.useMemo(() => categoryKey ?? inferCategoryKey(data[0]), [categoryKey, data]);
 	const config = React$1.useMemo(() => buildAutoSeriesConfig(data, resolvedCategoryKey, explicitConfig), [
 		data,
@@ -75,105 +76,115 @@ var ComposedChart$1 = React$1.forwardRef(function ComposedChart$2({ data, config
 	const seriesKeys = React$1.useMemo(() => series.map((item) => item.dataKey), [series]);
 	const chartData = React$1.useMemo(() => coerceSeriesValuesToNumbers(data, seriesKeys), [data, seriesKeys]);
 	const barSeries = React$1.useMemo(() => series.filter((item) => item.type === "bar"), [series]);
-	return /* @__PURE__ */ jsx(ChartContainer, {
-		ref,
-		config,
-		className: cn("w-full", className),
-		children: /* @__PURE__ */ jsxs(ComposedChart, {
-			accessibilityLayer: true,
-			data: chartData,
-			margin,
-			barGap,
-			barCategoryGap: categoryGap,
-			children: [
-				defs,
-				showGrid && /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
-				/* @__PURE__ */ jsx(XAxis, {
-					type: "category",
-					dataKey: resolvedCategoryKey,
-					hide: hideXAxis,
-					tickLine: false,
-					axisLine: false,
-					tickMargin: 8,
-					tickFormatter: xAxisTickFormatter
-				}),
-				/* @__PURE__ */ jsx(YAxis, {
-					yAxisId: "left",
-					type: "number",
-					hide: hideYAxis,
-					tickLine: false,
-					axisLine: false,
-					tickMargin: 8,
-					tickFormatter: yAxisTickFormatter,
-					tickCount: yAxisTickCount,
-					domain: yAxisDomain
-				}),
-				/* @__PURE__ */ jsx(YAxis, {
-					yAxisId: "right",
-					orientation: "right",
-					type: "number",
-					hide: hideRightYAxis,
-					tickLine: false,
-					axisLine: false,
-					tickMargin: 8,
-					tickFormatter: rightYAxisTickFormatter,
-					tickCount: rightYAxisTickCount,
-					domain: rightYAxisDomain,
-					ticks: rightYAxisTicks
-				}),
-				showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
-					cursor: {
-						fill: "var(--color-muted)",
-						fillOpacity: .12
-					},
-					labelFormatter,
-					content: tooltipContent ?? /* @__PURE__ */ jsx(ChartTooltipContent, { formatter: tooltipFormatter })
-				}),
-				showLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
-				series.map((item) => {
-					if (item.type === "bar") {
-						const maxBarSize = resolveBarSize(item.barSize);
-						const rounded = item.rounded ?? true;
-						const stacked = Boolean(item.stackId);
-						const radius = getBarRadius(barSeries.findIndex((bar) => bar.dataKey === item.dataKey), barSeries.length, stacked, rounded);
-						return /* @__PURE__ */ jsx(Bar, {
+	const listLegend = renderChartLegendList(showLegend, legendOptions, buildSeriesLegendItems(seriesKeys, config, chartData));
+	return /* @__PURE__ */ jsx(ChartLegendFrame, {
+		chartId: scope.chartId,
+		legend: listLegend,
+		children: /* @__PURE__ */ jsx(ChartContainer, {
+			ref,
+			id: scope.id,
+			config,
+			className: cn("w-full", className),
+			children: /* @__PURE__ */ jsxs(ComposedChart, {
+				accessibilityLayer: true,
+				data: chartData,
+				margin,
+				barGap,
+				barCategoryGap: categoryGap,
+				children: [
+					defs,
+					showGrid && /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
+					/* @__PURE__ */ jsx(XAxis, {
+						type: "category",
+						dataKey: resolvedCategoryKey,
+						hide: hideXAxis,
+						tickLine: false,
+						axisLine: false,
+						tickMargin: 8,
+						tickFormatter: xAxisTickFormatter
+					}),
+					/* @__PURE__ */ jsx(YAxis, {
+						yAxisId: "left",
+						type: "number",
+						hide: hideYAxis,
+						tickLine: false,
+						axisLine: false,
+						tickMargin: 8,
+						tickFormatter: yAxisTickFormatter,
+						tickCount: yAxisTickCount,
+						domain: yAxisDomain
+					}),
+					/* @__PURE__ */ jsx(YAxis, {
+						yAxisId: "right",
+						orientation: "right",
+						type: "number",
+						hide: hideRightYAxis,
+						tickLine: false,
+						axisLine: false,
+						tickMargin: 8,
+						tickFormatter: rightYAxisTickFormatter,
+						tickCount: rightYAxisTickCount,
+						domain: rightYAxisDomain,
+						ticks: rightYAxisTicks
+					}),
+					showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
+						cursor: {
+							fill: "var(--color-muted)",
+							fillOpacity: .12
+						},
+						labelFormatter,
+						content: tooltipContent ?? /* @__PURE__ */ jsx(ChartTooltipContent, {
+							radius: tooltipRadius,
+							elevation: tooltipElevation,
+							formatter: tooltipFormatter
+						})
+					}),
+					showLegend && !listLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
+					series.map((item) => {
+						if (item.type === "bar") {
+							const maxBarSize = resolveBarSize(item.barSize);
+							const rounded = item.rounded ?? true;
+							const stacked = Boolean(item.stackId);
+							const radius = getBarRadius(barSeries.findIndex((bar) => bar.dataKey === item.dataKey), barSeries.length, stacked, rounded);
+							return /* @__PURE__ */ jsx(Bar, {
+								dataKey: item.dataKey,
+								yAxisId: item.yAxisId ?? DEFAULT_Y_AXIS_ID,
+								stackId: item.stackId,
+								fill: `var(--color-${item.dataKey})`,
+								maxBarSize,
+								radius,
+								children: item.getCellFill && chartData.map((row, index) => {
+									const fill = item.getCellFill?.(row, index);
+									return /* @__PURE__ */ jsx(Cell, { fill: fill ?? `var(--color-${item.dataKey})` }, `${item.dataKey}-${index}`);
+								})
+							}, item.dataKey);
+						}
+						const lineCurve = item.curveType ?? "monotone";
+						const lineStrokeWidth = resolveStrokeWidth(item.strokeWidth);
+						const showDots = item.showDots ?? false;
+						const showActiveDot = item.showActiveDot ?? true;
+						return /* @__PURE__ */ jsx(Line, {
+							type: lineCurve,
 							dataKey: item.dataKey,
 							yAxisId: item.yAxisId ?? DEFAULT_Y_AXIS_ID,
-							stackId: item.stackId,
-							fill: `var(--color-${item.dataKey})`,
-							maxBarSize,
-							radius,
-							children: item.getCellFill && chartData.map((row, index) => {
-								const fill = item.getCellFill?.(row, index);
-								return /* @__PURE__ */ jsx(Cell, { fill: fill ?? `var(--color-${item.dataKey})` }, `${item.dataKey}-${index}`);
-							})
+							stroke: `var(--color-${item.dataKey})`,
+							strokeWidth: lineStrokeWidth,
+							dot: showDots ? {
+								r: 3,
+								strokeWidth: 0,
+								fill: `var(--color-${item.dataKey})`
+							} : false,
+							activeDot: showActiveDot ? {
+								r: 4,
+								strokeWidth: 2,
+								stroke: "var(--color-background)",
+								fill: `var(--color-${item.dataKey})`
+							} : false,
+							isAnimationActive: true
 						}, item.dataKey);
-					}
-					const lineCurve = item.curveType ?? "monotone";
-					const lineStrokeWidth = resolveStrokeWidth(item.strokeWidth);
-					const showDots = item.showDots ?? false;
-					const showActiveDot = item.showActiveDot ?? true;
-					return /* @__PURE__ */ jsx(Line, {
-						type: lineCurve,
-						dataKey: item.dataKey,
-						yAxisId: item.yAxisId ?? DEFAULT_Y_AXIS_ID,
-						stroke: `var(--color-${item.dataKey})`,
-						strokeWidth: lineStrokeWidth,
-						dot: showDots ? {
-							r: 3,
-							strokeWidth: 0,
-							fill: `var(--color-${item.dataKey})`
-						} : false,
-						activeDot: showActiveDot ? {
-							r: 4,
-							strokeWidth: 2,
-							stroke: "var(--color-background)",
-							fill: `var(--color-${item.dataKey})`
-						} : false,
-						isAnimationActive: true
-					}, item.dataKey);
-				})
-			]
+					})
+				]
+			})
 		})
 	});
 });

package/dist/components/chart/donut-chart.js

@@ -1,5 +1,5 @@
 import { cn } from "../../utils/cn.js";
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, renderChartLegendList, useChartScope } from "./chart.js";
 import { buildSeriesChartConfig } from "./chart-colors.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -82,7 +82,8 @@ function DonutLegend({ config, order }) {
 		})
 	});
 }
-var DonutChart = React$1.forwardRef(function DonutChart({ data, config: explicitConfig, innerRadius = "55%", outerRadius = "95%", ringGap = 3, startAngle = 90, endAngle = -270, paddingAngle = 2, cornerRadius = 4, showTooltip = true, showLegend = false, gradient = true, centerLabel, className, margin }, ref) {
+var DonutChart = React$1.forwardRef(function DonutChart({ data, config: explicitConfig, tooltipRadius, tooltipElevation, innerRadius = "55%", outerRadius = "95%", ringGap = 3, startAngle = 90, endAngle = -270, paddingAngle = 2, cornerRadius = 4, showTooltip = true, showLegend = false, gradient = true, centerLabel, className, margin, ...legendOptions }, ref) {
+	const scope = useChartScope();
 	const gradientScope = React$1.useId().replace(/:/g, "");
 	const config = React$1.useMemo(() => deriveConfig(data, explicitConfig), [data, explicitConfig]);
 	const twoRing = React$1.useMemo(() => hasChildren(data), [data]);
@@ -98,13 +99,28 @@ var DonutChart = React$1.forwardRef(function DonutChart({ data, config: explicit
 	const outerRingInnerRadius = formatRadius(mid + gapHalf, outer.isPct);
 	const legendOrder = React$1.useMemo(() => flattenKeys(data), [data]);
 	const uniqueKeys = React$1.useMemo(() => Array.from(new Set(flattenKeys(data))), [data]);
+	const legendItems = [];
+	const seenLegendKeys = /* @__PURE__ */ new Set();
+	for (const d of data.flatMap((p) => [p, ...p.children ?? []])) {
+		if (seenLegendKeys.has(d.key) || !(d.key in config)) continue;
+		seenLegendKeys.add(d.key);
+		legendItems.push({
+			key: d.key,
+			label: config[d.key]?.label ?? d.key,
+			icon: config[d.key]?.icon,
+			value: d.value
+		});
+	}
+	const listLegend = renderChartLegendList(showLegend, legendOptions, legendItems, data.reduce((sum, d) => sum + d.value, 0));
 	const fillFor = (key) => gradient ? `url(#donut-grad-${gradientScope}-${key})` : `var(--color-${key})`;
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: cn("flex w-full flex-col", className),
+		"data-chart": listLegend ? scope.chartId : void 0,
+		className: cn("flex w-full flex-col", listLegend && "gap-4", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "relative min-h-0 flex-1",
 			children: [/* @__PURE__ */ jsx(ChartContainer, {
+				id: scope.id,
 				config,
 				className: "h-full w-full",
 				children: /* @__PURE__ */ jsxs(PieChart, {
@@ -129,6 +145,8 @@ var DonutChart = React$1.forwardRef(function DonutChart({ data, config: explicit
 						showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
 							cursor: false,
 							content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+								radius: tooltipRadius,
+								elevation: tooltipElevation,
 								hideLabel: true,
 								nameKey: "key"
 							})
@@ -167,10 +185,10 @@ var DonutChart = React$1.forwardRef(function DonutChart({ data, config: explicit
 				className: "pointer-events-none absolute inset-0 flex items-center justify-center",
 				children: centerLabel
 			})]
-		}), showLegend && /* @__PURE__ */ jsx(DonutLegend, {
+		}), listLegend ?? (showLegend && /* @__PURE__ */ jsx(DonutLegend, {
 			config,
 			order: legendOrder
-		})]
+		}))]
 	});
 });
 //#endregion