perf: 调整负载统计时间跨度,为延迟图表添加隐藏显示全部的按钮

This commit is contained in:
Montia37
2025-09-05 17:37:39 +08:00
parent 4cb0fe3e46
commit b10f40195a
3 changed files with 33 additions and 4 deletions

View File

@@ -118,7 +118,7 @@ export const useLoadCharts = (node: NodeData | null, hours: number) => {
}));
let filledData;
if (hours === 1) {
if (hours <= 4) {
filledData = fillMissingTimePoints(
stringifiedData,
minute,

View File

@@ -1,4 +1,7 @@
import { memo, useState, useMemo, useCallback, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { useIsMobile } from "@/hooks/useMobile";
import { Eye, EyeOff } from "lucide-react";
import {
LineChart,
Line,
@@ -35,6 +38,7 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
useConfigItem("enableConnectBreaks")
);
const maxPointsToRender = useConfigItem("pingChartMaxPoints") || 0; // 0表示不限制
const isMobile = useIsMobile();
useEffect(() => {
if (pingHistory?.tasks) {
@@ -143,6 +147,15 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
);
};
const handleToggleAll = () => {
if (!pingHistory?.tasks) return;
if (visiblePingTasks.length === pingHistory.tasks.length) {
setVisiblePingTasks([]);
} else {
setVisiblePingTasks(pingHistory.tasks.map((t) => t.id));
}
};
const sortedTasks = useMemo(() => {
if (!pingHistory?.tasks) return [];
return [...pingHistory.tasks].sort((a, b) => a.name.localeCompare(b.name));
@@ -259,8 +272,8 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
<Card>
<CardHeader>
<div className="flex justify-between items-start">
<div className="flex items-center gap-4">
<div className="flex justify-between items-center flex-wrap">
<div className="flex gap-4 flex-wrap">
<div className="flex items-center space-x-2">
<Switch
id="peak-shaving"
@@ -294,6 +307,22 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
</Tips>
</div>
</div>
<div className={isMobile ? "w-full mt-2" : ""}>
<Button variant="secondary" onClick={handleToggleAll} size="sm">
{pingHistory?.tasks &&
visiblePingTasks.length === pingHistory.tasks.length ? (
<>
<EyeOff size={16} />
</>
) : (
<>
<Eye size={16} />
</>
)}
</Button>
</div>
</div>
</CardHeader>
<CardContent className="pt-0">

View File

@@ -39,7 +39,7 @@ const InstancePage = () => {
return [
{ label: "实时", hours: 0 },
{ label: "1小时", hours: 1 },
{ label: "6小时", hours: 6 },
{ label: "4小时", hours: 4 },
{ label: "1天", hours: 24 },
{ label: "7天", hours: 168 },
{ label: "30天", hours: 720 },