Trabajo de ajuste en widgets y db para frontend
This commit is contained in:
@@ -2,6 +2,51 @@
|
||||
import axios from 'axios';
|
||||
import type { ResumenProvincial, ProyeccionBancas, MunicipioSimple, TelegramaData, CatalogoItem } from './types/types';
|
||||
|
||||
interface PartidoData {
|
||||
id: string;
|
||||
nombre: string;
|
||||
nombreCorto: string | null;
|
||||
bancasTotales: number;
|
||||
color: string | null;
|
||||
}
|
||||
|
||||
interface CamaraData {
|
||||
camaraNombre: string;
|
||||
totalBancas: number;
|
||||
bancasEnJuego: number;
|
||||
partidos: PartidoData[];
|
||||
presidenteBancada: { color: string | null } | null;
|
||||
}
|
||||
|
||||
export interface ComposicionData {
|
||||
diputados: CamaraData;
|
||||
senadores: CamaraData;
|
||||
}
|
||||
|
||||
export interface OcupanteBanca {
|
||||
id: number;
|
||||
nombreOcupante: string;
|
||||
fotoUrl: string;
|
||||
periodo: string;
|
||||
}
|
||||
|
||||
interface PartidoData {
|
||||
id: string;
|
||||
nombre: string;
|
||||
nombreCorto: string | null;
|
||||
bancasTotales: number;
|
||||
bancasEnJuego: number;
|
||||
color: string | null;
|
||||
ocupantes: OcupanteBanca[];
|
||||
}
|
||||
|
||||
export interface BancadaDetalle {
|
||||
id: number; // Este es el ID de la Bancada
|
||||
camara: number; // 0 o 1
|
||||
agrupacionPoliticaId: string | null;
|
||||
ocupante: OcupanteBanca | null;
|
||||
}
|
||||
|
||||
const API_BASE_URL = 'http://localhost:5217/api';
|
||||
|
||||
const apiClient = axios.create({
|
||||
@@ -36,26 +81,36 @@ export const getTelegramaPorId = async (mesaId: string): Promise<TelegramaData>
|
||||
};
|
||||
|
||||
export const getSecciones = async (): Promise<CatalogoItem[]> => {
|
||||
const response = await apiClient.get('/catalogos/secciones');
|
||||
return response.data;
|
||||
const response = await apiClient.get('/catalogos/secciones');
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const getMunicipiosPorSeccion = async (seccionId: string): Promise<CatalogoItem[]> => {
|
||||
const response = await apiClient.get(`/catalogos/municipios/${seccionId}`);
|
||||
return response.data;
|
||||
const response = await apiClient.get(`/catalogos/municipios/${seccionId}`);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const getCircuitosPorMunicipio = async (municipioId: string): Promise<CatalogoItem[]> => {
|
||||
const response = await apiClient.get(`/catalogos/circuitos/${municipioId}`);
|
||||
return response.data;
|
||||
const response = await apiClient.get(`/catalogos/circuitos/${municipioId}`);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const getEstablecimientosPorCircuito = async (circuitoId: string): Promise<CatalogoItem[]> => {
|
||||
const response = await apiClient.get(`/catalogos/establecimientos/${circuitoId}`);
|
||||
return response.data;
|
||||
const response = await apiClient.get(`/catalogos/establecimientos/${circuitoId}`);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const getMesasPorEstablecimiento = async (establecimientoId: string): Promise<CatalogoItem[]> => {
|
||||
const response = await apiClient.get(`/catalogos/mesas/${establecimientoId}`);
|
||||
return response.data;
|
||||
const response = await apiClient.get(`/catalogos/mesas/${establecimientoId}`);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const getComposicionCongreso = async (): Promise<ComposicionData> => {
|
||||
const response = await apiClient.get('/resultados/composicion-congreso');
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const getBancadasDetalle = async (): Promise<BancadaDetalle[]> => {
|
||||
const response = await apiClient.get('/resultados/bancadas-detalle');
|
||||
return response.data;
|
||||
};
|
||||
@@ -31,8 +31,15 @@
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: scale(0.9); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.congreso-summary {
|
||||
@@ -138,6 +145,7 @@
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.congreso-summary {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
@@ -145,4 +153,52 @@
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.seat-tooltip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.seat-tooltip img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
|
||||
.seat-tooltip p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.seat-tooltip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 8px;
|
||||
background-color: white;
|
||||
}
|
||||
.seat-tooltip img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
.seat-tooltip p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
@@ -1,125 +1,109 @@
|
||||
// src/components/CongresoWidget.tsx
|
||||
import { useState, useEffect } from 'react';
|
||||
// 1. Importar ambos layouts
|
||||
import { useState, useMemo } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { ParliamentLayout } from './ParliamentLayout';
|
||||
import { SenateLayout } from './SenateLayout';
|
||||
import { SenateLayout } from './SenateLayout';
|
||||
import { getComposicionCongreso, getBancadasDetalle } from '../apiService';
|
||||
import type { ComposicionData, BancadaDetalle } from '../apiService';
|
||||
import { Tooltip } from 'react-tooltip';
|
||||
import './CongresoWidget.css';
|
||||
|
||||
// ... (Interfaces sin cambios)
|
||||
type CamaraType = 'diputados' | 'senadores';
|
||||
|
||||
interface PartidoData {
|
||||
id: string;
|
||||
nombre: string;
|
||||
bancasTotales: number;
|
||||
bancasEnJuego: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface CamaraData {
|
||||
camaraNombre: string;
|
||||
totalBancas: number;
|
||||
bancasEnJuego: number;
|
||||
partidos: PartidoData[];
|
||||
}
|
||||
|
||||
interface ComposicionData {
|
||||
diputados: CamaraData;
|
||||
senadores: CamaraData;
|
||||
}
|
||||
|
||||
const DEFAULT_COLOR = '#808080';
|
||||
|
||||
export const CongresoWidget = () => {
|
||||
const [data, setData] = useState<ComposicionData | null>(null);
|
||||
const [camaraActiva, setCamaraActiva] = useState<CamaraType>('diputados');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// ... (fetchData sin cambios)
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response = await fetch('http://localhost:5217/api/resultados/composicion-congreso');
|
||||
if (!response.ok) throw new Error('La respuesta de la red no fue exitosa');
|
||||
const result: ComposicionData = await response.json();
|
||||
setData(result);
|
||||
} catch (err) {
|
||||
console.error("Error cargando datos de composición:", err);
|
||||
setError("No se pudieron cargar los datos de composición del congreso.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
if (loading) return <div className="congreso-container loading">Cargando...</div>;
|
||||
if (error) return <div className="congreso-container error">{error}</div>;
|
||||
|
||||
const datosCamaraActual = data ? data[camaraActiva] : null;
|
||||
|
||||
if (!datosCamaraActual) {
|
||||
return <div className="congreso-container error">Datos no disponibles para la cámara seleccionada.</div>;
|
||||
}
|
||||
|
||||
const partidosOrdenados = datosCamaraActual.partidos;
|
||||
|
||||
const seatFillData = partidosOrdenados.flatMap(party => {
|
||||
const retainedSeats = party.bancasTotales - party.bancasEnJuego;
|
||||
const inPlaySeats = party.bancasEnJuego;
|
||||
return [
|
||||
...Array(retainedSeats).fill({ color: party.color, isEnJuego: false }),
|
||||
...Array(inPlaySeats).fill({ color: party.color, isEnJuego: true }),
|
||||
];
|
||||
const { data: composicionData, isLoading: isLoadingComposicion, error: errorComposicion } = useQuery<ComposicionData>({
|
||||
queryKey: ['composicionCongreso'],
|
||||
queryFn: getComposicionCongreso,
|
||||
});
|
||||
|
||||
|
||||
const { data: bancadasDetalle = [] } = useQuery<BancadaDetalle[]>({
|
||||
queryKey: ['bancadasDetalle'],
|
||||
queryFn: getBancadasDetalle,
|
||||
enabled: !!composicionData,
|
||||
});
|
||||
|
||||
const datosCamaraActual = composicionData ? composicionData[camaraActiva] : null;
|
||||
|
||||
// --- LÓGICA DE SEATFILLDATA ---
|
||||
const seatFillData = useMemo(() => {
|
||||
if (!datosCamaraActual || !bancadasDetalle.length) return [];
|
||||
|
||||
const camaraId = camaraActiva === 'diputados' ? 0 : 1;
|
||||
const bancadasDeCamara = bancadasDetalle.filter(b => b.camara === camaraId);
|
||||
|
||||
// Creamos un mapa de AgrupacionId -> Color para un acceso rápido
|
||||
const colorMap = new Map<string, string>();
|
||||
datosCamaraActual.partidos.forEach(p => {
|
||||
if (p.id && p.color) {
|
||||
colorMap.set(p.id, p.color);
|
||||
}
|
||||
});
|
||||
|
||||
// 1. Aseguramos que la lista de bancas esté en orden físico (por su ID).
|
||||
const bancadasOrdenadas = bancadasDeCamara.sort((a, b) => a.id - b.id);
|
||||
|
||||
// 2. Mapeamos cada banca física a un objeto SeatFillData.
|
||||
// El índice del array corresponderá al asiento visual.
|
||||
return bancadasOrdenadas.map(bancada => ({
|
||||
color: bancada.agrupacionPoliticaId ? colorMap.get(bancada.agrupacionPoliticaId) || DEFAULT_COLOR : DEFAULT_COLOR,
|
||||
ocupante: bancada.ocupante
|
||||
}));
|
||||
|
||||
}, [datosCamaraActual, bancadasDetalle, camaraActiva]);
|
||||
|
||||
if (isLoadingComposicion) return <div className="congreso-container loading">Cargando...</div>;
|
||||
if (errorComposicion || !datosCamaraActual) return <div className="congreso-container error">No se pudo cargar la composición.</div>;
|
||||
|
||||
const partidosOrdenados = datosCamaraActual.partidos;
|
||||
|
||||
return (
|
||||
<div className="congreso-container">
|
||||
<div className="congreso-grafico">
|
||||
{/* --- INICIO DE LA MODIFICACIÓN: RENDERIZADO CONDICIONAL --- */}
|
||||
{camaraActiva === 'diputados' ? (
|
||||
<ParliamentLayout seatData={seatFillData} />
|
||||
<ParliamentLayout seatData={seatFillData} presidenteBancada={datosCamaraActual.presidenteBancada} />
|
||||
) : (
|
||||
<SenateLayout seatData={seatFillData} />
|
||||
<SenateLayout seatData={seatFillData} presidenteBancada={datosCamaraActual.presidenteBancada} />
|
||||
)}
|
||||
{/* --- FIN DE LA MODIFICACIÓN --- */}
|
||||
</div>
|
||||
<div className="congreso-summary">
|
||||
<div className="chamber-tabs">
|
||||
<button
|
||||
className={camaraActiva === 'diputados' ? 'active' : ''}
|
||||
onClick={() => setCamaraActiva('diputados')}
|
||||
>
|
||||
Diputados
|
||||
</button>
|
||||
<button
|
||||
className={camaraActiva === 'senadores' ? 'active' : ''}
|
||||
onClick={() => setCamaraActiva('senadores')}
|
||||
>
|
||||
Senadores
|
||||
</button>
|
||||
<button
|
||||
className={camaraActiva === 'diputados' ? 'active' : ''}
|
||||
onClick={() => setCamaraActiva('diputados')}
|
||||
>
|
||||
Diputados
|
||||
</button>
|
||||
<button
|
||||
className={camaraActiva === 'senadores' ? 'active' : ''}
|
||||
onClick={() => setCamaraActiva('senadores')}
|
||||
>
|
||||
Senadores
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>{datosCamaraActual.camaraNombre}</h3>
|
||||
<div className="summary-metric">
|
||||
<span>Total de Bancas</span>
|
||||
<strong>{datosCamaraActual.totalBancas}</strong>
|
||||
</div>
|
||||
<div className="summary-metric">
|
||||
<span>Bancas en juego</span>
|
||||
<strong>{datosCamaraActual.bancasEnJuego}</strong>
|
||||
</div>
|
||||
<hr />
|
||||
<ul className="partido-lista">
|
||||
{partidosOrdenados.map(partido => (
|
||||
<li key={partido.id}>
|
||||
<span className="partido-color-box" style={{ backgroundColor: partido.color }}></span>
|
||||
<span className="partido-nombre">{partido.nombre}</span>
|
||||
<span className="partido-color-box" style={{ backgroundColor: partido.color || DEFAULT_COLOR }}></span>
|
||||
<span className="partido-nombre">
|
||||
{partido.nombreCorto || partido.nombre}
|
||||
</span>
|
||||
<strong className="partido-bancas">{partido.bancasTotales}</strong>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* Es importante que el Tooltip esté fuera del div que se re-renderiza con el cambio de pestaña */}
|
||||
<Tooltip id="seat-tooltip" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -7,7 +7,6 @@ import { useQuery } from '@tanstack/react-query';
|
||||
import axios from 'axios';
|
||||
import type { Feature, Geometry } from 'geojson';
|
||||
import { geoCentroid } from 'd3-geo';
|
||||
|
||||
import './MapaBsAs.css';
|
||||
|
||||
// --- Interfaces y Tipos ---
|
||||
@@ -17,6 +16,7 @@ interface ResultadoMapa {
|
||||
ambitoId: number;
|
||||
departamentoNombre: string;
|
||||
agrupacionGanadoraId: string;
|
||||
colorGanador: string | null;
|
||||
}
|
||||
|
||||
interface ResultadoDetalladoMunicipio {
|
||||
@@ -44,14 +44,11 @@ type PartidoGeography = Feature<Geometry, PartidoProperties> & { rsmKey: string
|
||||
|
||||
// --- Constantes ---
|
||||
const API_BASE_URL = 'http://localhost:5217/api';
|
||||
const COLORES_BASE: string[] = ["#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#A133FF", "#33FFA1", "#FFC300", "#C70039", "#900C3F", "#581845"];
|
||||
const MIN_ZOOM = 1;
|
||||
const MAX_ZOOM = 8;
|
||||
// Define los límites del paneo: [[x0, y0], [x1, y1]].
|
||||
// Esto evita que el mapa se "pierda" fuera de la vista.
|
||||
// Estos valores pueden necesitar ajuste fino según el tamaño final del contenedor del mapa.
|
||||
const TRANSLATE_EXTENT: [[number, number], [number, number]] = [[-100, -600], [1100, 300]];
|
||||
const INITIAL_POSITION = { center: [-60, -37.25] as PointTuple, zoom: MIN_ZOOM };
|
||||
const INITIAL_POSITION = { center: [-60.5, -37.2] as PointTuple, zoom: MIN_ZOOM };
|
||||
const DEFAULT_MAP_COLOR = '#E0E0E0';
|
||||
|
||||
// --- Componente Principal ---
|
||||
const MapaBsAs = () => {
|
||||
@@ -71,26 +68,34 @@ const MapaBsAs = () => {
|
||||
queryFn: async () => (await axios.get(`${API_BASE_URL}/Catalogos/agrupaciones`)).data,
|
||||
});
|
||||
|
||||
const { nombresAgrupaciones, coloresPartidos, resultadosPorDepartamento } = useMemo(() => {
|
||||
const nombresMap = new Map<string, string>();
|
||||
const coloresMap = new Map<string, string>();
|
||||
const resultadosMap = new Map<string, ResultadoMapa>();
|
||||
if (agrupacionesData) {
|
||||
agrupacionesData.forEach((agrupacion, index) => {
|
||||
nombresMap.set(agrupacion.id, agrupacion.nombre);
|
||||
coloresMap.set(agrupacion.id, COLORES_BASE[index % COLORES_BASE.length]);
|
||||
});
|
||||
}
|
||||
// Se cambia el color por defecto a uno más apropiado para fondo claro
|
||||
coloresMap.set('default', '#E0E0E0');
|
||||
if (resultadosData) {
|
||||
resultadosData.forEach(r => resultadosMap.set(r.departamentoNombre.toUpperCase(), r));
|
||||
}
|
||||
return { nombresAgrupaciones: nombresMap, coloresPartidos: coloresMap, resultadosPorDepartamento: resultadosMap };
|
||||
// --- SU SOLUCIÓN CORRECTA INTEGRADA ---
|
||||
const { nombresAgrupaciones, resultadosPorDepartamento } = useMemo<{
|
||||
nombresAgrupaciones: Map<string, string>;
|
||||
resultadosPorDepartamento: Map<string, ResultadoMapa>;
|
||||
}>(() => {
|
||||
const nombresMap = new Map<string, string>();
|
||||
const resultadosMap = new Map<string, ResultadoMapa>();
|
||||
|
||||
if (agrupacionesData) {
|
||||
agrupacionesData.forEach((agrupacion) => {
|
||||
nombresMap.set(agrupacion.id, agrupacion.nombre);
|
||||
});
|
||||
}
|
||||
|
||||
if (resultadosData) {
|
||||
resultadosData.forEach(r => resultadosMap.set(r.departamentoNombre.toUpperCase(), r));
|
||||
}
|
||||
|
||||
return {
|
||||
nombresAgrupaciones: nombresMap,
|
||||
resultadosPorDepartamento: resultadosMap
|
||||
};
|
||||
}, [agrupacionesData, resultadosData]);
|
||||
|
||||
const isLoading = isLoadingResultados || isLoadingAgrupaciones || isLoadingGeo;
|
||||
|
||||
// ... (el resto del componente no necesita cambios)
|
||||
|
||||
const handleReset = useCallback(() => {
|
||||
setSelectedAmbitoId(null);
|
||||
setPosition(INITIAL_POSITION);
|
||||
@@ -111,22 +116,15 @@ const MapaBsAs = () => {
|
||||
}, [selectedAmbitoId, handleReset, resultadosPorDepartamento]);
|
||||
|
||||
const handleMoveEnd = (newPosition: { coordinates: PointTuple; zoom: number }) => {
|
||||
// La lógica de reseteo cuando se hace zoom out completamente con la rueda del ratón se mantiene.
|
||||
// El `translateExtent` ya previene que el mapa se mueva fuera de los límites.
|
||||
if (newPosition.zoom <= MIN_ZOOM) {
|
||||
if (position.zoom > MIN_ZOOM || selectedAmbitoId !== null) {
|
||||
handleReset();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Si se está haciendo zoom out desde una vista detallada, se deselecciona el municipio
|
||||
// para volver a la vista general sin resetear completamente la posición.
|
||||
if (newPosition.zoom < position.zoom && selectedAmbitoId !== null) {
|
||||
setSelectedAmbitoId(null);
|
||||
}
|
||||
|
||||
// Actualiza el estado con la nueva posición y zoom del paneo/zoom del usuario.
|
||||
setPosition({ center: newPosition.coordinates, zoom: newPosition.zoom });
|
||||
};
|
||||
|
||||
@@ -144,8 +142,10 @@ const MapaBsAs = () => {
|
||||
|
||||
const getPartyFillColor = (departamentoNombre: string) => {
|
||||
const resultado = resultadosPorDepartamento.get(departamentoNombre.toUpperCase());
|
||||
if (!resultado) return coloresPartidos.get('default') || '#D6D6DA';
|
||||
return coloresPartidos.get(resultado.agrupacionGanadoraId) || coloresPartidos.get('default');
|
||||
if (!resultado || !resultado.colorGanador) {
|
||||
return DEFAULT_MAP_COLOR;
|
||||
}
|
||||
return resultado.colorGanador;
|
||||
};
|
||||
|
||||
const handleMouseEnter = (e: MouseEvent<SVGPathElement>) => {
|
||||
@@ -160,8 +160,7 @@ const MapaBsAs = () => {
|
||||
return (
|
||||
<div className="mapa-wrapper">
|
||||
<div className="mapa-container">
|
||||
{/* Se elimina el 'style' con el backgroundColor para que lo controle el CSS */}
|
||||
<ComposableMap projection="geoMercator" projectionConfig={{ scale: 6000, center: [-60, -37.25] }} className="rsm-svg">
|
||||
<ComposableMap projection="geoMercator" projectionConfig={{ scale: 4400, center: [-60.5, -37.2] }} className="rsm-svg">
|
||||
<ZoomableGroup
|
||||
center={position.center}
|
||||
zoom={position.zoom}
|
||||
@@ -171,7 +170,6 @@ const MapaBsAs = () => {
|
||||
minZoom={MIN_ZOOM}
|
||||
maxZoom={MAX_ZOOM}
|
||||
filterZoomEvent={(e: WheelEvent) => {
|
||||
// Detectamos si la rueda se mueve hacia atrás (zoom out)
|
||||
if (e.deltaY > 0) {
|
||||
handleReset();
|
||||
} else if (e.deltaY < 0) {
|
||||
@@ -198,7 +196,6 @@ const MapaBsAs = () => {
|
||||
data-tooltip-content={`${geo.properties.departamento}: ${nombreAgrupacionGanadora}`}
|
||||
className={`rsm-geography ${isSelected ? 'selected' : ''} ${isFaded ? 'faded' : ''}`}
|
||||
fill={getPartyFillColor(geo.properties.departamento)}
|
||||
// Se elimina la prop 'stroke' para que la controle el CSS
|
||||
onClick={() => handleGeographyClick(geo)}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
/>
|
||||
@@ -209,13 +206,12 @@ const MapaBsAs = () => {
|
||||
)}
|
||||
</ZoomableGroup>
|
||||
</ComposableMap>
|
||||
{/* Se añade una variante 'light' al Tooltip para que combine mejor */}
|
||||
<Tooltip id="partido-tooltip" variant="light" />
|
||||
{selectedAmbitoId !== null && <ControlesMapa onReset={handleReset} />}
|
||||
</div>
|
||||
<div className="info-panel">
|
||||
<DetalleMunicipio ambitoId={selectedAmbitoId} onReset={handleReset} />
|
||||
<Legend colores={coloresPartidos} nombres={nombresAgrupaciones} />
|
||||
<Legend resultados={resultadosPorDepartamento} nombresAgrupaciones={nombresAgrupaciones} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -264,9 +260,34 @@ const DetalleMunicipio = ({ ambitoId, onReset }: { ambitoId: number | null; onRe
|
||||
);
|
||||
};
|
||||
|
||||
const Legend = ({ colores, nombres }: { colores: Map<string, string>; nombres: Map<string, string> }) => {
|
||||
const legendItems = Array.from(colores.entries()).filter(([id]) => id !== 'default').map(([id, color]) => ({ nombre: nombres.get(id) || 'Desconocido', color: color }));
|
||||
return (<div className="legend"><h4>Leyenda de Ganadores</h4>{legendItems.map(item => (<div key={item.nombre} className="legend-item"><div className="legend-color-box" style={{ backgroundColor: item.color }} /><span>{item.nombre}</span></div>))}</div>);
|
||||
const Legend = ({ resultados, nombresAgrupaciones }: { resultados: Map<string, ResultadoMapa>, nombresAgrupaciones: Map<string, string> }) => {
|
||||
|
||||
const legendItems = useMemo(() => {
|
||||
const ganadoresUnicos = new Map<string, { nombre: string; color: string }>();
|
||||
|
||||
resultados.forEach(resultado => {
|
||||
if (resultado.colorGanador && !ganadoresUnicos.has(resultado.agrupacionGanadoraId)) {
|
||||
ganadoresUnicos.set(resultado.agrupacionGanadoraId, {
|
||||
nombre: nombresAgrupaciones.get(resultado.agrupacionGanadoraId) || 'Desconocido',
|
||||
color: resultado.colorGanador
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return Array.from(ganadoresUnicos.values());
|
||||
}, [resultados, nombresAgrupaciones]);
|
||||
|
||||
return (
|
||||
<div className="legend">
|
||||
<h4>Leyenda de Ganadores</h4>
|
||||
{legendItems.map(item => (
|
||||
<div key={item.nombre} className="legend-item">
|
||||
<div className="legend-color-box" style={{ backgroundColor: item.color }} />
|
||||
<span>{item.nombre}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MapaBsAs;
|
||||
@@ -1,139 +1,169 @@
|
||||
// src/components/ParliamentLayout.tsx
|
||||
import React from 'react';
|
||||
|
||||
// Interfaces (sin cambios)
|
||||
// Interfaces (no cambian)
|
||||
interface SeatFillData {
|
||||
color: string;
|
||||
isEnJuego: boolean;
|
||||
// Añadimos la propiedad opcional 'ocupante'
|
||||
ocupante?: {
|
||||
nombreOcupante: string;
|
||||
fotoUrl: string | null;
|
||||
} | null;
|
||||
}
|
||||
|
||||
interface ParliamentLayoutProps {
|
||||
seatData: SeatFillData[];
|
||||
size?: number;
|
||||
presidenteBancada: { color: string | null } | null;
|
||||
}
|
||||
|
||||
const PRESIDENTE_SEAT_INDEX = 91;
|
||||
|
||||
export const ParliamentLayout: React.FC<ParliamentLayoutProps> = ({
|
||||
seatData,
|
||||
size = 400,
|
||||
presidenteBancada,
|
||||
}) => {
|
||||
const uniqueColors = [...new Set(seatData.map(d => d.color))];
|
||||
|
||||
// La plantilla de círculos estáticos
|
||||
// --- NUEVO ARRAY DE ELEMENTOS ORDENADO ---
|
||||
const seatElements = [
|
||||
<circle key="seat-0" id="seat-0" r="9.964" cy="160.283" cx="-255.056" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-1" id="seat-1" r="9.964" cy="114.844" cx="-252.766" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-2" id="seat-2" r="9.964" cy="68.323" cx="-249.04" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-3" id="seat-3" r="9.964" cy="167.585" cx="-230.037" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-4" id="seat-4" r="9.964" cy="121.335" cx="-226.656" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-5" id="seat-5" r="9.964" cy="74.003" cx="-224.493" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-6" id="seat-6" r="9.964" cy="22.948" cx="-223.55" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-7" id="seat-7" r="9.964" cy="183.347" cx="-208.602" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-8" id="seat-8" r="9.964" cy="132.154" cx="-203.666" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-9" id="seat-9" r="9.964" cy="82.117" cx="-199.609" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-10" id="seat-10" r="9.964" cy="30.215" cx="-197.157" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-11" id="seat-11" r="9.964" cy="145.407" cx="-182.84" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-12" id="seat-12" r="9.964" cy="93.477" cx="-175.808" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-13" id="seat-13" r="9.964" cy="39.969" cx="-171.147" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-14" id="seat-14" r="9.964" cy="163.733" cx="-163.582" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-15" id="seat-15" r="9.964" cy="108.082" cx="-153.63" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-16" id="seat-16" r="9.964" cy="51.554" cx="-147.409" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-17" id="seat-17" r="9.964" cy="125.122" cx="-134.967" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-18" id="seat-18" r="9.964" cy="66.206" cx="-124.894" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-19" id="seat-19" r="9.964" cy="143.999" cx="-118.288" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-20" id="seat-20" r="9.964" cy="82.48" cx="-104.338" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-21" id="seat-21" r="9.964" cy="102.267" cx="-85.471" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-22" id="seat-22" r="9.964" cy="123.093" cx="-70.302" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-23" id="seat-23" r="9.964" cy="280.15" cx="51.596" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-24" id="seat-24" r="9.964" cy="238.303" cx="63.378" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-25" id="seat-25" r="9.964" cy="187.919" cx="77.562" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-26" id="seat-26" r="9.964" cy="137.535" cx="91.746" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-27" id="seat-27" r="9.964" cy="291.519" cx="75.175" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-28" id="seat-28" r="9.964" cy="246.564" cx="88.133" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-29" id="seat-29" r="9.964" cy="197.635" cx="103.42" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-30" id="seat-30" r="9.964" cy="145.84" cx="118.145" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-31" id="seat-31" r="9.964" cy="307.801" cx="95.891" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-32" id="seat-32" r="9.964" cy="259.444" cx="110.504" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-33" id="seat-33" r="9.964" cy="209.251" cx="125.789" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-34" id="seat-34" r="9.964" cy="157.248" cx="142.356" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-35" id="seat-35" r="9.964" cy="274.606" cx="129.053" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-36" id="seat-36" r="9.964" cy="223.156" cx="147.029" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-37" id="seat-37" r="9.964" cy="169.647" cx="164.36" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-38" id="seat-38" r="9.964" cy="290.475" cx="148.465" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-39" id="seat-39" r="9.964" cy="238.165" cx="165.39" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-40" id="seat-40" r="9.964" cy="184.139" cx="184.653" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-41" id="seat-41" r="9.964" cy="253.417" cx="184.047" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-42" id="seat-42" r="9.964" cy="199.221" cx="204.812" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-43" id="seat-43" r="9.964" cy="268.306" cx="202.26" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-44" id="seat-44" r="9.964" cy="214.247" cx="223.62" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-45" id="seat-45" r="9.964" cy="308.5" cx="-275.898" transform="matrix(-1, 0, 0, 1, 0, 0)"/>,
|
||||
<circle key="seat-46" id="seat-46" r="9.964" cy="160.283" cx="296.74"/>,
|
||||
<circle key="seat-47" id="seat-47" r="9.964" cy="114.844" cx="299.029"/>,
|
||||
<circle key="seat-48" id="seat-48" r="9.964" cy="68.323" cx="302.756"/>,
|
||||
<circle key="seat-49" id="seat-49" r="9.964" cy="167.585" cx="321.759"/>,
|
||||
<circle key="seat-50" id="seat-50" r="9.964" cy="121.335" cx="325.14"/>,
|
||||
<circle key="seat-51" id="seat-51" r="9.964" cy="74.003" cx="327.303"/>,
|
||||
<circle key="seat-52" id="seat-52" r="9.964" cy="22.948" cx="328.246"/>,
|
||||
<circle key="seat-53" id="seat-53" r="9.964" cy="183.347" cx="343.194"/>,
|
||||
<circle key="seat-54" id="seat-54" r="9.964" cy="132.154" cx="348.129"/>,
|
||||
<circle key="seat-55" id="seat-55" r="9.964" cy="82.117" cx="352.187"/>,
|
||||
<circle key="seat-56" id="seat-56" r="9.964" cy="30.215" cx="354.639"/>,
|
||||
<circle key="seat-57" id="seat-57" r="9.964" cy="145.407" cx="368.956"/>,
|
||||
<circle key="seat-58" id="seat-58" r="9.964" cy="93.477" cx="375.988"/>,
|
||||
<circle key="seat-59" id="seat-59" r="9.964" cy="39.969" cx="380.649"/>,
|
||||
<circle key="seat-60" id="seat-60" r="9.964" cy="163.733" cx="388.214"/>,
|
||||
<circle key="seat-61" id="seat-61" r="9.964" cy="108.082" cx="398.166"/>,
|
||||
<circle key="seat-62" id="seat-62" r="9.964" cy="51.554" cx="404.387"/>,
|
||||
<circle key="seat-63" id="seat-63" r="9.964" cy="125.122" cx="416.829"/>,
|
||||
<circle key="seat-64" id="seat-64" r="9.964" cy="66.206" cx="426.902"/>,
|
||||
<circle key="seat-65" id="seat-65" r="9.964" cy="143.999" cx="433.508"/>,
|
||||
<circle key="seat-66" id="seat-66" r="9.964" cy="82.48" cx="447.457"/>,
|
||||
<circle key="seat-67" id="seat-67" r="9.964" cy="102.267" cx="466.325"/>,
|
||||
<circle key="seat-68" id="seat-68" r="9.964" cy="123.093" cx="481.494"/>,
|
||||
<circle key="seat-69" id="seat-69" r="9.964" cy="-147.065" cx="400.833" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-70" id="seat-70" r="9.964" cy="-188.912" cx="412.614" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-71" id="seat-71" r="9.964" cy="-239.296" cx="426.798" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-72" id="seat-72" r="9.964" cy="-289.68" cx="440.983" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-73" id="seat-73" r="9.964" cy="-135.696" cx="424.411" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-74" id="seat-74" r="9.964" cy="-180.651" cx="437.369" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-75" id="seat-75" r="9.964" cy="-229.58" cx="452.656" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-76" id="seat-76" r="9.964" cy="-281.375" cx="467.381" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-77" id="seat-77" r="9.964" cy="-119.414" cx="445.127" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-78" id="seat-78" r="9.964" cy="-167.771" cx="459.741" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-79" id="seat-79" r="9.964" cy="-217.964" cx="475.026" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-80" id="seat-80" r="9.964" cy="-269.967" cx="491.592" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-81" id="seat-81" r="9.964" cy="-152.609" cx="478.289" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-82" id="seat-82" r="9.964" cy="-204.059" cx="496.265" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-83" id="seat-83" r="9.964" cy="-257.568" cx="513.597" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-84" id="seat-84" r="9.964" cy="-136.74" cx="497.701" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-85" id="seat-85" r="9.964" cy="-189.049" cx="514.627" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-86" id="seat-86" r="9.964" cy="-243.076" cx="533.889" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-87" id="seat-87" r="9.964" cy="-173.798" cx="533.284" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-88" id="seat-88" r="9.964" cy="-227.994" cx="554.048" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-89" id="seat-89" r="9.964" cy="-158.909" cx="551.496" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-90" id="seat-90" r="9.964" cy="-212.968" cx="572.857" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-91" id="seat-91" r="9.964" cy="-197.942" cx="591.665" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)"/>,
|
||||
<circle key="seat-0" id="seat-0" r="12" cy="268.306" cx="202.26" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-1" id="seat-1" r="12" cy="214.247" cx="223.62" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-2" id="seat-2" r="12" cy="253.417" cx="184.047" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-3" id="seat-3" r="12" cy="290.475" cx="148.465" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-4" id="seat-4" r="12" cy="199.221" cx="204.812" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-5" id="seat-5" r="12" cy="238.165" cx="165.39" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-6" id="seat-6" r="12" cy="274.606" cx="129.053" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-7" id="seat-7" r="12" cy="307.801" cx="95.891" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-8" id="seat-8" r="12" cy="184.139" cx="184.653" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-9" id="seat-9" r="12" cy="223.156" cx="147.029" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-10" id="seat-10" r="12" cy="259.444" cx="110.504" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-11" id="seat-11" r="12" cy="291.519" cx="75.175" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-12" id="seat-12" r="12" cy="169.647" cx="164.36" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-13" id="seat-13" r="12" cy="209.251" cx="125.789" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-14" id="seat-14" r="12" cy="246.564" cx="88.133" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-15" id="seat-15" r="12" cy="280.15" cx="51.596" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-16" id="seat-16" r="12" cy="157.248" cx="142.356" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-17" id="seat-17" r="12" cy="197.635" cx="103.42" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-18" id="seat-18" r="12" cy="238.303" cx="63.378" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-19" id="seat-19" r="12" cy="145.84" cx="118.145" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-20" id="seat-20" r="12" cy="187.919" cx="77.562" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-21" id="seat-21" r="12" cy="137.535" cx="91.746" transform="matrix(-0.632908, 0.774227, 0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-22" id="seat-22" r="12" cy="123.093" cx="-70.302" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-23" id="seat-23" r="12" cy="143.999" cx="-118.288" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-24" id="seat-24" r="12" cy="163.733" cx="-163.582" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-25" id="seat-25" r="12" cy="183.347" cx="-208.602" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-26" id="seat-26" r="12" cy="102.267" cx="-85.471" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-27" id="seat-27" r="12" cy="125.122" cx="-134.967" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-28" id="seat-28" r="12" cy="145.407" cx="-182.84" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-29" id="seat-29" r="12" cy="167.585" cx="-230.037" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-30" id="seat-30" r="12" cy="82.48" cx="-104.338" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-31" id="seat-31" r="12" cy="108.082" cx="-153.63" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-32" id="seat-32" r="12" cy="132.154" cx="-203.666" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-33" id="seat-33" r="12" cy="160.283" cx="-255.056" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-34" id="seat-34" r="12" cy="66.206" cx="-124.894" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-35" id="seat-35" r="12" cy="93.477" cx="-175.808" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-36" id="seat-36" r="12" cy="121.335" cx="-226.656" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-37" id="seat-37" r="12" cy="51.554" cx="-147.409" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-38" id="seat-38" r="12" cy="82.117" cx="-199.609" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-39" id="seat-39" r="12" cy="114.844" cx="-252.766" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-40" id="seat-40" r="12" cy="39.969" cx="-171.147" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-41" id="seat-41" r="12" cy="74.003" cx="-224.493" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-42" id="seat-42" r="12" cy="30.215" cx="-197.157" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-43" id="seat-43" r="12" cy="68.323" cx="-249.04" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-44" id="seat-44" r="12" cy="22.948" cx="-223.55" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="seat-45" id="seat-45" r="12" cy="22.948" cx="328.246" />,
|
||||
<circle key="seat-46" id="seat-46" r="12" cy="68.323" cx="302.756" />,
|
||||
<circle key="seat-47" id="seat-47" r="12" cy="114.844" cx="299.029" />,
|
||||
<circle key="seat-48" id="seat-48" r="12" cy="160.283" cx="296.74" />,
|
||||
<circle key="seat-49" id="seat-49" r="12" cy="30.215" cx="354.639" />,
|
||||
<circle key="seat-50" id="seat-50" r="12" cy="74.003" cx="327.303" />,
|
||||
<circle key="seat-51" id="seat-51" r="12" cy="121.335" cx="325.14" />,
|
||||
<circle key="seat-52" id="seat-52" r="12" cy="167.585" cx="321.759" />,
|
||||
<circle key="seat-53" id="seat-53" r="12" cy="39.969" cx="380.649" />,
|
||||
<circle key="seat-54" id="seat-54" r="12" cy="82.117" cx="352.187" />,
|
||||
<circle key="seat-55" id="seat-55" r="12" cy="132.154" cx="348.129" />,
|
||||
<circle key="seat-56" id="seat-56" r="12" cy="183.347" cx="343.194" />,
|
||||
<circle key="seat-57" id="seat-57" r="12" cy="51.554" cx="404.387" />,
|
||||
<circle key="seat-58" id="seat-58" r="12" cy="93.477" cx="375.988" />,
|
||||
<circle key="seat-59" id="seat-59" r="12" cy="145.407" cx="368.956" />,
|
||||
<circle key="seat-60" id="seat-60" r="12" cy="66.206" cx="426.902" />,
|
||||
<circle key="seat-61" id="seat-61" r="12" cy="108.082" cx="398.166" />,
|
||||
<circle key="seat-62" id="seat-62" r="12" cy="163.733" cx="388.214" />,
|
||||
<circle key="seat-63" id="seat-63" r="12" cy="82.48" cx="447.457" />,
|
||||
<circle key="seat-64" id="seat-64" r="12" cy="125.122" cx="416.829" />,
|
||||
<circle key="seat-65" id="seat-65" r="12" cy="102.267" cx="466.325" />,
|
||||
<circle key="seat-66" id="seat-66" r="12" cy="143.999" cx="433.508" />,
|
||||
<circle key="seat-67" id="seat-67" r="12" cy="123.093" cx="481.494" />,
|
||||
<circle key="seat-68" id="seat-68" r="12" cy="-289.68" cx="440.983" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-69" id="seat-69" r="12" cy="-239.296" cx="426.798" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-70" id="seat-70" r="12" cy="-188.912" cx="412.614" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-71" id="seat-71" r="12" cy="-147.065" cx="400.833" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-72" id="seat-72" r="12" cy="-281.375" cx="467.381" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-73" id="seat-73" r="12" cy="-229.58" cx="452.656" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-74" id="seat-74" r="12" cy="-180.651" cx="437.369" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-75" id="seat-75" r="12" cy="-135.696" cx="424.411" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-76" id="seat-76" r="12" cy="-269.967" cx="491.592" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-77" id="seat-77" r="12" cy="-217.964" cx="475.026" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-78" id="seat-78" r="12" cy="-167.771" cx="459.741" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-79" id="seat-79" r="12" cy="-119.414" cx="445.127" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-80" id="seat-80" r="12" cy="-257.568" cx="513.597" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-81" id="seat-81" r="12" cy="-204.059" cx="496.265" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-82" id="seat-82" r="12" cy="-152.609" cx="478.289" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-83" id="seat-83" r="12" cy="-243.076" cx="533.889" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-84" id="seat-84" r="12" cy="-189.049" cx="514.627" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-85" id="seat-85" r="12" cy="-136.74" cx="497.701" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-86" id="seat-86" r="12" cy="-227.994" cx="554.048" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-87" id="seat-87" r="12" cy="-173.798" cx="533.284" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-88" id="seat-88" r="12" cy="-212.968" cx="572.857" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-89" id="seat-89" r="12" cy="-158.909" cx="551.496" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-90" id="seat-90" r="12" cy="-197.942" cx="591.665" transform="matrix(0.632908, 0.774227, -0.774227, 0.632908, 0, 0)" />,
|
||||
<circle key="seat-91" id="seat-91" r="12" cy="308.5" cx="-275.898" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
];
|
||||
|
||||
const renderedElements = seatElements.map((child, index) => {
|
||||
// Si no hay datos para este asiento (ej. en la cámara de senadores que tiene menos de 92 bancas)
|
||||
// lo pintamos de gris.
|
||||
if (index >= seatData.length) {
|
||||
return React.cloneElement(child, {
|
||||
fill: '#E0E0E0',
|
||||
stroke: '#ffffff',
|
||||
strokeWidth: 1.5,
|
||||
});
|
||||
// Creamos una copia mutable de los datos de asientos para poder modificarla.
|
||||
const finalSeatData = [...seatData];
|
||||
|
||||
// Si hay un presidente y su partido tiene bancas, le quitamos una para asignarla.
|
||||
if (presidenteBancada && presidenteBancada.color) {
|
||||
// Encontramos el índice del último asiento que pertenece al partido del presidente.
|
||||
const lastSeatIndex = finalSeatData.map(s => s.color).lastIndexOf(presidenteBancada.color);
|
||||
|
||||
if (lastSeatIndex !== -1) {
|
||||
// Eliminamos ese asiento de la lista de asientos electorales.
|
||||
finalSeatData.splice(lastSeatIndex, 1);
|
||||
}
|
||||
}
|
||||
|
||||
const seat = seatData[index];
|
||||
const patternId = `stripes-${seat.color.replace('#', '')}`;
|
||||
|
||||
const renderedElements = seatElements.map((child, index) => {
|
||||
// El asiento presidencial sigue siendo un caso especial
|
||||
if (index === PRESIDENTE_SEAT_INDEX) {
|
||||
return React.cloneElement(child, {
|
||||
fill: seat.isEnJuego ? `url(#${patternId})` : seat.color,
|
||||
stroke: '#ffffff',
|
||||
strokeWidth: 1.5,
|
||||
fill: presidenteBancada?.color || '#A9A9A9',
|
||||
stroke: '#000000',
|
||||
strokeWidth: 2,
|
||||
});
|
||||
}
|
||||
|
||||
// La lógica ahora es simple: el asiento en el índice X del SVG
|
||||
// corresponde al asiento en el índice X de los datos.
|
||||
const seat = seatData[index];
|
||||
|
||||
if (!seat) {
|
||||
return React.cloneElement(child, { fill: '#E0E0E0', stroke: '#ffffff', strokeWidth: 1.5 });
|
||||
}
|
||||
|
||||
return React.cloneElement(child, {
|
||||
fill: seat.color,
|
||||
stroke: '#ffffff',
|
||||
strokeWidth: 1.5,
|
||||
'data-tooltip-id': seat.ocupante ? 'seat-tooltip' : undefined,
|
||||
'data-tooltip-html': seat.ocupante
|
||||
? `<div class="seat-tooltip"><img src="${seat.ocupante.fotoUrl || '/default-avatar.png'}" alt="${seat.ocupante.nombreOcupante}" /><p>${seat.ocupante.nombreOcupante}</p></div>`
|
||||
: undefined,
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 550 375" width={size} height={size * (375 / 550)} style={{ display: 'block', margin: 'auto' }}>
|
||||
|
||||
@@ -1,89 +1,121 @@
|
||||
// src/components/SenateLayout.tsx
|
||||
import React from 'react';
|
||||
|
||||
// Las interfaces son las mismas que para el otro layout
|
||||
// Interfaces
|
||||
interface SeatFillData {
|
||||
color: string;
|
||||
isEnJuego: boolean;
|
||||
// Añadimos la propiedad opcional 'ocupante'
|
||||
ocupante?: {
|
||||
nombreOcupante: string;
|
||||
fotoUrl: string | null;
|
||||
} | null;
|
||||
}
|
||||
|
||||
interface SenateLayoutProps {
|
||||
seatData: SeatFillData[];
|
||||
size?: number;
|
||||
presidenteBancada: { color: string | null } | null;
|
||||
}
|
||||
|
||||
const PRESIDENTE_SEAT_INDEX = 45; // El último asiento (índice 45 de 46)
|
||||
|
||||
export const SenateLayout: React.FC<SenateLayoutProps> = ({
|
||||
seatData,
|
||||
size = 400,
|
||||
presidenteBancada,
|
||||
}) => {
|
||||
const uniqueColors = [...new Set(seatData.map(d => d.color).filter(Boolean))];
|
||||
|
||||
// Plantilla estática de los 46 asientos del Senado, ordenados para el llenado por columnas.
|
||||
// --- NUEVO ARRAY DE ELEMENTOS ORDENADO PARA EL SENADO ---
|
||||
const seatElements = [
|
||||
<circle key="senate-seat-0" id="senate-seat-0" r="8" cy="354.956" cx="-121.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-1" id="senate-seat-1" r="8" cy="331.318" cx="-121.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-2" id="senate-seat-2" r="8" cy="307.598" cx="-121.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-3" id="senate-seat-3" r="8" cy="285.358" cx="-121.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-4" id="senate-seat-4" r="8" cy="261.241" cx="-121.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-5" id="senate-seat-5" r="8" cy="354.956" cx="-164.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-6" id="senate-seat-6" r="8" cy="333.318" cx="-164.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-7" id="senate-seat-7" r="8" cy="312.598" cx="-164.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-8" id="senate-seat-8" r="8" cy="292.358" cx="-164.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-9" id="senate-seat-9" r="8" cy="269.241" cx="-165.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-10" id="senate-seat-10" r="8" cy="246.521" cx="-170.309" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-11" id="senate-seat-11" r="8" cy="229.407" cx="-183.766" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-12" id="senate-seat-12" r="8" cy="217.294" cx="-201.175" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-13" id="senate-seat-13" r="8" cy="268.057" cx="-208.672" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-14" id="senate-seat-14" r="8" cy="292.358" cx="-206.672" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-15" id="senate-seat-15" r="8" cy="211.882" cx="-223.172" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-16" id="senate-seat-16" r="8" cy="252.557" cx="-227.172" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-17" id="senate-seat-17" r="8" cy="347.619" cx="243.841" />,
|
||||
<circle key="senate-seat-18" id="senate-seat-18" r="8" cy="252.557" cx="258.729" />,
|
||||
<circle key="senate-seat-19" id="senate-seat-19" r="8" cy="211.882" cx="262.728" />,
|
||||
<circle key="senate-seat-20" id="senate-seat-20" r="8" cy="268.057" cx="277.228" />,
|
||||
<circle key="senate-seat-21" id="senate-seat-21" r="8" cy="292.358" cx="279.228" />,
|
||||
<circle key="senate-seat-22" id="senate-seat-22" r="8" cy="217.294" cx="284.726" />,
|
||||
<circle key="senate-seat-23" id="senate-seat-23" r="8" cy="159.989" cx="295.143" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, -54.66, 61.555)" />,
|
||||
<circle key="senate-seat-24" id="senate-seat-24" r="8" cy="229.407" cx="302.134" />,
|
||||
<circle key="senate-seat-25" id="senate-seat-25" r="8" cy="170.401" cx="311.791" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, -49.543, 55.556)" />,
|
||||
<circle key="senate-seat-26" id="senate-seat-26" r="8" cy="246.521" cx="315.591" />,
|
||||
<circle key="senate-seat-27" id="senate-seat-27" r="8" cy="269.241" cx="319.968" />,
|
||||
<circle key="senate-seat-28" id="senate-seat-28" r="8" cy="292.358" cx="320.968" />,
|
||||
<circle key="senate-seat-29" id="senate-seat-29" r="8" cy="312.598" cx="320.968" />,
|
||||
<circle key="senate-seat-30" id="senate-seat-30" r="8" cy="333.318" cx="320.968" />,
|
||||
<circle key="senate-seat-31" id="senate-seat-31" r="8" cy="354.956" cx="320.968" />,
|
||||
<circle key="senate-seat-32" id="senate-seat-32" r="8" cy="184.514" cx="327.2" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, -42.892, 52.164)" />,
|
||||
<circle key="senate-seat-33" id="senate-seat-33" r="8" cy="184.514" cx="327.2" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, -21.946, 65.569)" />,
|
||||
<circle key="senate-seat-34" id="senate-seat-34" r="8" cy="184.514" cx="327.2" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, -2.353, 84.436)" />,
|
||||
<circle key="senate-seat-35" id="senate-seat-35" r="8" cy="184.514" cx="327.2" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, 8.933, 107.941)" />,
|
||||
<circle key="senate-seat-36" id="senate-seat-36" r="8" cy="261.241" cx="363.968" />,
|
||||
<circle key="senate-seat-37" id="senate-seat-37" r="8" cy="285.358" cx="363.968" />,
|
||||
<circle key="senate-seat-38" id="senate-seat-38" r="8" cy="307.598" cx="363.968" />,
|
||||
<circle key="senate-seat-39" id="senate-seat-39" r="8" cy="331.318" cx="363.968" />,
|
||||
<circle key="senate-seat-40" id="senate-seat-40" r="8" cy="354.956" cx="363.968" />,
|
||||
<circle key="senate-seat-41" id="senate-seat-41" r="8" cy="159.989" cx="295.143" transform="matrix(-0.986454, -0.16404, -0.16404, 0.986454, 540.544, 61.56)" />,
|
||||
<circle key="senate-seat-42" id="senate-seat-42" r="8" cy="170.401" cx="311.791" transform="matrix(-0.986454, -0.16404, -0.16404, 0.986454, 535.427, 55.561)" />,
|
||||
<circle key="senate-seat-43" id="senate-seat-43" r="8" cy="184.514" cx="327.2" transform="matrix(-0.986454, -0.16404, -0.16404, 0.986454, 528.776, 52.17)" />,
|
||||
<circle key="senate-seat-44" id="senate-seat-44" r="8" cy="184.514" cx="327.2" transform="matrix(-0.986454, -0.16404, -0.16404, 0.986454, 507.83, 65.575)" />,
|
||||
<circle key="senate-seat-45" id="senate-seat-45" r="8" cy="184.514" cx="327.2" transform="matrix(-0.986454, -0.16404, -0.16404, 0.986454, 488.237, 84.441)" />,
|
||||
<circle key="senate-seat-0" id="senate-seat-0" r="9" cy="354.956" cx="-121.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-1" id="senate-seat-1" r="9" cy="354.956" cx="-164.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-2" id="senate-seat-2" r="9" cy="331.318" cx="-121.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-3" id="senate-seat-3" r="9" cy="333.318" cx="-164.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-4" id="senate-seat-4" r="9" cy="307.598" cx="-121.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-5" id="senate-seat-5" r="9" cy="312.598" cx="-164.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-6" id="senate-seat-6" r="9" cy="285.358" cx="-121.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-7" id="senate-seat-7" r="9" cy="292.358" cx="-164.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-8" id="senate-seat-8" r="9" cy="292.358" cx="-206.672" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-9" id="senate-seat-9" r="9" cy="261.241" cx="-121.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-10" id="senate-seat-10" r="9" cy="269.241" cx="-165.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-11" id="senate-seat-11" r="9" cy="268.057" cx="-208.672" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-12" id="senate-seat-12" r="9" cy="184.514" cx="327.2" transform="matrix(-0.986454, -0.16404, -0.16404, 0.986454, 488.237, 84.441)" />,
|
||||
<circle key="senate-seat-13" id="senate-seat-13" r="9" cy="246.521" cx="-170.309" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-14" id="senate-seat-14" r="9" cy="184.514" cx="327.2" transform="matrix(-0.986454, -0.16404, -0.16404, 0.986454, 507.83, 65.575)" />,
|
||||
<circle key="senate-seat-15" id="senate-seat-15" r="9" cy="229.407" cx="-183.766" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-16" id="senate-seat-16" r="9" cy="184.514" cx="327.2" transform="matrix(-0.986454, -0.16404, -0.16404, 0.986454, 528.776, 52.17)" />,
|
||||
<circle key="senate-seat-17" id="senate-seat-17" r="9" cy="217.294" cx="-201.175" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-18" id="senate-seat-18" r="9" cy="252.557" cx="-227.172" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-19" id="senate-seat-19" r="9" cy="170.401" cx="311.791" transform="matrix(-0.986454, -0.16404, -0.16404, 0.986454, 535.427, 55.561)" />,
|
||||
<circle key="senate-seat-20" id="senate-seat-20" r="9" cy="211.882" cx="-223.172" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
||||
<circle key="senate-seat-21" id="senate-seat-21" r="9" cy="159.989" cx="295.143" transform="matrix(-0.986454, -0.16404, -0.16404, 0.986454, 540.544, 61.56)" />,
|
||||
<circle key="senate-seat-22" id="senate-seat-22" r="9" cy="159.989" cx="295.143" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, -54.66, 61.555)" />,
|
||||
<circle key="senate-seat-23" id="senate-seat-23" r="9" cy="211.882" cx="262.728" />,
|
||||
<circle key="senate-seat-24" id="senate-seat-24" r="9" cy="252.557" cx="258.729" />,
|
||||
<circle key="senate-seat-25" id="senate-seat-25" r="9" cy="170.401" cx="311.791" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, -49.543, 55.556)" />,
|
||||
<circle key="senate-seat-26" id="senate-seat-26" r="9" cy="217.294" cx="284.726" />,
|
||||
<circle key="senate-seat-27" id="senate-seat-27" r="9" cy="184.514" cx="327.2" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, -42.892, 52.164)" />,
|
||||
<circle key="senate-seat-28" id="senate-seat-28" r="9" cy="184.514" cx="327.2" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, -21.946, 65.569)" />,
|
||||
<circle key="senate-seat-29" id="senate-seat-29" r="9" cy="229.407" cx="302.134" />,
|
||||
<circle key="senate-seat-30" id="senate-seat-30" r="9" cy="268.057" cx="277.228" />,
|
||||
<circle key="senate-seat-31" id="senate-seat-31" r="9" cy="184.514" cx="327.2" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, -2.353, 84.436)" />,
|
||||
<circle key="senate-seat-32" id="senate-seat-32" r="9" cy="246.521" cx="315.591" />,
|
||||
<circle key="senate-seat-33" id="senate-seat-33" r="9" cy="184.514" cx="327.2" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, 8.933, 107.941)" />,
|
||||
<circle key="senate-seat-34" id="senate-seat-34" r="9" cy="269.241" cx="319.968" />,
|
||||
<circle key="senate-seat-35" id="senate-seat-35" r="9" cy="292.358" cx="279.228" />,
|
||||
<circle key="senate-seat-36" id="senate-seat-36" r="9" cy="261.241" cx="363.968" />,
|
||||
<circle key="senate-seat-37" id="senate-seat-37" r="9" cy="292.358" cx="320.968" />,
|
||||
<circle key="senate-seat-38" id="senate-seat-38" r="9" cy="285.358" cx="363.968" />,
|
||||
<circle key="senate-seat-39" id="senate-seat-39" r="9" cy="312.598" cx="320.968" />,
|
||||
<circle key="senate-seat-40" id="senate-seat-40" r="9" cy="307.598" cx="363.968" />,
|
||||
<circle key="senate-seat-41" id="senate-seat-41" r="9" cy="333.318" cx="320.968" />,
|
||||
<circle key="senate-seat-42" id="senate-seat-42" r="9" cy="331.318" cx="363.968" />,
|
||||
<circle key="senate-seat-43" id="senate-seat-43" r="9" cy="354.956" cx="320.968" />,
|
||||
<circle key="senate-seat-44" id="senate-seat-44" r="9" cy="354.956" cx="363.968" />,
|
||||
<circle key="senate-seat-45" id="senate-seat-45" r="9" cy="347.619" cx="243.841" />,
|
||||
];
|
||||
|
||||
// Creamos una copia mutable de los datos de asientos para poder modificarla.
|
||||
const finalSeatData = [...seatData];
|
||||
|
||||
// Si hay un presidente y su partido tiene bancas, le quitamos una para asignarla.
|
||||
if (presidenteBancada && presidenteBancada.color) {
|
||||
// Encontramos el índice del último asiento que pertenece al partido del presidente.
|
||||
const lastSeatIndex = finalSeatData.map(s => s.color).lastIndexOf(presidenteBancada.color);
|
||||
|
||||
if (lastSeatIndex !== -1) {
|
||||
// Eliminamos ese asiento de la lista de asientos electorales.
|
||||
finalSeatData.splice(lastSeatIndex, 1);
|
||||
}
|
||||
}
|
||||
|
||||
const renderedElements = seatElements.map((child, index) => {
|
||||
if (index >= seatData.length) {
|
||||
// El asiento presidencial sigue siendo un caso especial
|
||||
if (index === PRESIDENTE_SEAT_INDEX) {
|
||||
return React.cloneElement(child, {
|
||||
fill: '#E0E0E0',
|
||||
stroke: '#ffffff',
|
||||
strokeWidth: 1.5,
|
||||
fill: presidenteBancada?.color || '#A9A9A9',
|
||||
stroke: '#000000',
|
||||
strokeWidth: 2,
|
||||
});
|
||||
}
|
||||
|
||||
// La lógica ahora es simple: el asiento en el índice X del SVG
|
||||
// corresponde al asiento en el índice X de los datos.
|
||||
const seat = seatData[index];
|
||||
const patternId = `stripes-${seat.color.replace('#', '')}`;
|
||||
|
||||
if (!seat) {
|
||||
return React.cloneElement(child, { fill: '#E0E0E0', stroke: '#ffffff', strokeWidth: 1.5 });
|
||||
}
|
||||
|
||||
return React.cloneElement(child, {
|
||||
fill: seat.isEnJuego ? `url(#${patternId})` : seat.color,
|
||||
fill: seat.color,
|
||||
stroke: '#ffffff',
|
||||
strokeWidth: 1.5,
|
||||
'data-tooltip-id': seat.ocupante ? 'seat-tooltip' : undefined,
|
||||
'data-tooltip-html': seat.ocupante
|
||||
? `<div class="seat-tooltip"><img src="${seat.ocupante.fotoUrl || '/default-avatar.png'}" alt="${seat.ocupante.nombreOcupante}" /><p>${seat.ocupante.nombreOcupante}</p></div>`
|
||||
: undefined,
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -51,7 +51,6 @@ export const TelegramaWidget = () => {
|
||||
}
|
||||
}, [selectedSeccion]);
|
||||
|
||||
// Y así sucesivamente para los demás filtros...
|
||||
useEffect(() => {
|
||||
if (selectedMunicipio) {
|
||||
setCircuitos([]); setEstablecimientos([]); setMesas([]);
|
||||
|
||||
Reference in New Issue
Block a user