Preparación Legislativas Nacionales 2025

Elecciones-Web/frontend/src/features/legislativas/provinciales/SenadoresTickerWidget.tsx

@@ -0,0 +1,84 @@
+// src/features/legislativas/provinciales/SenadoresTickerWidget.tsx
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { getResumenProvincial, getConfiguracionPublica, assetBaseUrl } from '../../../apiService';
+import type { CategoriaResumen, ResultadoTicker } from '../../../types/types';
+import { ImageWithFallback } from '../../../components/common/ImageWithFallback';
+import './TickerWidget.css'; // Reutilizamos los mismos estilos
+
+const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
+const CATEGORIA_ID = 5; // ID para Senadores
+
+export const SenadoresTickerWidget = () => {
+  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
+  const senadoresData = useMemo(() => {
+    return categorias?.find(c => c.categoriaId === CATEGORIA_ID);
+  }, [categorias]);
+
+  if (isLoading) return <div className="ticker-card loading"><p>Cargando...</p></div>;
+  if (error || !senadoresData) return <div className="ticker-card error"><p>Datos de Senadores no disponibles.</p></div>;
+
+  // Lógica para "Otros"
+  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>RESUMEN DE {senadoresData.categoriaNombre}</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={`${assetBaseUrl}/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>
+  );
+};