Preparación Legislativas Nacionales 2025
This commit is contained in:
@@ -0,0 +1,198 @@
|
||||
// src/features/legislativas/provinciales/BancasWidget.tsx (Corregido)
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import Select from 'react-select'; // --- CAMBIO: Importar react-select ---
|
||||
import { getBancasPorSeccion, getSeccionesElectoralesConCargos } from '../../../apiService';
|
||||
import type { ProyeccionBancas, MunicipioSimple } from '../../../types/types';
|
||||
import { Tooltip } from 'react-tooltip';
|
||||
import './BancasWidget.css';
|
||||
import type { Property } from 'csstype';
|
||||
|
||||
type CamaraType = 'diputados' | 'senadores';
|
||||
|
||||
// --- CAMBIO: Estilos para el nuevo selector ---
|
||||
const customSelectStyles = {
|
||||
control: (base: any) => ({ ...base, minWidth: '200px', border: '1px solid #ced4da', boxShadow: 'none', '&:hover': { borderColor: '#86b7fe' } }),
|
||||
menu: (base: any) => ({ ...base, zIndex: 10 }),
|
||||
};
|
||||
|
||||
const WaffleDisplay = ({ data }: { data: ProyeccionBancas['proyeccion'] }) => {
|
||||
// El componente WaffleDisplay no necesita cambios en su lógica
|
||||
return (
|
||||
<div className="waffle-grid-container">
|
||||
{data.map(partido => (
|
||||
partido.bancas > 0 && (
|
||||
<div
|
||||
key={partido.agrupacionId}
|
||||
className="partido-bloque"
|
||||
data-tooltip-id="banca-tooltip"
|
||||
data-tooltip-content={`${partido.nombreCorto || partido.agrupacionNombre}: ${partido.bancas} bancas`}
|
||||
>
|
||||
{Array.from({ length: partido.bancas }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="waffle-cell"
|
||||
style={{ backgroundColor: partido.color as Property.BackgroundColor || '#cccccc' }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const BancasWidget = () => {
|
||||
const [secciones, setSecciones] = useState<MunicipioSimple[]>([]);
|
||||
// --- CAMBIO: Adaptar el estado para react-select ---
|
||||
const [selectedSeccion, setSelectedSeccion] = useState<{ value: string; label: string } | null>(null);
|
||||
const [camaraActiva, setCamaraActiva] = useState<CamaraType>('diputados');
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSecciones = async () => {
|
||||
try {
|
||||
const seccionesData = await getSeccionesElectoralesConCargos();
|
||||
if (seccionesData && seccionesData.length > 0) {
|
||||
// --- LÓGICA DE ORDENAMIENTO ---
|
||||
const orden = new Map([
|
||||
['Capital', 0], ['Primera', 1], ['Segunda', 2], ['Tercera', 3],
|
||||
['Cuarta', 4], ['Quinta', 5], ['Sexta', 6], ['Séptima', 7]
|
||||
]);
|
||||
|
||||
const getOrden = (nombre: string) => {
|
||||
const match = nombre.match(/Capital|Primera|Segunda|Tercera|Cuarta|Quinta|Sexta|Séptima/);
|
||||
return match ? orden.get(match[0]) ?? 99 : 99;
|
||||
};
|
||||
|
||||
// Ordenamos el array de datos ANTES de guardarlo en el estado
|
||||
seccionesData.sort((a, b) => getOrden(a.nombre) - getOrden(b.nombre));
|
||||
|
||||
setSecciones(seccionesData);
|
||||
|
||||
if (!selectedSeccion) {
|
||||
setSelectedSeccion({ value: seccionesData[0].id, label: seccionesData[0].nombre });
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error cargando secciones electorales:", err);
|
||||
}
|
||||
};
|
||||
fetchSecciones();
|
||||
}, [selectedSeccion]);
|
||||
|
||||
// --- CAMBIO: Formatear opciones para react-select ---
|
||||
const seccionOptions = useMemo(() =>
|
||||
secciones.map(s => ({ value: s.id, label: s.nombre })),
|
||||
[secciones]);
|
||||
|
||||
const seccionSeleccionada = useMemo(() =>
|
||||
secciones.find(s => s.id === selectedSeccion?.value),
|
||||
[secciones, selectedSeccion]);
|
||||
|
||||
const camarasDisponibles = useMemo(() =>
|
||||
seccionSeleccionada?.camarasDisponibles || [],
|
||||
[seccionSeleccionada]);
|
||||
|
||||
useEffect(() => {
|
||||
if (seccionSeleccionada && camarasDisponibles.length > 0) {
|
||||
if (!camarasDisponibles.includes(camaraActiva)) {
|
||||
setCamaraActiva(camarasDisponibles[0]);
|
||||
}
|
||||
}
|
||||
}, [seccionSeleccionada, camarasDisponibles, camaraActiva]);
|
||||
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
error
|
||||
} = useQuery<ProyeccionBancas, Error>({
|
||||
queryKey: ['bancasPorSeccion', selectedSeccion?.value, camaraActiva],
|
||||
queryFn: () => getBancasPorSeccion(selectedSeccion!.value, camaraActiva),
|
||||
enabled: !!selectedSeccion && camarasDisponibles.includes(camaraActiva),
|
||||
retry: (failureCount, error: any) => {
|
||||
if (error.response?.status === 404) return false;
|
||||
return failureCount < 3;
|
||||
},
|
||||
});
|
||||
|
||||
const getErrorMessage = () => {
|
||||
if (error) {
|
||||
if ((error as any).response?.status === 404) {
|
||||
return `La proyección para ${camaraActiva} en esta sección aún no está disponible.`;
|
||||
}
|
||||
return "No se pudo conectar para obtener los datos.";
|
||||
}
|
||||
return null;
|
||||
};
|
||||
const errorMessage = getErrorMessage();
|
||||
|
||||
// --- CAMBIO: Ordenar la leyenda (y por lo tanto el gráfico) de más a menos bancas ---
|
||||
const leyendaData = useMemo(() =>
|
||||
data?.proyeccion
|
||||
.filter(p => p.bancas > 0)
|
||||
.sort((a, b) => b.bancas - a.bancas) // Ordena de mayor a menor
|
||||
|| [],
|
||||
[data]);
|
||||
|
||||
const totalBancasEnJuego = useMemo(() =>
|
||||
data?.proyeccion.reduce((sum, p) => sum + p.bancas, 0) || 0,
|
||||
[data]);
|
||||
|
||||
return (
|
||||
<div className="bancas-widget-container">
|
||||
<div className="bancas-header">
|
||||
<h4>Bancas Proyectadas: {totalBancasEnJuego}</h4>
|
||||
<Select
|
||||
options={seccionOptions}
|
||||
value={selectedSeccion}
|
||||
onChange={(option) => setSelectedSeccion(option)}
|
||||
isLoading={secciones.length === 0}
|
||||
placeholder="Seleccionar..."
|
||||
styles={customSelectStyles}
|
||||
isSearchable={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="chamber-tabs-bancas">
|
||||
<button
|
||||
className={camaraActiva === 'diputados' ? 'active' : ''}
|
||||
onClick={() => setCamaraActiva('diputados')}
|
||||
disabled={seccionSeleccionada && !camarasDisponibles.includes('diputados')}
|
||||
>
|
||||
Diputados
|
||||
</button>
|
||||
<button
|
||||
className={camaraActiva === 'senadores' ? 'active' : ''}
|
||||
onClick={() => setCamaraActiva('senadores')}
|
||||
disabled={seccionSeleccionada && !camarasDisponibles.includes('senadores')}
|
||||
>
|
||||
Senadores
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bancas-content-container">
|
||||
<div className="waffle-chart-container">
|
||||
{isLoading ? <p className="loading-text">Cargando...</p> :
|
||||
errorMessage ? <p className="error-text">{errorMessage}</p> :
|
||||
totalBancasEnJuego > 0 ? <WaffleDisplay data={leyendaData} /> :
|
||||
<p>No hay bancas proyectadas para mostrar.</p>
|
||||
}
|
||||
</div>
|
||||
<div className="leyenda-container">
|
||||
<ul className="partido-lista-bancas">
|
||||
{leyendaData.map(partido => (
|
||||
<li key={partido.agrupacionId}>
|
||||
<span className="partido-color-box" style={{ backgroundColor: partido.color as Property.BackgroundColor || '#cccccc' }}></span>
|
||||
<span className="partido-nombre">
|
||||
{partido.nombreCorto || partido.agrupacionNombre}
|
||||
</span>
|
||||
<strong className="partido-bancas">{partido.bancas}</strong>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<Tooltip id="banca-tooltip" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user