Feat Widgets 0209

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

@@ -1,5 +1,5 @@
 // src/components/ConcejalesWidget.tsx
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { getSeccionesElectorales, getResultadosConcejales, getConfiguracionPublica } from '../apiService';
 import type { MunicipioSimple, ResultadoTicker } from '../types/types';
@@ -20,7 +20,9 @@ export const ConcejalesWidget = () => {
   });
 
   // Calculamos la cantidad a mostrar desde la configuración
-  const cantidadAMostrar = parseInt(configData?.ConcejalesResultadosCantidad || '5', 10) + 1;
+  const cantidadAMostrar = useMemo(() => {
+    return parseInt(configData?.TickerResultadosCantidad || '5', 10) + 1;
+  }, [configData]);
 
   useEffect(() => {
     getSeccionesElectorales().then(seccionesData => {
@@ -53,7 +55,7 @@ export const ConcejalesWidget = () => {
   if (resultados && resultados.length > cantidadAMostrar) {
     const topParties = resultados.slice(0, cantidadAMostrar - 1);
     const otherParties = resultados.slice(cantidadAMostrar - 1);
-    const otrosPorcentaje = otherParties.reduce((sum, party) => sum + (party.votosPorcentaje || 0), 0);
+    const otrosPorcentaje = otherParties.reduce((sum, party) => sum + party.votosPorcentaje, 0);
 
     const otrosEntry: ResultadoTicker = {
       id: `otros-concejales-${seccionActualId}`,
@@ -73,7 +75,7 @@ export const ConcejalesWidget = () => {
   return (
     <div className="ticker-card" style={{ gridColumn: '1 / -1' }}>
       <div className="ticker-header">
-        <h3>CONCEJALES - LA PLATA</h3>
+        <h3>CONCEJALES POR SECCIÓN ELECTORAL</h3>
         <select value={seccionActualId} onChange={e => setSeccionActualId(e.target.value)} disabled={secciones.length === 0}>
           {secciones.map(s => <option key={s.id} value={s.id}>{s.nombre}</option>)}
         </select>