From dbe67ab2057d275265b39781477eccd1c1b2cb89 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Fri, 18 Oct 2024 18:01:32 +0800
Subject: [PATCH] feat: init cpu chart

---
 .../ServerDetailChartClient.tsx               | 140 ++++++
 .../ClientComponents/ServerDetailClient.tsx   | 429 +++++++++---------
 app/[locale]/(main)/detail/[id]/page.tsx      |   7 +-
 3 files changed, 353 insertions(+), 223 deletions(-)
 create mode 100644 app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx

diff --git a/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx b/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx
new file mode 100644
index 0000000..74fdcf3
--- /dev/null
+++ b/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar";
+import { Card, CardContent } from "@/components/ui/card";
+import useSWR from "swr";
+import { NezhaAPISafe } from "../../types/nezha-api";
+import { formatRelativeTime, formatTime, nezhaFetcher } from "@/lib/utils";
+import getEnv from "@/lib/env-entry";
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { useEffect, useState } from "react";
+
+
+type cpuChartData = {
+    timeStamp: string;
+    cpu: number;
+}
+
+export default function ServerDetailChartClient({
+    server_id,
+}: {
+    server_id: number;
+}) {
+    const { data, error } = useSWR<NezhaAPISafe>(
+        `/api/detail?server_id=${server_id}`,
+        nezhaFetcher,
+        {
+            refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
+        },
+    );
+
+    const [chartData, setChartData] = useState([] as cpuChartData[]);
+
+    useEffect(() => {
+        if (data) {
+            const timestamp = Date.now().toString();
+            const newData = [
+                ...chartData,
+                { timeStamp: timestamp, cpu: data.status.CPU },
+            ];
+            if (newData.length > 30) {
+                newData.shift();
+            }
+            setChartData(newData);
+        }
+    }, [data]);
+
+    if (error) {
+        return (
+            <>
+                <div className="flex flex-col items-center justify-center">
+                    <p className="text-sm font-medium opacity-40">{error.message}</p>
+                    <p className="text-sm font-medium opacity-40">
+                        {/* {t("chart_fetch_error_message")} */}
+                        fetch_error_message
+                    </p>
+                </div>
+            </>
+        );
+    }
+    if (!data) return null;
+
+
+    const chartConfig = {
+        cpu: {
+            label: "CPU",
+        },
+    } satisfies ChartConfig
+
+    return (
+        <section className="grid md:grid-cols-3 grid-cols-1">
+            <Card className=" rounded-sm">
+                <CardContent className="px-6 py-3 h-[217px]">
+                    <section className="flex flex-col gap-1">
+                        <div className="flex items-center justify-between">
+                            <p className="text-sm font-medium md:text-base">
+                                CPU
+                            </p>
+                            <section className="flex items-center gap-2">
+                                <p className="text-xs text-end w-10 font-medium">
+                                    {data?.status.CPU.toFixed(0)}%
+                                </p>
+                                <AnimatedCircularProgressBar
+                                    className="size-3 text-[0px]"
+                                    max={100}
+                                    min={0}
+                                    value={data?.status.CPU}
+                                />
+                            </section>
+                        </div>
+
+                        <ChartContainer config={chartConfig}>
+                            <AreaChart
+                                accessibilityLayer
+                                data={chartData}
+                                margin={{
+                                    top: 12,
+                                    left: 12,
+                                    right: 12,
+                                }}
+                            >
+                                <CartesianGrid vertical={false} />
+                                <XAxis
+                                    dataKey="timeStamp"
+                                    tickLine={false}
+                                    axisLine={false}
+                                    ticks={[chartData[0]?.timeStamp, chartData[chartData.length - 1]?.timeStamp]}
+                                    tickFormatter={(value) => formatRelativeTime(value)}
+                                />
+                                <YAxis
+                                    tickLine={false}
+                                    axisLine={false}
+                                    mirror={true}
+                                    tickMargin={-15}
+                                    domain={[0, 100]}
+                                    tickFormatter={(value) => `${value}%`}
+                                />
+                                {/* <ChartTooltip
+                                    isAnimationActive={false}
+                                    cursor={false}
+                                    content={<ChartTooltipContent indicator={"line"} labelFormatter={(_, payload) => {
+                                        return formatTime(Number(payload[0].payload.timeStamp));
+                                    }} />}
+                                /> */}
+                                <Area
+                                    isAnimationActive={false}
+                                    dataKey="cpu"
+                                    type="step"
+                                    fill="hsl(var(--chart-1))"
+                                    fillOpacity={0.3}
+                                    stroke="hsl(var(--chart-1))"
+                                />
+                            </AreaChart>
+                        </ChartContainer>
+                    </section>
+                </CardContent>
+            </Card>
+        </section>
+    )
+}
\ No newline at end of file
diff --git a/app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx b/app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx
index 84f8c8b..2a076b8 100644
--- a/app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx
+++ b/app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx
@@ -12,232 +12,217 @@ import { useRouter } from "next/navigation";
 import useSWR from "swr";
 
 export default function ServerDetailClient({
-  server_id,
+    server_id,
 }: {
-  server_id: number;
+    server_id: number;
 }) {
-  const router = useRouter();
-  const locale = useLocale();
-  const { data, error } = useSWR<NezhaAPISafe>(
-    `/api/detail?server_id=${server_id}`,
-    nezhaFetcher,
-    {
-      refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
-    },
-  );
-  if (error) {
-    return (
-      <>
-        <div className="flex flex-col items-center justify-center">
-          <p className="text-sm font-medium opacity-40">{error.message}</p>
-          <p className="text-sm font-medium opacity-40">
-            {/* {t("chart_fetch_error_message")} */}
-            fetch_error_message
-          </p>
-        </div>
-      </>
+    const router = useRouter();
+    const locale = useLocale();
+    const { data, error } = useSWR<NezhaAPISafe>(
+        `/api/detail?server_id=${server_id}`,
+        nezhaFetcher,
+        {
+            refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
+        },
     );
-  }
-  if (!data) return null;
-  return (
-    <div className="mx-auto grid w-full max-w-5xl gap-1">
-      <div
-        onClick={() => {
-          router.push(`/${locale}/`);
-        }}
-        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
-      >
-        <BackIcon />
-        {data?.name}
-      </div>
-      <section className="flex flex-wrap gap-2 mt-2">
-        <Card className="rounded-[10px]">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex items-center gap-2">
-              <p className="text-xs font-semibold">Status</p>
-              <Badge
-                className={cn(
-                  "text-xs rounded-[6px] w-fit px-1 py-0 dark:text-white",
-                  {
-                    " bg-green-800": data?.online_status,
-                    " bg-red-600": !data?.online_status,
-                  },
-                )}
-              >
-                {data?.online_status ? "Online" : "Offline"}
-              </Badge>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px]">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex items-center gap-2">
-              <p className="text-xs font-semibold">Uptime</p>
-              <Badge
-                className="text-xs rounded-[6px] w-fit px-1 py-0"
-                variant="secondary"
-              >
-                {" "}
-                {(data?.status.Uptime / 86400).toFixed(0)} Days{" "}
-              </Badge>
-            </section>
-          </CardContent>
-        </Card>
-
-        <Card className="rounded-[10px]">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex items-center gap-2">
-              <p className="text-xs font-semibold">Tag</p>
-              <Badge
-                className="text-xs rounded-[6px] w-fit px-1 py-0"
-                variant="secondary"
-              >
-                {" "}
-                {data?.tag || "Unknown"}{" "}
-              </Badge>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px]">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex items-center gap-2">
-              <p className="text-xs font-semibold">Arch</p>
-              <Badge
-                className="text-xs rounded-[6px] w-fit px-1 py-0"
-                variant="secondary"
-              >
-                {" "}
-                {data?.host.Arch || "Unknown"}{" "}
-              </Badge>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px]">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex items-center gap-2">
-              <p className="text-xs font-semibold">Version</p>
-              <Badge
-                className="text-xs rounded-[6px] w-fit px-1 py-0"
-                variant="secondary"
-              >
-                {" "}
-                {data?.host.Version || "Unknown"}{" "}
-              </Badge>
-            </section>
-          </CardContent>
-        </Card>
-      </section>
-      <section className="flex flex-wrap gap-2 mt-1">
-        <Card className="rounded-[10px] flex flex-col justify-center">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex items-center gap-2">
-              <p className="text-xs font-semibold">System</p>
-              {data?.host.Platform ? (
-                <div className="text-xs w-fit">
-                  {" "}
-                  {data?.host.Platform || "Unknown"} -{" "}
-                  {data?.host.PlatformVersion}{" "}
+    if (error) {
+        return (
+            <>
+                <div className="flex flex-col items-center justify-center">
+                    <p className="text-sm font-medium opacity-40">{error.message}</p>
+                    <p className="text-sm font-medium opacity-40">
+                        {/* {t("chart_fetch_error_message")} */}
+                        fetch_error_message
+                    </p>
                 </div>
-              ) : (
-                <div className="text-xs w-fit"> Unknown </div>
-              )}
+            </>
+        );
+    }
+    if (!data) return null;
+    return (
+        <div>
+            <div
+                onClick={() => {
+                    router.push(`/${locale}/`);
+                }}
+                className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
+            >
+                <BackIcon />
+                {data?.name}
+            </div>
+            <section className="flex flex-wrap gap-2 mt-2">
+                <Card className="rounded-[10px]">
+                    <CardContent className="px-1.5 py-1">
+                        <section className="flex items-center gap-2">
+                            <p className="text-xs font-semibold">Status</p>
+                            <Badge
+                                className={cn(
+                                    "text-xs rounded-[6px] w-fit px-1 py-0 dark:text-white",
+                                    {
+                                        " bg-green-800": data?.online_status,
+                                        " bg-red-600": !data?.online_status,
+                                    },
+                                )}
+                            >
+                                {data?.online_status ? "Online" : "Offline"}
+                            </Badge>
+                        </section>
+                    </CardContent>
+                </Card>
+                <Card className="rounded-[10px]">
+                    <CardContent className="px-1.5 py-1">
+                        <section className="flex items-center gap-2">
+                            <p className="text-xs font-semibold">Uptime</p>
+                            <Badge
+                                className="text-xs rounded-[6px] w-fit px-1 py-0"
+                                variant="secondary"
+                            >
+                                {" "}
+                                {(data?.status.Uptime / 86400).toFixed(0)} Days{" "}
+                            </Badge>
+                        </section>
+                    </CardContent>
+                </Card>
+                <Card className="rounded-[10px]">
+                    <CardContent className="px-1.5 py-1">
+                        <section className="flex items-center gap-2">
+                            <p className="text-xs font-semibold">Arch</p>
+                            <Badge
+                                className="text-xs rounded-[6px] w-fit px-1 py-0"
+                                variant="secondary"
+                            >
+                                {" "}
+                                {data?.host.Arch || "Unknown"}{" "}
+                            </Badge>
+                        </section>
+                    </CardContent>
+                </Card>
+                <Card className="rounded-[10px]">
+                    <CardContent className="px-1.5 py-1">
+                        <section className="flex items-center gap-2">
+                            <p className="text-xs font-semibold">Version</p>
+                            <Badge
+                                className="text-xs rounded-[6px] w-fit px-1 py-0"
+                                variant="secondary"
+                            >
+                                {" "}
+                                {data?.host.Version || "Unknown"}{" "}
+                            </Badge>
+                        </section>
+                    </CardContent>
+                </Card>
             </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] flex flex-col justify-center">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex items-center gap-2">
