94 lines
3.3 KiB
TypeScript
94 lines
3.3 KiB
TypeScript
|
import {
|
||
|
|
Box,
|
||
|
|
CircularProgress,
|
||
|
|
Alert,
|
||
|
|
Table,
|
||
|
|
TableBody,
|
||
|
|
TableCell,
|
||
|
|
TableContainer,
|
||
|
|
TableHead,
|
||
|
|
TableRow,
|
||
|
|
Paper,
|
||
|
|
Typography,
|
||
|
|
Tooltip
|
||
|
|
} from '@mui/material';
|
||
|
|
import type { CotizacionBolsa } from '../models/mercadoModels';
|
||
|
|
import { useApiData } from '../hooks/useApiData';
|
||
|
|
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
|
||
|
|
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
|
||
|
|
import RemoveIcon from '@mui/icons-material/Remove'; // Para cambios neutros
|
||
|
|
|
||
|
|
// Función para formatear números
|
||
|
|
const formatNumber = (num: number) => {
|
||
|
|
return new Intl.NumberFormat('es-AR', {
|
||
|
|
minimumFractionDigits: 2,
|
||
|
|
maximumFractionDigits: 2,
|
||
|
|
}).format(num);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Componente para mostrar la variación con color e icono
|
||
|
|
const Variacion = ({ value }: { value: number }) => {
|
||
|
|
const color = value > 0 ? 'success.main' : value < 0 ? 'error.main' : 'text.secondary';
|
||
|
|
const Icon = value > 0 ? ArrowUpwardIcon : value < 0 ? ArrowDownwardIcon : RemoveIcon;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box component="span" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color }}>
|
||
|
|
<Icon sx={{ fontSize: '1rem', mr: 0.5 }} />
|
||
|
|
<Typography variant="body2" component="span" sx={{ fontWeight: 'bold' }}>
|
||
|
|
{formatNumber(value)}%
|
||
|
|
</Typography>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const BolsaLocalWidget = () => {
|
||
|
|
const { data, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
|
||
|
|
|
||
|
|
if (loading) {
|
||
|
|
return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (error) {
|
||
|
|
return <Alert severity="error">{error}</Alert>;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!data || data.length === 0) {
|
||
|
|
return <Alert severity="info">No hay datos disponibles para el mercado local en este momento.</Alert>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TableContainer component={Paper}>
|
||
|
|
<Table size="small" aria-label="tabla bolsa local">
|
||
|
|
<TableHead>
|
||
|
|
<TableRow>
|
||
|
|
<TableCell>Símbolo</TableCell>
|
||
|
|
<TableCell align="right">Precio Actual</TableCell>
|
||
|
|
<TableCell align="right">Apertura</TableCell>
|
||
|
|
<TableCell align="right">Cierre Anterior</TableCell>
|
||
|
|
<TableCell align="center">% Cambio</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
</TableHead>
|
||
|
|
<TableBody>
|
||
|
|
{data.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">${formatNumber(row.precioActual)}</TableCell>
|
||
|
|
<TableCell align="right">${formatNumber(row.apertura)}</TableCell>
|
||
|
|
<TableCell align="right">${formatNumber(row.cierreAnterior)}</TableCell>
|
||
|
|
<TableCell align="center">
|
||
|
|
<Variacion value={row.porcentajeCambio} />
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
))}
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
<Tooltip title={`Última actualización: ${new Date(data[0].fechaRegistro).toLocaleString('es-AR')}`}>
|
||
|
|
<Typography variant="caption" sx={{ p: 1, display: 'block', textAlign: 'right', color: 'text.secondary' }}>
|
||
|
|
Fuente: Yahoo Finance
|
||
|
|
</Typography>
|
||
|
|
</Tooltip>
|
||
|
|
</TableContainer>
|
||
|
|
);
|
||
|
|
};
|