add a total line to the tooltip of charts with multiple values #1280

Co-authored-by: Titouan V <titouan.verhille@gmail.com>

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

@@ -1,8 +1,10 @@
 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"
 import type { ChartData } from "@/types"
+import { Separator } from "./separator"
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const
@@ -100,6 +102,8 @@ const ChartTooltipContent = React.forwardRef<
 		filter?: string
 		contentFormatter?: (item: any, key: string) => React.ReactNode | string
 		truncate?: boolean
+		showTotal?: boolean
+		totalLabel?: React.ReactNode
 	}
 >(
 	(
@@ -121,11 +125,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) {
@@ -141,6 +150,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
@@ -242,6 +321,15 @@ const ChartTooltipContent = React.forwardRef<
 							</div>
 						)
 					})}
+					{totalValueDisplay ? (
+						<>
+							<Separator className="mt-0.5" />
+							<div className="flex items-center justify-between gap-2 -mt-0.75 font-medium">
+								<span className="text-muted-foreground ps-3">{totalLabelNode}</span>
+								<span>{totalValueDisplay}</span>
+							</div>
+						</>
+					) : null}
 				</div>
 			</div>
 		)