From 36b929a9d2e4a5660168259833881b0708c48b46 Mon Sep 17 00:00:00 2001 From: hamster1963 <1410514192@qq.com> Date: Mon, 14 Oct 2024 17:29:55 +0800 Subject: [PATCH 1/2] perf: chart --- .../(main)/ClientComponents/NetworkChart.tsx | 120 +++++++++--------- 1 file changed, 57 insertions(+), 63 deletions(-) diff --git a/app/[locale]/(main)/ClientComponents/NetworkChart.tsx b/app/[locale]/(main)/ClientComponents/NetworkChart.tsx index 1ed4158f5..f20c09f8a 100644 --- a/app/[locale]/(main)/ClientComponents/NetworkChart.tsx +++ b/app/[locale]/(main)/ClientComponents/NetworkChart.tsx @@ -30,6 +30,7 @@ import { useRouter } from "next/navigation"; import * as React from "react"; import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"; import useSWR from "swr"; +import { useMemo, useCallback } from 'react'; interface ResultItem { created_at: number; @@ -138,7 +139,7 @@ export function NetworkChartClient({ server_id }: { server_id: number }) { ); } -export function NetworkChart({ +export const NetworkChart = React.memo(function NetworkChart({ chartDataKey, chartConfig, chartData, @@ -159,18 +160,59 @@ export function NetworkChart({ const [activeChart, setActiveChart] = React.useState(defaultChart); - const handleButtonClick = (chart: string) => { - if (chart === activeChart) { - setActiveChart(defaultChart); - } else { - setActiveChart(chart); - } - }; + const handleButtonClick = useCallback((chart: string) => { + setActiveChart(prev => prev === chart ? defaultChart : chart); + }, [defaultChart]); - const getColorByIndex = (chart: string) => { + const getColorByIndex = useCallback((chart: string) => { const index = chartDataKey.indexOf(chart); return `hsl(var(--chart-${(index % 10) + 1}))`; - }; + }, [chartDataKey]); + + const chartButtons = useMemo(() => ( + chartDataKey.map((key) => ( + + )) + ), [chartDataKey, activeChart, chartData, handleButtonClick]); + + const chartLines = useMemo(() => { + if (activeChart !== defaultChart) { + return ( + + ); + } + return chartDataKey.map((key) => ( + + )); + }, [activeChart, defaultChart, chartDataKey, getColorByIndex]); return ( @@ -190,26 +232,7 @@ export function NetworkChart({
- {chartDataKey.map((key) => { - return ( - - ); - })} + {chartButtons}
@@ -219,15 +242,8 @@ export function NetworkChart({ > } /> )} - {activeChart !== defaultChart && ( - - )} - {activeChart === defaultChart && - chartDataKey.map((key) => ( - - ))} + {chartLines} ); -} +}); From 5de6d7f63aec6cc78a8b06ce7029fffcda0991e1 Mon Sep 17 00:00:00 2001 From: hamster1963 <1410514192@qq.com> Date: Mon, 14 Oct 2024 18:02:37 +0800 Subject: [PATCH 2/2] fix: chart data --- .../(main)/ClientComponents/NetworkChart.tsx | 100 +++++++++--------- 1 file changed, 49 insertions(+), 51 deletions(-) diff --git a/app/[locale]/(main)/ClientComponents/NetworkChart.tsx b/app/[locale]/(main)/ClientComponents/NetworkChart.tsx index f20c09f8a..ec9a91d1f 100644 --- a/app/[locale]/(main)/ClientComponents/NetworkChart.tsx +++ b/app/[locale]/(main)/ClientComponents/NetworkChart.tsx @@ -64,57 +64,6 @@ export function NetworkChartClient({ server_id }: { server_id: number }) { if (!data) return ; - function transformData(data: NezhaAPIMonitor[]) { - const monitorData: ServerMonitorChart = {}; - - data.forEach((item) => { - const monitorName = item.monitor_name; - - if (!monitorData[monitorName]) { - monitorData[monitorName] = []; - } - - for (let i = 0; i < item.created_at.length; i++) { - monitorData[monitorName].push({ - created_at: item.created_at[i], - avg_delay: item.avg_delay[i], - }); - } - }); - - return monitorData; - } - - 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; - - // 初始化监控项在每个时间点的值 - allTimeArray.forEach((time) => { - if (!result[time]) { - result[time] = { created_at: time }; - } - - // 如果该时间点有数据，使用实际数据，否则补 null - const timeIndex = created_at.indexOf(time); - result[time][monitor_name] = - timeIndex !== -1 ? avg_delay[timeIndex] : null; - }); - }); - - return Object.values(result).sort((a, b) => a.created_at - b.created_at); - }; const transformedData = transformData(data); @@ -285,3 +234,52 @@ export const NetworkChart = React.memo(function NetworkChart({ ); }); + + +const transformData = (data: NezhaAPIMonitor[]) => { + const monitorData: ServerMonitorChart = {}; + + data.forEach((item) => { + const monitorName = item.monitor_name; + + if (!monitorData[monitorName]) { + monitorData[monitorName] = []; + } + + for (let i = 0; i < item.created_at.length; i++) { + monitorData[monitorName].push({ + created_at: item.created_at[i], + avg_delay: item.avg_delay[i], + }); + } + }); + + return monitorData; +} + +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; + + allTimeArray.forEach((time) => { + if (!result[time]) { + result[time] = { created_at: time }; + } + + const timeIndex = created_at.indexOf(time); + result[time][monitor_name] = + timeIndex !== -1 ? avg_delay[timeIndex] : null; + }); + }); + + return Object.values(result).sort((a, b) => a.created_at - b.created_at); +}; \ No newline at end of file