FEat Widgets Tablas

2025-09-04 15:54:00 -03:00
parent f41b4eaa1c
commit 2db20969a1
14 changed files with 313 additions and 53 deletions
--- a/Elecciones-Web/frontend/src/App.tsx
+++ b/Elecciones-Web/frontend/src/App.tsx
@@ -17,6 +17,7 @@ import { DiputadosPorSeccionWidget } from './components/DiputadosPorSeccionWidge
 import { SenadoresPorSeccionWidget } from './components/SenadoresPorSeccionWidget'
 import { ConcejalesPorSeccionWidget } from './components/ConcejalesPorSeccionWidget'
 import { ResultadosTablaDetalladaWidget } from './components/ResultadosTablaDetalladaWidget'
+import { ResultadosRankingMunicipioWidget } from './components/ResultadosRankingMunicipioWidget'

 function App() {
  return (
@@ -56,6 +57,8 @@ function App() {
        <TelegramaWidget />
        <hr className="border-gray-300" />
        <ResultadosTablaDetalladaWidget />
+        <hr className="border-gray-300" />
+        <ResultadosRankingMunicipioWidget />
      </main>
    </>
  )
--- a/Elecciones-Web/frontend/src/apiService.ts
+++ b/Elecciones-Web/frontend/src/apiService.ts
@@ -1,6 +1,6 @@
 // src/apiService.ts
 import axios from 'axios';
-import type { ApiResponseRankingSeccion, ApiResponseTablaDetallada, ProyeccionBancas, MunicipioSimple, TelegramaData, CatalogoItem, CategoriaResumen, ResultadoTicker, ApiResponseResultadosPorSeccion } from './types/types';
+import type { ApiResponseRankingMunicipio, ApiResponseRankingSeccion, ApiResponseTablaDetallada, ProyeccionBancas, MunicipioSimple, TelegramaData, CatalogoItem, CategoriaResumen, ResultadoTicker, ApiResponseResultadosPorSeccion } from './types/types';

 /**
 * URL base para las llamadas a la API.
@@ -200,4 +200,9 @@ export const getResultadosTablaDetallada = async (seccionId: string): Promise<Ap
 export const getRankingResultadosPorSeccion = async (seccionId: string): Promise<ApiResponseRankingSeccion> => {
  const { data } = await apiClient.get(`/resultados/ranking-por-seccion/${seccionId}`);
  return data;
+};
+
+export const getRankingMunicipiosPorSeccion = async (seccionId: string): Promise<ApiResponseRankingMunicipio> => {
+  const { data } = await apiClient.get(`/resultados/ranking-municipios-por-seccion/${seccionId}`);
+  return data;
 };
--- a/Elecciones-Web/frontend/src/components/DevApp.tsx
+++ b/Elecciones-Web/frontend/src/components/DevApp.tsx
@@ -16,6 +16,7 @@ import { DiputadosPorSeccionWidget } from './DiputadosPorSeccionWidget'
 import { SenadoresPorSeccionWidget } from './SenadoresPorSeccionWidget'
 import { ConcejalesPorSeccionWidget } from './ConcejalesPorSeccionWidget'
 import { ResultadosTablaDetalladaWidget } from './ResultadosTablaDetalladaWidget'
+import { ResultadosRankingMunicipioWidget } from './ResultadosRankingMunicipioWidget'
 import '../App.css';


@@ -42,7 +43,8 @@ export const DevApp = () => {
        <MapaBsAs />
        <MapaBsAsSecciones />
        <TelegramaWidget />
-        <ResultadosTablaDetalladaWidget />     
+        <ResultadosTablaDetalladaWidget />
+        <ResultadosRankingMunicipioWidget />
      </main>
    </>
  );
--- a/Elecciones-Web/frontend/src/components/ResultadosRankingMunicipioWidget.tsx
+++ b/Elecciones-Web/frontend/src/components/ResultadosRankingMunicipioWidget.tsx
@@ -0,0 +1,129 @@
+import { useState, useMemo, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import Select from 'react-select';
+import { getSeccionesElectorales, getRankingMunicipiosPorSeccion } from '../apiService';
+import type { MunicipioSimple, ApiResponseRankingMunicipio } from '../types/types';
+import './ResultadosTablaSeccionWidget.css'; // Reutilizamos el mismo estilo
+
+const customSelectStyles = {
+  control: (base: any) => ({ ...base, minWidth: '200px', border: '1px solid #ced4da', boxShadow: 'none', '&:hover': { borderColor: '#86b7fe' } }),
+  menu: (base: any) => ({ ...base, zIndex: 10 }),
+};
+
+const formatPercent = (porcentaje: number) => `${porcentaje.toFixed(2).replace('.', ',')}%`;
+
+export const ResultadosRankingMunicipioWidget = () => {
+  const [secciones, setSecciones] = useState<MunicipioSimple[]>([]);
+  const [selectedSeccion, setSelectedSeccion] = useState<{ value: string; label: string } | null>(null);
+
+  useEffect(() => {
+    const fetchSecciones = async () => {
+      const seccionesData = await getSeccionesElectorales();
+      if (seccionesData && seccionesData.length > 0) {
+        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));
+        setSecciones(seccionesData);
+        if (!selectedSeccion) {
+          setSelectedSeccion({ value: seccionesData[0].id, label: seccionesData[0].nombre });
+        }
+      }
+    };
+    fetchSecciones();
+  }, [selectedSeccion]);
+
+  const seccionOptions = useMemo(() => secciones.map(s => ({ value: s.id, label: s.nombre })), [secciones]);
+
+  const { data: rankingData, isLoading } = useQuery<ApiResponseRankingMunicipio>({
+    queryKey: ['rankingMunicipiosPorSeccion', selectedSeccion?.value],
+    queryFn: () => getRankingMunicipiosPorSeccion(selectedSeccion!.value),
+    enabled: !!selectedSeccion,
+  });
+
+  return (
+    <div className="tabla-resultados-widget">
+      <div className="tabla-header">
+        <h3>Resultados por Municipio</h3>
+        <Select
+          options={seccionOptions}
+          value={selectedSeccion}
+          onChange={(option) => setSelectedSeccion(option)}
+          isLoading={secciones.length === 0}
+          styles={customSelectStyles}
+          isSearchable={false}
+        />
+      </div>
+
+      <div className="tabla-container">
+        {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>
+                {rankingData.categorias.map(cat => (
+                  // Cada categoría ahora ocupa 4 columnas (1° Partido, 1° %, 2° Partido, 2° %)
+                  <th key={cat.id} colSpan={4} className="categoria-header">
+                    {cat.nombre}
+                  </th>
+                ))}
+              </tr>
+              {/* --- Fila 2: Puestos y % --- */}
+              <tr>
+                {rankingData.categorias.flatMap(cat => [
+                  <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: Partido y % --- */}
+              <tr>
+                <th className="sticky-col"></th> {/* Celda vacía para alinear con Municipio */}
+                {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>
+            <tbody>
+              {rankingData.resultados.map(municipio => (
+                <tr key={municipio.municipioId}>
+                  <td className="sticky-col">{municipio.municipioNombre}</td>
+                  {rankingData.categorias.flatMap(cat => {
+                    const resCategoria = municipio.resultadosPorCategoria[cat.id];
+                    const primerPuesto = resCategoria?.ranking[0];
+                    const segundoPuesto = resCategoria?.ranking[1];
+
+                    return [
+                      // --- 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}-p1-porc`} className="cell-porcentaje">
+                        {primerPuesto ? formatPercent(primerPuesto.porcentaje) : '-'}
+                      </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 ? formatPercent(segundoPuesto.porcentaje) : '-'}
+                      </td>
+                    ];
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+};
--- a/Elecciones-Web/frontend/src/components/ResultadosTablaSeccionWidget.css
+++ b/Elecciones-Web/frontend/src/components/ResultadosTablaSeccionWidget.css
@@ -42,67 +42,93 @@
    font-size: 0.9rem;
 }

-/* --- Cabeceras (THEAD) --- */
+/* --- CABECERAS (THEAD) --- */
 .tabla-container thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
-    padding: 12px 10px;
-    text-align: center; /* Centramos las cabeceras */
+    padding: 8px 10px;
+    text-align: center;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
-    border-bottom: 2px solid #adb5bd; /* Línea inferior más gruesa */
    vertical-align: middle;
-}
-
-.tabla-container th.municipio-header {
-    vertical-align: middle;
-}
-
-.tabla-container th.categoria-header {
-    border-bottom: 1px solid #dee2e6;
-}
-
-.tabla-container th.partido-header {
-    font-weight: 500;
-    font-size: 0.8rem;
-    text-transform: none;
-    white-space: normal;
-    line-height: 1.2;
-}
-
-.tabla-container th.partido-header span {
-    display: block;
-}
-
-.tabla-container th.partido-header .porcentaje-total {
-    font-weight: 700;
-    font-size: 0.9rem;
-    color: #212529;
-}
-
-/* Línea divisoria vertical para las categorías */
-.tabla-container thead th[colspan] {
-    border-right: 1px solid #ced4da;
+    border-right: 1px solid #dee2e6;
 }
 .tabla-container thead th:last-child {
    border-right: none;
 }

-/* --- Cuerpo de la Tabla (TBODY) --- */
+/* Fila 1: Categorías (SENADORES, CONCEJALES) */
+.tabla-container th.categoria-header {
+    border-bottom: 1px solid #adb5bd;
+    font-size: 0.8rem;
+}
+
+/* Fila 2: Puestos (1° Puesto, 2° Puesto) */
+.tabla-container th.puesto-header {
+    border-bottom: 1px solid #adb5bd;
+}
+
+/* Fila 3: Sub-cabeceras (Partido, %) */
+.tabla-container th.sub-header {
+    font-weight: 500;
+    font-size: 0.7rem;
+    color: #6c757d;
+}
+
+/* --- CUERPO DE LA TABLA (TBODY) --- */
 .tabla-container tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    white-space: nowrap;
+    vertical-align: middle;
 }
-
 .tabla-container tbody tr:last-child td {
-    border-bottom: none; /* Quita la línea de la última fila */
+    border-bottom: none;
+}
+.tabla-container tbody tr:nth-of-type(even) {
+    background-color: #f8f9fa;
+}
+.tabla-container tbody tr:hover {
+    background-color: #e2e6ea;
 }

-.tabla-container tbody tr:nth-of-type(even) {
+/* Celdas específicas */
+.tabla-container .cell-partido {
+    text-align: left;
+    font-size: 0.85rem;
+}
+.tabla-container .cell-porcentaje {
+    text-align: right;
+    font-family: 'Roboto Mono', 'Courier New', monospace;
+    font-weight: 500;
+    border-right: 1px solid #dee2e6;
+}
+
+/* Líneas divisorias entre categorías */
+.tabla-container .category-divider-header {
+    border-left: 2px solid #adb5bd; /* Línea más gruesa en la cabecera */
+}
+.tabla-container .category-divider {
+    border-left: 2px solid #adb5bd; /* Línea más gruesa en las celdas */
+}
+
+/* Columna fija de Municipio */
+.tabla-container th.sticky-col,
+.tabla-container td.sticky-col {
+    position: sticky;
+    left: 0;
+    background-color: #ffffff;
+    z-index: 1;
+    border-right: 2px solid #adb5bd; /* Línea divisoria gruesa para la columna fija */
+}
+.tabla-container thead th.sticky-col {
+    background-color: #f8f9fa;
+    z-index: 2;
+}
+.tabla-container tbody tr:nth-of-type(even) td.sticky-col {
    background-color: #f8f9fa;
 }

--- a/Elecciones-Web/frontend/src/main.tsx
+++ b/Elecciones-Web/frontend/src/main.tsx
@@ -20,6 +20,7 @@ import { DiputadosPorSeccionWidget } from './components/DiputadosPorSeccionWidge
 import { SenadoresPorSeccionWidget } from './components/SenadoresPorSeccionWidget'
 import { ConcejalesPorSeccionWidget } from './components/ConcejalesPorSeccionWidget'
 import { ResultadosTablaDetalladaWidget } from './components/ResultadosTablaDetalladaWidget';
+import { ResultadosRankingMunicipioWidget } from './components/ResultadosRankingMunicipioWidget';
 import { DevApp } from './components/DevApp';
 import './index.css';

@@ -45,6 +46,7 @@ const WIDGET_MAP: Record<string, React.ElementType> = {
    'senadores-por-seccion': SenadoresPorSeccionWidget,
    'concejales-por-seccion': ConcejalesPorSeccionWidget,
    'resultados-tabla-detallada-por-seccion' : ResultadosTablaDetalladaWidget,
+    'resultados-tabla-detallada-por-municipio' : ResultadosRankingMunicipioWidget,
 };

 // Vite establece `import.meta.env.DEV` a `true` cuando ejecutamos 'npm run dev'
--- a/Elecciones-Web/frontend/src/types/types.ts
+++ b/Elecciones-Web/frontend/src/types/types.ts
@@ -194,13 +194,27 @@ export interface RankingCategoria {
  ranking: RankingPartido[];
 }

-export interface RankingMunicipio {
-  municipioId: number;
-  municipioNombre: string;
-  resultadosPorCategoria: RankingCategoria[];
-}
-
 export interface ApiResponseRankingSeccion {
  categorias: { id: number; nombre: string }[];
  resultados: RankingMunicipio[];
+}
+
+export interface RankingPartido {
+  nombreCorto: string;
+  porcentaje: number;
+}
+
+export interface RankingCategoria {
+  ranking: RankingPartido[];
+}
+
+export interface RankingMunicipio {
+  municipioId: number;
+  municipioNombre: string;
+  resultadosPorCategoria: { [catId: string]: RankingCategoria };
+}
+
+export interface ApiResponseRankingMunicipio {
+  categorias: { id: number; nombre: string }[];
+  resultados: RankingMunicipio[];
 }