From 391e356f7ca40af1116edb85346d0c3b5e1e7c32 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sun, 1 Dec 2024 16:17:34 +0800
Subject: [PATCH] feat(detail): add chart info

---
 .../ServerDetailChartClient.tsx               | 46 +++++++++++++------
 1 file changed, 33 insertions(+), 13 deletions(-)

diff --git a/app/(main)/ClientComponents/ServerDetailChartClient.tsx b/app/(main)/ClientComponents/ServerDetailChartClient.tsx
index c2fb955..93c15c3 100644
--- a/app/(main)/ClientComponents/ServerDetailChartClient.tsx
+++ b/app/(main)/ClientComponents/ServerDetailChartClient.tsx
@@ -6,7 +6,12 @@ import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progr
 import { Card, CardContent } from "@/components/ui/card";
 import { ChartConfig, ChartContainer } from "@/components/ui/chart";
 import getEnv from "@/lib/env-entry";
-import { formatNezhaInfo, formatRelativeTime, nezhaFetcher } from "@/lib/utils";
+import {
+  formatBytes,
+  formatNezhaInfo,
+  formatRelativeTime,
+  nezhaFetcher,
+} from "@/lib/utils";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import {
@@ -339,7 +344,7 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
     <Card>
       <CardContent className="px-6 py-3">
         <section className="flex flex-col gap-1">
-          <div className="flex items-center">
+          <div className="flex items-center justify-between">
             <section className="flex items-center gap-4">
               <div className="flex flex-col">
                 <p className=" text-xs text-muted-foreground">{t("Mem")}</p>
@@ -368,6 +373,15 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
                 </div>
               </div>
             </section>
+            <section className="flex flex-col items-end gap-0.5">
+              <div className="flex text-[11px] font-medium items-center gap-2">
+                {formatBytes(data.status.MemUsed)} /{" "}
+                {formatBytes(data.host.MemTotal)}
+              </div>
+              <div className="flex text-[11px] font-medium items-center gap-2">
+                swap: {formatBytes(data.status.SwapUsed)}
+              </div>
+            </section>
           </div>
           <ChartContainer
             config={chartConfig}
@@ -462,17 +476,23 @@ function DiskChart({ data }: { data: NezhaAPISafe }) {
         <section className="flex flex-col gap-1">
           <div className="flex items-center justify-between">
             <p className="text-md font-medium">{t("Disk")}</p>
-            <section className="flex items-center gap-2">
-              <p className="text-xs text-end w-10 font-medium">
-                {disk.toFixed(0)}%
-              </p>
-              <AnimatedCircularProgressBar
-                className="size-3 text-[0px]"
-                max={100}
-                min={0}
-                value={disk}
-                primaryColor="hsl(var(--chart-5))"
-              />
+            <section className="flex flex-col items-end gap-0.5">
+              <section className="flex items-center gap-2">
+                <p className="text-xs text-end w-10 font-medium">
+                  {disk.toFixed(0)}%
+                </p>
+                <AnimatedCircularProgressBar
+                  className="size-3 text-[0px]"
+                  max={100}
+                  min={0}
+                  value={disk}
+                  primaryColor="hsl(var(--chart-5))"
+                />
+              </section>
+              <div className="flex text-[11px] font-medium items-center gap-2">
+                {formatBytes(data.status.DiskUsed)} /{" "}
+                {formatBytes(data.host.DiskTotal)}
+              </div>
             </section>
           </div>
           <ChartContainer