61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
|
// src/components/widgets/ResumenNacionalWidget.tsx
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { useQuery } from '@tanstack/react-query';
|
||
|
|
import Select from 'react-select';
|
||
|
|
import { getResumenNacionalPorProvincia } from '../../../apiService';
|
||
|
|
import styles from './ResumenNacionalWidget.module.css';
|
||
|
|
|
||
|
|
const ELECCION_ID = 2; // Exclusivo para elecciones nacionales
|
||
|
|
const CATEGORIAS_NACIONALES = [
|
||
|
|
{ value: 3, label: 'Diputados Nacionales' },
|
||
|
|
{ value: 2, label: 'Senadores Nacionales' },
|
||
|
|
];
|
||
|
|
|
||
|
|
export const ResumenNacionalWidget = () => {
|
||
|
|
const [categoria, setCategoria] = useState(CATEGORIAS_NACIONALES[0]);
|
||
|
|
|
||
|
|
const { data, isLoading, error } = useQuery({
|
||
|
|
queryKey: ['resumenNacional', ELECCION_ID, categoria.value],
|
||
|
|
queryFn: () => getResumenNacionalPorProvincia(ELECCION_ID, categoria.value),
|
||
|
|
refetchInterval: 60000,
|
||
|
|
});
|
||
|
|
|
||
|
|
const formatPercent = (num: number) => `${num.toFixed(2)}%`;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={styles.widgetContainer}>
|
||
|
|
<div className={styles.header}>
|
||
|
|
<h3>{categoria.label}</h3>
|
||
|
|
<Select
|
||
|
|
className={styles.categoriaSelector}
|
||
|
|
options={CATEGORIAS_NACIONALES}
|
||
|
|
value={categoria}
|
||
|
|
onChange={(opt) => setCategoria(opt!)}
|
||
|
|
isSearchable={false}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{isLoading && <p>Cargando resumen nacional...</p>}
|
||
|
|
{error && <p style={{ color: 'red' }}>Error al cargar los datos.</p>}
|
||
|
|
{data && (
|
||
|
|
<ul className={styles.listaProvincias}>
|
||
|
|
{data.map((provincia) => (
|
||
|
|
<li key={provincia.provinciaId} className={styles.provinciaItem}>
|
||
|
|
<div className={styles.provinciaHeader}>
|
||
|
|
<span className={styles.provinciaNombre}>{provincia.provinciaNombre}</span>
|
||
|
|
<span className={styles.provinciaEscrutado}>ESCR. {formatPercent(provincia.porcentajeEscrutado)}</span>
|
||
|
|
</div>
|
||
|
|
<ul className={styles.resultadosLista}>
|
||
|
|
{provincia.resultados.map((partido, index) => (
|
||
|
|
<li key={index} className={styles.resultadoItem}>
|
||
|
|
<span className={styles.partidoNombre}>{partido.nombre}</span>
|
||
|
|
<span className={styles.partidoPorcentaje}>{formatPercent(partido.porcentaje)}</span>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|