feat(dashboard): add ram tracking to graph

Co-authored-by: Ona <no-reply@ona.com>

apps/dashboard/src/App.tsx

@@ -375,7 +375,7 @@ function TFLTile({ className }: { className?: string }) {
 	return (
 		<Tile
 			className={cn(
-				"gap-x-1 pt-1 h-full col-span-2 row-span-1 grid grid-cols-[min-content_1fr] auto-rows-min overflow-y-auto",
+				"pt-1 h-full col-span-2 row-span-1 grid grid-cols-[min-content_1fr] auto-rows-min overflow-y-auto",
 				className,
 			)}
 		>
@@ -425,7 +425,7 @@ function TFLDistruptionItem({ lineId, reason, severity }: { lineId: TubeLine; re
 			lineStyleClass = "bg-purple-800"
 			break
 		case "northern":
-			lineStyleClass = "bg-black"
+			lineStyleClass = "bg-black dark:bg-neutral-200 text-black"
 			break
 		case "piccadilly":
 			lineStyleClass = "bg-blue-900"
@@ -498,7 +498,7 @@ function TFLDistruptionItem({ lineId, reason, severity }: { lineId: TubeLine; re
 			<div className="h-full flex items-center justify-center px-2 py-0.5">
 				<p
 					className={cn(
-						"text-neutral-200 text-xl uppercase font-bold w-full text-center px-1 rounded-lg",
+						"text-neutral-200 text-sm uppercase w-full text-center px-1 rounded-lg",
 						lineStyleClass,
 					)}
 				>
@@ -534,10 +534,16 @@ function SystemTile({
 	const onCanvasRef = (elem: HTMLCanvasElement | null) => {
 		if (!elem || chartRef.current) return
 
-		const fillGradient = elem?.getContext("2d")?.createLinearGradient(0, 0, 0, elem.height)
+		const cpuFillGradient = elem?.getContext("2d")?.createLinearGradient(0, 0, 0, elem.height)
-		fillGradient?.addColorStop(0, "#2dd4bf")
+		cpuFillGradient?.addColorStop(0, "#2dd4bf")
-		fillGradient?.addColorStop(0.5, "rgba(45, 212, 191, 0)")
+		cpuFillGradient?.addColorStop(0.5, "rgba(45, 212, 191, 0)")
-		fillGradient?.addColorStop(1, "rgba(45, 212, 191, 0)")
+		cpuFillGradient?.addColorStop(1, "rgba(45, 212, 191, 0)")
+
+		const ramFillGradient = elem?.getContext("2d")?.createLinearGradient(0, 0, 0, elem.height)
+		ramFillGradient?.addColorStop(0, "#a78bfa")
+		ramFillGradient?.addColorStop(0.5, "rgba(167, 139, 250, 0)")
+		ramFillGradient?.addColorStop(1, "rgba(167, 139, 250, 0)")
+
 		chartRef.current = new Chart(elem, {
 			type: "line",
 			data: {
@@ -546,10 +552,17 @@ function SystemTile({
 					{
 						data: Array.from({ length: 20 }, (_, __) => null),
 						fill: true,
-						backgroundColor: fillGradient,
+						backgroundColor: cpuFillGradient,
 						borderColor: "#2dd4bf",
 						tension: 0.1,
 					},
+					{
+						data: Array.from({ length: 20 }, (_, __) => null),
+						fill: true,
+						backgroundColor: ramFillGradient,
+						borderColor: "#a78bfa",
+						tension: 0.1,
+					},
 				],
 			},
 			options: {
@@ -576,19 +589,30 @@ function SystemTile({
 
 	useLayoutEffect(() => {
 		const cpu = beszelSystemsData?.info.cpu
-		if (!chartRef.current || cpu === undefined) return
+		const ram = beszelSystemsData?.info.ram
+		if (!chartRef.current || cpu === undefined || ram === undefined) return
 
-		const dataset = chartRef.current.data.datasets[0]
+		const cpuDataset = chartRef.current.data.datasets[0]
+		const ramDataset = chartRef.current.data.datasets[1]
 
-		const nextData = Array.from({ length: 20 }, (_, i) => {
+		const nextCpuData = Array.from({ length: 20 }, (_, i) => {
 			if (i === 19) {
 				return null
 			}
-			return dataset.data[i + 1]
+			return cpuDataset.data[i + 1]
 		})
-		nextData[19] = cpu
+		nextCpuData[19] = cpu
 
-		dataset.data = nextData
+		const nextRamData = Array.from({ length: 20 }, (_, i) => {
+			if (i === 19) {
+				return null
+			}
+			return ramDataset.data[i + 1]
+		})
+		nextRamData[19] = ram
+
+		cpuDataset.data = nextCpuData
+		ramDataset.data = nextRamData
 		chartRef.current.update()
 	})
 
@@ -621,9 +645,9 @@ function SystemTile({
 
 	return (
 		<Tile className={cn("h-full flex flex-col justify-start items-start", className)}>
-			<div className="grid grid-cols-6 px-4 pt-3 w-full">
+			<div className="grid grid-cols-6 px-3 pt-2 w-full">
-				<div className="col-span-3 flex flex-row items-center space-x-2">
+				<div className="col-span-3 self-start flex flex-row items-center space-x-2">
-					<p className="text-2xl">{displayName}</p>
+					<p className="leading-none tracking-tight text-2xl">{displayName}</p>
 					<div
 						className={cn("size-2 border rounded-full", {
 							"animate-pulse border-green-300 bg-green-500": beszelSystemsData.status === "up",