From 42286a8c0dbd8a61a055f6966ac7b5eae602973d Mon Sep 17 00:00:00 2001
From: syoul <syoul@librezo.fr>
Date: Mon, 23 Mar 2026 23:33:37 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20barre=20de=20g=C3=A9oloc=20toujours=20vi?=
 =?UTF-8?q?sible,=20bas=C3=A9e=20sur=20la=20p=C3=A9riode=20compl=C3=A8te?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

En mode animation, globalGeoStats passe les chiffres de la période entière
(depuis stats global) pour que la barre affiche le vrai taux Cesium+.
Le label indique "(période)" pour rappeler que ce n'est pas par frame.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.tsx                   |  1 +
 src/components/StatsPanel.tsx | 47 ++++++++++++++++++++---------------
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4bb5df8..f894e26 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -72,6 +72,7 @@ export default function App() {
         source={source}
         currentUD={currentUD}
         animationLabel={animation.active ? (animation.currentFrame?.label ?? undefined) : undefined}
+        globalGeoStats={animation.active && stats ? { geoCount: stats.geoCount, transactionCount: stats.transactionCount } : undefined}
       />
 
       {/* Map area */}
diff --git a/src/components/StatsPanel.tsx b/src/components/StatsPanel.tsx
index c77bf86..05208a4 100644
--- a/src/components/StatsPanel.tsx
+++ b/src/components/StatsPanel.tsx
@@ -8,6 +8,8 @@ interface StatsPanelProps {
   source: 'live' | 'mock';
   currentUD: number;
   animationLabel?: string;
+  // Stats de géoloc de la période complète (indépendantes de la frame courante)
+  globalGeoStats?: { geoCount: number; transactionCount: number };
 }
 
 const MEDALS = ['🥇', '🥈', '🥉'];
@@ -33,7 +35,7 @@ function formatDU(g1: number, ud: number): string {
   return `≈ ${Math.round(du).toLocaleString('fr-FR')} DU`;
 }
 
-export function StatsPanel({ stats, loading, periodDays, source, currentUD, animationLabel }: StatsPanelProps) {
+export function StatsPanel({ stats, loading, periodDays, source, currentUD, animationLabel, globalGeoStats }: StatsPanelProps) {
   const periodLabel = periodDays === 1 ? '24 dernières heures' : `${periodDays} derniers jours`;
   const prevStats = useRef<PeriodStats | null>(null);
 
@@ -55,9 +57,6 @@ export function StatsPanel({ stats, loading, periodDays, source, currentUD, anim
 
   // Mémorise les stats après le rendu
   if (stats && !loading) prevStats.current = stats;
-  const geoPct = stats && stats.transactionCount > 0
-    ? Math.round((stats.geoCount / stats.transactionCount) * 100)
-    : null;
 
   return (
     <aside className="w-72 shrink-0 flex flex-col gap-4 bg-[#0a0b0f]/95 backdrop-blur-sm border-r border-[#1e1f2a] p-5 overflow-y-auto">
@@ -109,23 +108,31 @@ export function StatsPanel({ stats, loading, periodDays, source, currentUD, anim
             })()}
             delta={prevTxCount !== null ? (stats.transactionCount > prevTxCount ? 'up' : stats.transactionCount < prevTxCount ? 'down' : null) : null}
           />
-          {/* Couverture géo — uniquement en mode live, masquée en animation
-              (visibleTransactions ne contient que du géolocalisé → toujours 100%) */}
-          {source === 'live' && geoPct !== null && !animationLabel && (
-            <div className="bg-[#0f1016] border border-[#2e2f3a] rounded-xl p-3">
-              <div className="flex justify-between items-center mb-1.5">
-                <p className="text-[#4b5563] text-xs uppercase tracking-widest">Géolocalisées</p>
-                <p className="text-[#6b7280] text-xs">{stats.geoCount} / {stats.transactionCount}</p>
+          {/* Couverture géo — toujours basée sur la période complète (pas la frame) */}
+          {source === 'live' && (() => {
+            const geo = globalGeoStats ?? { geoCount: stats.geoCount, transactionCount: stats.transactionCount };
+            const pct = geo.transactionCount > 0
+              ? Math.round((geo.geoCount / geo.transactionCount) * 100)
+              : null;
+            if (pct === null) return null;
+            return (
+              <div className="bg-[#0f1016] border border-[#2e2f3a] rounded-xl p-3">
+                <div className="flex justify-between items-center mb-1.5">
+                  <p className="text-[#4b5563] text-xs uppercase tracking-widest">
+                    Géolocalisées{animationLabel ? <span className="normal-case ml-1 opacity-60">(période)</span> : ''}
+                  </p>
+                  <p className="text-[#6b7280] text-xs">{geo.geoCount} / {geo.transactionCount}</p>
+                </div>
+                <div className="w-full bg-[#1e1f2a] rounded-full h-1.5">
+                  <div
+                    className="bg-[#d4a843] h-1.5 rounded-full transition-all duration-500"
+                    style={{ width: `${pct}%` }}
+                  />
+                </div>
+                <p className="text-[#4b5563] text-xs mt-1 text-right">{pct}% via Cesium+</p>
               </div>
-              <div className="w-full bg-[#1e1f2a] rounded-full h-1.5">
-                <div
-                  className="bg-[#d4a843] h-1.5 rounded-full transition-all duration-500"
-                  style={{ width: `${geoPct}%` }}
-                />
-              </div>
-              <p className="text-[#4b5563] text-xs mt-1 text-right">{geoPct}% via Cesium+</p>
-            </div>
-          )}
+            );
+          })()}
         </div>
       ) : null}