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

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 type { CotizacionBolsa } from '../models/mercadoModels';
import { formatCurrency, formatCurrency2Decimal } from '../utils/formatters';
import { formatCurrency2Decimal, formatCurrency } from '../utils/formatters';
import { HistoricalChartWidget } from './HistoricalChartWidget';
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 }) => {
if (anterior === 0) return null; // Evitar división por cero
if (anterior === 0) return null;
const variacionPuntos = actual - anterior;
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 = () => {
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 handleRangoChange = ( _event: React.MouseEvent<HTMLElement>, nuevoRango: number | null ) => {
if (nuevoRango !== null) { setDias(nuevoRango); }
};
// Filtramos el dato específico que este widget necesita
const mervalData = allLocalData?.find(d => d.ticker === '^MERV');
// --- LÓGICA DE RENDERIZADO CORREGIDA ---
// El estado de carga depende de AMBAS llamadas a la API.
const isLoading = dataLoading || isHoliday === null;
if (loading) { return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>; }
if (error) { return <Alert severity="error">{error}</Alert>; }
if (!mervalData) { return <Alert severity="info">No se encontraron datos para el índice MERVAL.</Alert>; }
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 (
<Paper elevation={3} sx={{ p: 2, mb: 3 }}>
<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>
{/* Si es feriado, mostramos la alerta como un AVISO encima del contenido. */}
{isHoliday && (
<Box sx={{ mb: 2 }}>
<HolidayAlert />
</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 sx={{ mt: 2 }}>
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 1 }}>
<ToggleButtonGroup value={dias} exclusive onChange={handleRangoChange} size="small">
<ToggleButton value={7}>Semanal</ToggleButton>
<ToggleButton value={30}>Mensual</ToggleButton>
<ToggleButton value={365}>Anual</ToggleButton>
</ToggleButtonGroup>
<Box sx={{ mt: 2 }}>
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 1 }}>
<ToggleButtonGroup value={dias} exclusive onChange={handleRangoChange} size="small">
<ToggleButton value={7}>Semanal</ToggleButton>
<ToggleButton value={30}>Mensual</ToggleButton>
<ToggleButton value={365}>Anual</ToggleButton>
</ToggleButtonGroup>
</Box>
<HistoricalChartWidget ticker={mervalData.ticker} mercado="Local" dias={dias} />
</Box>
<HistoricalChartWidget ticker={mervalData.ticker} mercado="Local" dias={dias} />
</Box>
</Paper>
</Paper>
</Box>
);
};