52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
|
import { useState, useEffect } from 'react';
|
||
|
|
import { getResumenProvincial, type ResumenProvincial } from '../services/api';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
distritoId: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ResumenProvincialWidget = ({ distritoId }: Props) => {
|
||
|
|
const [data, setData] = useState<ResumenProvincial | null>(null);
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const fetchData = async () => {
|
||
|
|
try {
|
||
|
|
const resumen = await getResumenProvincial(distritoId);
|
||
|
|
setData(resumen);
|
||
|
|
} catch (err) {
|
||
|
|
console.error("Error cargando resumen provincial", err);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
fetchData();
|
||
|
|
const intervalId = setInterval(fetchData, 15000); // Actualizamos cada 15s
|
||
|
|
return () => clearInterval(intervalId);
|
||
|
|
}, [distritoId]);
|
||
|
|
|
||
|
|
if (loading) return <div>Cargando resumen provincial...</div>;
|
||
|
|
if (!data) return <div>No hay datos provinciales disponibles.</div>;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{ fontFamily: 'sans-serif', border: '1px solid #ccc', padding: '16px', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
|
||
|
|
<h2>Resumen Provincial - {data.provinciaNombre}</h2>
|
||
|
|
<p><strong>Mesas Escrutadas:</strong> {data.porcentajeEscrutado.toFixed(2)}% | <strong>Participación:</strong> {data.porcentajeParticipacion.toFixed(2)}%</p>
|
||
|
|
|
||
|
|
{data.resultados.map((partido) => (
|
||
|
|
<div key={partido.nombre} style={{ margin: '10px 0' }}>
|
||
|
|
<span>{partido.nombre}</span>
|
||
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||
|
|
<div style={{ backgroundColor: '#ddd', width: '100%', borderRadius: '4px', marginRight: '10px' }}>
|
||
|
|
<div style={{ width: `${partido.porcentaje}%`, backgroundColor: 'royalblue', color: 'white', padding: '4px', borderRadius: '4px', textAlign: 'right' }}>
|
||
|
|
<strong>{partido.porcentaje.toFixed(2)}%</strong>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span>{partido.votos.toLocaleString('es-AR')}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|