spb/vrai-prix Public
Vrai-Prix — l'évaluation du vrai prix des propriétés résidentielles au Québec.
TypeScript 96.7%
CSS 3.1%
1// Auteur : Simon-Pierre Boucher — contact@spboucher.ai2"use client";3import { useState } from "react";4import { CountUp } from "./MetricViz";5import { useLang } from "./LangContext";6import type { TKey } from "@/lib/i18n";78export interface ProvStats {9 generated: string;10 unites: number;11 valeur_totale_2026: number;12 valeur_role_totale: number;13 valeur_mediane_2026: number;14 croissance_2021_2026_pct: number;15 logements: number;16 aire_etages_km2: number;17 terrain_km2: number;18 municipalites: number;19 totaux_annee: { year: number; total: number; n: number }[];20 par_type: { type: string; n: number; total: number; mediane: number | null }[];21 par_ville: { ville: string; n: number; total: number; mediane: number | null }[];22}2324const POP_QC = 9_111_000; // population du Québec (2026, ISQ)25const BUDGET_QC = 165_800_000_000; // dépenses budget QC 2026-2027 (approx.)26const PIB_QC = 640_000_000_000; // PIB nominal QC (approx. 2025)2728const money = (v: number, lang: string, frac = 0) =>29 new Intl.NumberFormat(lang === "fr" ? "fr-CA" : "en-CA", {30 style: "currency",31 currency: "CAD",32 maximumFractionDigits: frac,33 }).format(v);3435const compact = (v: number, lang: string) => {36 const fr = lang === "fr";37 if (v >= 1e12) return `${(v / 1e12).toLocaleString(fr ? "fr-CA" : "en-CA", { maximumFractionDigits: 2 })} ${fr ? "billions $" : "T$"}`;38 if (v >= 1e9) return `${(v / 1e9).toLocaleString(fr ? "fr-CA" : "en-CA", { maximumFractionDigits: 1 })} G$`;39 if (v >= 1e6) return `${(v / 1e6).toLocaleString(fr ? "fr-CA" : "en-CA", { maximumFractionDigits: 1 })} M$`;40 return money(v, lang);41};4243const num = (v: number, lang: string) =>44 v.toLocaleString(lang === "fr" ? "fr-CA" : "en-CA");4546export default function StatsView({ s }: { s: ProvStats }) {47 const { lang, t } = useLang();48 const fr = lang === "fr";49 const [q, setQ] = useState("");5051 const maxYear = Math.max(...s.totaux_annee.map((x) => x.total));52 const maxType = Math.max(...s.par_type.map((x) => x.total));53 const top10 = s.par_ville.slice(0, 10);54 const maxVille = Math.max(...top10.map((x) => x.total));55 const villes = s.par_ville.filter((v) =>56 v.ville.toLowerCase().includes(q.trim().toLowerCase())57 );5859 return (60 <div className="pb-6 pt-10 sm:pt-14">61 {/* ---- LE CHIFFRE ---- */}62 <section>63 <span className="kicker">{fr ? "Juste pour le show" : "Just for the show"}</span>64 <h1 className="vp-display mt-3 text-[clamp(26px,4.6vw,46px)] font-bold uppercase leading-[1.02] tracking-[-0.03em]">65 {fr ? (66 <>67 Tout l'immobilier du Québec vaut,68 <br />69 <span className="hl">au dollar près</span>…70 </>71 ) : (72 <>73 All Québec real estate is worth,74 <br />75 <span className="hl">to the dollar</span>…76 </>77 )}78 </h1>79 <div className="rise mt-6 rounded-[10px] border-[1.5px] border-ink bg-ink p-6 shadow-[10px_10px_0_rgba(20,24,20,0.25)] sm:p-10">80 <p className="vp-display break-all text-[clamp(30px,6.2vw,76px)] font-bold leading-none tracking-[-0.03em] text-lime">81 <CountUp82 value={s.valeur_totale_2026}83 duration={2600}84 format={(v) => money(v, lang)}85 />86 </p>87 <p className="vp-mono mt-4 text-[11.5px] uppercase tracking-[0.1em] text-[rgba(255,81,72,0.75)]">88 {fr89 ? `≈ ${compact(s.valeur_totale_2026, lang)} · ${num(s.unites, lang)} propriétés · ${num(s.municipalites, lang)} municipalités · millésime 2026`90 : `≈ ${compact(s.valeur_totale_2026, lang)} · ${num(s.unites, lang)} properties · ${num(s.municipalites, lang)} municipalities · 2026 vintage`}91 </p>92 <div className="mt-6 flex flex-wrap gap-2.5">93 {(94 [95 [fr ? "par Québécois·e" : "per Quebecer", money(s.valeur_totale_2026 / POP_QC, lang)],96 [fr ? "budgets annuels du Québec" : "annual Québec budgets", `× ${(s.valeur_totale_2026 / BUDGET_QC).toFixed(1)}`],97 [fr ? "fois le PIB du Québec" : "× Québec GDP", `× ${(s.valeur_totale_2026 / PIB_QC).toFixed(1)}`],98 [fr ? "depuis 2021 (périmètre constant)" : "since 2021 (constant perimeter)", `+${s.croissance_2021_2026_pct.toLocaleString(fr ? "fr-CA" : "en-CA")} %`],99 ] as [string, string][]100 ).map(([k, v]) => (101 <span key={k} className="stat-chip !border-[rgba(255,81,72,0.5)] !bg-transparent !text-[rgba(245,243,238,0.85)] !shadow-none">102 <b className="!text-lime">{v}</b> {k}103 </span>104 ))}105 </div>106 </div>107 <p className="vp-mono mt-3 text-[10.5px] uppercase tracking-[0.06em] text-ink-3">108 {fr109 ? "Somme des 3 747 008 estimations Vrai-Prix (modèle hédonique, rôle 2026). Évaluation municipale totale correspondante : "110 : "Sum of 3,747,008 Vrai-Prix estimates (hedonic model, 2026 roll). Corresponding total municipal assessment: "}111 {compact(s.valeur_role_totale, lang)}.112 </p>113 <a href="/api/report/stats" className="btn btn-primary mt-5" download>114 {fr115 ? "Télécharger le rapport statistique provincial (PDF)"116 : "Download the provincial statistics report (PDF)"}{" "}117 ↓118 </a>119 </section>120121 {/* ---- tuiles physiques ---- */}122 <section className="mt-10">123 <div className="grid grid-cols-2 gap-3.5 sm:grid-cols-4">124 {(125 [126 [fr ? "Valeur médiane" : "Median value", money(s.valeur_mediane_2026, lang), true],127 [fr ? "Logements" : "Dwellings", num(s.logements, lang), false],128 [fr ? "Plancher bâti" : "Built floor area", `${num(s.aire_etages_km2, lang)} km²`, false],129 [fr ? "Terrains privés" : "Private land", `${num(s.terrain_km2, lang)} km²`, false],130 ] as [string, string, boolean][]131 ).map(([k, v, hero], i) => (132 <div key={k} className={`vp-card vp-card-hover rise p-4 ${hero ? "!bg-ink" : ""}`} style={{ animationDelay: `${i * 70}ms` }}>133 <p className={`vp-display text-[clamp(19px,2.4vw,27px)] font-bold tracking-[-0.03em] ${hero ? "text-lime" : ""}`}>{v}</p>134 <p className={`vp-mono mt-1.5 text-[10px] font-bold uppercase tracking-[0.1em] ${hero ? "text-[rgba(255,81,72,0.7)]" : "text-ink-3"}`}>{k}</p>135 </div>136 ))}137 </div>138 </section>139140 {/* ---- valeur provinciale par année ---- */}141 <section className="mt-12">142 <span className="kicker">2021 → 2026</span>143 <h2 className="vp-display mt-2 text-[22px] font-bold uppercase tracking-[-0.02em]">144 {fr ? "La province, année par année" : "The province, year by year"}145 </h2>146 <div className="vp-card rise mt-4 p-5 sm:p-6">147 <div className="flex flex-col gap-2">148 {s.totaux_annee.map((h, i) => {149 const prev = i > 0 ? s.totaux_annee[i - 1].total : null;150 const yoy = prev ? ((h.total / prev - 1) * 100) : null;151 return (152 <div key={h.year} className="hbar-row grid grid-cols-[44px_1fr_auto] items-center gap-2 sm:grid-cols-[52px_1fr_auto] sm:gap-3">153 <span className="vp-mono text-[12px] font-bold">{h.year}</span>154 <span className="hbar-track !h-[24px]">155 <span156 className="hbar-fill grow-x !rounded-r-[6px]"157 style={{158 width: `${(h.total / maxYear) * 100}%`,159 animationDelay: `${i * 90}ms`,160 background: h.year === 2026 ? "var(--ink)" : undefined,161 }}162 />163 </span>164 <span className="vp-mono flex items-center justify-end gap-2 text-[12px] font-bold">165 {compact(h.total, lang)}166 {yoy != null && (167 <span className={`rounded-[4px] border border-ink px-1 py-px text-[9px] ${yoy >= 0 ? "bg-lime-soft text-green-deep" : "bg-[var(--danger-soft)] text-[var(--danger)]"}`}>168 {yoy >= 0 ? "+" : ""}{yoy.toFixed(1)} %169 </span>170 )}171 </span>172 </div>173 );174 })}175 </div>176 <p className="vp-mono mt-3 text-[10px] uppercase tracking-[0.05em] text-ink-3">177 {fr178 ? "Sommes des unités estimées chaque millésime — le parc s'agrandit d'année en année (nouvelles constructions incluses)."179 : "Sums of units estimated each vintage — the stock grows every year (new construction included)."}180 </p>181 </div>182 </section>183184 {/* ---- par type ---- */}185 <section className="mt-12">186 <span className="kicker">{fr ? "Répartition" : "Breakdown"}</span>187 <h2 className="vp-display mt-2 text-[22px] font-bold uppercase tracking-[-0.02em]">188 {fr ? "Valeur par type de propriété" : "Value by property type"}189 </h2>190 <div className="vp-card rise mt-4 p-5 sm:p-6">191 <div className="flex flex-col gap-2.5">192 {s.par_type.map((tp, i) => (193 <div key={tp.type} className="hbar-row grid grid-cols-[110px_1fr_auto] items-center gap-2 sm:grid-cols-[150px_1fr_auto] sm:gap-3">194 <span className="vp-display truncate text-[13px] font-bold">{t(tp.type as TKey)}</span>195 <span className="hbar-track !h-[22px]">196 <span197 className="hbar-fill grow-x"198 style={{ width: `${(tp.total / maxType) * 100}%`, animationDelay: `${i * 80}ms` }}199 />200 </span>201 <span className="vp-mono text-right text-[11.5px] font-bold">202 {compact(tp.total, lang)}203 <span className="block text-[9.5px] font-normal text-ink-3">204 {num(tp.n, lang)} · {fr ? "méd." : "med."} {tp.mediane ? compact(tp.mediane, lang) : "—"}205 </span>206 </span>207 </div>208 ))}209 </div>210 </div>211 </section>212213 {/* ---- par ville ---- */}214 <section className="mt-12">215 <span className="kicker">{fr ? "Palmarès" : "Ranking"}</span>216 <h2 className="vp-display mt-2 text-[22px] font-bold uppercase tracking-[-0.02em]">217 {fr ? "Valeur par municipalité" : "Value by municipality"}218 </h2>219 {/* top 10 en barres */}220 <div className="vp-card rise mt-4 p-5 sm:p-6">221 <div className="flex flex-col gap-2">222 {top10.map((v, i) => (223 <div key={v.ville} className="hbar-row grid grid-cols-[24px_96px_1fr_auto] items-center gap-2 sm:grid-cols-[28px_150px_1fr_auto] sm:gap-3">224 <span className={`vp-mono inline-flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-ink text-[10.5px] font-bold ${i < 3 ? "bg-ink text-lime" : "bg-surface text-ink"}`}>225 {i + 1}226 </span>227 <span className="vp-display truncate text-[13px] font-bold">{v.ville}</span>228 <span className="hbar-track !h-[22px]">229 <span230 className="hbar-fill grow-x"231 style={{ width: `${(v.total / maxVille) * 100}%`, animationDelay: `${i * 70}ms`, background: i === 0 ? "var(--ink)" : undefined }}232 />233 </span>234 <span className="vp-mono text-right text-[11.5px] font-bold">{compact(v.total, lang)}</span>235 </div>236 ))}237 </div>238 </div>239 {/* table complète filtrable */}240 <div className="mt-4">241 <input242 value={q}243 onChange={(e) => setQ(e.target.value)}244 placeholder={fr ? "Filtrer parmi les 200 plus grandes municipalités…" : "Filter the 200 largest municipalities…"}245 className="vp-input max-w-md"246 />247 <div className="src-wrap mt-3 max-h-[460px] overflow-y-auto">248 <table className="src-table">249 <thead className="sticky top-0 z-10">250 <tr>251 <th>#</th>252 <th>{fr ? "Municipalité" : "Municipality"}</th>253 <th className="text-right">{fr ? "Propriétés" : "Properties"}</th>254 <th className="text-right">{fr ? "Valeur totale" : "Total value"}</th>255 <th className="text-right">{fr ? "Valeur médiane" : "Median value"}</th>256 </tr>257 </thead>258 <tbody>259 {villes.map((v) => {260 const rank = s.par_ville.indexOf(v) + 1;261 return (262 <tr key={v.ville}>263 <td className="vp-mono text-[11px] font-bold text-ink-3">{rank}</td>264 <td className="font-semibold">{v.ville}</td>265 <td className="vp-mono text-right text-[12px]">{num(v.n, lang)}</td>266 <td className="vp-display text-right font-bold">{compact(v.total, lang)}</td>267 <td className="vp-mono text-right text-[12px]">{v.mediane ? money(v.mediane, lang) : "—"}</td>268 </tr>269 );270 })}271 </tbody>272 </table>273 </div>274 <p className="vp-mono mt-2 text-[10px] uppercase tracking-[0.05em] text-ink-3">275 {fr276 ? `Top 200 des ${num(s.municipalites, lang)} municipalités, par valeur totale estimée (millésime 2026). Généré le ${s.generated}.`277 : `Top 200 of ${num(s.municipalites, lang)} municipalities by total estimated value (2026 vintage). Generated ${s.generated}.`}278 </p>279 </div>280 </section>281 </div>282 );283}284