update load avg display and include it in longer records

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

@@ -8,16 +8,9 @@ import {
 	ChartTooltipContent,
 	xAxis,
 } from "@/components/ui/chart"
-import {
-	useYAxisWidth,
-	cn,
-	formatShortDate,
-	toFixedWithoutTrailingZeros,
-	decimalString,
-	chartMargin,
-} from "@/lib/utils"
+import { useYAxisWidth, cn, formatShortDate, toFixedFloat, decimalString, chartMargin } from "@/lib/utils"
 import { ChartData } from "@/types"
-import { memo, useMemo } from "react"
+import { memo } from "react"
 import { t } from "@lingui/core/macro"
 
 export default memo(function LoadAverageChart({ chartData }: { chartData: ChartData }) {
@@ -27,46 +20,20 @@ export default memo(function LoadAverageChart({ chartData }: { chartData: ChartD
 		return null
 	}
 
-	/** Format load average data for chart */
-	const newChartData = useMemo(() => {
-		const newChartData = { data: [], colors: {} } as {
-			data: Record<string, number | string>[]
-			colors: Record<string, string>
-		}
-		
-		// Define colors for the three load average lines
-		const colors = {
-			"1m": "hsl(25, 95%, 53%)",   // Orange for 1-minute
-			"5m": "hsl(217, 91%, 60%)",  // Blue for 5-minute  
-			"15m": "hsl(271, 81%, 56%)", // Purple for 15-minute
-		}
-
-		for (let data of chartData.systemStats) {
-			let newData = { created: data.created } as Record<string, number | string>
-			
-			// Add load average values if they exist and stats is not null
-			if (data.stats && data.stats.l1 !== undefined) {
-				newData["1m"] = data.stats.l1
-			}
-			if (data.stats && data.stats.l5 !== undefined) {
-				newData["5m"] = data.stats.l5
-			}
-			if (data.stats && data.stats.l15 !== undefined) {
-				newData["15m"] = data.stats.l15
-			}
-			
-			newChartData.data.push(newData)
-		}
-		
-		newChartData.colors = colors
-		return newChartData
-	}, [chartData])
-
-	const loadKeys = ["1m", "5m", "15m"].filter(key => 
-		newChartData.data.some(data => data[key] !== undefined)
-	)
-
-	// console.log('rendered at', new Date())
+	const keys = {
+		l1: {
+			color: "hsl(271, 81%, 60%)", // Purple
+			label: t`1 min`,
+		},
+		l5: {
+			color: "hsl(217, 91%, 60%)", // Blue
+			label: t`5 min`,
+		},
+		l15: {
+			color: "hsl(25, 95%, 53%)", // Orange
+			label: t`15 min`,
+		},
+	}
 
 	return (
 		<div>
@@ -75,7 +42,7 @@ export default memo(function LoadAverageChart({ chartData }: { chartData: ChartD
 					"opacity-100": yAxisWidth,
 				})}
 			>
-				<LineChart accessibilityLayer data={newChartData.data} margin={chartMargin}>
+				<LineChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
 						direction="ltr"
@@ -84,8 +51,7 @@ export default memo(function LoadAverageChart({ chartData }: { chartData: ChartD
 						domain={[0, "auto"]}
 						width={yAxisWidth}
 						tickFormatter={(value) => {
-							const val = toFixedWithoutTrailingZeros(value, 2)
-							return updateYAxisWidth(val)
+							return updateYAxisWidth(String(toFixedFloat(value, 2)))
 						}}
 						tickLine={false}
 						axisLine={false}
@@ -95,7 +61,7 @@ export default memo(function LoadAverageChart({ chartData }: { chartData: ChartD
 						animationEasing="ease-out"
 						animationDuration={150}
 						// @ts-ignore
-						itemSorter={(a, b) => b.value - a.value}
+						// itemSorter={(a, b) => b.value - a.value}
 						content={
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
@@ -103,21 +69,23 @@ export default memo(function LoadAverageChart({ chartData }: { chartData: ChartD
 							/>
 						}
 					/>
-					{loadKeys.map((key) => (
-						<Line
-							key={key}
-							dataKey={key}
-							name={key === "1m" ? t`1 min` : key === "5m" ? t`5 min` : t`15 min`}
-							type="monotoneX"
-							dot={false}
-							strokeWidth={1.5}
-							stroke={newChartData.colors[key]}
-							isAnimationActive={false}
-						/>
-					))}
+					{Object.entries(keys).map(([key, value]: [string, { color: string; label: string }]) => {
+						return (
+							<Line
+								key={key}
+								dataKey={`stats.${key}`}
+								name={value.label}
+								type="monotoneX"
+								dot={false}
+								strokeWidth={1.5}
+								stroke={value.color}
+								isAnimationActive={false}
+							/>
+						)
+					})}
 					<ChartLegend content={<ChartLegendContent />} />
 				</LineChart>
 			</ChartContainer>
 		</div>
 	)
-}) 
+})