status-monitor/ui/src/hooks/useChartData.tsx

import type { StatusMessage } from "@/services/types";
import { addDataPoint, getRealtimeData } from "@/services/store";
import { formatTimestamp, calcPercentage } 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;

        addDataPoint(data);
    }, [data]);

    const realtimeData = getRealtimeData();

    return {
        cpuData: {
            labels: realtimeData.map((p) => formatTimestamp(p.timestamp)),
            datasets: [
                {
                    label: "Total CPU (%)",
                    data: realtimeData.map(({ metrics }) => metrics.cpu.usage),
                    color: "#3b82f6",
                },
                {
                    label: "User (%)",
                    data: realtimeData.map(
                        ({ metrics }) => metrics.cpu.breakdown.user,
                    ),
                    color: "#10b981",
                },
                {
                    label: "System (%)",
                    data: realtimeData.map(
                        ({ metrics }) => metrics.cpu.breakdown.system,
                    ),
                    color: "#f59e0b",
                },
                {
                    label: "I/O Wait (%)",
                    data: realtimeData.map(
                        ({ metrics }) => metrics.cpu.breakdown.iowait,
                    ),
                    color: "#ef4444",
                },
                {
                    label: "Steal (%)",
                    data: realtimeData.map(
                        ({ metrics }) => metrics.cpu.breakdown.steal,
                    ),
                    color: "#8b5cf6",
                },
                {
                    label: "Idle (%)",
                    data: realtimeData.map(
                        ({ metrics }) => metrics.cpu.breakdown.idle,
                    ),
                    color: "#6b7280",
                },
            ],
        },
        memoryData: {
            labels: realtimeData.map((p) => formatTimestamp(p.timestamp)),
            datasets: [
                {
                    label: "Memory Usage (%)",
                    data: realtimeData.map(({ metrics }) =>
                        calcPercentage(
                            metrics.memory.used,
                            metrics.memory.total,
                        ),
                    ),
                    color: "#10b981",
                },
                {
                    label: "Swap Usage (%)",
                    data: realtimeData.map(({ metrics }) =>
                        calcPercentage(
                            metrics.memory.swap_used,
                            metrics.memory.swap_total,
                        ),
                    ),
                    color: "#f59e0b",
                },
            ],
        },
        networkData: {
            labels: realtimeData.map((p) => formatTimestamp(p.timestamp)),
            datasets: [
                {
                    label: "Upload (B/s)",
                    data: realtimeData.map(({ metrics }) => metrics.network.up),
                    color: "#ef4444",
                },
                {
                    label: "Download (B/s)",
                    data: realtimeData.map(
                        ({ metrics }) => metrics.network.down,
                    ),
                    color: "#3b82f6",
                },
            ],
        },
    };
}