diff --git a/bun.lockb b/bun.lockb index c8e16f2..580e885 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 4f1e49a..53ecab8 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@radix-ui/react-progress": "^1.1.0", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", + "@radix-ui/react-switch": "^1.1.1", "@tanstack/react-query": "^5.62.2", "@tanstack/react-query-devtools": "^5.62.2", "@tanstack/react-table": "^8.20.5", diff --git a/src/components/NetworkChart.tsx b/src/components/NetworkChart.tsx index 4dbdb42..5a47f71 100644 --- a/src/components/NetworkChart.tsx +++ b/src/components/NetworkChart.tsx @@ -25,10 +25,12 @@ import { useTranslation } from "react-i18next"; import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"; import NetworkChartLoading from "./NetworkChartLoading"; import { NezhaMonitor, ServerMonitorChart } from "@/types/nezha-api"; +import { Switch } from "./ui/switch"; +import { Label } from "./ui/label"; interface ResultItem { created_at: number; - [key: string]: number | null; + [key: string]: number; } export function NetworkChart({ @@ -112,6 +114,7 @@ export const NetworkChartClient = React.memo(function NetworkChart({ const defaultChart = "All"; const [activeChart, setActiveChart] = React.useState(defaultChart); + const [isPeakEnabled, setIsPeakEnabled] = React.useState(false); const handleButtonClick = useCallback( (chart: string) => { @@ -175,6 +178,63 @@ export const NetworkChartClient = React.memo(function NetworkChart({ )); }, [activeChart, defaultChart, chartDataKey, getColorByIndex]); + const processedData = useMemo(() => { + if (!isPeakEnabled) { + return activeChart === defaultChart + ? formattedData + : chartData[activeChart]; + } + + // 如果开启了削峰,对数据进行处理 + const data = ( + activeChart === defaultChart ? formattedData : chartData[activeChart] + ) as ResultItem[]; + const windowSize = 7; // 增加到7个点的移动平均 + const weights = [0.1, 0.1, 0.15, 0.3, 0.15, 0.1, 0.1]; // 加权平均的权重 + + return data.map((point, index) => { + if (index < windowSize - 1) return point; + + const window = data.slice(index - windowSize + 1, index + 1); + const smoothed = { ...point } as ResultItem; + + if (activeChart === defaultChart) { + // 处理所有线路的数据 + chartDataKey.forEach((key) => { + const values = window + .map((w) => w[key]) + .filter((v) => v !== undefined && v !== null) as number[]; + if (values.length === windowSize) { + smoothed[key] = values.reduce( + (acc, val, idx) => acc + val * weights[idx], + 0, + ); + } + }); + } else { + // 处理单条线路的数据 + const values = window + .map((w) => w.avg_delay) + .filter((v) => v !== undefined && v !== null) as number[]; + if (values.length === windowSize) { + smoothed.avg_delay = values.reduce( + (acc, val, idx) => acc + val * weights[idx], + 0, + ); + } + } + + return smoothed; + }); + }, [ + isPeakEnabled, + activeChart, + formattedData, + chartData, + chartDataKey, + defaultChart, + ]); + return ( @@ -185,6 +245,16 @@ export const NetworkChartClient = React.memo(function NetworkChart({ {chartDataKey.length} {t("monitor.monitorCount")} +
+ + +
{chartButtons}
@@ -195,11 +265,7 @@ export const NetworkChartClient = React.memo(function NetworkChart({ > @@ -282,6 +348,7 @@ const formatData = (rawData: NezhaMonitor[]) => { } const timeIndex = created_at.indexOf(time); + // @ts-expect-error - avg_delay is an array result[time][monitor_name] = timeIndex !== -1 ? avg_delay[timeIndex] : null; }); diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx new file mode 100644 index 0000000..ad657f3 --- /dev/null +++ b/src/components/ui/switch.tsx @@ -0,0 +1,27 @@ +import * as React from "react"; +import * as SwitchPrimitives from "@radix-ui/react-switch"; + +import { cn } from "@/lib/utils"; + +const Switch = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)); +Switch.displayName = SwitchPrimitives.Root.displayName; + +export { Switch };