Feat Widgets Tickers

Elecciones-Web/frontend/src/App.tsx

@@ -7,6 +7,8 @@ import { TickerWidget } from './components/TickerWidget'
 import { TelegramaWidget } from './components/TelegramaWidget'
 import { ConcejalesWidget } from './components/ConcejalesWidget'
 import MapaBsAsSecciones from './components/MapaBsAsSecciones'
+import { SenadoresWidget } from './components/SenadoresWidget'
+import { DiputadosWidget } from './components/DiputadosWidget'
 
 function App() {
   return (
@@ -14,6 +16,8 @@ function App() {
       <h1>Resultados Electorales - Provincia de Buenos Aires</h1>
       <main>
         <TickerWidget />
+        <SenadoresWidget />
+        <DiputadosWidget />
         <ConcejalesWidget />
         <CongresoWidget />
         <BancasWidget />

Elecciones-Web/frontend/src/apiService.ts

@@ -144,10 +144,8 @@ export const getDetalleSeccion = async (seccionId: string, categoriaId: number):
     return response.data;
 };
 
-export const getResultadosConcejalesPorMunicipio = async (municipioId: string): Promise<ResultadoTicker[]> => {
-  // Usamos el endpoint 'partido' que, según la aclaración de la API, busca por municipio
-  const response = await apiClient.get(`/resultados/partido/${municipioId}`);
-  // La API devuelve un objeto, nosotros extraemos el array de resultados
+export const getResultadosPorMunicipioYCategoria = async (municipioId: string, categoriaId: number): Promise<ResultadoTicker[]> => {
+  const response = await apiClient.get(`/resultados/partido/${municipioId}?categoriaId=${categoriaId}`);
   return response.data.resultados;
 };
 

Elecciones-Web/frontend/src/components/ConcejalesWidget.tsx

@@ -2,7 +2,7 @@
 import { useState, useMemo, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import Select from 'react-select'; // <-- 1. Importar react-select
-import { getMunicipios, getResultadosConcejalesPorMunicipio, getConfiguracionPublica } from '../apiService';
+import { getMunicipios, getResultadosPorMunicipioYCategoria, getConfiguracionPublica } from '../apiService';
 import type { MunicipioSimple, ResultadoTicker } from '../types/types';
 import { ImageWithFallback } from './ImageWithFallback';
 import './TickerWidget.css';
@@ -58,7 +58,7 @@ export const ConcejalesWidget = () => {
   // 5. Query para obtener los resultados del MUNICIPIO seleccionado
   const { data: resultados, isLoading: isLoadingResultados } = useQuery<ResultadoTicker[]>({
     queryKey: ['resultadosConcejalesPorMunicipio', selectedMunicipio?.value],
-    queryFn: () => getResultadosConcejalesPorMunicipio(selectedMunicipio!.value),
+    queryFn: () => getResultadosPorMunicipioYCategoria(selectedMunicipio!.value, 7),
     enabled: !!selectedMunicipio,
   });
 

Elecciones-Web/frontend/src/components/DiputadosWidget.tsx

@@ -0,0 +1,83 @@
+// src/components/DiputadosWidget.tsx
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { getResumenProvincial, getConfiguracionPublica } from '../apiService';
+import type { CategoriaResumen, ResultadoTicker } from '../types/types';
+import { ImageWithFallback } from './ImageWithFallback';
+import './TickerWidget.css';
+
+const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
+
+export const DiputadosWidget = () => {
+  const { data: categorias, isLoading, error } = useQuery<CategoriaResumen[]>({
+    queryKey: ['resumenProvincial'],
+    queryFn: getResumenProvincial,
+    refetchInterval: 30000,
+  });
+
+  const { data: configData } = useQuery({
+    queryKey: ['configuracionPublica'],
+    queryFn: getConfiguracionPublica,
+    staleTime: 0,
+  });
+
+  const cantidadAMostrar = parseInt(configData?.TickerResultadosCantidad || '5', 10);
+
+  // Usamos useMemo para encontrar los datos específicos de Diputados (ID 6)
+  const diputadosData = useMemo(() => {
+    return categorias?.find(c => c.categoriaId === 6);
+  }, [categorias]);
+
+  if (isLoading) return <div className="ticker-card loading">Cargando...</div>;
+  if (error || !diputadosData) return <div className="ticker-card error">Datos de Diputados no disponibles.</div>;
+
+  // Lógica para "Otros" aplicada solo a los resultados de Diputados
+  let displayResults: ResultadoTicker[] = diputadosData.resultados;
+  if (diputadosData.resultados.length > cantidadAMostrar) {
+    const topParties = diputadosData.resultados.slice(0, cantidadAMostrar - 1);
+    const otherParties = diputadosData.resultados.slice(cantidadAMostrar - 1);
+    const otrosPorcentaje = otherParties.reduce((sum, party) => sum + party.porcentaje, 0);
+    const otrosEntry: ResultadoTicker = {
+      id: `otros-diputados`,
+      nombre: 'Otros',
+      nombreCorto: 'Otros',
+      color: '#888888',
+      logoUrl: null,
+      votos: 0,
+      porcentaje: otrosPorcentaje,
+    };
+    displayResults = [...topParties, otrosEntry];
+  } else {
+    displayResults = diputadosData.resultados.slice(0, cantidadAMostrar);
+  }
+
+  return (
+    <div className="ticker-card">
+      <div className="ticker-header">
+        <h3>{diputadosData.categoriaNombre.replace(' PROVINCIALES', '')}</h3>
+        <div className="ticker-stats">
+          <span>Mesas: <strong>{formatPercent(diputadosData.estadoRecuento?.mesasTotalizadasPorcentaje || 0)}</strong></span>
+          <span>Part: <strong>{formatPercent(diputadosData.estadoRecuento?.participacionPorcentaje || 0)}</strong></span>
+        </div>
+      </div>
+      <div className="ticker-results">
+        {displayResults.map(partido => (
+          <div key={partido.id} className="ticker-party">
+            <div className="party-logo">
+              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
+            </div>
+            <div className="party-details">
+              <div className="party-info">
+                <span className="party-name">{partido.nombreCorto || partido.nombre}</span>
+                <span className="party-percent">{formatPercent(partido.porcentaje)}</span>
+              </div>
+              <div className="party-bar-background">
+                <div className="party-bar-foreground" style={{ width: `${partido.porcentaje}%`, backgroundColor: partido.color || '#888' }}></div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

Elecciones-Web/frontend/src/components/SenadoresWidget.tsx

@@ -0,0 +1,83 @@
+// src/components/SenadoresWidget.tsx
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { getResumenProvincial, getConfiguracionPublica } from '../apiService';
+import type { CategoriaResumen, ResultadoTicker } from '../types/types';
+import { ImageWithFallback } from './ImageWithFallback';
+import './TickerWidget.css';
+
+const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
+
+export const SenadoresWidget = () => {
+  const { data: categorias, isLoading, error } = useQuery<CategoriaResumen[]>({
+    queryKey: ['resumenProvincial'],
+    queryFn: getResumenProvincial,
+    refetchInterval: 30000,
+  });
+
+  const { data: configData } = useQuery({
+    queryKey: ['configuracionPublica'],
+    queryFn: getConfiguracionPublica,
+    staleTime: 0,
+  });
+
+  const cantidadAMostrar = parseInt(configData?.TickerResultadosCantidad || '5', 10);
+
+  // Usamos useMemo para encontrar los datos específicos de Senadores (ID 5)
+  const senadoresData = useMemo(() => {
+    return categorias?.find(c => c.categoriaId === 5);
+  }, [categorias]);
+
+  if (isLoading) return <div className="ticker-card loading">Cargando...</div>;
+  if (error || !senadoresData) return <div className="ticker-card error">Datos de Senadores no disponibles.</div>;
+
+  // Lógica para "Otros" aplicada solo a los resultados de Senadores
+  let displayResults: ResultadoTicker[] = senadoresData.resultados;
+  if (senadoresData.resultados.length > cantidadAMostrar) {
+    const topParties = senadoresData.resultados.slice(0, cantidadAMostrar - 1);
+    const otherParties = senadoresData.resultados.slice(cantidadAMostrar - 1);
+    const otrosPorcentaje = otherParties.reduce((sum, party) => sum + party.porcentaje, 0);
+    const otrosEntry: ResultadoTicker = {
+      id: `otros-senadores`,
+      nombre: 'Otros',
+      nombreCorto: 'Otros',
+      color: '#888888',
+      logoUrl: null,
+      votos: 0,
+      porcentaje: otrosPorcentaje,
+    };
+    displayResults = [...topParties, otrosEntry];
+  } else {
+    displayResults = senadoresData.resultados.slice(0, cantidadAMostrar);
+  }
+
+  return (
+    <div className="ticker-card">
+      <div className="ticker-header">
+        <h3>{senadoresData.categoriaNombre.replace(' PROVINCIALES', '')}</h3>
+        <div className="ticker-stats">
+          <span>Mesas: <strong>{formatPercent(senadoresData.estadoRecuento?.mesasTotalizadasPorcentaje || 0)}</strong></span>
+          <span>Part: <strong>{formatPercent(senadoresData.estadoRecuento?.participacionPorcentaje || 0)}</strong></span>
+        </div>
+      </div>
+      <div className="ticker-results">
+        {displayResults.map(partido => (
+          <div key={partido.id} className="ticker-party">
+            <div className="party-logo">
+              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
+            </div>
+            <div className="party-details">
+              <div className="party-info">
+                <span className="party-name">{partido.nombreCorto || partido.nombre}</span>
+                <span className="party-percent">{formatPercent(partido.porcentaje)}</span>
+              </div>
+              <div className="party-bar-background">
+                <div className="party-bar-foreground" style={{ width: `${partido.porcentaje}%`, backgroundColor: partido.color || '#888' }}></div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};