dmolinari/Elecciones-2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Pre Refinamiento Movil

Browse Source
This commit is contained in:
dmolinari
2025-09-19 17:19:10 -03:00
parent 3a8f64bf85
commit 7d2922aaeb
21 changed files with 662 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
Elecciones-Web/frontend/src/features/legislativas/nacionales/components/PanelResultados.tsx
View File

@@ -3,6 +3,8 @@ import type { ResultadoTicker, EstadoRecuentoTicker } from '../../../../types/ty
import { ImageWithFallback } from '../../../../components/common/ImageWithFallback';
import { assetBaseUrl } from '../../../../apiService';
import { AnimatedNumber } from './AnimatedNumber';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';
const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
const formatVotes = (num: number) => Math.round(num).toLocaleString('es-AR');
@@ -15,41 +17,65 @@ interface PanelResultadosProps {
export const PanelResultados = ({ resultados, estadoRecuento }: PanelResultadosProps) => {
return (
<div className="panel-resultados">
<div className="panel-estado-recuento">
<div className="estado-item">
<CircularProgressbar
value={estadoRecuento.participacionPorcentaje}
text={formatPercent(estadoRecuento.participacionPorcentaje)}
strokeWidth={10}
styles={buildStyles({
textColor: '#333',
pathColor: '#28a745',
trailColor: '#e9ecef',
textSize: '24px',
})}
/>
<span>Participación</span>
</div>
<div className="estado-item">
<CircularProgressbar
value={estadoRecuento.mesasTotalizadasPorcentaje}
text={formatPercent(estadoRecuento.mesasTotalizadasPorcentaje)}
strokeWidth={10}
styles={buildStyles({
textColor: '#333',
pathColor: '#007bff',
trailColor: '#e9ecef',
textSize: '24px',
})}
/>
<span>Escrutado</span>
</div>
</div>
<div className="panel-partidos-container">
{resultados.map(partido => (
<div key={partido.id} className="partido-fila">
<div key={partido.id} className="partido-fila" style={{ borderLeftColor: partido.color || '#888' }}>
<div className="partido-logo">
<ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={partido.nombre} />
</div>
<div className="partido-info-wrapper">
<span className="partido-nombre">{partido.nombreCorto || partido.nombre}</span>
{partido.nombreCandidato && <span className="candidato-nombre">{partido.nombreCandidato}</span>}
<div className="partido-main-content">
<div className="partido-top-row">
<div className="partido-info-wrapper">
<span className="partido-nombre">{partido.nombreCorto || partido.nombre}</span>
{partido.nombreCandidato && <span className="candidato-nombre">{partido.nombreCandidato}</span>}
</div>
<div className="partido-stats">
<span className="partido-porcentaje">
<AnimatedNumber value={partido.porcentaje} formatter={formatPercent} />
</span>
<span className="partido-votos">
<AnimatedNumber value={partido.votos} formatter={formatVotes} /> votos
</span>
</div>
</div>
<div className="partido-barra-background">
<div className="partido-barra-foreground" style={{ width: `${partido.porcentaje}%`, backgroundColor: partido.color || '#888' }} />
</div>
</div>
<div className="partido-stats">
<span className="partido-porcentaje">
<AnimatedNumber value={partido.porcentaje} formatter={formatPercent} />
</span>
<span className="partido-votos">
<AnimatedNumber value={partido.votos} formatter={formatVotes} /> votos
</span>
</div>
</div>
))}
</div>
<div className="panel-estado-recuento">
<div className="estado-item">
<span>Participación</span>
<strong><AnimatedNumber value={estadoRecuento.participacionPorcentaje} formatter={formatPercent} /></strong>
</div>
<div className="estado-item">
<span>Mesas Escrutadas</span>
<strong><AnimatedNumber value={estadoRecuento.mesasTotalizadasPorcentaje} formatter={formatPercent} /></strong>
</div>
</div>
</div>
);
};