dmolinari/Elecciones-2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Fix Tabla Columnas

Browse Source
This commit is contained in:
dmolinari
2025-09-08 15:23:18 -03:00
parent 2fac830528
commit f4d4cd173f
2 changed files with 70 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
Elecciones-Web/frontend/src/components/ResultadosRankingMunicipioWidget.tsx
View File

@@ -92,11 +92,7 @@ export const ResultadosRankingMunicipioWidget = () => {
<Select
options={displayModeOptions}
value={displayMode}
// --- CORRECCIÓN EN ONCHANGE ---
// 'option' ahora es del tipo correcto, por lo que no necesitamos aserción.
onChange={(option) => setDisplayMode(option as DisplayOption)}
styles={customSelectStyles}
isSearchable={false}
/>
@@ -115,16 +111,29 @@ export const ResultadosRankingMunicipioWidget = () => {
{isLoading ? <p>Cargando...</p> : !rankingData || rankingData.categorias.length === 0 ? <p>No hay datos.</p> : (
<table>
<thead>
{/* --- Fila 1: Nombres de Categorías --- */}
<tr>
<th rowSpan={2} className="sticky-col municipio-header">Municipio</th>
<th rowSpan={3} className="sticky-col municipio-header">Municipio</th>
{rankingData.categorias.map(cat => (
<th key={cat.id} colSpan={2} className="categoria-header">{cat.nombre}</th>
<th key={cat.id} colSpan={4} className="categoria-header">
{cat.nombre}
</th>
))}
</tr>
{/* --- Fila 2: Puestos --- */}
<tr>
{rankingData.categorias.flatMap(cat => [
<th key={`${cat.id}-1`} className="partido-header">1° Puesto</th>,
<th key={`${cat.id}-2`} className="partido-header category-divider-header">2° Puesto</th>
<th key={`${cat.id}-p1`} colSpan={2} className="puesto-header">1° Puesto</th>,
<th key={`${cat.id}-p2`} colSpan={2} className="puesto-header category-divider-header">2° Puesto</th>
])}
</tr>
{/* --- Fila 3: Sub-cabeceras (Partido y %) --- */}
<tr>
{rankingData.categorias.flatMap(cat => [
<th key={`${cat.id}-p1-partido`} className="sub-header">Partido</th>,
<th key={`${cat.id}-p1-porc`} className="sub-header">%</th>,
<th key={`${cat.id}-p2-partido`} className="sub-header category-divider-header">Partido</th>,
<th key={`${cat.id}-p2-porc`} className="sub-header">%</th>
])}
</tr>
</thead>
@@ -138,17 +147,20 @@ export const ResultadosRankingMunicipioWidget = () => {
const segundoPuesto = resCategoria?.ranking[1];
return [
<td key={`${municipio.municipioId}-${cat.id}-1`} className="category-divider">
<div className="cell-content">
<span className="cell-partido-nombre">{primerPuesto?.nombreCorto || '-'}</span>
<CellRenderer partido={primerPuesto} mode={displayMode.value} />
</div>
// --- Celdas para el 1° Puesto ---
<td key={`${municipio.municipioId}-${cat.id}-p1-partido`} className="cell-partido">
{primerPuesto?.nombreCorto || '-'}
</td>,
<td key={`${municipio.municipioId}-${cat.id}-2`}>
<div className="cell-content">
<span className="cell-partido-nombre">{segundoPuesto?.nombreCorto || '-'}</span>
<CellRenderer partido={segundoPuesto} mode={displayMode.value} />
</div>
<td key={`${municipio.municipioId}-${cat.id}-p1-porc`} className="cell-porcentaje">
{primerPuesto ? <CellRenderer partido={primerPuesto} mode={displayMode.value} /> : '-'}
</td>,
// --- Celdas para el 2° Puesto ---
<td key={`${municipio.municipioId}-${cat.id}-p2-partido`} className="cell-partido category-divider">
{segundoPuesto?.nombreCorto || '-'}
</td>,
<td key={`${municipio.municipioId}-${cat.id}-p2-porc`} className="cell-porcentaje">
{segundoPuesto ? <CellRenderer partido={segundoPuesto} mode={displayMode.value} /> : '-'}
</td>
];
})}

8
Elecciones-Web/frontend/src/components/ResultadosTablaSeccionWidget.css
View File

@@ -106,12 +106,14 @@
.tabla-container .cell-partido {
text-align: left;
font-size: 0.85rem;
padding-left: 15px; /* Añade un poco de espacio a la izquierda */
border-right: 1px solid #e9ecef; /* Línea fina entre partido y % */
}
.tabla-container .cell-porcentaje {
text-align: right;
font-family: 'Roboto Mono', 'Courier New', monospace;
font-weight: 500;
border-right: 1px solid #dee2e6;
padding-right: 15px; /* Añade un poco de espacio a la derecha */
}
.tabla-container th.sub-header-init {
@@ -123,6 +125,10 @@
border-left: 2px solid #adb5bd;
}
.tabla-container .category-divider {
border-left: 2px solid #adb5bd;
}
/* Columna fija de Municipio */
.tabla-container th.sticky-col,
.tabla-container td.sticky-col {