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/charts/area-chart.tsx

@@ -30,6 +30,7 @@ export default function AreaChartDefault({
 	domain,
 	legend,
 	itemSorter,
+	showTotal = false,
 	reverseStackOrder = false,
 	hideYAxis = false,
 }: // logRender = false,
@@ -42,6 +43,7 @@ export default function AreaChartDefault({
 		dataPoints?: DataPoint[]
 		domain?: [number, number]
 		legend?: boolean
+		showTotal?: boolean
 		itemSorter?: (a: any, b: any) => number
 		reverseStackOrder?: boolean
 		hideYAxis?: boolean
@@ -65,18 +67,25 @@ export default function AreaChartDefault({
 						"ps-4": hideYAxis,
 					})}
 				>
-					<AreaChart reverseStackOrder={reverseStackOrder} accessibilityLayer data={chartData.systemStats} margin={hideYAxis ? { ...chartMargin, left: 5 } : chartMargin}>
+					<AreaChart
+						reverseStackOrder={reverseStackOrder}
+						accessibilityLayer
+						data={chartData.systemStats}
+						margin={hideYAxis ? { ...chartMargin, left: 5 } : chartMargin}
+					>
 						<CartesianGrid vertical={false} />
-						{!hideYAxis && <YAxis
-							direction="ltr"
-							orientation={chartData.orientation}
-							className="tracking-tighter"
-							width={yAxisWidth}
-							domain={domain ?? [0, max ?? "auto"]}
-							tickFormatter={(value, index) => updateYAxisWidth(tickFormatter(value, index))}
-							tickLine={false}
-							axisLine={false}
-						/>}
+						{!hideYAxis && (
+							<YAxis
+								direction="ltr"
+								orientation={chartData.orientation}
+								className="tracking-tighter"
+								width={yAxisWidth}
+								domain={domain ?? [0, max ?? "auto"]}
+								tickFormatter={(value, index) => updateYAxisWidth(tickFormatter(value, index))}
+								tickLine={false}
+								axisLine={false}
+							/>
+						)}
 						{xAxis(chartData)}
 						<ChartTooltip
 							animationEasing="ease-out"
@@ -87,6 +96,7 @@ export default function AreaChartDefault({
 								<ChartTooltipContent
 									labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 									contentFormatter={contentFormatter}
+									showTotal={showTotal}
 								/>
 							}
 						/>
@@ -114,5 +124,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

@@ -139,7 +139,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}
 							/>
 						}
 					/>