Test Public Side

2025-09-03 13:49:35 -03:00
parent 32e85b9b9d
commit a81f1fe894
33 changed files with 1205 additions and 133 deletions
--- a/Elecciones-Web/frontend/src/components/ResumenGeneralWidget.tsx
+++ b/Elecciones-Web/frontend/src/components/ResumenGeneralWidget.tsx
@@ -0,0 +1,117 @@
+// src/components/ResumenGeneralWidget.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 ResumenGeneralWidget = () => {
+  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);
+
+  const aggregatedData = useMemo(() => {
+    if (!categorias) return null;
+
+    const legislativeCategories = categorias.filter(c => c.categoriaId === 5 || c.categoriaId === 6);
+    if (legislativeCategories.length === 0) return null;
+
+    const partyMap = new Map<string, Omit<ResultadoTicker, 'porcentaje'>>();
+    
+    legislativeCategories.forEach(category => {
+      category.resultados.forEach(party => {
+        const existing = partyMap.get(party.id);
+        if (existing) {
+          existing.votos += party.votos;
+        } else {
+          // Clonamos el objeto para no modificar el original
+          partyMap.set(party.id, { ...party }); 
+        }
+      });
+    });
+
+    const resultsArray = Array.from(partyMap.values());
+    const grandTotalVotes = resultsArray.reduce((sum, party) => sum + party.votos, 0);
+    
+    const finalResults: ResultadoTicker[] = resultsArray
+      .map(party => ({
+        ...party,
+        porcentaje: grandTotalVotes > 0 ? (party.votos * 100 / grandTotalVotes) : 0,
+      }))
+      .sort((a, b) => b.votos - a.votos);
+      
+    const avgMesas = legislativeCategories.reduce((sum, cat) => sum + (cat.estadoRecuento?.mesasTotalizadasPorcentaje ?? 0), 0) / legislativeCategories.length;
+    const avgParticipacion = legislativeCategories.reduce((sum, cat) => sum + (cat.estadoRecuento?.participacionPorcentaje ?? 0), 0) / legislativeCategories.length;
+
+    return {
+      resultados: finalResults,
+      estadoRecuento: { mesasTotalizadasPorcentaje: avgMesas, participacionPorcentaje: avgParticipacion }
+    };
+  }, [categorias]);
+
+  if (isLoading) return <div className="ticker-card loading" style={{ gridColumn: '1 / -1' }}>Cargando resumen general...</div>;
+  if (error || !aggregatedData) return <div className="ticker-card error" style={{ gridColumn: '1 / -1' }}>No hay datos para el resumen general.</div>;
+
+  // Lógica para "Otros"
+  let displayResults: ResultadoTicker[] = aggregatedData.resultados;
+  if (aggregatedData.resultados.length > cantidadAMostrar) {
+    const topParties = aggregatedData.resultados.slice(0, cantidadAMostrar - 1);
+    const otherParties = aggregatedData.resultados.slice(cantidadAMostrar - 1);
+    const otrosPorcentaje = otherParties.reduce((sum, party) => sum + party.porcentaje, 0);
+    const otrosEntry: ResultadoTicker = {
+      id: `otros-general`,
+      nombre: 'Otros',
+      nombreCorto: 'Otros',
+      color: '#888888',
+      logoUrl: null,
+      votos: 0,
+      porcentaje: otrosPorcentaje,
+    };
+    displayResults = [...topParties, otrosEntry];
+  } else {
+    displayResults = aggregatedData.resultados.slice(0, cantidadAMostrar);
+  }
+
+  return (
+    <div className="ticker-card" style={{ gridColumn: '1 / -1' }}>
+      <div className="ticker-header">
+        <h3>RESUMEN LEGISLATIVO PROVINCIAL</h3>
+        <div className="ticker-stats">
+          <span>Mesas (Prom.): <strong>{formatPercent(aggregatedData.estadoRecuento.mesasTotalizadasPorcentaje)}</strong></span>
+          <span>Part (Prom.): <strong>{formatPercent(aggregatedData.estadoRecuento.participacionPorcentaje)}</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>
+  );
+};