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} /> ))}