Feat Widgets Tickers

2025-09-02 17:08:56 -03:00
parent 6ac6034255
commit 9393d2bc05
12 changed files with 203 additions and 62 deletions
--- a/Elecciones-Web/frontend/src/components/DiputadosWidget.tsx
+++ b/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>
+  );
+};