fix(beszel): deduplicate tooltip entries and round indicator pill

Non-stacked charts produce duplicate Recharts payload entries (stroke +
fill). Deduplicate by dataKey keeping the first entry (correct color).
Also increase indicator borderRadius for a fully rounded pill.
This commit is contained in:
Thomas Camlong committed 2026-06-15 14:58:27 +02:00
1 parent 90ceaf5fe8
commit 824f31d6aa
1 file changed
+7 -5
@@ -13,13 +13,11 @@ const styles: Record<string, CSSProperties> = {
fontSize: 12,
lineHeight: 1.5,
pointerEvents: "none",
maxHeight: 320,
overflowY: "auto",
overflowX: "hidden",
},
header: { marginBottom: 4, fontWeight: 500, color: "var(--mantine-color-gray-2)" },
header: { marginBottom: 4, fontWeight: 550, color: "var(--mantine-color-gray-2)" },
row: { display: "flex", alignItems: "center", gap: 6, padding: "1px 0" },
indicator: { width: 3, height: 14, borderRadius: 1, flexShrink: 0 },
indicator: { width: 5, height: 14, borderRadius: 5, flexShrink: 0 },
name: {
flex: 1,
color: "var(--mantine-color-gray-3)",
@@ -78,7 +76,11 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
if (!isActive) return null;
const sorted = [...(payload ?? [])].filter((p) => p.value > 0).toSorted((a, b) => b.value - a.value);
const deduped = new Map<string, TooltipPayloadItem>();
for (const p of (payload ?? []).filter((p) => p.value > 0)) {
if (!deduped.has(p.dataKey)) deduped.set(p.dataKey, p);
}
const sorted = [...deduped.values()].toSorted((a, b) => b.value - a.value);
if (!sorted.length) return null;