feat: normales journalières + dedupe SYNOP + carte plus large
Some checks are pending
Deploy info-canicule / deploy (push) Waiting to run

3 fixes en un :

1. lib/observations.ts : dedupe par validity_time sur le parse hourly.
   L API MF SYNOP retourne chaque obs en doublon exact sur les ranges
   multi-step (bug gateway WSO2). Constaté 7/8 paires identiques sur 24h.

2. Normales 1991-2020 passées de mensuelles à journalières (lissées 7j).
   - scripts/build-normales.mjs : agrégation par day-of-year (1..366)
     avec moving average ±3j pour stabiliser le bruit jour-à-jour.
   - src/data/normales.json : 2.28 MB (vs 78 KB), 96 × 366 entrées.
   - lib/normales.ts : normaleForDay/Date + normalesForRange, computeAnomaly
     compare maintenant chaque jour observé à SA normale (pas à la moyenne
     du mois) → bien plus précis sur les jours de transition mensuelle.
   - TemperatureChartInteractive : overlay normales en COURBE qui suit
     la saison (7j/30j) au lieu d une ligne horizontale unique.
     24h reste ligne horizontale (normale du jour courant).
   - Tooltip 7j/30j ajoute "↳ normale TX X°C (+Y)" pour montrer l écart
     par point.

3. Carte sur la home libérée du container-tight (max-w-5xl = 1024px) :
   wrapper dédié max-w-[1400px] → carte ~37% plus grande sur PC large.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Florian 2026-05-26 01:43:10 +02:00
parent 84e8bd200f
commit cb8d111a12
8 changed files with 283 additions and 118 deletions

View file

@ -100,42 +100,46 @@ const productDate = snapshot?.productDatetime
{
!error && (
<section class="container-tight pb-8">
<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
<h2 class="text-xl font-semibold text-slate-900">Niveau par département (aujourd'hui)</h2>
<VigilanceLegend />
</div>
<p class="mb-3 text-sm text-slate-500">
Survolez un département pour voir le détail des alertes, cliquez pour la page complète.
</p>
<div class="flex justify-center">
<>
<section class="container-tight pb-2">
<div class="mb-2 flex flex-wrap items-center justify-between gap-3">
<h2 class="text-xl font-semibold text-slate-900">Niveau par département (aujourd'hui)</h2>
<VigilanceLegend />
</div>
<p class="text-sm text-slate-500">
Survolez un département pour voir le détail des alertes, cliquez pour la page complète.
</p>
</section>
<div class="mx-auto w-full max-w-[1400px] px-4 pb-4 sm:px-6">
<FranceMap colorsByDept={colorsByDept} alertsByDept={alertsByDept} />
</div>
<details class="mt-6 rounded border border-slate-200 bg-white p-4">
<summary class="cursor-pointer font-medium text-slate-700">
Vue par région (liste)
</summary>
<div class="mt-4">
<DepartementGrid colorsByDept={colorsByDept} />
</div>
</details>
<p class="mt-4 text-center text-xs text-slate-500">
Source officielle :
<a href="https://vigilance.meteofrance.fr/" rel="noopener" class="text-canicule-700 font-medium">
vigilance.meteofrance.fr
</a>
— toujours s'y référer en cas d'urgence.
</p>
<p class="mt-2 text-center text-xs text-slate-500">
<strong>Outre-mer non couvert</strong> par cette source open data :
<a href="/departement/971" class="text-canicule-700">Guadeloupe</a> ·
<a href="/departement/972" class="text-canicule-700">Martinique</a> ·
<a href="/departement/973" class="text-canicule-700">Guyane</a> ·
<a href="/departement/974" class="text-canicule-700">La Réunion</a> ·
<a href="/departement/976" class="text-canicule-700">Mayotte</a> →
<a href="https://vigilance.meteofrance.fr/" rel="noopener" class="text-canicule-700">vigilance.meteofrance.fr</a>
</p>
</section>
<section class="container-tight pb-8">
<details class="rounded border border-slate-200 bg-white p-4">
<summary class="cursor-pointer font-medium text-slate-700">
Vue par région (liste)
</summary>
<div class="mt-4">
<DepartementGrid colorsByDept={colorsByDept} />
</div>
</details>
<p class="mt-4 text-center text-xs text-slate-500">
Source officielle :
<a href="https://vigilance.meteofrance.fr/" rel="noopener" class="text-canicule-700 font-medium">
vigilance.meteofrance.fr
</a>
— toujours s'y référer en cas d'urgence.
</p>
<p class="mt-2 text-center text-xs text-slate-500">
<strong>Outre-mer non couvert</strong> par cette source open data :
<a href="/departement/971" class="text-canicule-700">Guadeloupe</a> ·
<a href="/departement/972" class="text-canicule-700">Martinique</a> ·
<a href="/departement/973" class="text-canicule-700">Guyane</a> ·
<a href="/departement/974" class="text-canicule-700">La Réunion</a> ·
<a href="/departement/976" class="text-canicule-700">Mayotte</a> →
<a href="https://vigilance.meteofrance.fr/" rel="noopener" class="text-canicule-700">vigilance.meteofrance.fr</a>
</p>
</section>
</>
)
}