修复仪表盘与节点详情「24 小时网络趋势」误按速率展示:改为 OpenResty 入/出站小时流量与近 24 小时总量摘要,Y 轴与 tooltip 自动换算 B/KB/MB/GB。

This commit is contained in:
ryan
2026-06-21 11:08:25 +08:00
parent ce2b931a78
commit 6f267bbf21
5 changed files with 26 additions and 36 deletions
@@ -1,13 +1,7 @@
'use client';
import {TrendChart} from '@/components/data/trend-chart';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
import type {DiskIOTrendPoint} from '@/lib/services/openflare';
import {formatBytes, formatTrendHour} from '../../components/dashboard/dashboard-utils';
@@ -30,6 +24,8 @@ export function DiskIOTrendChart({
<CardContent>
<TrendChart
labels={points.map((point) => formatTrendHour(point.bucket_started_at))}
summaryScope="total"
summaryHint="近 24 小时"
yAxisValueFormatter={formatBytes}
series={[
{
@@ -51,4 +47,4 @@ export function DiskIOTrendChart({
</CardContent>
</Card>
);
}
}
@@ -1,24 +1,15 @@
'use client';
import {TrendChart} from '@/components/data/trend-chart';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
import type {NetworkTrendPoint} from '@/lib/services/openflare';
import {
formatBytesPerSecond,
formatTrendHour,
} from '../../components/dashboard/dashboard-utils';
import {formatBytes, formatTrendHour} from '../../components/dashboard/dashboard-utils';
export function NetworkTrendChart({
points,
title = '24 小时网络趋势',
description = '观察 OpenResty 入站/出站吞吐的变化,辅助识别回源压力、突发流量或出口异常。',
description = '按小时展示 OpenResty 入站/出站流量累计,摘要为近 24 小时总量。',
}: {
points: NetworkTrendPoint[];
title?: string;
@@ -33,7 +24,9 @@ export function NetworkTrendChart({
<CardContent>
<TrendChart
labels={points.map((point) => formatTrendHour(point.bucket_started_at))}
yAxisValueFormatter={(value) => formatBytesPerSecond(value, 3600)}
summaryScope="total"
summaryHint="近 24 小时"
yAxisValueFormatter={formatBytes}
series={[
{
label: 'OpenResty 入站',
@@ -41,17 +34,17 @@ export function NetworkTrendChart({
fillColor: 'rgba(34, 197, 94, 0.14)',
variant: 'area',
values: points.map((point) => point.openresty_rx_bytes),
valueFormatter: (value) => formatBytesPerSecond(value, 3600),
valueFormatter: formatBytes,
},
{
label: 'OpenResty 出站',
color: '#38bdf8',
values: points.map((point) => point.openresty_tx_bytes),
valueFormatter: (value) => formatBytesPerSecond(value, 3600),
valueFormatter: formatBytes,
},
]}
/>
</CardContent>
</Card>
);
}
}