Feat BancasWidget
This commit is contained in:
@@ -1,119 +1,198 @@
|
||||
// src/components/BancasWidget.tsx
|
||||
import { useState, useEffect } from 'react';
|
||||
// src/components/BancasWidget.tsx (Corregido)
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { ResponsiveBar } from '@nivo/bar';
|
||||
import { getBancasPorSeccion, getSeccionesElectorales } from '../apiService';
|
||||
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';
|
||||
|
||||
const NIVO_COLORS = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
|
||||
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[]>([]);
|
||||
const [seccionActual, setSeccionActual] = useState<string>('');
|
||||
// --- CAMBIO: Adaptar el estado para react-select ---
|
||||
const [selectedSeccion, setSelectedSeccion] = useState<{ value: string; label: string } | null>(null);
|
||||
const [camaraActiva, setCamaraActiva] = useState<CamaraType>('diputados');
|
||||
|
||||
// useEffect para cargar la lista de secciones una sola vez (esto está bien)
|
||||
useEffect(() => {
|
||||
const fetchSecciones = async () => {
|
||||
try {
|
||||
const seccionesData = await getSeccionesElectorales();
|
||||
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);
|
||||
setSeccionActual(seccionesData[0].id);
|
||||
|
||||
if (!selectedSeccion) {
|
||||
setSelectedSeccion({ value: seccionesData[0].id, label: seccionesData[0].nombre });
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error cargando secciones electorales:", err);
|
||||
// Opcional: manejar el error en la UI si la carga de secciones falla
|
||||
}
|
||||
};
|
||||
fetchSecciones();
|
||||
}, []);
|
||||
}, [selectedSeccion]);
|
||||
|
||||
// --- CÓDIGO REFACTORIZADO ---
|
||||
// Eliminamos los useState para data, loading y error
|
||||
// --- CAMBIO: Formatear opciones para react-select ---
|
||||
const seccionOptions = useMemo(() =>
|
||||
secciones.map(s => ({ value: s.id, label: s.nombre })),
|
||||
[secciones]);
|
||||
|
||||
// useQuery ahora es la única fuente de verdad para los datos de bancas
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
error
|
||||
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', seccionActual],
|
||||
queryFn: () => getBancasPorSeccion(seccionActual),
|
||||
enabled: !!seccionActual,
|
||||
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 barData = data ? [...data.proyeccion].reverse() : [];
|
||||
|
||||
const getErrorMessage = () => {
|
||||
if (error) {
|
||||
if ((error as any).response?.status === 404) {
|
||||
return "La proyección de bancas para esta sección aún no está disponible.";
|
||||
return `La proyección para ${camaraActiva} en esta sección aún no está disponible.`;
|
||||
}
|
||||
return "No se pudo conectar para obtener los datos de bancas.";
|
||||
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>Distribución de Bancas</h4>
|
||||
<select value={seccionActual} onChange={e => setSeccionActual(e.target.value)} disabled={secciones.length === 0}>
|
||||
{secciones.map(s => <option key={s.id} value={s.id}>{s.nombre}</option>)}
|
||||
</select>
|
||||
<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="waffle-chart-container">
|
||||
{isLoading ? <p>Cargando...</p> : errorMessage ? <p>{errorMessage}</p> :
|
||||
<ResponsiveBar
|
||||
data={barData}
|
||||
keys={['bancas']}
|
||||
indexBy="agrupacionNombre"
|
||||
layout="horizontal"
|
||||
margin={{ top: 10, right: 30, bottom: 25, left: 160 }}
|
||||
padding={0.3}
|
||||
valueScale={{ type: 'linear' }}
|
||||
indexScale={{ type: 'band', round: true }}
|
||||
colors={({ index }) => NIVO_COLORS[index % NIVO_COLORS.length]}
|
||||
borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
|
||||
axisTop={null}
|
||||
axisRight={null}
|
||||
axisBottom={{
|
||||
tickSize: 5,
|
||||
tickPadding: 5,
|
||||
tickRotation: 0,
|
||||
legend: 'Cantidad de Bancas',
|
||||
legendPosition: 'middle',
|
||||
legendOffset: 20,
|
||||
format: (value) => Math.floor(value) === value ? value : ''
|
||||
}}
|
||||
axisLeft={{
|
||||
tickSize: 5,
|
||||
tickPadding: 5,
|
||||
tickRotation: 0,
|
||||
}}
|
||||
labelSkipWidth={12}
|
||||
labelSkipHeight={12}
|
||||
labelTextColor={{ from: 'color', modifiers: [['darker', 3]] }}
|
||||
animate={true}
|
||||
legends={[]}
|
||||
/>}
|
||||
|
||||
<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