spb/lou-ka

1// -----------------------------------------------------------------------------2// Lou-Ka — Agrégateur de logements à louer (province de Québec)3// Auteur : Simon-Pierre Boucher — contact@spboucher.ai4// components/KaScoreBadge.tsx : pastilles KA Score (design system Groupe-KA).5//   · compact : « KA 78 » sur les cartes d'annonces et mini-fiches ;6//   · cercle  : jauge circulaire d'un sous-score sur la fiche.7// -----------------------------------------------------------------------------8import { kaLabel } from "../api";910/** Classe de teinte par tranche (styles dans styles.css). */11export function kaTint(score: number | null | undefined): string {12  if (score == null) return "na";13  if (score >= 70) return "haut";14  if (score >= 55) return "bon";15  if (score >= 40) return "moyen";16  return "bas";17}1819/** Pastille compacte « KA 78 » — cartes de liste, carrousel, mini-fiches. */20export default function KaScoreBadge({ score, title }: {21  score: number | null | undefined;22  title?: string;23}) {24  if (score == null) return null;25  return (26    <span27      className={`ka-badge ka-${kaTint(score)}`}28      title={title ?? `KA Score ${Math.round(score)} — ${kaLabel(score)} · voir la méthodologie sur /ka-scores`}29      aria-label={`KA Score ${Math.round(score)} sur 100, ${kaLabel(score)}`}30    >31      <span className="ka-badge-logo">KA</span> {Math.round(score)}32    </span>33  );34}3536/** Jauge circulaire d'un sous-score (fiche d'annonce, page méthodologie). */37export function KaScoreCircle({ score, nom, note }: {38  score: number | null;39  nom: string;40  note?: string | null;41}) {42  const r = 26;43  const c = 2 * Math.PI * r;44  const part = score == null ? 0 : Math.max(0, Math.min(1, score / 100));45  return (46    <div className={`ka-circle ka-${kaTint(score)}`} role="img"47      aria-label={`${nom} : ${score == null ? note ?? "données insuffisantes" : `${Math.round(score)} sur 100`}`}>48      <svg viewBox="0 0 64 64" width="64" height="64" aria-hidden="true">49        <circle cx="32" cy="32" r={r} className="ka-circle-fond" />50        <circle51          cx="32" cy="32" r={r} className="ka-circle-arc"52          strokeDasharray={`${c * part} ${c}`}53          transform="rotate(-90 32 32)"54        />55        <text x="32" y="37" textAnchor="middle" className="ka-circle-val">56          {score == null ? "—" : Math.round(score)}57        </text>58      </svg>59      <div className="ka-circle-nom">{nom}</div>60      <div className="ka-circle-label">61        {score == null ? (note ?? "Données insuffisantes") : kaLabel(score)}62      </div>63    </div>64  );65}66