dmolinari/Mercados-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Holidays Frontend

Browse Source
This commit is contained in:
dmolinari
2025-07-15 12:18:25 -03:00
parent e1e23f5315
commit 191a49977a
3 changed files with 124 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
frontend/src/components/BolsaLocalWidget.tsx
View File

@@ -1,4 +1,3 @@
// Importaciones de React y Material-UI
import React, { useState, useRef } from 'react'; import React, { useState, useRef } from 'react';
import { import {
Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer, Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer,
@@ -11,7 +10,7 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import RemoveIcon from '@mui/icons-material/Remove'; import RemoveIcon from '@mui/icons-material/Remove';
import { PiChartLineUpBold } from 'react-icons/pi'; import { PiChartLineUpBold } from 'react-icons/pi';
// Importaciones de nuestros modelos, hooks y utilidades // Importaciones de nuestro proyecto
import type { CotizacionBolsa } from '../models/mercadoModels'; import type { CotizacionBolsa } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData'; import { useApiData } from '../hooks/useApiData';
import { useIsHoliday } from '../hooks/useIsHoliday'; import { useIsHoliday } from '../hooks/useIsHoliday';
@@ -34,79 +33,13 @@ const Variacion = ({ value }: { value: number }) => {
}; };
/** /**
* Sub-componente que renderiza la tabla de acciones detalladas. * Widget autónomo para la tabla de acciones líderes locales (Panel Merval).
* Se extrae para mantener el componente principal más limpio.
*/
const RenderContent = ({ data, handleOpenModal }: {
data: CotizacionBolsa[],
handleOpenModal: (ticker: string, event: React.MouseEvent<HTMLButtonElement>) => void,
}) => {
// Filtramos para obtener solo las acciones, excluyendo el índice.
const panelPrincipal = data.filter(d => d.ticker !== '^MERV');
if (panelPrincipal.length === 0) {
return <Alert severity="info">No hay acciones líderes para mostrar en este momento.</Alert>;
}
return (
<TableContainer component={Paper}>
<Box sx={{ p: 1, m: 0 }}>
<Typography variant="caption" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
Última actualización de acciones: {formatFullDateTime(panelPrincipal[0].fechaRegistro)}
</Typography>
</Box>
<Table size="small" aria-label="panel principal merval">
<TableHead>
<TableRow>
<TableCell>Símbolo</TableCell>
<TableCell align="right">Precio Actual</TableCell>
<TableCell align="right" sx={{ display: { xs: 'none', md: 'table-cell' } }}>Apertura</TableCell>
<TableCell align="right" sx={{ display: { xs: 'none', sm: 'table-cell' } }}>Cierre Anterior</TableCell>
<TableCell align="center">% Cambio</TableCell>
<TableCell align="center">Historial</TableCell>
</TableRow>
</TableHead>
<TableBody>
{panelPrincipal.map((row) => (
<TableRow key={row.ticker} hover>
<TableCell component="th" scope="row"><Typography variant="body2" sx={{ fontWeight: 'bold' }}>{row.ticker}</Typography></TableCell>
<TableCell align="right">${formatCurrency(row.precioActual)}</TableCell>
<TableCell align="right" sx={{ display: { xs: 'none', md: 'table-cell' } }}>${formatCurrency(row.apertura)}</TableCell>
<TableCell align="right" sx={{ display: { xs: 'none', sm: 'table-cell' } }}>${formatCurrency(row.cierreAnterior)}</TableCell>
<TableCell align="center"><Variacion value={row.porcentajeCambio} /></TableCell>
<TableCell align="center">
<IconButton
aria-label={`ver historial de ${row.ticker}`}
size="small"
onClick={(event) => handleOpenModal(row.ticker, event)}
sx={{
boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
transition: 'all 0.2s ease-in-out',
'&:hover': { transform: 'scale(1.1)', boxShadow: '0 2px 6px rgba(0,0,0,0.2)' }
}}
>
<PiChartLineUpBold size="18" />
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};
/**
* Widget principal para la sección "Bolsa Local".
* Muestra una tarjeta de héroe para el MERVAL y una tabla detallada para las acciones líderes.
*/ */
export const BolsaLocalWidget = () => { export const BolsaLocalWidget = () => {
// Hooks para obtener los datos y el estado de feriado. Las llamadas se disparan en paralelo. // Este widget obtiene todos los datos del mercado local y luego los filtra.
const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local'); const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
const isHoliday = useIsHoliday('BA'); const isHoliday = useIsHoliday('BA');
// Estado y referencia para manejar el modal del gráfico.
const [selectedTicker, setSelectedTicker] = useState<string | null>(null); const [selectedTicker, setSelectedTicker] = useState<string | null>(null);
const triggerButtonRef = useRef<HTMLButtonElement | null>(null); const triggerButtonRef = useRef<HTMLButtonElement | null>(null);
@@ -117,14 +50,14 @@ export const BolsaLocalWidget = () => {
const handleCloseDialog = () => { const handleCloseDialog = () => {
setSelectedTicker(null); setSelectedTicker(null);
// Devuelve el foco al botón que abrió el modal para mejorar la accesibilidad.
setTimeout(() => { setTimeout(() => {
triggerButtonRef.current?.focus(); triggerButtonRef.current?.focus();
}, 0); }, 0);
}; };
// Estado de carga unificado: el componente está "cargando" si los datos principales // Filtramos para obtener solo las acciones, excluyendo el índice.
// o la información del feriado todavía no han llegado. const panelPrincipal = data?.filter(d => d.ticker !== '^MERV') || [];
const isLoading = dataLoading || isHoliday === null; const isLoading = dataLoading || isHoliday === null;
if (isLoading) { if (isLoading) {
@@ -135,31 +68,69 @@ export const BolsaLocalWidget = () => {
return <Alert severity="error">{dataError}</Alert>; return <Alert severity="error">{dataError}</Alert>;
} }
// Si no hay ningún dato en absoluto, mostramos un mensaje final. // Si después de filtrar no queda ninguna acción, mostramos el mensaje apropiado.
if (!data || data.length === 0) { if (panelPrincipal.length === 0) {
// Si sabemos que es feriado, la alerta de feriado tiene prioridad. // Si sabemos que es feriado, la alerta de feriado es el mensaje más relevante.
if (isHoliday) { if (isHoliday) {
return <HolidayAlert />; return <HolidayAlert />;
} }
return <Alert severity="info">No hay datos disponibles para el mercado local.</Alert>; return <Alert severity="info">No hay acciones líderes disponibles para mostrar.</Alert>;
} }
return ( return (
<> <Box>
{/* Si es feriado, mostramos la alerta informativa en la parte superior. */} {/* La alerta de feriado también se aplica a esta tabla. */}
{isHoliday && ( {isHoliday && (
<Box sx={{ mb: 2 }}> <Box sx={{ mb: 2 }}>
<HolidayAlert /> <HolidayAlert />
</Box> </Box>
)} )}
{/* La tabla de acciones detalladas se muestra siempre que haya datos para ella. */} <TableContainer component={Paper}>
<RenderContent <Box sx={{ p: 1, m: 0 }}>
data={data} <Typography variant="caption" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
handleOpenModal={handleOpenModal} Última actualización de acciones: {formatFullDateTime(panelPrincipal[0].fechaRegistro)}
/> </Typography>
</Box>
<Table size="small" aria-label="panel principal merval">
<TableHead>
<TableRow>
<TableCell>Símbolo</TableCell>
<TableCell align="right">Precio Actual</TableCell>
<TableCell align="right" sx={{ display: { xs: 'none', md: 'table-cell' } }}>Apertura</TableCell>
<TableCell align="right" sx={{ display: { xs: 'none', sm: 'table-cell' } }}>Cierre Anterior</TableCell>
<TableCell align="center">% Cambio</TableCell>
<TableCell align="center">Historial</TableCell>
</TableRow>
</TableHead>
<TableBody>
{panelPrincipal.map((row) => (
<TableRow key={row.ticker} hover>
<TableCell component="th" scope="row"><Typography variant="body2" sx={{ fontWeight: 'bold' }}>{row.ticker}</Typography></TableCell>
<TableCell align="right">${formatCurrency(row.precioActual)}</TableCell>
<TableCell align="right" sx={{ display: { xs: 'none', md: 'table-cell' } }}>${formatCurrency(row.apertura)}</TableCell>
<TableCell align="right" sx={{ display: { xs: 'none', sm: 'table-cell' } }}>${formatCurrency(row.cierreAnterior)}</TableCell>
<TableCell align="center"><Variacion value={row.porcentajeCambio} /></TableCell>
<TableCell align="center">
<IconButton
aria-label={`ver historial de ${row.ticker}`}
size="small"
onClick={(event) => handleOpenModal(row.ticker, event)}
sx={{
boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
transition: 'all 0.2s ease-in-out',
'&:hover': { transform: 'scale(1.1)', boxShadow: '0 2px 6px rgba(0,0,0,0.2)' }
}}
>
<PiChartLineUpBold size="18" />
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
{/* El Dialog para mostrar el gráfico histórico. */}
<Dialog <Dialog
open={Boolean(selectedTicker)} open={Boolean(selectedTicker)}
onClose={handleCloseDialog} onClose={handleCloseDialog}
@@ -186,6 +157,6 @@ export const BolsaLocalWidget = () => {
{selectedTicker && <HistoricalChartWidget ticker={selectedTicker} mercado="Local" dias={30} />} {selectedTicker && <HistoricalChartWidget ticker={selectedTicker} mercado="Local" dias={30} />}
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</> </Box>
); );
}; };

90
frontend/src/components/MervalHeroCard.tsx
View File

@@ -5,12 +5,17 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import RemoveIcon from '@mui/icons-material/Remove'; import RemoveIcon from '@mui/icons-material/Remove';
import type { CotizacionBolsa } from '../models/mercadoModels'; import type { CotizacionBolsa } from '../models/mercadoModels';
import { formatCurrency, formatCurrency2Decimal } from '../utils/formatters'; import { formatCurrency2Decimal, formatCurrency } from '../utils/formatters';
import { HistoricalChartWidget } from './HistoricalChartWidget'; import { HistoricalChartWidget } from './HistoricalChartWidget';
import { useApiData } from '../hooks/useApiData'; import { useApiData } from '../hooks/useApiData';
import { useIsHoliday } from '../hooks/useIsHoliday'; // <-- Importamos el hook
import { HolidayAlert } from './common/HolidayAlert'; // <-- Importamos la alerta
/**
* Sub-componente para la variación del índice.
*/
const VariacionMerval = ({ actual, anterior }: { actual: number, anterior: number }) => { const VariacionMerval = ({ actual, anterior }: { actual: number, anterior: number }) => {
if (anterior === 0) return null; // Evitar división por cero if (anterior === 0) return null;
const variacionPuntos = actual - anterior; const variacionPuntos = actual - anterior;
const variacionPorcentaje = (variacionPuntos / anterior) * 100; const variacionPorcentaje = (variacionPuntos / anterior) * 100;
@@ -34,41 +39,78 @@ const VariacionMerval = ({ actual, anterior }: { actual: number, anterior: numbe
); );
}; };
/**
* Widget autónomo para la tarjeta de héroe del S&P Merval.
*/
export const MervalHeroCard = () => { export const MervalHeroCard = () => {
const { data: allLocalData, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local'); // Cada widget gestiona sus propias llamadas a la API
const { data: allLocalData, loading: dataLoading, error: dataError } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
const isHoliday = useIsHoliday('BA');
// Estado interno para el gráfico
const [dias, setDias] = useState<number>(30); const [dias, setDias] = useState<number>(30);
const handleRangoChange = ( _event: React.MouseEvent<HTMLElement>, nuevoRango: number | null ) => { const handleRangoChange = ( _event: React.MouseEvent<HTMLElement>, nuevoRango: number | null ) => {
if (nuevoRango !== null) { setDias(nuevoRango); } if (nuevoRango !== null) { setDias(nuevoRango); }
}; };
// Filtramos el dato específico que este widget necesita
const mervalData = allLocalData?.find(d => d.ticker === '^MERV'); const mervalData = allLocalData?.find(d => d.ticker === '^MERV');
if (loading) { return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>; } // --- LÓGICA DE RENDERIZADO CORREGIDA ---
if (error) { return <Alert severity="error">{error}</Alert>; }
if (!mervalData) { return <Alert severity="info">No se encontraron datos para el índice MERVAL.</Alert>; }
// El estado de carga depende de AMBAS llamadas a la API.
const isLoading = dataLoading || isHoliday === null;
if (isLoading) {
return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4, height: '288px' }}><CircularProgress /></Box>;
}
if (dataError) {
return <Alert severity="error">{dataError}</Alert>;
}
// Si no hay datos del Merval, es un estado final.
if (!mervalData) {
// Si no hay datos PERO sabemos que es feriado, la alerta de feriado es más informativa.
if (isHoliday) {
return <HolidayAlert />;
}
return <Alert severity="info">No se encontraron datos para el índice MERVAL.</Alert>;
}
// Si llegamos aquí, SÍ tenemos datos para mostrar.
return ( return (
<Paper elevation={3} sx={{ p: 2, mb: 3 }}> <Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}> {/* Si es feriado, mostramos la alerta como un AVISO encima del contenido. */}
<Box> {isHoliday && (
<Typography variant="h6" component="h2" sx={{ fontWeight: 'bold' }}>Índice S&P MERVAL</Typography> <Box sx={{ mb: 2 }}>
<Typography variant="h4" component="p" sx={{ fontWeight: 'bold', mt:1 }}>{formatCurrency2Decimal(mervalData.precioActual)}</Typography> <HolidayAlert />
</Box> </Box>
<Box sx={{ pt: 2 }}> )}
<VariacionMerval actual={mervalData.precioActual} anterior={mervalData.cierreAnterior} />
{/* El contenido principal del widget siempre se muestra si hay datos. */}
<Paper elevation={3} sx={{ p: 2 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
<Box>
<Typography variant="h6" component="h2" sx={{ fontWeight: 'bold' }}>Índice S&P MERVAL</Typography>
<Typography variant="h4" component="p" sx={{ fontWeight: 'bold', mt:1 }}>{formatCurrency2Decimal(mervalData.precioActual)}</Typography>
</Box>
<Box sx={{ pt: 2 }}>
<VariacionMerval actual={mervalData.precioActual} anterior={mervalData.cierreAnterior} />
</Box>
</Box> </Box>
</Box> <Box sx={{ mt: 2 }}>
<Box sx={{ mt: 2 }}> <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 1 }}>
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 1 }}> <ToggleButtonGroup value={dias} exclusive onChange={handleRangoChange} size="small">
<ToggleButtonGroup value={dias} exclusive onChange={handleRangoChange} size="small"> <ToggleButton value={7}>Semanal</ToggleButton>
<ToggleButton value={7}>Semanal</ToggleButton> <ToggleButton value={30}>Mensual</ToggleButton>
<ToggleButton value={30}>Mensual</ToggleButton> <ToggleButton value={365}>Anual</ToggleButton>
<ToggleButton value={365}>Anual</ToggleButton> </ToggleButtonGroup>
</ToggleButtonGroup> </Box>
<HistoricalChartWidget ticker={mervalData.ticker} mercado="Local" dias={dias} />
</Box> </Box>
<HistoricalChartWidget ticker={mervalData.ticker} mercado="Local" dias={dias} /> </Paper>
</Box> </Box>
</Paper>
); );
}; };

2
src/Mercados.Infrastructure/DataFetchers/HolidayDataFetcher.cs
View File

@@ -46,7 +46,7 @@ namespace Mercados.Infrastructure.DataFetchers
public async Task<(bool Success, string Message)> FetchDataAsync() public async Task<(bool Success, string Message)> FetchDataAsync()
{ {
_logger.LogInformation("Iniciando actualización de feriados desde Finnhub."); _logger.LogInformation("Iniciando actualización de feriados.");
var apiKey = _configuration["ApiKeys:Finnhub"]; var apiKey = _configuration["ApiKeys:Finnhub"];
if (string.IsNullOrEmpty(apiKey)) return (false, "API Key de Finnhub no configurada."); if (string.IsNullOrEmpty(apiKey)) return (false, "API Key de Finnhub no configurada.");