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

feat: Add visual summary cards for Agro/Grains and implement 24h time format

Browse Source
This commit is contained in:
dmolinari
2025-07-01 16:05:26 -03:00
parent c4eead1033
commit ab9e77fa81
22 changed files with 908 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,38 +1,42 @@
import { useState } from 'react';
import {
Box, CircularProgress, Alert, Table, TableBody, TableCell,
TableContainer, TableHead, TableRow, Paper, Typography, Tooltip
Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer,
TableHead, TableRow, Paper, Typography, Dialog, DialogTitle,
DialogContent, IconButton
} from '@mui/material';
import type { CotizacionBolsa } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData';
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'; // Para cambios neutros
import RemoveIcon from '@mui/icons-material/Remove';
import { formatFullDateTime } from '../utils/formatters';
import type { CotizacionBolsa } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData';
import { HistoricalChartWidget } from './HistoricalChartWidget';
// Función para formatear números
const formatNumber = (num: number) => {
return new Intl.NumberFormat('es-AR', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}).format(num);
};
const formatNumber = (num: number) => 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>
<Typography variant="body2" component="span" sx={{ fontWeight: 'bold' }}>{formatNumber(value)}%</Typography>
</Box>
);
};
export const BolsaLocalWidget = () => {
const { data, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
const [selectedTicker, setSelectedTicker] = useState<string | null>(null);
const handleRowClick = (ticker: string) => {
setSelectedTicker(ticker);
};
const handleCloseDialog = () => {
setSelectedTicker(null);
};
if (loading) {
return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
@@ -47,38 +51,52 @@ export const BolsaLocalWidget = () => {
}
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>
<>
<TableContainer component={Paper}>
<Box sx={{ p: 1, m: 0 }}>
<Typography variant="caption" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
Última actualización: {formatFullDateTime(data[0].fechaRegistro)}
</Typography>
</Box>
<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>
))}
</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>
</TableHead>
<TableBody>
{data.map((row) => (
<TableRow key={row.ticker} hover sx={{ cursor: 'pointer' }} onClick={() => handleRowClick(row.ticker)}>
<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>
</TableContainer>
<Dialog open={Boolean(selectedTicker)} onClose={handleCloseDialog} maxWidth="md" fullWidth>
<DialogTitle sx={{ m: 0, p: 2 }}>
Historial de 30 días para: {selectedTicker}
<IconButton
aria-label="close"
onClick={handleCloseDialog}
sx={{ position: 'absolute', right: 8, top: 8, color: (theme) => theme.palette.grey[500] }}
>
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent dividers>
{selectedTicker && <HistoricalChartWidget ticker={selectedTicker} mercado="Local" />}
</DialogContent>
</Dialog>
</>
);
};