spb/maclustr-research

1import type { BenchmarkObservation } from "@/lib/schemas";23/** Horizontal bar chart with error bars, in plain SVG. Always paired with a data table by the page. */4export function BenchmarkChart({ rows, label, alt }: { rows: (BenchmarkObservation & { nodeName: string })[]; label: string; alt: string }) {5  const max = Math.max(...rows.map((r) => r.value + r.uncertainty), 1);6  const rowH = 34;7  const left = 110;8  const width = 640;9  const scale = (v: number) => (v / max) * (width - left - 70);10  return (11    <svg viewBox={`0 0 ${width} ${rows.length * rowH + 28}`} role="img" aria-label={alt} className="w-full">12      {rows.map((r, i) => {13        const y = i * rowH + 8;14        return (15          <g key={r.id}>16            <text x={left - 12} y={y + 15} textAnchor="end" fill="#3D4757" fontSize="12" fontFamily="var(--font-mono)">{r.nodeName}</text>17            <rect x={left} y={y + 4} width={scale(r.value)} height={14} fill="#2A78D6" rx="3" />18            <line x1={left + scale(r.value - r.uncertainty)} x2={left + scale(r.value + r.uncertainty)} y1={y + 11} y2={y + 11} stroke="#0C1322" strokeWidth="1.5" />19            <text x={left + scale(r.value + r.uncertainty) + 8} y={y + 15} fill="#0C1322" fontSize="12" fontFamily="var(--font-mono)">{r.value} ± {r.uncertainty}</text>20          </g>21        );22      })}23      <text x={left} y={rows.length * rowH + 22} fill="#5B6676" fontSize="11" fontFamily="var(--font-mono)">{label}</text>24    </svg>25  );26}27