77 lines
3.9 KiB
TypeScript
77 lines
3.9 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
import { Box, Paper, Typography, ToggleButton, ToggleButtonGroup, CircularProgress, Alert } from '@mui/material';
|
||
|
|
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
|
||
|
|
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
|
||
|
|
import RemoveIcon from '@mui/icons-material/Remove';
|
||
|
|
|
||
|
|
import type { CotizacionBolsa } from '../models/mercadoModels';
|
||
|
|
import { formatInteger, formatCurrency } from '../utils/formatters'; // <-- CORREGIDO: necesitamos formatCurrency
|
||
|
|
import { HistoricalChartWidget } from './HistoricalChartWidget';
|
||
|
|
import { useApiData } from '../hooks/useApiData';
|
||
|
|
|
||
|
|
// --- V SUB-COMPONENTE AÑADIDO V ---
|
||
|
|
const VariacionMerval = ({ actual, anterior }: { actual: number, anterior: number }) => {
|
||
|
|
if (anterior === 0) return null; // Evitar división por cero
|
||
|
|
const variacionPuntos = actual - anterior;
|
||
|
|
const variacionPorcentaje = (variacionPuntos / anterior) * 100;
|
||
|
|
|
||
|
|
const isPositive = variacionPuntos > 0;
|
||
|
|
const isNegative = variacionPuntos < 0;
|
||
|
|
const color = isPositive ? 'success.main' : isNegative ? 'error.main' : 'text.secondary';
|
||
|
|
const Icon = isPositive ? ArrowUpwardIcon : isNegative ? ArrowDownwardIcon : RemoveIcon;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, color }}>
|
||
|
|
<Icon sx={{ fontSize: '2rem' }} />
|
||
|
|
<Box>
|
||
|
|
<Typography component="span" sx={{ fontWeight: 'bold', fontSize: '1.2rem', display: 'block' }}>
|
||
|
|
{formatCurrency(variacionPuntos)}
|
||
|
|
</Typography>
|
||
|
|
<Typography component="span" sx={{ fontWeight: 'bold', fontSize: '1.2rem' }}>
|
||
|
|
({variacionPorcentaje.toFixed(2)}%)
|
||
|
|
</Typography>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
// --- ^ SUB-COMPONENTE AÑADIDO ^ ---
|
||
|
|
|
||
|
|
export const MervalHeroCard = () => {
|
||
|
|
const { data: allLocalData, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
|
||
|
|
const [dias, setDias] = useState<number>(30);
|
||
|
|
|
||
|
|
const handleRangoChange = ( _event: React.MouseEvent<HTMLElement>, nuevoRango: number | null ) => {
|
||
|
|
if (nuevoRango !== null) { setDias(nuevoRango); }
|
||
|
|
};
|
||
|
|
|
||
|
|
const mervalData = allLocalData?.find(d => d.ticker === '^MERV');
|
||
|
|
|
||
|
|
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>; }
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Paper elevation={3} sx={{ p: 2, mb: 3 }}>
|
||
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
|
||
|
|
<Box>
|
||
|
|
<Typography variant="h5" component="h2" sx={{ fontWeight: 'bold' }}>Índice S&P MERVAL</Typography>
|
||
|
|
<Typography variant="h3" component="p" sx={{ fontWeight: 'bold', mt:1 }}>{formatInteger(mervalData.precioActual)}</Typography>
|
||
|
|
</Box>
|
||
|
|
<Box sx={{ pt: 2 }}>
|
||
|
|
{/* Ahora sí encontrará el componente */}
|
||
|
|
<VariacionMerval actual={mervalData.precioActual} anterior={mervalData.cierreAnterior} />
|
||
|
|
</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>
|
||
|
|
<HistoricalChartWidget ticker={mervalData.ticker} mercado="Local" dias={dias} />
|
||
|
|
</Box>
|
||
|
|
</Paper>
|
||
|
|
);
|
||
|
|
};
|