fix: recharts connectNulls

README.md

@@ -22,7 +22,7 @@
 | NEXT_PUBLIC_DisableCartoon     | 是否禁用卡通人物                 | **默认**：false                  |
 | NEXT_PUBLIC_ShowTag            | 是否显示标签                     | **默认**：false                  |
 | NEXT_PUBLIC_ShowNetTransfer    | 是否显示流量信息                 | **默认**：false                  |
-| NEXT_PUBLIC_ForceUseSvgFlag    | 是否强制使用SVG旗帜          | **默认**：false                  |
+| NEXT_PUBLIC_ForceUseSvgFlag    | 是否强制使用SVG旗帜              | **默认**：false                  |
 
 #### 多语言支持
 

app/[locale]/(main)/ClientComponents/NetworkChart.tsx

@@ -33,7 +33,7 @@ import useSWR from "swr";
 
 interface ResultItem {
   created_at: number;
-  [key: string]: number;
+  [key: string]: number | null;
 }
 
 export function NetworkChartClient({ server_id }: { server_id: number }) {
@@ -87,15 +87,28 @@ export function NetworkChartClient({ server_id }: { server_id: number }) {
   const formatData = (rawData: NezhaAPIMonitor[]) => {
     const result: { [time: number]: ResultItem } = {};
 
-    // 遍历每个监控项
+    // 获取所有时间点
+    const allTimes = new Set<number>();
+    rawData.forEach((item) => {
+      item.created_at.forEach((time) => allTimes.add(time));
+    });
+
+    const allTimeArray = Array.from(allTimes).sort((a, b) => a - b);
+
+    // 遍历所有时间点，补全每个监控服务的数据
     rawData.forEach((item) => {
       const { monitor_name, created_at, avg_delay } = item;
 
-      created_at.forEach((time, index) => {
+      // 初始化监控项在每个时间点的值
+      allTimeArray.forEach((time) => {
         if (!result[time]) {
           result[time] = { created_at: time };
         }
-        result[time][monitor_name] = parseFloat(avg_delay[index].toFixed(2));
+
+        // 如果该时间点有数据，使用实际数据，否则补 null
+        const timeIndex = created_at.indexOf(time);
+        result[time][monitor_name] =
+          timeIndex !== -1 ? avg_delay[timeIndex] : null;
       });
     });
 
@@ -268,6 +281,7 @@ export function NetworkChart({
                   dot={false}
                   dataKey={key}
                   stroke={getColorByIndex(key)}
+                  connectNulls={true}
                 />
               ))}
           </LineChart>