-              <p className="text-xs font-semibold">CPU</p>
-              {data?.host.CPU ? (
-                <div className="text-xs w-fit">
-                  {" "}
-                  {data?.host.CPU || "Unknown"}
-                </div>
-              ) : (
-                <div className="text-xs w-fit"> Unknown </div>
-              )}
+            <section className="flex flex-wrap gap-2 mt-2">
+                <Card className="rounded-[10px] flex flex-col justify-center">
+                    <CardContent className="px-1.5 py-1">
+                        <section className="flex items-center gap-2">
+                            <p className="text-xs font-semibold">System</p>
+                            {data?.host.Platform ? (
+                                <div className="text-xs w-fit font-medium">
+                                    {" "}
+                                    {data?.host.Platform || "Unknown"} -{" "}
+                                    {data?.host.PlatformVersion}{" "}
+                                </div>
+                            ) : (
+                                <div className="text-xs w-fit font-medium"> Unknown </div>
+                            )}
+                        </section>
+                    </CardContent>
+                </Card>
+                <Card className="rounded-[10px] flex flex-col justify-center">
+                    <CardContent className="px-1.5 py-1">
+                        <section className="flex items-center gap-2">
+                            <p className="text-xs font-semibold">CPU</p>
+                            {data?.host.CPU ? (
+                                <div className="text-xs w-fit font-medium">
+                                    {" "}
+                                    {data?.host.CPU || "Unknown"}
+                                </div>
+                            ) : (
+                                <div className="text-xs w-fit font-medium"> Unknown </div>
+                            )}
+                        </section>
+                    </CardContent>
+                </Card>
             </section>
