154 lines
7.8 KiB
TypeScript
154 lines
7.8 KiB
TypeScript
// src/components/common/SenadoresNacionalesLayout.tsx
|
|
import React from 'react';
|
|
import type { PartidoComposicionNacional } from '../../apiService';
|
|
|
|
// Interfaces
|
|
interface SenadoresNacionalesLayoutProps {
|
|
partyData: PartidoComposicionNacional[];
|
|
size?: number;
|
|
presidenteBancada?: { color: string | null } | null;
|
|
}
|
|
|
|
const PRESIDENTE_SEAT_INDEX = 0;
|
|
|
|
export const SenadoresNacionalesLayout: React.FC<SenadoresNacionalesLayoutProps> = ({
|
|
partyData,
|
|
size = 800,
|
|
presidenteBancada,
|
|
}) => {
|
|
// --- ARRAY DE 73 ELEMENTOS <circle> ORDENADOS POR ID DE "seat-X" ---
|
|
// El asiento 0 es el presidencial, los 72 restantes son los senadores.
|
|
const seatElements = [
|
|
<circle key="seat-0" id="seat-0" r="7.1" cy="187" cx="168.6" />,
|
|
<circle key="seat-1" id="seat-1" r="7.1" cy="166" cx="21.8" />,
|
|
<circle key="seat-2" id="seat-2" r="7.1" cy="172" cx="51.5" />,
|
|
<circle key="seat-3" id="seat-3" r="7.1" cy="174.5" cx="82.7" />,
|
|
<circle key="seat-4" id="seat-4" r="7.1" cy="147.4" cx="21.5" />,
|
|
<circle key="seat-5" id="seat-5" r="7.1" cy="155.2" cx="51.8" />,
|
|
<circle key="seat-6" id="seat-6" r="7.1" cy="156.3" cx="83.4" />,
|
|
<circle key="seat-7" id="seat-7" r="7.1" cy="169.9" cx="120.9" />,
|
|
<circle key="seat-8" id="seat-8" r="7.1" cy="128.4" cx="22.8" />,
|
|
<circle key="seat-9" id="seat-9" r="7.1" cy="137.9" cx="53.2" />,
|
|
<circle key="seat-10" id="seat-10" r="7.1" cy="138.8" cx="85.5" />,
|
|
<circle key="seat-11" id="seat-11" r="7.1" cy="151.9" cx="120.9" />,
|
|
<circle key="seat-12" id="seat-12" r="7.1" cy="109" cx="25.6" />,
|
|
<circle key="seat-13" id="seat-13" r="7.1" cy="121.3" cx="57.2" />,
|
|
<circle key="seat-14" id="seat-14" r="7.1" cy="91.5" cx="34.2" />,
|
|
<circle key="seat-15" id="seat-15" r="7.1" cy="105.7" cx="64.8" />,
|
|
<circle key="seat-16" id="seat-16" r="7.1" cy="122.5" cx="92.9" />,
|
|
<circle key="seat-17" id="seat-17" r="7.1" cy="136.2" cx="128.2" />,
|
|
<circle key="seat-18" id="seat-18" r="7.1" cy="75.5" cx="45.3" />,
|
|
<circle key="seat-19" id="seat-19" r="7.1" cy="91.3" cx="75.7" />,
|
|
<circle key="seat-20" id="seat-20" r="7.1" cy="106.5" cx="106.3" />,
|
|
<circle key="seat-21" id="seat-21" r="7.1" cy="59.8" cx="57.9" />,
|
|
<circle key="seat-22" id="seat-22" r="7.1" cy="78.6" cx="89.5" />,
|
|
<circle key="seat-23" id="seat-23" r="7.1" cy="45.3" cx="73.2" />,
|
|
<circle key="seat-24" id="seat-24" r="7.1" cy="67.2" cx="104.6" />,
|
|
<circle key="seat-25" id="seat-25" r="7.1" cy="94.3" cx="121.6" />,
|
|
<circle key="seat-26" id="seat-26" r="7.1" cy="124.3" cx="141.1" />,
|
|
<circle key="seat-27" id="seat-27" r="7.1" cy="32.7" cx="90.8" />,
|
|
<circle key="seat-28" id="seat-28" r="7.1" cy="58.3" cx="120.9" />,
|
|
<circle key="seat-29" id="seat-29" r="7.1" cy="84.9" cx="139.1" />,
|
|
<circle key="seat-30" id="seat-30" r="7.1" cy="116.4" cx="157.2" />,
|
|
<circle key="seat-31" id="seat-31" r="7.1" cy="24.6" cx="109.5" />,
|
|
<circle key="seat-32" id="seat-32" r="7.1" cy="52.2" cx="138.6" />,
|
|
<circle key="seat-33" id="seat-33" r="7.1" cy="79.5" cx="157.8" />,
|
|
<circle key="seat-34" id="seat-34" r="7.1" cy="17.9" cx="128.8" />,
|
|
<circle key="seat-35" id="seat-35" r="7.1" cy="15.2" cx="147.7" />,
|
|
<circle key="seat-36" id="seat-36" r="7.1" cy="48.3" cx="156.9" />,
|
|
<circle key="seat-37" id="seat-37" r="7.1" cy="15.2" cx="192.5" />,
|
|
<circle key="seat-38" id="seat-38" r="7.1" cy="48.3" cx="183.3" />,
|
|
<circle key="seat-39" id="seat-39" r="7.1" cy="79.5" cx="182.4" />,
|
|
<circle key="seat-40" id="seat-40" r="7.1" cy="115.8" cx="182.2" />,
|
|
<circle key="seat-41" id="seat-41" r="7.1" cy="17.9" cx="211.4" />,
|
|
<circle key="seat-42" id="seat-42" r="7.1" cy="52.2" cx="201.6" />,
|
|
<circle key="seat-43" id="seat-43" r="7.1" cy="24.6" cx="230.7" />,
|
|
<circle key="seat-44" id="seat-44" r="7.1" cy="58.3" cx="219.3" />,
|
|
<circle key="seat-45" id="seat-45" r="7.1" cy="84.9" cx="201.1" />,
|
|
<circle key="seat-46" id="seat-46" r="7.1" cy="32.7" cx="249.4" />,
|
|
<circle key="seat-47" id="seat-47" r="7.1" cy="67.2" cx="235.6" />,
|
|
<circle key="seat-48" id="seat-48" r="7.1" cy="94.3" cx="218.6" />,
|
|
<circle key="seat-49" id="seat-49" r="7.1" cy="124.3" cx="199.1" />,
|
|
<circle key="seat-50" id="seat-50" r="7.1" cy="45.3" cx="267" />,
|
|
<circle key="seat-51" id="seat-51" r="7.1" cy="59.8" cx="282.3" />,
|
|
<circle key="seat-52" id="seat-52" r="7.1" cy="78.6" cx="250.7" />,
|
|
<circle key="seat-53" id="seat-53" r="7.1" cy="106.5" cx="234" />,
|
|
<circle key="seat-54" id="seat-54" r="7.1" cy="136.2" cx="212" />,
|
|
<circle key="seat-55" id="seat-55" r="7.1" cy="75.5" cx="294.9" />,
|
|
<circle key="seat-56" id="seat-56" r="7.1" cy="91.3" cx="264.5" />,
|
|
<circle key="seat-57" id="seat-57" r="7.1" cy="91.5" cx="306" />,
|
|
<circle key="seat-58" id="seat-58" r="7.1" cy="105.7" cx="275.4" />,
|
|
<circle key="seat-59" id="seat-59" r="7.1" cy="122.5" cx="247.3" />,
|
|
<circle key="seat-60" id="seat-60" r="7.1" cy="109" cx="313.5" />,
|
|
<circle key="seat-61" id="seat-61" r="7.1" cy="121.3" cx="283" />,
|
|
<circle key="seat-62" id="seat-62" r="7.1" cy="138.8" cx="254.7" />,
|
|
<circle key="seat-63" id="seat-63" r="7.1" cy="151.9" cx="219.3" />,
|
|
<circle key="seat-64" id="seat-64" r="7.1" cy="128.4" cx="317.4" />,
|
|
<circle key="seat-65" id="seat-65" r="7.1" cy="137.9" cx="287" />,
|
|
<circle key="seat-66" id="seat-66" r="7.1" cy="156.3" cx="256.8" />,
|
|
<circle key="seat-67" id="seat-67" r="7.1" cy="169.9" cx="219.3" />,
|
|
<circle key="seat-68" id="seat-68" r="7.1" cy="147.4" cx="318.7" />,
|
|
<circle key="seat-69" id="seat-69" r="7.1" cy="155.2" cx="288.4" />,
|
|
<circle key="seat-70" id="seat-70" r="7.1" cy="166" cx="318.4" />,
|
|
<circle key="seat-71" id="seat-71" r="7.1" cy="172" cx="288.7" />,
|
|
<circle key="seat-72" id="seat-72" r="7.1" cy="174.5" cx="257.5" />,
|
|
];
|
|
|
|
let seatIndex = 1; // Empezamos desde 1 porque el 0 es para el presidente
|
|
|
|
return (
|
|
<svg viewBox="0 0 340.2 220.5" width={size} height={size * (220.5 / 340.2)} style={{ display: 'block', margin: 'auto' }}>
|
|
<g>
|
|
{/* Renderizamos primero el escaño del presidente por separado */}
|
|
{presidenteBancada && React.cloneElement(seatElements[PRESIDENTE_SEAT_INDEX], {
|
|
fill: presidenteBancada.color || '#A9A9A9',
|
|
strokeWidth: 0.5,
|
|
})}
|
|
|
|
{/* Mapeamos los partidos para crear los bloques */}
|
|
{partyData.map(partido => {
|
|
const partySeats = [
|
|
...Array(partido.bancasFijos).fill({ isNew: false }),
|
|
...Array(partido.bancasGanadas).fill({ isNew: true })
|
|
];
|
|
|
|
return (
|
|
<g
|
|
key={partido.id}
|
|
className="party-block"
|
|
data-tooltip-id="party-tooltip"
|
|
data-tooltip-content={`${partido.nombreCorto || partido.nombre}: ${partido.bancasTotales} bancas`}
|
|
>
|
|
{partySeats.map((seatInfo, i) => {
|
|
if (seatIndex >= seatElements.length) return null;
|
|
|
|
const template = seatElements[seatIndex];
|
|
seatIndex++;
|
|
|
|
return React.cloneElement(template, {
|
|
key: `${partido.id}-${i}`,
|
|
className: 'seat-circle',
|
|
fill: partido.color || '#808080',
|
|
fillOpacity: seatInfo.isNew ? 1 : 0.3,
|
|
stroke: partido.color || '#808080',
|
|
strokeWidth: 0.5,
|
|
});
|
|
})}
|
|
</g>
|
|
);
|
|
})}
|
|
{/* Renderizamos escaños vacíos si sobran */}
|
|
{seatIndex < seatElements.length &&
|
|
seatElements.slice(seatIndex).map((template, i) =>
|
|
React.cloneElement(template, {
|
|
key: `empty-${i}`,
|
|
fill: '#E0E0E0',
|
|
stroke: '#ffffff',
|
|
strokeWidth: 0.5
|
|
})
|
|
)
|
|
}
|
|
</g>
|
|
</svg>
|
|
);
|
|
}; |