spb/trouve-ka Public

1/**2 * Trouve-KA — distribution des codes HTTP en barres CSS3 * Author: Simon-Pierre Boucher4 * Contact: contact@spboucher.ai5 */67import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";8import { formatNumber } from "@/lib/format";910/**11 * Couleur de statut par classe HTTP. Palette de statut réservée (jamais une12 * couleur de série) : chaque barre porte son code et sa valeur en texte —13 * la couleur n'est jamais le seul canal d'information.14 */15function barClass(code: string): string {16  if (code.startsWith("2")) return "bg-status-good";17  if (code.startsWith("3")) return "bg-viz-blue";18  if (code.startsWith("4")) return "bg-status-warning";19  if (code.startsWith("5")) return "bg-status-critical";20  return "bg-ink-3";21}2223interface HttpBarsProps {24  data: Record<string, number>;25}2627export function HttpBars({ data }: HttpBarsProps) {28  const entries = Object.entries(data).sort(([a], [b]) => a.localeCompare(b));29  const max = Math.max(1, ...entries.map(([, count]) => count));3031  return (32    <Card>33      <CardHeader>34        <CardTitle>Distribution des codes HTTP</CardTitle>35      </CardHeader>36      <CardContent>37        {entries.length === 0 ? (38          <p className="text-sm text-ink-2">Aucune donnée pour l'instant.</p>39        ) : (40          <ul className="space-y-2.5">41            {entries.map(([code, count]) => (42              <li key={code} className="flex items-center gap-3">43                <span className="gk-mono w-10 shrink-0 text-sm font-bold tabular-nums text-ink">44                  {code}45                </span>46                <span className="h-2.5 flex-1 overflow-hidden rounded-r bg-surface-2 ring-1 ring-inset ring-line">47                  <span48                    className={`block h-full rounded-r ${barClass(code)}`}49                    style={{ width: `${Math.max(1, (count / max) * 100)}%` }}50                  />51                </span>52                <span className="gk-mono w-20 shrink-0 text-right text-sm tabular-nums text-ink-2">53                  {formatNumber(count)}54                </span>55              </li>56            ))}57          </ul>58        )}59      </CardContent>60    </Card>61  );62}63