Feat Widgets
- Widget de Home - Widget Cards por Provincias - Widget Mapa por Categorias
This commit is contained in:
@@ -1,78 +1,110 @@
|
||||
// src/features/legislativas/nacionales/components/ProvinciaCard.tsx
|
||||
import type { ResumenProvincia } from '../../../../types/types';
|
||||
import type { ResumenProvincia, CategoriaResumen } from '../../../../types/types';
|
||||
import { MiniMapaSvg } from './MiniMapaSvg';
|
||||
import { ImageWithFallback } from '../../../../components/common/ImageWithFallback';
|
||||
import { assetBaseUrl } from '../../../../apiService';
|
||||
|
||||
// --- 1. AÑADIR LA PROP A AMBAS INTERFACES ---
|
||||
interface CategoriaDisplayProps {
|
||||
categoria: CategoriaResumen;
|
||||
mostrarBancas?: boolean;
|
||||
}
|
||||
|
||||
interface ProvinciaCardProps {
|
||||
data: ResumenProvincia;
|
||||
mostrarBancas?: boolean;
|
||||
}
|
||||
|
||||
const formatNumber = (num: number) => num.toLocaleString('es-AR');
|
||||
const formatPercent = (num: number) => `${num.toFixed(2).replace('.', ',')}%`;
|
||||
|
||||
export const ProvinciaCard = ({ data }: ProvinciaCardProps) => {
|
||||
// Determinamos el color del ganador para pasárselo al mapa.
|
||||
// Si no hay ganador, usamos un color gris por defecto.
|
||||
const colorGanador = data.resultados[0]?.color || '#d1d1d1';
|
||||
// --- 2. RECIBIR Y USAR LA PROP EN EL SUB-COMPONENTE ---
|
||||
const CategoriaDisplay = ({ categoria, mostrarBancas }: CategoriaDisplayProps) => {
|
||||
return (
|
||||
<div className="categoria-bloque">
|
||||
<h4 className="categoria-titulo">{categoria.categoriaNombre}</h4>
|
||||
|
||||
{categoria.resultados.map(res => (
|
||||
<div
|
||||
key={res.agrupacionId}
|
||||
className="candidato-row"
|
||||
style={{ borderLeftColor: res.color || '#ccc' }}
|
||||
>
|
||||
<ImageWithFallback
|
||||
src={res.fotoUrl ?? undefined}
|
||||
fallbackSrc={`${assetBaseUrl}/default-avatar.png`}
|
||||
alt={res.nombreCandidato ?? res.nombreAgrupacion}
|
||||
className="candidato-foto"
|
||||
/>
|
||||
|
||||
<div className="candidato-data">
|
||||
{res.nombreCandidato && (
|
||||
<span className="candidato-nombre">{res.nombreCandidato}</span>
|
||||
)}
|
||||
<span className={`candidato-partido ${!res.nombreCandidato ? 'main-title' : ''}`}>
|
||||
{res.nombreAgrupacion}
|
||||
</span>
|
||||
<div className="progress-bar-container">
|
||||
<div className="progress-bar" style={{ width: `${res.porcentaje}%`, backgroundColor: res.color || '#ccc' }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="candidato-stats">
|
||||
<span className="stats-percent">{formatPercent(res.porcentaje)}</span>
|
||||
<span className="stats-votos">{formatNumber(res.votos)} votos</span>
|
||||
</div>
|
||||
|
||||
{/* --- 3. RENDERIZADO CONDICIONAL DEL CUADRO DE BANCAS --- */}
|
||||
{/* Este div solo se renderizará si mostrarBancas es true */}
|
||||
{mostrarBancas && (
|
||||
<div className="stats-bancas">
|
||||
+{res.bancasObtenidas}
|
||||
<span>Bancas</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<footer className="card-footer">
|
||||
<div>
|
||||
<span>Participación</span>
|
||||
<strong>{formatPercent(categoria.estadoRecuento?.participacionPorcentaje ?? 0)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Mesas escrutadas</span>
|
||||
<strong>{formatPercent(categoria.estadoRecuento?.mesasTotalizadasPorcentaje ?? 0)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Votos totales</span>
|
||||
<strong>{formatNumber(categoria.estadoRecuento?.cantidadVotantes ?? 0)}</strong>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// --- 4. RECIBIR Y PASAR LA PROP EN EL COMPONENTE PRINCIPAL ---
|
||||
export const ProvinciaCard = ({ data, mostrarBancas }: ProvinciaCardProps) => {
|
||||
const colorGanador = data.categorias[0]?.resultados[0]?.color || '#d1d1d1';
|
||||
|
||||
return (
|
||||
<div className="provincia-card">
|
||||
<header className="card-header">
|
||||
<div className="header-info">
|
||||
<h3 style={{ whiteSpace: 'normal' }}>{data.provinciaNombre}</h3>
|
||||
<span>DIPUTADOS NACIONALES</span>
|
||||
</div>
|
||||
<div className="header-map">
|
||||
<MiniMapaSvg provinciaNombre={data.provinciaNombre} fillColor={colorGanador} />
|
||||
</div>
|
||||
</header>
|
||||
<div className="card-body">
|
||||
{data.resultados.map(res => (
|
||||
<div key={res.agrupacionId} className="candidato-row">
|
||||
<ImageWithFallback src={res.fotoUrl ?? undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={res.nombreCandidato ?? res.nombreAgrupacion} className="candidato-foto" />
|
||||
|
||||
<div className="candidato-data">
|
||||
{res.nombreCandidato && (
|
||||
<span className="candidato-nombre">{res.nombreCandidato}</span>
|
||||
)}
|
||||
|
||||
<span className={`candidato-partido ${!res.nombreCandidato ? 'main-title' : ''}`}>
|
||||
{res.nombreAgrupacion}
|
||||
</span>
|
||||
|
||||
<div className="progress-bar-container">
|
||||
<div className="progress-bar" style={{ width: `${res.porcentaje}%`, backgroundColor: res.color || '#ccc' }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="candidato-stats">
|
||||
<span className="stats-percent">{formatPercent(res.porcentaje)}</span>
|
||||
<span className="stats-votos">{formatNumber(res.votos)} votos</span>
|
||||
</div>
|
||||
<div className="stats-bancas">
|
||||
+{res.bancasObtenidas}
|
||||
<span>Bancas</span>
|
||||
</div>
|
||||
</div>
|
||||
{data.categorias.map(categoria => (
|
||||
<CategoriaDisplay
|
||||
key={categoria.categoriaId}
|
||||
categoria={categoria}
|
||||
mostrarBancas={mostrarBancas} // Pasar la prop hacia abajo
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<footer className="card-footer">
|
||||
<div>
|
||||
<span>Participación</span>
|
||||
{/* Usamos los datos reales del estado de recuento */}
|
||||
<strong>{formatPercent(data.estadoRecuento?.participacionPorcentaje ?? 0)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Mesas escrutadas</span>
|
||||
<strong>{formatPercent(data.estadoRecuento?.mesasTotalizadasPorcentaje ?? 0)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Votos totales</span>
|
||||
{/* Usamos el nuevo campo cantidadVotantes */}
|
||||
<strong>{formatNumber(data.estadoRecuento?.cantidadVotantes ?? 0)}</strong>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user