Spaces:
Running
Running
File size: 1,994 Bytes
2eb87e3 d22337b 2eb87e3 d22337b 2eb87e3 d22337b 2eb87e3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | import type { Severity, SeverityCounts } from "@/shared/types";
import { SEV_ORDER, severityLabel, totalFindings } from "../shared/lib/format";
/** NVD four tiers — dark-console spectrum, red → orange → amber. */
const BAR: Record<Severity, string> = {
critical: "#E5484D",
high: "#F2604F",
medium: "#FF8A3C",
low: "#F0C43A",
};
const DOT: Record<Severity, string> = {
critical: "bg-sev-critical-bar",
high: "bg-sev-high-bar",
medium: "bg-sev-medium-bar",
low: "bg-sev-low-bar",
};
export function SeverityBar({
counts,
widthClass = "w-40",
heightClass = "h-1.5",
showLegend = true,
legendClass = "text-[12px]",
}: {
counts: SeverityCounts;
widthClass?: string;
heightClass?: string;
showLegend?: boolean;
legendClass?: string;
}) {
const total = totalFindings(counts);
const segs = SEV_ORDER.filter((s) => (counts[s] ?? 0) > 0).map((s) => ({
level: s,
pct: total === 0 ? 0 : (counts[s] / total) * 100,
count: counts[s],
}));
return (
<div className="flex flex-col gap-1.5">
<div
className={`flex ${heightClass} ${widthClass} overflow-hidden rounded-full bg-surface-sunken`}
role="img"
aria-label={`Severity distribution, ${total} findings`}
>
{segs.map((s) => (
<div
key={s.level}
className="h-full"
style={{ width: `${s.pct}%`, backgroundColor: BAR[s.level] }}
title={`${severityLabel(s.level)}: ${s.count}`}
/>
))}
</div>
{showLegend && (
<div
className={`flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-ink-secondary ${legendClass}`}
>
{SEV_ORDER.map((s) => (
<span key={s} className="inline-flex items-center gap-1">
<span className={`inline-block h-1.5 w-1.5 rounded-full ${DOT[s]}`} />
{counts[s] ?? 0} {severityLabel(s)}
</span>
))}
</div>
)}
</div>
);
}
|