refactor load average handling (#982)

- Transitioned from individual load average fields (LoadAvg1, LoadAvg5,
LoadAvg15) to a single array (LoadAvg)
- Ensure load is displayed when all zero values.

beszel/site/src/components/charts/load-average-chart.tsx

@@ -9,31 +9,30 @@ import {
 	xAxis,
 } from "@/components/ui/chart"
 import { useYAxisWidth, cn, formatShortDate, toFixedFloat, decimalString, chartMargin } from "@/lib/utils"
-import { ChartData } from "@/types"
+import { ChartData, SystemStats } from "@/types"
 import { memo } from "react"
 import { t } from "@lingui/core/macro"
 
 export default memo(function LoadAverageChart({ chartData }: { chartData: ChartData }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
-	if (chartData.systemStats.length === 0) {
-		return null
-	}
-
-	const keys = {
-		l1: {
+	const keys: { legacy: keyof SystemStats; color: string; label: string }[] = [
+		{
+			legacy: "l1",
 			color: "hsl(271, 81%, 60%)", // Purple
 			label: t({ message: `1 min`, comment: "Load average" }),
 		},
-		l5: {
+		{
+			legacy: "l5",
 			color: "hsl(217, 91%, 60%)", // Blue
 			label: t({ message: `5 min`, comment: "Load average" }),
 		},
-		l15: {
+		{
+			legacy: "l15",
 			color: "hsl(25, 95%, 53%)", // Orange
 			label: t({ message: `15 min`, comment: "Load average" }),
 		},
-	}
+	]
 
 	return (
 		<div>
@@ -69,16 +68,22 @@ export default memo(function LoadAverageChart({ chartData }: { chartData: ChartD
 							/>
 						}
 					/>
-					{Object.entries(keys).map(([key, value]: [string, { color: string; label: string }]) => {
+					{keys.map(({ legacy, color, label }, i) => {
+						const dataKey = (value: { stats: SystemStats }) => {
+							if (chartData.agentVersion.patch < 1) {
+								return value.stats?.[legacy]
+							}
+							return value.stats?.la?.[i] ?? value.stats?.[legacy]
+						}
 						return (
 							<Line
-								key={key}
-								dataKey={`stats.${key}`}
-								name={value.label}
+								key={i}
+								dataKey={dataKey}
+								name={label}
 								type="monotoneX"
 								dot={false}
 								strokeWidth={1.5}
-								stroke={value.color}
+								stroke={color}
 								isAnimationActive={false}
 							/>
 						)