-          </CardContent>
-        </Card>
-      </section>
-      <section className="flex flex-wrap gap-2 mt-1">
-        <Card className="rounded-[10px]">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex items-center gap-2">
-              <p className="text-xs font-semibold">CPU</p>
-              <p className="text-xs text-end w-10 font-medium">
-                {data?.status.CPU.toFixed(0)}%
-              </p>
-              <AnimatedCircularProgressBar
-                className="size-3 text-[0px]"
-                max={100}
-                min={0}
-                value={data?.status.CPU}
-              />
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px]">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex items-center gap-2">
-              <p className="text-xs font-semibold">Mem</p>
-              <p className="text-xs w-10 text-end font-medium">
-                {((data?.status.MemUsed / data?.host.MemTotal) * 100).toFixed(
-                  0,
-                )}
-                %
-              </p>
-              <AnimatedCircularProgressBar
-                className="size-3 text-[0px]"
-                max={100}
-                min={0}
-                value={(data?.status.MemUsed / data?.host.MemTotal) * 100}
-              />
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px]">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex items-center gap-2">
-              <p className="text-xs font-semibold">Swap</p>
-              <p className="text-xs w-10 text-end font-medium">
-                {data?.status.SwapUsed
-                  ? (
-                      (data?.status.SwapUsed / data?.host.SwapTotal) *
-                      100
-                    ).toFixed(0)
-                  : 0}
-                %
-              </p>
-              <AnimatedCircularProgressBar
-                className="size-3 text-[0px]"
-                max={100}
-                min={0}
-                value={(data?.status.SwapUsed / data?.host.SwapTotal) * 100}
-              />
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px]">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex items-center gap-2">
-              <p className="text-xs font-semibold">Disk</p>
-              <p className="text-xs w-10 text-end font-medium">
-                {((data?.status.DiskUsed / data?.host.DiskTotal) * 100).toFixed(
-                  0,
-                )}
-                %
-              </p>
-              <AnimatedCircularProgressBar
-                className="size-3 text-[0px]"
-                max={100}
-                min={0}
-                value={(data?.status.DiskUsed / data?.host.DiskTotal) * 100}
-              />
-            </section>
-          </CardContent>
-        </Card>
-      </section>
-    </div>
-  );
+            {/* <section className="flex flex-wrap gap-2 mt-1">
+                <Card className="rounded-[10px]">
+                    <CardContent className="px-1.5 py-1">
+                        <section className="flex items-center gap-2">
+                            <p className="text-xs font-semibold">CPU</p>
+                            <p className="text-xs text-end w-10 font-medium">
+                                {data?.status.CPU.toFixed(0)}%
+                            </p>
+                            <AnimatedCircularProgressBar
+                                className="size-3 text-[0px]"
+                                max={100}
+                                min={0}
+                                value={data?.status.CPU}
+                            />
+                        </section>
+                    </CardContent>
+                </Card>
+                <Card className="rounded-[10px]">
+                    <CardContent className="px-1.5 py-1">
+                        <section className="flex items-center gap-2">
+                            <p className="text-xs font-semibold">Mem</p>
+                            <p className="text-xs w-10 text-end font-medium">
+                                {((data?.status.MemUsed / data?.host.MemTotal) * 100).toFixed(
+                                    0,
+                                )}
+                                %
+                            </p>
+                            <AnimatedCircularProgressBar
+                                className="size-3 text-[0px]"
+                                max={100}
+                                min={0}
+                                value={(data?.status.MemUsed / data?.host.MemTotal) * 100}
+                            />
+                        </section>
+                    </CardContent>
+                </Card>
+                <Card className="rounded-[10px]">
+                    <CardContent className="px-1.5 py-1">
+                        <section className="flex items-center gap-2">
+                            <p className="text-xs font-semibold">Swap</p>
+                            <p className="text-xs w-10 text-end font-medium">
+                                {data?.status.SwapUsed
+                                    ? (
+                                        (data?.status.SwapUsed / data?.host.SwapTotal) *
+                                        100
+                                    ).toFixed(0)
+                                    : 0}
+                                %
+                            </p>
+                            <AnimatedCircularProgressBar
+                                className="size-3 text-[0px]"
+                                max={100}
+                                min={0}
+                                value={(data?.status.SwapUsed / data?.host.SwapTotal) * 100}
+                            />
+                        </section>
+                    </CardContent>
+                </Card>
+                <Card className="rounded-[10px]">
+                    <CardContent className="px-1.5 py-1">
+                        <section className="flex items-center gap-2">
+                            <p className="text-xs font-semibold">Disk</p>
+                            <p className="text-xs w-10 text-end font-medium">
+                                {((data?.status.DiskUsed / data?.host.DiskTotal) * 100).toFixed(
+                                    0,
+                                )}
+                                %
+                            </p>
+                            <AnimatedCircularProgressBar
+                                className="size-3 text-[0px]"
+                                max={100}
+                                min={0}
+                                value={(data?.status.DiskUsed / data?.host.DiskTotal) * 100}
+                            />
+                        </section>
+                    </CardContent>
+                </Card>
+            </section> */}
+        </div>
+    );
 }
diff --git a/app/[locale]/(main)/detail/[id]/page.tsx b/app/[locale]/(main)/detail/[id]/page.tsx
index ad85bc9..f025408 100644
--- a/app/[locale]/(main)/detail/[id]/page.tsx
+++ b/app/[locale]/(main)/detail/[id]/page.tsx
@@ -1,5 +1,10 @@
 import ServerDetailClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailClient";
+import ServerDetailChartClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailChartClient";
 
 export default function Page({ params }: { params: { id: string } }) {
-  return <ServerDetailClient server_id={Number(params.id)} />;
+  return <div className="mx-auto grid w-full max-w-5xl gap-2">
+    <ServerDetailClient server_id={Number(params.id)} />
+    <ServerDetailChartClient server_id={Number(params.id)} />
+  </div>
+    ;
 }