add per-interface and cumulative network traffic charts (#926)

Co-authored-by: Sven van Ginkel <svenvanginkel@icloud.com>

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

@@ -1,9 +1,16 @@
-import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
-import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart"
-import { cn, formatShortDate, chartMargin } from "@/lib/utils"
-import { useYAxisWidth } from "./hooks"
-import { ChartData, SystemStatsRecord } from "@/types"
 import { useMemo } from "react"
+import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
+import {
+	ChartContainer,
+	ChartLegend,
+	ChartLegendContent,
+	ChartTooltip,
+	ChartTooltipContent,
+	xAxis,
+} from "@/components/ui/chart"
+import { chartMargin, cn, formatShortDate } from "@/lib/utils"
+import type { ChartData, SystemStatsRecord } from "@/types"
+import { useYAxisWidth } from "./hooks"
 
 export type DataPoint = {
 	label: string
@@ -20,6 +27,8 @@ export default function AreaChartDefault({
 	contentFormatter,
 	dataPoints,
 	domain,
+	legend,
+	itemSorter,
 }: // logRender = false,
 {
 	chartData: ChartData
@@ -29,10 +38,13 @@ export default function AreaChartDefault({
 	contentFormatter: ({ value, payload }: { value: number; payload: SystemStatsRecord }) => string
 	dataPoints?: DataPoint[]
 	domain?: [number, number]
+	legend?: boolean
+	itemSorter?: (a: any, b: any) => number
 	// logRender?: boolean
 }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: ignore
 	return useMemo(() => {
 		if (chartData.systemStats.length === 0) {
 			return null
@@ -63,6 +75,8 @@ export default function AreaChartDefault({
 						<ChartTooltip
 							animationEasing="ease-out"
 							animationDuration={150}
+							// @ts-expect-error
+							itemSorter={itemSorter}
 							content={
 								<ChartTooltipContent
 									labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
@@ -70,11 +84,14 @@ export default function AreaChartDefault({
 								/>
 							}
 						/>
-						{dataPoints?.map((dataPoint, i) => {
-							const color = `var(--chart-${dataPoint.color})`
+						{dataPoints?.map((dataPoint) => {
+							let { color } = dataPoint
+							if (typeof color === "number") {
+								color = `var(--chart-${color})`
+							}
 							return (
 								<Area
-									key={i}
+									key={dataPoint.label}
 									dataKey={dataPoint.dataKey}
 									name={dataPoint.label}
 									type="monotoneX"
@@ -85,7 +102,7 @@ export default function AreaChartDefault({
 								/>
 							)
 						})}
-						{/* <ChartLegend content={<ChartLegendContent />} /> */}
+						{legend && <ChartLegend content={<ChartLegendContent />} />}
 					</AreaChart>
 				</ChartContainer>
 			</div>