diff --git a/Elecciones-Web/frontend/src/components/ResultadosRankingMunicipioWidget.tsx b/Elecciones-Web/frontend/src/components/ResultadosRankingMunicipioWidget.tsx index e9572a6..8a2c0c6 100644 --- a/Elecciones-Web/frontend/src/components/ResultadosRankingMunicipioWidget.tsx +++ b/Elecciones-Web/frontend/src/components/ResultadosRankingMunicipioWidget.tsx @@ -2,9 +2,20 @@ import { useState, useMemo, useEffect } from 'react'; import { useQuery } from '@tanstack/react-query'; import Select from 'react-select'; import { getSeccionesElectorales, getRankingMunicipiosPorSeccion } from '../apiService'; -import type { MunicipioSimple, ApiResponseRankingMunicipio } from '../types/types'; -import './ResultadosTablaSeccionWidget.css'; // Reutilizamos el mismo estilo -import React from 'react'; +import type { MunicipioSimple, ApiResponseRankingMunicipio, RankingPartido } from '../types/types'; +import './ResultadosTablaSeccionWidget.css'; + +type DisplayMode = 'porcentaje' | 'votos' | 'ambos'; +type DisplayOption = { + value: DisplayMode; + label: string; +}; + +const displayModeOptions: readonly DisplayOption[] = [ + { value: 'porcentaje', label: 'Ver Porcentajes' }, + { value: 'votos', label: 'Ver Votos' }, + { value: 'ambos', label: 'Ver Ambos' }, +]; const customSelectStyles = { control: (base: any) => ({ ...base, minWidth: '200px', border: '1px solid #ced4da', boxShadow: 'none', '&:hover': { borderColor: '#86b7fe' } }), @@ -12,10 +23,36 @@ const customSelectStyles = { }; const formatPercent = (porcentaje: number) => `${porcentaje.toFixed(2).replace('.', ',')}%`; +// Nueva función para formatear votos con separador de miles +const formatVotos = (votos: number) => votos.toLocaleString('es-AR'); + +// --- NUEVO COMPONENTE HELPER PARA RENDERIZAR CELDAS --- +const CellRenderer = ({ partido, mode }: { partido?: RankingPartido, mode: DisplayMode }) => { + if (!partido) { + return -; + } + + switch (mode) { + case 'votos': + return {formatVotos(partido.votos)}; + case 'ambos': + return ( +
+ {formatVotos(partido.votos)} + {formatPercent(partido.porcentaje)} +
+ ); + case 'porcentaje': + default: + return {formatPercent(partido.porcentaje)}; + } +}; + export const ResultadosRankingMunicipioWidget = () => { const [secciones, setSecciones] = useState([]); const [selectedSeccion, setSelectedSeccion] = useState<{ value: string; label: string } | null>(null); + const [displayMode, setDisplayMode] = useState(displayModeOptions[0]); useEffect(() => { const fetchSecciones = async () => { @@ -48,91 +85,79 @@ export const ResultadosRankingMunicipioWidget = () => { }); return ( -
-
-

Resultados por Municipio

- setDisplayMode(option as DisplayOption)} + + styles={customSelectStyles} + isSearchable={false} + /> +