fix(wavelet): 趋势图组件支持可配置标题与描述

便于节点详情页复用请求与容量趋势图。
This commit is contained in:
ryan
2026-06-18 18:58:12 +08:00
parent 1857fe4c98
commit e51ada4d60
2 changed files with 22 additions and 10 deletions
@@ -12,14 +12,20 @@ import type {CapacityTrendPoint} from '@/lib/services/openflare';
import {formatPercent, formatTrendHour} from './dashboard-utils'; import {formatPercent, formatTrendHour} from './dashboard-utils';
export function CapacityTrendChart({points}: {points: CapacityTrendPoint[]}) { export function CapacityTrendChart({
points,
title = '24 小时容量趋势',
description = '按小时聚合 CPU 与内存使用率,判断整体容量是否持续紧张。',
}: {
points: CapacityTrendPoint[];
title?: string;
description?: string;
}) {
return ( return (
<Card className="border-dashed shadow-none"> <Card className="border-dashed shadow-none">
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-semibold">24 小时容量趋势</CardTitle> <CardTitle className="text-sm font-semibold">{title}</CardTitle>
<CardDescription className="text-xs"> <CardDescription className="text-xs">{description}</CardDescription>
按小时聚合 CPU 与内存使用率,判断整体容量是否持续紧张。
</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<TrendChart <TrendChart
@@ -12,14 +12,20 @@ import type {TrafficTrendPoint} from '@/lib/services/openflare';
import {formatTrendHour} from './dashboard-utils'; import {formatTrendHour} from './dashboard-utils';
export function TrafficTrendChart({points}: {points: TrafficTrendPoint[]}) { export function TrafficTrendChart({
points,
title = '24 小时请求趋势',
description = '观察整体请求量和错误量是否出现异常抬升。',
}: {
points: TrafficTrendPoint[];
title?: string;
description?: string;
}) {
return ( return (
<Card className="border-dashed shadow-none"> <Card className="border-dashed shadow-none">
<CardHeader> <CardHeader>
<CardTitle className="text-sm font-semibold">24 小时请求趋势</CardTitle> <CardTitle className="text-sm font-semibold">{title}</CardTitle>
<CardDescription className="text-xs"> <CardDescription className="text-xs">{description}</CardDescription>
观察整体请求量和错误量是否出现异常抬升。
</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<TrendChart <TrendChart