52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
|
interface DistributionChartProps {
|
||
|
|
distribution: {
|
||
|
|
high: number;
|
||
|
|
medium_high: number;
|
||
|
|
medium: number;
|
||
|
|
medium_low: number;
|
||
|
|
low: number;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
const LEVELS = [
|
||
|
|
{ key: 'high', label: '高风险 (86-100%)', color: 'bg-danger' },
|
||
|
|
{ key: 'medium_high', label: '中高风险 (71-85%)', color: 'bg-[#FB923C]' },
|
||
|
|
{ key: 'medium', label: '中风险 (51-70%)', color: 'bg-warning' },
|
||
|
|
{ key: 'medium_low', label: '中低风险 (31-50%)', color: 'bg-[#7DD3FC]' },
|
||
|
|
{ key: 'low', label: '低风险 (0-30%)', color: 'bg-success' },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function DistributionChart({ distribution }: DistributionChartProps) {
|
||
|
|
const total = Object.values(distribution).reduce((sum, val) => sum + val, 0);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="card p-4 h-fit">
|
||
|
|
<div className="text-[11px] font-medium text-text-muted uppercase tracking-wide mb-4">
|
||
|
|
风险等级分布
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{LEVELS.map((level) => {
|
||
|
|
const value = distribution[level.key as keyof typeof distribution];
|
||
|
|
const percentage = total > 0 ? (value / total) * 100 : 0;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div key={level.key} className="mb-3.5 last:mb-0">
|
||
|
|
<div className="flex justify-between mb-1.5">
|
||
|
|
<span className="text-[12px] text-text-secondary">{level.label}</span>
|
||
|
|
<span className="text-[12px] font-semibold">
|
||
|
|
{value} ({percentage.toFixed(1)}%)
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="h-[5px] bg-bg-page rounded overflow-hidden">
|
||
|
|
<div
|
||
|
|
className={`h-full rounded ${level.color}`}
|
||
|
|
style={{ width: `${percentage}%` }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|