Feat Front Widgets Refactizados y Ajustes Backend

Elecciones-Web/Restaurar/components/TickerWidget.tsx

@@ -0,0 +1,67 @@
+// src/components/TickerWidget.tsx
+import { useState, useEffect } from 'react';
+import { getResumenProvincial } from '../apiService';
+import type { ResumenProvincial } from '../types';
+import './TickerWidget.css';
+
+const formatPercent = (num: number) => `${num.toFixed(2).replace('.', ',')}%`;
+const NIVO_COLORS = [
+    "#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd",
+    "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"
+];
+
+export const TickerWidget = () => {
+  const [data, setData] = useState<ResumenProvincial | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const result = await getResumenProvincial();
+        setData(result);
+      } catch (error) {
+        console.error("Error cargando resumen provincial:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData(); // Carga inicial
+    const intervalId = setInterval(fetchData, 30000); // Actualiza cada 30 segundos
+
+    return () => clearInterval(intervalId); // Limpia el intervalo al desmontar el componente
+  }, []);
+
+  if (loading) {
+    return <div className="ticker-container loading">Cargando resultados provinciales...</div>;
+  }
+
+  if (!data) {
+    return <div className="ticker-container error">No se pudieron cargar los datos.</div>;
+  }
+
+  return (
+    <div className="ticker-container">
+      <div className="ticker-header">
+        <h3>{data.provinciaNombre}</h3>
+        <div className="ticker-stats">
+          <span>Mesas Escrutadas: <strong>{formatPercent(data.porcentajeEscrutado)}</strong></span>
+          <span>Participación: <strong>{formatPercent(data.porcentajeParticipacion)}</strong></span>
+        </div>
+      </div>
+      <div className="ticker-results">
+        {data.resultados.slice(0, 3).map((partido, index) => (
+          <div key={`${partido.nombre}-${index}`} className="ticker-party"> {/* <-- CAMBIO AQUÍ */}
+            <div className="party-info">
+              <span className="party-name">{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: NIVO_COLORS[index % NIVO_COLORS.length] }}></div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};