Feat Prototipos Widgets y Fix Worker Telegramas
This commit is contained in:
@@ -1,89 +1,125 @@
|
||||
// src/components/BancasWidget.tsx
|
||||
import { useState, useEffect } from 'react';
|
||||
import { ResponsiveWaffle } from '@nivo/waffle';
|
||||
import { getBancasPorSeccion } from '../apiService';
|
||||
import type { ProyeccionBancas } from '../types/types';
|
||||
// Se cambia la importación: de ResponsiveWaffle a ResponsiveBar
|
||||
import { ResponsiveBar } from '@nivo/bar';
|
||||
import { getBancasPorSeccion, getSeccionesElectorales } from '../apiService';
|
||||
import type { ProyeccionBancas, MunicipioSimple } from '../types/types';
|
||||
import './BancasWidget.css';
|
||||
|
||||
// Paleta de colores consistente
|
||||
// La paleta de colores se mantiene para consistencia visual
|
||||
const NIVO_COLORS = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
|
||||
|
||||
// Las Secciones Electorales de la Provincia (esto podría venir de la API en el futuro)
|
||||
const secciones = [
|
||||
{ id: '1', nombre: 'Primera Sección' },
|
||||
{ id: '2', nombre: 'Segunda Sección' },
|
||||
{ id: '3', nombre: 'Tercera Sección' },
|
||||
{ id: '4', nombre: 'Cuarta Sección' },
|
||||
{ id: '5', nombre: 'Quinta Sección' },
|
||||
{ id: '6', nombre: 'Sexta Sección' },
|
||||
{ id: '7', nombre: 'Séptima Sección' },
|
||||
{ id: '8', nombre: 'Octava Sección (Capital)' },
|
||||
];
|
||||
|
||||
export const BancasWidget = () => {
|
||||
const [seccionActual, setSeccionActual] = useState('1'); // Empezamos con la Primera Sección
|
||||
const [secciones, setSecciones] = useState<MunicipioSimple[]>([]);
|
||||
const [seccionActual, setSeccionActual] = useState<string>('');
|
||||
const [data, setData] = useState<ProyeccionBancas | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// useEffect para cargar la lista de secciones una sola vez
|
||||
useEffect(() => {
|
||||
const fetchSecciones = async () => {
|
||||
try {
|
||||
const seccionesData = await getSeccionesElectorales();
|
||||
if (seccionesData && seccionesData.length > 0) {
|
||||
|
||||
// --- INICIO DE LA 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;
|
||||
};
|
||||
|
||||
seccionesData.sort((a, b) => getOrden(a.nombre) - getOrden(b.nombre));
|
||||
// --- FIN DE LA LÓGICA DE ORDENAMIENTO ---
|
||||
|
||||
setSecciones(seccionesData);
|
||||
setSeccionActual(seccionesData[0].id);
|
||||
} else {
|
||||
setError("No se encontraron secciones electorales.");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error cargando secciones electorales:", err);
|
||||
setError("No se pudo cargar la lista de secciones.");
|
||||
}
|
||||
};
|
||||
fetchSecciones();
|
||||
}, []);
|
||||
|
||||
// useEffect para cargar los datos de bancas cuando cambia la sección
|
||||
useEffect(() => {
|
||||
if (!seccionActual) return;
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const result = await getBancasPorSeccion(seccionActual);
|
||||
setData(result);
|
||||
} catch (error) {
|
||||
console.error(`Error cargando datos de bancas para sección ${seccionActual}:`, error);
|
||||
setData(null); // Limpiar datos en caso de error
|
||||
} catch (err) {
|
||||
console.error(`Error cargando datos de bancas para sección ${seccionActual}:`, err);
|
||||
setData(null);
|
||||
setError("No hay datos de bancas disponibles para esta sección.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, [seccionActual]); // Se ejecuta cada vez que cambia la sección
|
||||
}, [seccionActual]);
|
||||
|
||||
const waffleData = data?.proyeccion.map(p => ({
|
||||
id: p.agrupacionNombre,
|
||||
label: p.agrupacionNombre,
|
||||
value: p.bancas,
|
||||
})) || [];
|
||||
|
||||
const totalBancas = waffleData.reduce((sum, current) => sum + current.value, 0);
|
||||
// Se preparan los datos para el gráfico de barras.
|
||||
// Se invierte el array para que el partido con más bancas aparezca arriba.
|
||||
const barData = data ? [...data.proyeccion].reverse() : [];
|
||||
|
||||
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)}>
|
||||
<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>
|
||||
</div>
|
||||
<div className="waffle-chart-container">
|
||||
{loading ? <p>Cargando...</p> : !data ? <p>No hay datos disponibles para esta sección.</p> :
|
||||
<ResponsiveWaffle
|
||||
data={waffleData}
|
||||
total={totalBancas}
|
||||
rows={8}
|
||||
columns={10}
|
||||
fillDirection="bottom"
|
||||
padding={3}
|
||||
colors={NIVO_COLORS}
|
||||
borderColor={{ from: 'color', modifiers: [['darker', 0.3]] }}
|
||||
{loading ? <p>Cargando...</p> : error ? <p>{error}</p> :
|
||||
// --- SE REEMPLAZA EL GRÁFICO WAFFLE POR EL GRÁFICO DE BARRAS ---
|
||||
<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,
|
||||
// Asegura que los ticks del eje sean números enteros
|
||||
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={[
|
||||
{
|
||||
anchor: 'bottom',
|
||||
direction: 'row',
|
||||
justify: false,
|
||||
translateX: 0,
|
||||
translateY: 40,
|
||||
itemsSpacing: 4,
|
||||
itemWidth: 100,
|
||||
itemHeight: 20,
|
||||
itemTextColor: '#999',
|
||||
itemDirection: 'left-to-right',
|
||||
symbolSize: 20,
|
||||
},
|
||||
]}
|
||||
// Se elimina la leyenda, ya que las etiquetas en el eje son suficientes
|
||||
legends={[]}
|
||||
/>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user