58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
// src/features/legislativas/nacionales/TablaSeccionesWidget.tsx
|
|
import React from 'react'; // Importar React para React.Fragment
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { getTablaSecciones } from '../../../apiService';
|
|
import styles from './TablaResultadosWidget.module.css';
|
|
|
|
export const TablaSeccionesWidget = () => {
|
|
const ELECCION_ID = 2;
|
|
|
|
const { data, isLoading, error } = useQuery({
|
|
queryKey: ['tablaSecciones', ELECCION_ID],
|
|
queryFn: () => getTablaSecciones(ELECCION_ID),
|
|
refetchInterval: 60000,
|
|
});
|
|
|
|
const formatPercent = (num: number) => `${num.toFixed(2)}%`;
|
|
|
|
return (
|
|
<div className={styles.widgetContainer}>
|
|
<div className={styles.header}>
|
|
<h3>Resultados por Sección - Diputados Nacionales</h3>
|
|
</div>
|
|
{isLoading && <p>Cargando resultados...</p>}
|
|
{error && <p>Error al cargar los datos.</p>}
|
|
{data && (
|
|
<table className={styles.resultsTable}>
|
|
<thead>
|
|
<tr>
|
|
<th>Municipio</th>
|
|
<th>1ra Fuerza</th>
|
|
<th>%</th>
|
|
<th>2da Fuerza</th>
|
|
<th>%</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.map((seccion) => (
|
|
<React.Fragment key={seccion.seccionId}>
|
|
<tr className={styles.seccionHeader}>
|
|
<td colSpan={5}>{seccion.nombre}</td>
|
|
</tr>
|
|
{seccion.municipios.map((fila, index) => (
|
|
<tr key={fila.ambitoId}>
|
|
<td className={styles.distritoCell}><span className={styles.distritoIndex}>{index + 1}.</span>{fila.nombre}</td>
|
|
<td className={styles.fuerzaCell}>{fila.fuerza1Display}</td>
|
|
<td className={styles.porcentajeCell}>{formatPercent(fila.fuerza1Porcentaje)}</td>
|
|
<td className={styles.fuerzaCell}>{fila.fuerza2Display}</td>
|
|
<td className={styles.porcentajeCell}>{formatPercent(fila.fuerza2Porcentaje)}</td>
|
|
</tr>
|
|
))}
|
|
</React.Fragment>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
);
|
|
}; |