lanyuanxiaoyao
1c5cfafda6
- 新增 GET /api/dashboard 合并原 summary+targets 首屏接口 - 新增 GET /api/targets/:id/metrics 合并原 stats+trend 概览接口 - 后端指标纯函数：可用率、百分位、故障段分析、连续状态、UTC 小时分桶 - ProbeStore 窗口取数方法替代全量历史查询 - SummaryCards 扩展为 4 卡片（新增异常事件数）+ 数据新鲜度展示 - 表格新增「连续」列（Tag 渲染 capped 状态） - OverviewTab 重构为 2×4 Statistic 多维度布局 - TrendChart 改为延迟范围面积图 + 红色异常标记点 - 删除旧路由（summary/targets/trend）和 computeTrendStats - 同步 delta specs 到主 specs 并归档变更
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
|
|
|
|
interface StatusDonutProps {
|
|
down: number;
|
|
up: number;
|
|
}
|
|
|
|
const UP_COLOR = "var(--td-success-color)";
|
|
const DOWN_COLOR = "var(--td-error-color)";
|
|
const EMPTY_COLOR = "var(--td-bg-color-component-disabled)";
|
|
|
|
export function StatusDonut({ down, up }: StatusDonutProps) {
|
|
const total = up + down;
|
|
const availability = total > 0 ? ((up / total) * 100).toFixed(1) : "-";
|
|
|
|
const data =
|
|
total > 0
|
|
? [
|
|
{ name: "UP", value: up },
|
|
{ name: "DOWN", value: down },
|
|
]
|
|
: [{ name: "EMPTY", value: 1 }];
|
|
|
|
const colors = total > 0 ? [UP_COLOR, DOWN_COLOR] : [EMPTY_COLOR];
|
|
|
|
return (
|
|
<div className="status-donut">
|
|
<ResponsiveContainer height={180} width="100%">
|
|
<PieChart>
|
|
<Pie cx="50%" cy="50%" data={data} dataKey="value" innerRadius={50} outerRadius={70} stroke="none">
|
|
{data.map((item, index) => (
|
|
<Cell fill={colors[index % colors.length]} key={item.name} />
|
|
))}
|
|
</Pie>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
<div className="donut-center-label">{total > 0 ? `${availability}%` : "-"}</div>
|
|
</div>
|
|
);
|
|
}
|