From f9eae5eb389a7734b4edd82517a45dc13eeea5ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BB=93=E9=BC=A0?= <71394853+hamster1963@users.noreply.github.com> Date: Fri, 11 Oct 2024 20:25:26 +0800 Subject: [PATCH 1/2] doc: update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 896ae0a..b95aaa3 100644 --- a/README.md +++ b/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 | #### 多语言支持 From a627fa6fb5506c5c733df68f50b49d131a271127 Mon Sep 17 00:00:00 2001 From: hamster1963 <1410514192@qq.com> Date: Sat, 12 Oct 2024 14:44:50 +0800 Subject: [PATCH 2/2] fix: recharts connectNulls --- README.md | 2 +- .../(main)/ClientComponents/NetworkChart.tsx | 22 +++++++++++++++---- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index b95aaa3..a07ccfe 100644 --- a/README.md +++ b/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 | #### 多语言支持 diff --git a/app/[locale]/(main)/ClientComponents/NetworkChart.tsx b/app/[locale]/(main)/ClientComponents/NetworkChart.tsx index 73db61d..d39c257 100644 --- a/app/[locale]/(main)/ClientComponents/NetworkChart.tsx +++ b/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(); + 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} /> ))}