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} /> 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(null); @@ -124,6 +125,11 @@ export function PeriodSelector({ value, onChange, animationActive, onAnimate, vi > {viewMode === 'flow' ? '⊙ Heatmap' : '◉ Flux'} + {geoPercent != null && ( + + {geoPercent}% géo + + )} ); }