83 lines
3.4 KiB
TypeScript
83 lines
3.4 KiB
TypeScript
|
// 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>
|
||
|
|
);
|
||
|
|
};
|