From ffe09ea44a2de0ef100b7d660549899673379254 Mon Sep 17 00:00:00 2001
From: syoul <syoul@librezo.fr>
Date: Tue, 24 Mar 2026 11:24:03 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20afficher=20le=20%=20g=C3=A9olocalis?=
 =?UTF-8?q?=C3=A9=20dans=20la=20barre=20de=20contr=C3=B4les?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ajoute un badge "XX% géo" à droite du bouton Flux/Heatmap dans
PeriodSelector, mis à jour à chaque frame d'animation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.tsx                       | 3 +++
 src/components/PeriodSelector.tsx | 8 +++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index a797b9e..2c8298a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -138,6 +138,9 @@ export default function App() {
             onAnimate={() => animation.active ? animation.deactivate() : animation.activate()}
             viewMode={viewMode}
             onViewModeChange={handleViewModeChange}
+            geoPercent={visibleStats && visibleStats.transactionCount > 0
+              ? Math.round((visibleStats.geoCount / visibleStats.transactionCount) * 100)
+              : null}
           />
         </div>
 
diff --git a/src/components/PeriodSelector.tsx b/src/components/PeriodSelector.tsx
index a5e2e1d..5745223 100644
--- a/src/components/PeriodSelector.tsx
+++ b/src/components/PeriodSelector.tsx
@@ -7,6 +7,7 @@ interface PeriodSelectorProps {
   onAnimate: () => void;
   viewMode: 'heatmap' | 'flow';
   onViewModeChange: (mode: 'heatmap' | 'flow') => void;
+  geoPercent?: number | null;
 }
 
 const PERIODS = [
@@ -17,7 +18,7 @@ const PERIODS = [
 
 const PRESET_DAYS = new Set([1, 7, 30]);
 
-export function PeriodSelector({ value, onChange, animationActive, onAnimate, viewMode, onViewModeChange }: PeriodSelectorProps) {
+export function PeriodSelector({ value, onChange, animationActive, onAnimate, viewMode, onViewModeChange, geoPercent }: PeriodSelectorProps) {
   const [customOpen, setCustomOpen] = useState(false);
   const [inputVal, setInputVal] = useState('');
   const inputRef = useRef<HTMLInputElement>(null);
@@ -124,6 +125,11 @@ export function PeriodSelector({ value, onChange, animationActive, onAnimate, vi
       >
         {viewMode === 'flow' ? '⊙ Heatmap' : '◉ Flux'}
       </button>
+      {geoPercent != null && (
+        <span className="text-[10px] font-mono text-[#4b5563] px-1 shrink-0">
+          {geoPercent}%<span className="hidden sm:inline"> géo</span>
+        </span>
+      )}
     </div>
   );
 }