finish ui design

2025-08-08 18:06:14 +02:00 · 2025-07-10 05:19:22 +02:00
parent aa6b171614
commit e7dda680ad
16 changed files with 653 additions and 86 deletions
--- a/ui/src/hooks/useChartData.tsx
+++ b/ui/src/hooks/useChartData.tsx
@@ -0,0 +1,106 @@
+import type { StatusMessage } from "@/services/types";
+import { addRealtimeData, getRealtimeData } from "@/services/data_service";
+import { formatTimestamp } from "@/services/utils";
+import { useEffect } from "react";
+
+export type ChartData = {
+    labels: string[];
+    datasets: {
+        label: string;
+        data: number[];
+        color: string;
+    }[];
+};
+
+type ChartDataReturns = {
+    cpuData: ChartData;
+    memoryData: ChartData;
+    networkData: ChartData;
+};
+
+export function useChartData(data: StatusMessage | null): ChartDataReturns {
+    useEffect(() => {
+        if (!data) return;
+
+        addRealtimeData(data);
+    }, [data]);
+
+    const cpuPoints = getRealtimeData("cpu");
+    const cpuUserPoints = getRealtimeData("cpu_user");
+    const cpuSystemPoints = getRealtimeData("cpu_system");
+    const cpuIdlePoints = getRealtimeData("cpu_idle");
+    const cpuStealPoints = getRealtimeData("cpu_steal");
+    const cpuIowaitPoints = getRealtimeData("cpu_iowait");
+    const memoryPoints = getRealtimeData("memory");
+    const swapPoints = getRealtimeData("swap");
+    const networkUpPoints = getRealtimeData("network_up");
+    const networkDownPoints = getRealtimeData("network_down");
+
+    return {
+        cpuData: {
+            labels: cpuPoints.map((p) => formatTimestamp(p.timestamp)),
+            datasets: [
+                {
+                    label: "Total CPU (%)",
+                    data: cpuPoints.map((p) => p.value),
+                    color: "#3b82f6",
+                },
+                {
+                    label: "User (%)",
+                    data: cpuUserPoints.map((p) => p.value),
+                    color: "#10b981",
+                },
+                {
+                    label: "System (%)",
+                    data: cpuSystemPoints.map((p) => p.value),
+                    color: "#f59e0b",
+                },
+                {
+                    label: "I/O Wait (%)",
+                    data: cpuIowaitPoints.map((p) => p.value),
+                    color: "#ef4444",
+                },
+                {
+                    label: "Steal (%)",
+                    data: cpuStealPoints.map((p) => p.value),
+                    color: "#8b5cf6",
+                },
+                {
+                    label: "Idle (%)",
+                    data: cpuIdlePoints.map((p) => p.value),
+                    color: "#6b7280",
+                },
+            ],
+        },
+        memoryData: {
+            labels: memoryPoints.map((p) => formatTimestamp(p.timestamp)),
+            datasets: [
+                {
+                    label: "Memory Usage (%)",
+                    data: memoryPoints.map((p) => p.value),
+                    color: "#10b981",
+                },
+                {
+                    label: "Swap Usage (%)",
+                    data: swapPoints.map((p) => p.value),
+                    color: "#f59e0b",
+                },
+            ],
+        },
+        networkData: {
+            labels: networkUpPoints.map((p) => formatTimestamp(p.timestamp)),
+            datasets: [
+                {
+                    label: "Upload (B/s)",
+                    data: networkUpPoints.map((p) => p.value),
+                    color: "#ef4444",
+                },
+                {
+                    label: "Download (B/s)",
+                    data: networkDownPoints.map((p) => p.value),
+                    color: "#3b82f6",
+                },
+            ],
+        },
+    };
+}