From 3413c738896cb45a99710b5385ad8b9688ce1699 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sun, 20 Oct 2024 00:25:00 +0800
Subject: [PATCH] fix: better init detail chart

---
 .../ServerDetailChartClient.tsx               | 54 ++++++++++++-------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx b/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx
index dad5f6e13..4afc4b0cb 100644
--- a/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx
+++ b/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx
@@ -102,7 +102,12 @@ function CpuChart({ data }: { data: NezhaAPISafe }) {
   useEffect(() => {
     if (data) {
       const timestamp = Date.now().toString();
-      const newData = [...cpuChartData, { timeStamp: timestamp, cpu: cpu }];
+      let newData = [] as cpuChartData[];
+      if (cpuChartData.length === 0) {
+        newData = [{ timeStamp: timestamp, cpu: cpu }, { timeStamp: timestamp, cpu: cpu }];
+      } else {
+        newData = [...cpuChartData, { timeStamp: timestamp, cpu: cpu }];
+      }
       if (newData.length > 30) {
         newData.shift();
       }
@@ -194,10 +199,12 @@ function ProcessChart({ data }: { data: NezhaAPISafe }) {
   useEffect(() => {
     if (data) {
       const timestamp = Date.now().toString();
-      const newData = [
-        ...processChartData,
-        { timeStamp: timestamp, process: process },
-      ];
+      let newData = [] as processChartData[];
+      if (processChartData.length === 0) {
+        newData = [{ timeStamp: timestamp, process: process }, { timeStamp: timestamp, process: process }];
+      } else {
+        newData = [...processChartData, { timeStamp: timestamp, process: process }];
+      }
       if (newData.length > 30) {
         newData.shift();
       }
@@ -276,10 +283,12 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
   useEffect(() => {
     if (data) {
       const timestamp = Date.now().toString();
-      const newData = [
-        ...memChartData,
-        { timeStamp: timestamp, mem: mem, swap: swap },
-      ];
+      let newData = [] as memChartData[];
+      if (memChartData.length === 0) {
+        newData = [{ timeStamp: timestamp, mem: mem, swap: swap }, { timeStamp: timestamp, mem: mem, swap: swap }];
+      } else {
+        newData = [...memChartData, { timeStamp: timestamp, mem: mem, swap: swap }];
+      }
       if (newData.length > 30) {
         newData.shift();
       }
@@ -395,7 +404,12 @@ function DiskChart({ data }: { data: NezhaAPISafe }) {
   useEffect(() => {
     if (data) {
       const timestamp = Date.now().toString();
-      const newData = [...diskChartData, { timeStamp: timestamp, disk: disk }];
+      let newData = [] as diskChartData[];
+      if (diskChartData.length === 0) {
+        newData = [{ timeStamp: timestamp, disk: disk }, { timeStamp: timestamp, disk: disk }];
+      } else {
+        newData = [...diskChartData, { timeStamp: timestamp, disk: disk }];
+      }
       if (newData.length > 30) {
         newData.shift();
       }
@@ -487,10 +501,12 @@ function NetworkChart({ data }: { data: NezhaAPISafe }) {
   useEffect(() => {
     if (data) {
       const timestamp = Date.now().toString();
-      const newData = [
-        ...networkChartData,
-        { timeStamp: timestamp, upload: up, download: down },
-      ];
+      let newData = [] as networkChartData[];
+      if (networkChartData.length === 0) {
+        newData = [{ timeStamp: timestamp, upload: up, download: down }, { timeStamp: timestamp, upload: up, download: down }];
+      } else {
+        newData = [...networkChartData, { timeStamp: timestamp, upload: up, download: down }];
+      }
       if (newData.length > 30) {
         newData.shift();
       }
@@ -605,10 +621,12 @@ function ConnectChart({ data }: { data: NezhaAPISafe }) {
   useEffect(() => {
     if (data) {
       const timestamp = Date.now().toString();
-      const newData = [
-        ...connectChartData,
-        { timeStamp: timestamp, tcp: tcp, udp: udp },
-      ];
+      let newData = [] as connectChartData[];
+      if (connectChartData.length === 0) {
+        newData = [{ timeStamp: timestamp, tcp: tcp, udp: udp }, { timeStamp: timestamp, tcp: tcp, udp: udp }];
+      } else {
+        newData = [...connectChartData, { timeStamp: timestamp, tcp: tcp, udp: udp }];
+      }
       if (newData.length > 30) {
         newData.shift();
       }