|
| 1 | +import { useMemo, useState } from "react" |
| 2 | +import { Link } from "react-router-dom" |
| 3 | +import { ArrowLeft, ArrowRight, ChevronDown, ChevronUp } from "lucide-react" |
| 4 | +import { useQuery } from "@tanstack/react-query" |
| 5 | + |
| 6 | +import { Button } from "@/components/ui/button" |
| 7 | +import { cn } from "@/lib/utils" |
| 8 | +import { fetchScore, type ScoreProperties } from "@/lib/score" |
| 9 | + |
| 10 | +// Le livrable actionnable de la problématique (#34) : classement des communes |
| 11 | +// « sous-cotées » — gap_pondere positif = bien notée pour son prix. V1 sans |
| 12 | +// sparklines (série temporelle des prix : dépend de la couche data #17). |
| 13 | + |
| 14 | +type SortKey = "nom" | "dep" | "prix" | "score_valeur" | "gap_pondere" |
| 15 | + |
| 16 | +const COLUMNS: { key: SortKey; label: string; numeric?: boolean }[] = [ |
| 17 | + { key: "nom", label: "Commune" }, |
| 18 | + { key: "dep", label: "Dép." }, |
| 19 | + { key: "prix", label: "€/m²", numeric: true }, |
| 20 | + { key: "score_valeur", label: "Score global", numeric: true }, |
| 21 | + { key: "gap_pondere", label: "Écart qualité/prix", numeric: true }, |
| 22 | +] |
| 23 | + |
| 24 | +// Pagination d'affichage : 17 769 communes rendues d'un coup feraient ramer le DOM. |
| 25 | +const PAGE = 100 |
| 26 | + |
| 27 | +function compare(a: ScoreProperties, b: ScoreProperties, key: SortKey): number { |
| 28 | + const va = a[key] |
| 29 | + const vb = b[key] |
| 30 | + // Les valeurs manquantes vont toujours en fin de liste, quel que soit le sens. |
| 31 | + if (va == null) return vb == null ? 0 : 1 |
| 32 | + if (vb == null) return -1 |
| 33 | + if (typeof va === "string" || typeof vb === "string") |
| 34 | + return String(va).localeCompare(String(vb), "fr") |
| 35 | + return va - vb |
| 36 | +} |
| 37 | + |
| 38 | +export default function Undervalued() { |
| 39 | + const [sortKey, setSortKey] = useState<SortKey>("gap_pondere") |
| 40 | + const [desc, setDesc] = useState(true) |
| 41 | + const [dep, setDep] = useState("") |
| 42 | + const [limit, setLimit] = useState(PAGE) |
| 43 | + |
| 44 | + const { data, isLoading, isError } = useQuery({ |
| 45 | + queryKey: ["score"], // même cache que la carte : pas de re-téléchargement. |
| 46 | + queryFn: fetchScore, |
| 47 | + staleTime: Infinity, |
| 48 | + }) |
| 49 | + |
| 50 | + // Seules les communes notées ET pricées sont classables. |
| 51 | + const rows = useMemo( |
| 52 | + () => |
| 53 | + (data?.features ?? []) |
| 54 | + .map((f) => f.properties) |
| 55 | + .filter((p) => p.gap_pondere != null && p.prix != null), |
| 56 | + [data], |
| 57 | + ) |
| 58 | + |
| 59 | + const deps = useMemo( |
| 60 | + () => |
| 61 | + [...new Set(rows.map((p) => p.dep).filter((d): d is string => d != null))].sort( |
| 62 | + (a, b) => a.localeCompare(b, "fr", { numeric: true }), |
| 63 | + ), |
| 64 | + [rows], |
| 65 | + ) |
| 66 | + |
| 67 | + const sorted = useMemo(() => { |
| 68 | + const filtered = dep ? rows.filter((p) => p.dep === dep) : rows |
| 69 | + const s = [...filtered].sort((a, b) => compare(a, b, sortKey)) |
| 70 | + return desc ? s.reverse() : s |
| 71 | + }, [rows, dep, sortKey, desc]) |
| 72 | + |
| 73 | + const onSort = (key: SortKey) => { |
| 74 | + if (key === sortKey) { |
| 75 | + setDesc(!desc) |
| 76 | + } else { |
| 77 | + setSortKey(key) |
| 78 | + // Par défaut : décroissant pour les colonnes numériques, croissant sinon. |
| 79 | + setDesc(COLUMNS.find((c) => c.key === key)?.numeric ?? false) |
| 80 | + } |
| 81 | + setLimit(PAGE) |
| 82 | + } |
| 83 | + |
| 84 | + const visible = sorted.slice(0, limit) |
| 85 | + |
| 86 | + return ( |
| 87 | + <div className="min-h-svh bg-background text-foreground"> |
| 88 | + <header className="border-b"> |
| 89 | + <div className="mx-auto flex max-w-5xl items-center gap-3 px-6 py-4"> |
| 90 | + <Button variant="ghost" size="icon" asChild> |
| 91 | + <Link to="/" aria-label="Retour à l'accueil"> |
| 92 | + <ArrowLeft className="size-4" /> |
| 93 | + </Link> |
| 94 | + </Button> |
| 95 | + <span className="font-display text-lg font-bold tracking-tight"> |
| 96 | + Homepedia<span className="text-accent">.</span> |
| 97 | + </span> |
| 98 | + </div> |
| 99 | + </header> |
| 100 | + |
| 101 | + <main className="mx-auto max-w-5xl px-6 py-10"> |
| 102 | + <h1 className="font-display text-3xl font-bold tracking-tight"> |
| 103 | + Communes sous-cotées |
| 104 | + </h1> |
| 105 | + <p className="mt-2 max-w-2xl text-sm leading-relaxed text-muted-foreground"> |
| 106 | + L'écart qualité/prix compare la qualité du territoire (transport, |
| 107 | + sécurité, climat, services…) à son niveau de prix.{" "} |
| 108 | + <span className="font-medium text-foreground"> |
| 109 | + Positif = sous-cotée |
| 110 | + </span>{" "} |
| 111 | + : la commune offre plus que ce que son prix suggère. Négatif = chère |
| 112 | + pour ce qu'elle offre. |
| 113 | + </p> |
| 114 | + |
| 115 | + <div className="mt-6 flex flex-wrap items-center gap-3"> |
| 116 | + <label className="flex items-center gap-2 text-sm text-muted-foreground"> |
| 117 | + Département |
| 118 | + <select |
| 119 | + value={dep} |
| 120 | + onChange={(e) => { |
| 121 | + setDep(e.target.value) |
| 122 | + setLimit(PAGE) |
| 123 | + }} |
| 124 | + className="rounded-md border border-input bg-background px-2 py-1.5 text-sm text-foreground" |
| 125 | + > |
| 126 | + <option value="">Tous</option> |
| 127 | + {deps.map((d) => ( |
| 128 | + <option key={d} value={d}> |
| 129 | + {d} |
| 130 | + </option> |
| 131 | + ))} |
| 132 | + </select> |
| 133 | + </label> |
| 134 | + <span className="text-xs text-muted-foreground"> |
| 135 | + {sorted.length.toLocaleString("fr-FR")} communes classées |
| 136 | + </span> |
| 137 | + </div> |
| 138 | + |
| 139 | + {isLoading && ( |
| 140 | + <div className="mt-8 text-sm text-muted-foreground">Chargement…</div> |
| 141 | + )} |
| 142 | + {isError && ( |
| 143 | + <div className="mt-8 text-sm text-destructive"> |
| 144 | + Données indisponibles |
| 145 | + </div> |
| 146 | + )} |
| 147 | + |
| 148 | + {!isLoading && !isError && ( |
| 149 | + <> |
| 150 | + <div className="mt-4 overflow-x-auto rounded-xl border"> |
| 151 | + <table className="w-full text-sm"> |
| 152 | + <thead> |
| 153 | + <tr className="border-b bg-muted/50 text-left"> |
| 154 | + <th className="px-3 py-2.5 font-semibold text-muted-foreground"> |
| 155 | + # |
| 156 | + </th> |
| 157 | + {COLUMNS.map((c) => ( |
| 158 | + <th |
| 159 | + key={c.key} |
| 160 | + className={cn("px-3 py-2.5", c.numeric && "text-right")} |
| 161 | + > |
| 162 | + <button |
| 163 | + type="button" |
| 164 | + onClick={() => onSort(c.key)} |
| 165 | + className={cn( |
| 166 | + "inline-flex items-center gap-1 font-semibold transition-colors hover:text-accent", |
| 167 | + sortKey === c.key |
| 168 | + ? "text-accent" |
| 169 | + : "text-muted-foreground", |
| 170 | + )} |
| 171 | + > |
| 172 | + {c.label} |
| 173 | + {sortKey === c.key && |
| 174 | + (desc ? ( |
| 175 | + <ChevronDown className="size-3.5" /> |
| 176 | + ) : ( |
| 177 | + <ChevronUp className="size-3.5" /> |
| 178 | + ))} |
| 179 | + </button> |
| 180 | + </th> |
| 181 | + ))} |
| 182 | + <th className="px-3 py-2.5" /> |
| 183 | + </tr> |
| 184 | + </thead> |
| 185 | + <tbody> |
| 186 | + {visible.map((p, i) => ( |
| 187 | + <tr |
| 188 | + key={p.code_commune} |
| 189 | + className="border-b last:border-b-0 transition-colors hover:bg-muted/40" |
| 190 | + > |
| 191 | + <td className="px-3 py-2 tabular-nums text-muted-foreground"> |
| 192 | + {i + 1} |
| 193 | + </td> |
| 194 | + <td className="px-3 py-2"> |
| 195 | + <div className="font-medium"> |
| 196 | + {p.nom ?? p.code_commune} |
| 197 | + </div> |
| 198 | + <div className="text-xs text-muted-foreground"> |
| 199 | + {p.code_commune} |
| 200 | + </div> |
| 201 | + </td> |
| 202 | + <td className="px-3 py-2 text-muted-foreground"> |
| 203 | + {p.dep ?? "—"} |
| 204 | + </td> |
| 205 | + <td className="px-3 py-2 text-right tabular-nums"> |
| 206 | + {p.prix != null |
| 207 | + ? Math.round(p.prix).toLocaleString("fr-FR") |
| 208 | + : "—"} |
| 209 | + </td> |
| 210 | + <td className="px-3 py-2 text-right tabular-nums"> |
| 211 | + {p.score_valeur?.toFixed(2) ?? "—"} |
| 212 | + </td> |
| 213 | + <td |
| 214 | + className={cn( |
| 215 | + "px-3 py-2 text-right font-semibold tabular-nums", |
| 216 | + (p.gap_pondere ?? 0) > 0 |
| 217 | + ? "text-accent" |
| 218 | + : "text-destructive", |
| 219 | + )} |
| 220 | + > |
| 221 | + {(p.gap_pondere ?? 0) >= 0 ? "+" : ""} |
| 222 | + {p.gap_pondere?.toFixed(2)} |
| 223 | + </td> |
| 224 | + <td className="px-3 py-2 text-right"> |
| 225 | + <Button size="sm" variant="ghost" asChild> |
| 226 | + <Link to={`/map?commune=${p.code_commune}`}> |
| 227 | + Carte |
| 228 | + <ArrowRight className="size-3.5" /> |
| 229 | + </Link> |
| 230 | + </Button> |
| 231 | + </td> |
| 232 | + </tr> |
| 233 | + ))} |
| 234 | + </tbody> |
| 235 | + </table> |
| 236 | + </div> |
| 237 | + |
| 238 | + {limit < sorted.length && ( |
| 239 | + <div className="mt-4 flex justify-center"> |
| 240 | + <Button |
| 241 | + variant="outline" |
| 242 | + onClick={() => setLimit(limit + PAGE)} |
| 243 | + > |
| 244 | + Afficher plus ({(sorted.length - limit).toLocaleString("fr-FR")}{" "} |
| 245 | + restantes) |
| 246 | + </Button> |
| 247 | + </div> |
| 248 | + )} |
| 249 | + </> |
| 250 | + )} |
| 251 | + </main> |
| 252 | + </div> |
| 253 | + ) |
| 254 | +} |
0 commit comments