107 lines
5.2 KiB
TypeScript
107 lines
5.2 KiB
TypeScript
import { useState } from 'react';
|
|
import {
|
|
Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer,
|
|
TableHead, TableRow, Paper, Typography, Dialog, DialogTitle,
|
|
DialogContent, IconButton
|
|
} from '@mui/material';
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
|
|
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
|
|
import RemoveIcon from '@mui/icons-material/Remove';
|
|
import { formatFullDateTime, formatCurrency } from '../utils/formatters';
|
|
import type { CotizacionBolsa } from '../models/mercadoModels';
|
|
import { useApiData } from '../hooks/useApiData';
|
|
import { HistoricalChartWidget } from './HistoricalChartWidget';
|
|
import { PiChartLineUpBold } from 'react-icons/pi';
|
|
|
|
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' }}>{value.toFixed(2)}%</Typography>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export const BolsaUsaWidget = () => {
|
|
const { data, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/eeuu');
|
|
const [selectedTicker, setSelectedTicker] = useState<string | null>(null);
|
|
|
|
const handleRowClick = (ticker: string) => setSelectedTicker(ticker);
|
|
const handleCloseDialog = () => setSelectedTicker(null);
|
|
|
|
const otherStocks = data?.filter(d => d.ticker !== '^GSPC') || [];
|
|
|
|
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 de EEUU.</Alert>;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Renderizamos la tabla solo si hay otras acciones */}
|
|
{otherStocks.length > 0 && (
|
|
<TableContainer component={Paper}>
|
|
<Box sx={{ p: 1, m: 0 }}>
|
|
<Typography variant="caption" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
|
|
Última actualización de acciones: {formatFullDateTime(otherStocks[0].fechaRegistro)}
|
|
</Typography>
|
|
</Box>
|
|
<Table size="small" aria-label="panel principal eeuu">
|
|
<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>
|
|
{otherStocks.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, 'USD')}</TableCell>
|
|
|
|
<TableCell align="right" sx={{ display: { xs: 'none', md: 'table-cell' } }}>{formatCurrency(row.apertura, 'USD')}</TableCell>
|
|
<TableCell align="right" sx={{ display: { xs: 'none', sm: 'table-cell' } }}>{formatCurrency(row.cierreAnterior, 'USD')}</TableCell>
|
|
|
|
<TableCell align="center"><Variacion value={row.porcentajeCambio} /></TableCell>
|
|
<TableCell align="center">
|
|
<IconButton
|
|
aria-label={`ver historial de ${row.ticker}`} size="small"
|
|
onClick={() => handleRowClick(row.ticker)}
|
|
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>
|
|
)}
|
|
|
|
<Dialog open={Boolean(selectedTicker)} onClose={handleCloseDialog} maxWidth="md" fullWidth sx={{ '& .MuiDialog-paper': { overflow: 'visible' } }}>
|
|
<IconButton aria-label="close" onClick={handleCloseDialog} sx={{ position: 'absolute', top: -15, right: -15, color: (theme) => theme.palette.grey[500], backgroundColor: 'white', boxShadow: 3, '&:hover': { backgroundColor: 'grey.100' }, }}>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
<DialogTitle sx={{ m: 0, p: 2 }}>Historial de 30 días para: {selectedTicker}</DialogTitle>
|
|
<DialogContent dividers>
|
|
{selectedTicker && <HistoricalChartWidget ticker={selectedTicker} mercado="EEUU" dias={30} />}
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
}; |