Add a total line to the tooltip of charts with multiple values (#1280)

* base total

* only visible on certain charts

* remove unwanted changes

internal/site/src/components/charts/area-chart.tsx

@@ -29,6 +29,7 @@ export default function AreaChartDefault({
 	domain,
 	legend,
 	itemSorter,
+	showTotal = false,
 }: // logRender = false,
 {
 	chartData: ChartData
@@ -40,6 +41,7 @@ export default function AreaChartDefault({
 	domain?: [number, number]
 	legend?: boolean
 	itemSorter?: (a: any, b: any) => number
+	showTotal?: boolean
 	// logRender?: boolean
 }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
@@ -81,6 +83,7 @@ export default function AreaChartDefault({
 								<ChartTooltipContent
 									labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 									contentFormatter={contentFormatter}
+									showTotal={showTotal}
 								/>
 							}
 						/>
@@ -107,5 +110,5 @@ export default function AreaChartDefault({
 				</ChartContainer>
 			</div>
 		)
-	}, [chartData.systemStats.at(-1), yAxisWidth, maxToggled])
+	}, [chartData.systemStats.at(-1), yAxisWidth, maxToggled, showTotal])
 }

internal/site/src/components/charts/container-chart.tsx

@@ -136,7 +136,7 @@ export default memo(function ContainerChart({
 						labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 						// @ts-expect-error
 						itemSorter={(a, b) => b.value - a.value}
-						content={<ChartTooltipContent filter={filter} contentFormatter={toolTipFormatter} />}
+						content={<ChartTooltipContent filter={filter} contentFormatter={toolTipFormatter} showTotal={true} />}
 					/>
 					{Object.keys(chartConfig).map((key) => {
 						const filtered = filteredKeys.has(key)

internal/site/src/components/charts/mem-chart.tsx

@@ -61,6 +61,7 @@ export default memo(function MemChart({ chartData, showMax }: { chartData: Chart
 									const { value: convertedValue, unit } = formatBytes(value * 1024, false, Unit.Bytes, true)
 									return decimalString(convertedValue, convertedValue >= 100 ? 1 : 2) + " " + unit
 								}}
+								showTotal={true}
 							/>
 						}
 					/>

internal/site/src/components/routes/system.tsx

@@ -684,6 +684,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 								const { value: convertedValue, unit } = formatBytes(value, true, userSettings.unitDisk, false)
 								return `${decimalString(convertedValue, convertedValue >= 100 ? 1 : 2)} ${unit}`
 							}}
+							showTotal={true}
 						/>
 					</ChartCard>
 
@@ -737,6 +738,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 								const { value, unit } = formatBytes(data.value, true, userSettings.unitNet, false)
 								return `${decimalString(value, value >= 100 ? 1 : 2)} ${unit}`
 							}}
+							showTotal={true}
 						/>
 					</ChartCard>
 

internal/site/src/components/ui/chart.tsx

@@ -1,4 +1,5 @@
 import type { JSX } from "react"
+import { useLingui } from "@lingui/react/macro"
 import * as React from "react"
 import * as RechartsPrimitive from "recharts"
 import { chartTimeData, cn } from "@/lib/utils"
@@ -100,6 +101,8 @@ const ChartTooltipContent = React.forwardRef<
 			filter?: string
 			contentFormatter?: (item: any, key: string) => React.ReactNode | string
 			truncate?: boolean
+			showTotal?: boolean
+			totalLabel?: React.ReactNode
 		}
 >(
 	(
@@ -121,11 +124,16 @@ const ChartTooltipContent = React.forwardRef<
 			itemSorter,
 			contentFormatter: content = undefined,
 			truncate = false,
+			showTotal = false,
+			totalLabel,
 		},
 		ref
 	) => {
 		// const { config } = useChart()
 		const config = {}
+		const { t } = useLingui()
+		const totalLabelNode = totalLabel ?? t`Total`
+		const totalName = typeof totalLabelNode === "string" ? totalLabelNode : t`Total`
 
 		React.useMemo(() => {
 			if (filter) {
@@ -137,6 +145,76 @@ const ChartTooltipContent = React.forwardRef<
 			}
 		}, [itemSorter, payload])
 
+		const totalValueDisplay = React.useMemo(() => {
+			if (!showTotal || !payload?.length) {
+				return null
+			}
+
+			let totalValue = 0
+			let hasNumericValue = false
+			const aggregatedNestedValues: Record<string, number> = {}
+
+			for (const item of payload) {
+				const numericValue = typeof item.value === "number" ? item.value : Number(item.value)
+				if (Number.isFinite(numericValue)) {
+					totalValue += numericValue
+					hasNumericValue = true
+				}
+
+				if (content && item?.payload) {
+					const payloadKey = `${nameKey || item.name || item.dataKey || "value"}`
+					const nestedPayload = (item.payload as Record<string, unknown> | undefined)?.[payloadKey]
+
+					if (nestedPayload && typeof nestedPayload === "object") {
+						for (const [nestedKey, nestedValue] of Object.entries(nestedPayload)) {
+							if (typeof nestedValue === "number" && Number.isFinite(nestedValue)) {
+								aggregatedNestedValues[nestedKey] = (aggregatedNestedValues[nestedKey] ?? 0) + nestedValue
+							}
+						}
+					}
+				}
+			}
+
+			if (!hasNumericValue) {
+				return null
+			}
+
+			const totalKey = "__total__"
+			const totalItem: any = {
+				value: totalValue,
+				name: totalName,
+				dataKey: totalKey,
+				color,
+			}
+
+			if (content) {
+				const basePayload =
+					payload[0]?.payload && typeof payload[0].payload === "object"
+						? { ...(payload[0].payload as Record<string, unknown>) }
+						: {}
+				totalItem.payload = {
+					...basePayload,
+					[totalKey]: aggregatedNestedValues,
+				}
+			}
+
+			if (typeof formatter === "function") {
+				return formatter(
+					totalValue,
+					totalName,
+					totalItem,
+					payload.length,
+					totalItem.payload ?? payload[0]?.payload
+				)
+			}
+
+			if (content) {
+				return content(totalItem, totalKey)
+			}
+
+			return `${totalValue.toLocaleString()}${unit ?? ""}`
+		}, [color, content, formatter, nameKey, payload, showTotal, totalName, unit])
+
 		const tooltipLabel = React.useMemo(() => {
 			if (hideLabel || !payload?.length) {
 				return null
@@ -174,6 +252,12 @@ const ChartTooltipContent = React.forwardRef<
 				)}
 			>
 				{!nestLabel ? tooltipLabel : null}
+				{totalValueDisplay ? (
+					<div className="flex items-center justify-between gap-2 font-medium text-foreground">
+						<span className="text-muted-foreground">{totalLabelNode}</span>
+						<span className="font-semibold">{totalValueDisplay}</span>
+					</div>
+				) : null}
 				<div className="grid gap-1.5">
 					{payload.map((item, index) => {
 						const key = `${nameKey || item.name || item.dataKey || "value"}`

internal/site/src/locales/ar/ar.po

@@ -1085,6 +1085,11 @@ msgstr "تسمح الرموز المميزة للوكلاء بالاتصال و
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "تُستخدم الرموز المميزة والبصمات للمصادقة على اتصالات WebSocket إلى المحور."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "إجمالي البيانات المستلمة لكل واجهة"

internal/site/src/locales/bg/bg.po

@@ -1085,6 +1085,11 @@ msgstr "Токените позволяват на агентите да се с
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "Токените и пръстовите отпечатъци се използват за удостоверяване на WebSocket връзките към концентратора."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Общо получени данни за всеки интерфейс"

internal/site/src/locales/cs/cs.po

@@ -1085,6 +1085,11 @@ msgstr "Tokeny umožňují agentům připojení a registraci. Otisky jsou stabil
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "Tokeny a otisky slouží k ověření připojení WebSocket k uzlu."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Celkový přijatý objem dat pro každé rozhraní"

internal/site/src/locales/da/da.po

@@ -1085,6 +1085,11 @@ msgstr ""
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr ""
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Samlet modtaget data for hver interface"

internal/site/src/locales/de/de.po

@@ -1085,6 +1085,11 @@ msgstr "Tokens ermöglichen es Agents, sich zu verbinden und zu registrieren. Fi
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "Tokens und Fingerabdrücke werden verwendet, um WebSocket-Verbindungen zum Hub zu authentifizieren."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Gesamtdatenmenge für jede Schnittstelle empfangen"

internal/site/src/locales/en/en.po

@@ -1080,6 +1080,11 @@ msgstr "Tokens allow agents to connect and register. Fingerprints are stable ide
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr "Total"
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Total data received for each interface"

internal/site/src/locales/es/es.po

@@ -1085,6 +1085,11 @@ msgstr "Los tokens permiten que los agentes se conecten y registren. Las huellas
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "Los tokens y las huellas digitales se utilizan para autenticar las conexiones WebSocket al hub."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Datos totales recibidos por cada interfaz"

internal/site/src/locales/fa/fa.po

@@ -1085,6 +1085,11 @@ msgstr "توکن‌ها به عامل‌ها اجازه اتصال و ثبت‌
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "توکن‌ها و اثرات انگشت برای احراز هویت اتصالات WebSocket به هاب استفاده می‌شوند."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "داده‌های کل دریافت شده برای هر رابط"

internal/site/src/locales/fr/fr.po

@@ -1085,6 +1085,11 @@ msgstr "Les tokens permettent aux agents de se connecter et de s'enregistrer. Le
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "Les tokens et les empreintes sont utilisés pour authentifier les connexions WebSocket vers le hub."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Données totales reçues pour chaque interface"

internal/site/src/locales/hr/hr.po

@@ -1085,6 +1085,11 @@ msgstr ""
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr ""
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Ukupni podaci primljeni za svako sučelje"

internal/site/src/locales/hu/hu.po

@@ -1085,6 +1085,11 @@ msgstr ""
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr ""
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Összes fogadott adat minden interfészenként"

internal/site/src/locales/is/is.po

@@ -1085,6 +1085,11 @@ msgstr ""
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr ""
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr ""

internal/site/src/locales/it/it.po

@@ -1085,6 +1085,11 @@ msgstr "I token consentono agli agenti di connettersi e registrarsi. Le impronte
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "I token e le impronte digitali vengono utilizzati per autenticare le connessioni WebSocket all'hub."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Dati totali ricevuti per ogni interfaccia"

internal/site/src/locales/ja/ja.po

@@ -1085,6 +1085,11 @@ msgstr "トークンはエージェントの接続と登録を可能にします
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "トークンとフィンガープリントは、ハブへのWebSocket接続の認証に使用されます。"
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "各インターフェースの総受信データ量"

internal/site/src/locales/ko/ko.po

@@ -1085,6 +1085,11 @@ msgstr "토큰은 에이전트가 연결하고 등록할 수 있도록 합니다
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "토큰과 지문은 허브에 대한 WebSocket 연결을 인증하는 데 사용됩니다."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "각 인터페이스별 총합 다운로드 데이터량"

internal/site/src/locales/nl/nl.po

@@ -1085,6 +1085,11 @@ msgstr "Tokens staan agenten toe om verbinding te maken met en te registreren. V
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "Tokens en vingerafdrukken worden gebruikt om WebSocket verbindingen te verifiëren naar de hub."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Totaal ontvangen gegevens per interface"

internal/site/src/locales/no/no.po

@@ -1085,6 +1085,11 @@ msgstr ""
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr ""
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Totalt mottatt data for hvert grensesnitt"

internal/site/src/locales/pl/pl.po

@@ -1085,6 +1085,11 @@ msgstr "Tokeny umożliwiają agentom łączenie się i rejestrację. Odciski pal
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "Tokeny i odciski palców (fingerprinty) służą do uwierzytelniania połączeń WebSocket z hubem."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Całkowita ilość danych odebranych dla każdego interfejsu"

internal/site/src/locales/pt/pt.po

@@ -1085,6 +1085,11 @@ msgstr "Os tokens permitem que os agentes se conectem e registrem. As impressõe
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "Tokens e impressões digitais são usados para autenticar conexões WebSocket ao hub."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Dados totais recebidos para cada interface"

internal/site/src/locales/ru/ru.po

@@ -1085,6 +1085,11 @@ msgstr "Токены позволяют агентам подключаться
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "Токены и отпечатки используются для аутентификации соединений WebSocket с хабом."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Общий объем полученных данных для каждого интерфейса"

internal/site/src/locales/sl/sl.po

@@ -1085,6 +1085,11 @@ msgstr ""
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr ""
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Skupni prejeti podatki za vsak vmesnik"

internal/site/src/locales/sv/sv.po

@@ -1085,6 +1085,11 @@ msgstr ""
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr ""
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Totalt mottagen data för varje gränssnitt"

internal/site/src/locales/tr/tr.po

@@ -1085,6 +1085,11 @@ msgstr "Token'lar agentların bağlanıp kaydolmasına izin verir. Parmak izleri
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "Token'lar ve parmak izleri hub'a WebSocket bağlantılarını doğrulamak için kullanılır."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Her arayüz için alınan toplam veri"

internal/site/src/locales/uk/uk.po

@@ -1085,6 +1085,11 @@ msgstr "Токени дозволяють агентам підключатис
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "Токени та відбитки використовуються для автентифікації WebSocket з'єднань до хабу."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Загальний обсяг отриманих даних для кожного інтерфейсу"

internal/site/src/locales/vi/vi.po

@@ -1085,6 +1085,11 @@ msgstr "Token cho phép các tác nhân kết nối và đăng ký. Vân tay là
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "Token và vân tay được sử dụng để xác thực các kết nối WebSocket đến trung tâm."
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "Tổng dữ liệu nhận được cho mỗi giao diện"

internal/site/src/locales/zh-CN/zh-CN.po

@@ -1085,6 +1085,11 @@ msgstr "令牌允许客户端连接和注册。指纹是每个系统唯一的稳
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "令牌与指纹用于验证到中心的 WebSocket 连接。"
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "每个接口的总接收数据量"

internal/site/src/locales/zh-HK/zh-HK.po

@@ -1085,6 +1085,11 @@ msgstr "令牌允許代理程式連接和註冊。指紋是每個系統唯一的
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "令牌和指紋用於驗證到中心的WebSocket連接。"
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "每個介面的總接收資料量"

internal/site/src/locales/zh/zh.po

@@ -1085,6 +1085,11 @@ msgstr "令牌允許代理程式連線和註冊。指紋是每個系統的唯一
 msgid "Tokens and fingerprints are used to authenticate WebSocket connections to the hub."
 msgstr "令牌和指紋被用於驗證到 Hub 的 WebSocket 連線。"
 
+#: src/components/ui/chart.tsx
+#: src/components/ui/chart.tsx
+msgid "Total"
+msgstr ""
+
 #: src/components/routes/system/network-sheet.tsx
 msgid "Total data received for each interface"
 msgstr "每個介面的總接收資料量"