lanyuanxiaoyao
a5cf6065c2
ESLint 升级到 recommended-type-checked + stylistic-type-checked， 引入 perfectionist 导入排序和 import 插件导入验证。 Prettier 显式声明全部格式化参数，消除跨环境差异。 TypeScript 启用 noUnusedLocals 和 noPropertyAccessFromIndexSignature。 完善 ignore 列表，排除 .agents/、bun.lock、data/ 等。 引入 husky + lint-staged（pre-commit）+ commitlint（commit-msg）。 更新 DEVELOPMENT.md 代码质量章节。 修复所有新增规则检测到的类型和风格违规。
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((_, index) => (
|
|
<Cell fill={colors[index % colors.length]} key={index} />
|
|
))}
|
|
</Pie>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
<div className="donut-center-label">{availability}%</div>
|
|
</div>
|
|
);
|
|
}
|