portal/src/components/portal/charts/StackBar.tsx

// Horizontal stacked bar for severity composition. Uses the four
// --sev-* tokens.
import type { Severity } from "@/lib/fixtures";

const ORDER: Severity[] = ["critical", "high", "medium", "low"];
const COLOR: Record<Severity, string> = {
  critical: "var(--sev-critical)",
  high: "var(--sev-high)",
  medium: "var(--sev-medium)",
  low: "var(--sev-low)",
};

export function StackBar({
  counts,
  height = 7,
}: {
  counts: Record<Severity, number>;
  height?: number;
}) {
  const total = ORDER.reduce((acc, k) => acc + (counts[k] ?? 0), 0);
  if (total === 0) {
    return (
      <div
        style={{
          height,
          borderRadius: 3,
          background: "var(--paper-2)",
          border: "1px solid var(--rule)",
        }}
      />
    );
  }
  return (
    <div
      style={{
        height,
        borderRadius: 3,
        overflow: "hidden",
        display: "flex",
        border: "1px solid var(--rule)",
      }}
    >
      {ORDER.map((k) => {
        const n = counts[k] ?? 0;
        if (n === 0) return null;
        return (
          <div
            key={k}
            title={`${k}: ${n}`}
            style={{ width: `${(n / total) * 100}%`, background: COLOR[k] }}
          />
        );
      })}
    </div>
  );
}