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

feat(UI): Implement holiday awareness across all data widgets

Browse Source 
- All data widgets (tables and cards) now use the useIsHoliday hook.
- An informational alert is displayed on holidays, without hiding the last available data.
- Unifies loading state logic to wait for both data and holiday status, preventing race conditions.
- Ensures a consistent and robust user experience across all components."
This commit is contained in:
dmolinari
2025-07-15 15:20:36 -03:00
parent e3339fff99
commit 8878ec632e
12 changed files with 533 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
frontend/src/components/BolsaUsaWidget.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from 'react';
import React, { useState, useRef } from 'react';
import {
Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer,
TableHead, TableRow, Paper, Typography, Dialog, DialogTitle,
@@ -8,12 +8,19 @@ 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';
// Importaciones de modelos, hooks y utilidades
import type { CotizacionBolsa } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData';
import { useIsHoliday } from '../hooks/useIsHoliday';
import { formatFullDateTime, formatCurrency } from '../utils/formatters';
import { HistoricalChartWidget } from './HistoricalChartWidget';
import { HolidayAlert } from './common/HolidayAlert';
/**
* Sub-componente para mostrar la variación porcentual con un icono y color apropiado.
*/
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;
@@ -25,31 +32,64 @@ const Variacion = ({ value }: { value: number }) => {
);
};
/**
* Widget autónomo para la tabla de acciones de EEUU y ADRs Argentinos.
*/
export const BolsaUsaWidget = () => {
const { data, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/eeuu');
// Hooks para obtener los datos y el estado de feriado para el mercado de EEUU.
const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/eeuu');
const isHoliday = useIsHoliday('US'); // <-- Usamos el código de mercado 'US'
// Estado y referencia para manejar el modal del gráfico.
const [selectedTicker, setSelectedTicker] = useState<string | null>(null);
const triggerButtonRef = useRef<HTMLButtonElement | null>(null);
const handleRowClick = (ticker: string) => setSelectedTicker(ticker);
const handleCloseDialog = () => setSelectedTicker(null);
const handleOpenModal = (ticker: string, event: React.MouseEvent<HTMLButtonElement>) => {
triggerButtonRef.current = event.currentTarget;
setSelectedTicker(ticker);
};
const handleCloseDialog = () => {
setSelectedTicker(null);
// Devuelve el foco al botón que abrió el modal para mejorar la accesibilidad.
setTimeout(() => {
triggerButtonRef.current?.focus();
}, 0);
};
// Filtramos para obtener solo las acciones, excluyendo el índice S&P 500.
const otherStocks = data?.filter(d => d.ticker !== '^GSPC') || [];
if (loading) {
// Estado de carga unificado: el componente está "cargando" si los datos principales
// o la información del feriado todavía no han llegado.
const isLoading = dataLoading || isHoliday === null;
if (isLoading) {
return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
}
if (error) {
return <Alert severity="error">{error}</Alert>;
if (dataError) {
return <Alert severity="error">{dataError}</Alert>;
}
if (!data || data.length === 0) {
return <Alert severity="info">No hay datos disponibles para el mercado de EEUU.</Alert>;
// Si después de filtrar no queda ninguna acción, mostramos el mensaje apropiado.
if (otherStocks.length === 0) {
// Si sabemos que es feriado, la alerta de feriado es el mensaje más relevante.
if (isHoliday) {
return <HolidayAlert />;
}
return <Alert severity="info">No hay acciones de EEUU disponibles para mostrar.</Alert>;
}
return (
<>
{/* Renderizamos la tabla solo si hay otras acciones */}
{otherStocks.length > 0 && (
<Box>
{/* Si es feriado, mostramos la alerta informativa en la parte superior. */}
{isHoliday && (
<Box sx={{ mb: 2 }}>
<HolidayAlert />
</Box>
)}
<TableContainer component={Paper}>
<Box sx={{ p: 1, m: 0 }}>
<Typography variant="caption" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
@@ -61,10 +101,8 @@ export const BolsaUsaWidget = () => {
<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>
@@ -74,34 +112,55 @@ export const BolsaUsaWidget = () => {
<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>
aria-label={`ver historial de ${row.ticker}`}
size="small"
onClick={(event) => handleOpenModal(row.ticker, event)}
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' }, }}>
<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>
<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>
</>
</Box>
);
};

54
frontend/src/components/GranosWidget.tsx
View File

@@ -2,19 +2,20 @@ import {
Box, CircularProgress, Alert, Table, TableBody, TableCell,
TableContainer, TableHead, TableRow, Paper, Typography, Tooltip
} from '@mui/material';
import type { CotizacionGrano } 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';
const formatNumber = (num: number) => {
return new Intl.NumberFormat('es-AR', {
minimumFractionDigits: 0,
maximumFractionDigits: 2,
}).format(num);
};
// Importaciones de nuestro proyecto
import type { CotizacionGrano } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData';
import { useIsHoliday } from '../hooks/useIsHoliday';
import { formatInteger, formatDateOnly, formatFullDateTime } from '../utils/formatters';
import { HolidayAlert } from './common/HolidayAlert';
/**
* Sub-componente para mostrar la variación con icono y color.
*/
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;
@@ -23,28 +24,48 @@ const Variacion = ({ value }: { value: number }) => {
<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)}
{formatInteger(value)}
</Typography>
</Box>
);
};
/**
* Widget autónomo para la tabla detallada del mercado de granos.
*/
export const GranosWidget = () => {
const { data, loading, error } = useApiData<CotizacionGrano[]>('/mercados/granos');
// Hooks para obtener los datos y el estado de feriado para el mercado argentino.
const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionGrano[]>('/mercados/granos');
const isHoliday = useIsHoliday('BA');
if (loading) {
// Estado de carga unificado.
const isLoading = dataLoading || isHoliday === null;
if (isLoading) {
return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
}
if (error) {
return <Alert severity="error">{error}</Alert>;
if (dataError) {
return <Alert severity="error">{dataError}</Alert>;
}
// Si no hay ningún dato que mostrar.
if (!data || data.length === 0) {
if (isHoliday) {
return <HolidayAlert />;
}
return <Alert severity="info">No hay datos de granos disponibles en este momento.</Alert>;
}
return (
<Box>
{/* Si es feriado, mostramos la alerta como un aviso encima del contenido. */}
{isHoliday && (
<Box sx={{ mb: 2 }}>
<HolidayAlert />
</Box>
)}
<TableContainer component={Paper}>
<Table size="small" aria-label="tabla granos">
<TableHead>
@@ -61,20 +82,21 @@ export const GranosWidget = () => {
<TableCell component="th" scope="row">
<Typography variant="body2" sx={{ fontWeight: 'bold' }}>{row.nombre}</Typography>
</TableCell>
<TableCell align="right">${formatNumber(row.precio)}</TableCell>
<TableCell align="right">${formatInteger(row.precio)}</TableCell>
<TableCell align="center">
<Variacion value={row.variacionPrecio} />
</TableCell>
<TableCell align="right">{new Date(row.fechaOperacion).toLocaleDateString('es-AR')}</TableCell>
<TableCell align="right">{formatDateOnly(row.fechaOperacion)}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<Tooltip title={`Última actualización: ${new Date(data[0].fechaRegistro).toLocaleString('es-AR')}`}>
<Tooltip title={`Última actualización: ${formatFullDateTime(data[0].fechaRegistro)}`}>
<Typography variant="caption" sx={{ p: 1, display: 'block', textAlign: 'right', color: 'text.secondary' }}>
Fuente: Bolsa de Comercio de Rosario
</Typography>
</Tooltip>
</TableContainer>
</Box>
);
};

97
frontend/src/components/MercadoAgroCardWidget.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from 'react';
import React, { useState, useRef } from 'react';
import {
Box, CircularProgress, Alert, Paper, Typography, Dialog,
DialogTitle, DialogContent, IconButton
@@ -8,34 +8,35 @@ import ScaleIcon from '@mui/icons-material/Scale';
import { PiChartLineUpBold } from "react-icons/pi";
import CloseIcon from '@mui/icons-material/Close';
// Importaciones de nuestro proyecto
import type { CotizacionGanado } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData';
import { useIsHoliday } from '../hooks/useIsHoliday';
import { formatCurrency, formatInteger, formatDateOnly } from '../utils/formatters';
import { AgroHistoricalChartWidget } from './AgroHistoricalChartWidget';
import { HolidayAlert } from './common/HolidayAlert';
// El subcomponente ahora tendrá un botón para el gráfico.
const AgroCard = ({ registro, onChartClick }: { registro: CotizacionGanado, onChartClick: () => void }) => {
/**
* Sub-componente para una única tarjeta de categoría de ganado.
*/
const AgroCard = ({ registro, onChartClick }: { registro: CotizacionGanado, onChartClick: (event: React.MouseEvent<HTMLButtonElement>) => void }) => {
return (
// Añadimos posición relativa para poder posicionar el botón del gráfico.
<Paper elevation={2} sx={{ p: 2, flex: '1 1 250px', minWidth: '250px', maxWidth: '300px', position: 'relative' }}>
<Paper elevation={2} sx={{ p: 2, flex: '1 1 250px', minWidth: '250px', maxWidth: '300px', position: 'relative', display: 'flex', flexDirection: 'column' }}>
{/* Contenido principal de la tarjeta */}
<Box sx={{ flexGrow: 1 }}>
<IconButton
aria-label="ver historial"
onClick={(e) => {
e.stopPropagation();
onChartClick();
}}
onClick={onChartClick}
sx={{
position: 'absolute',
top: 8,
right: 8,
backgroundColor: 'rgba(255, 255, 255, 0.7)', // Fondo semitransparente
backdropFilter: 'blur(2px)', // Efecto "frosty glass" para el fondo
position: 'absolute', top: 8, right: 8,
backgroundColor: 'rgba(255, 255, 255, 0.7)',
backdropFilter: 'blur(2px)',
border: '1px solid rgba(0, 0, 0, 0.1)',
boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
transition: 'all 0.2s ease-in-out', // Transición suave para todos los cambios
transition: 'all 0.2s ease-in-out',
'&:hover': {
transform: 'translateY(-2px)', // Se eleva un poco
boxShadow: '0 4px 10px rgba(0,0,0,0.2)', // La sombra se hace más grande
transform: 'translateY(-2px)',
boxShadow: '0 4px 10px rgba(0,0,0,0.2)',
backgroundColor: 'rgba(255, 255, 255, 0.9)',
}
}}
@@ -43,7 +44,7 @@ const AgroCard = ({ registro, onChartClick }: { registro: CotizacionGanado, onCh
<PiChartLineUpBold size="20" />
</IconButton>
<Typography variant="h6" component="h3" sx={{ fontWeight: 'bold', borderBottom: 1, borderColor: 'divider', pb: 1, mb: 2, pr: 5 /* Espacio para el botón */ }}>
<Typography variant="h6" component="h3" sx={{ fontWeight: 'bold', borderBottom: 1, borderColor: 'divider', pb: 1, mb: 2, pr: 5 }}>
{registro.categoria}
<Typography variant="body2" color="text.secondary">{registro.especificaciones}</Typography>
</Typography>
@@ -60,9 +61,10 @@ const AgroCard = ({ registro, onChartClick }: { registro: CotizacionGanado, onCh
<Typography variant="body2" color="text.secondary">Precio Mediano:</Typography>
<Typography variant="body2" sx={{ fontWeight: 'bold' }}>${formatCurrency(registro.mediano)}</Typography>
</Box>
</Box>
{/* Pie de la tarjeta */}
<Box sx={{ mt: 2, pt: 1, borderTop: 1, borderColor: 'divider' }}>
<Box sx={{ mt: 'auto', pt: 1, borderTop: 1, borderColor: 'divider' }}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3 }}>
<Box sx={{ textAlign: 'center' }}>
<PiCow size="28" />
@@ -77,69 +79,88 @@ const AgroCard = ({ registro, onChartClick }: { registro: CotizacionGanado, onCh
</Box>
<Typography variant="caption" sx={{ display: 'block', textAlign: 'left', color: 'text.secondary', mt: 1, pt: 1, borderTop: 1, borderColor: 'divider' }}>
Dato Registrado el {formatDateOnly(registro.fechaRegistro)}
{formatDateOnly(registro.fechaRegistro)}
</Typography>
</Box>
</Paper>
);
};
/**
* Widget autónomo para las tarjetas de resumen del Mercado Agroganadero.
*/
export const MercadoAgroCardWidget = () => {
const { data, loading, error } = useApiData<CotizacionGanado[]>('/mercados/agroganadero');
const [selectedCategory, setSelectedCategory] = useState<CotizacionGanado | null>(null);
const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionGanado[]>('/mercados/agroganadero');
const isHoliday = useIsHoliday('BA');
const handleChartClick = (registro: CotizacionGanado) => {
const [selectedCategory, setSelectedCategory] = useState<CotizacionGanado | null>(null);
const triggerButtonRef = useRef<HTMLButtonElement | null>(null);
const handleChartClick = (registro: CotizacionGanado, event: React.MouseEvent<HTMLButtonElement>) => {
triggerButtonRef.current = event.currentTarget;
setSelectedCategory(registro);
};
const handleCloseDialog = () => {
setSelectedCategory(null);
setTimeout(() => {
triggerButtonRef.current?.focus();
}, 0);
};
if (loading) {
const isLoading = dataLoading || isHoliday === null;
if (isLoading) {
return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
}
if (error) {
return <Alert severity="error">{error}</Alert>;
if (dataError) {
return <Alert severity="error">{dataError}</Alert>;
}
if (!data || data.length === 0) {
if (isHoliday) {
return <HolidayAlert />;
}
return <Alert severity="info">No hay datos del mercado agroganadero disponibles.</Alert>;
}
return (
<>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, justifyContent: 'center' }}>
{isHoliday && (
<Box sx={{ mb: 2 }}>
<HolidayAlert />
</Box>
)}
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: { xs: 2, sm: 2, md: 3 }, justifyContent: 'center' }}>
{data.map(registro => (
<AgroCard key={registro.id} registro={registro} onChartClick={() => handleChartClick(registro)} />
<AgroCard key={registro.id} registro={registro} onChartClick={(event) => handleChartClick(registro, event)} />
))}
</Box>
<Dialog
open={Boolean(selectedCategory)}
onClose={handleCloseDialog}
maxWidth="md"
fullWidth
sx={{ '& .MuiDialog-paper': { overflow: 'visible' } }} // Permite que el botón se vea fuera
sx={{ '& .MuiDialog-paper': { overflow: 'visible' } }}
>
<IconButton
aria-label="close"
onClick={handleCloseDialog}
sx={{
position: 'absolute',
top: -15, // Mueve el botón hacia arriba, fuera del Dialog
right: -15, // Mueve el botón hacia la derecha, fuera del Dialog
position: 'absolute', top: -15, right: -15,
color: (theme) => theme.palette.grey[500],
backgroundColor: 'white',
boxShadow: 3, // Añade una sombra para que destaque
'&:hover': {
backgroundColor: 'grey.100', // Un leve cambio de color al pasar el mouse
},
backgroundColor: 'white', boxShadow: 3,
'&:hover': { backgroundColor: 'grey.100' },
}}
>
<CloseIcon />
</IconButton>
<DialogTitle sx={{ m: 0, p: 2 }}>
Mensual de {selectedCategory?.categoria} ({selectedCategory?.especificaciones})
Historial de 30 días para {selectedCategory?.categoria} ({selectedCategory?.especificaciones})
</DialogTitle>
<DialogContent dividers>
{selectedCategory && (

51
frontend/src/components/MercadoAgroWidget.tsx
View File

@@ -2,12 +2,17 @@ import {
Box, CircularProgress, Alert, Table, TableBody, TableCell,
TableContainer, TableHead, TableRow, Paper, Typography, Tooltip
} from '@mui/material';
// Importaciones de nuestro proyecto
import type { CotizacionGanado } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData';
import { formatCurrency, formatInteger, formatFullDateTime } from '../utils/formatters';
import { useIsHoliday } from '../hooks/useIsHoliday';
import { formatCurrency, formatInteger, formatDateOnly } from '../utils/formatters';
import { HolidayAlert } from './common/HolidayAlert';
// El sub-componente ahora solo necesita renderizar la tarjeta de móvil.
// La fila de la tabla la haremos directamente en el componente principal.
/**
* Sub-componente para renderizar cada registro como una tarjeta en la vista móvil.
*/
const AgroDataCard = ({ row }: { row: CotizacionGanado }) => {
const commonStyles = {
cell: {
@@ -56,16 +61,41 @@ const AgroDataCard = ({ row }: { row: CotizacionGanado }) => {
);
};
/**
* Widget autónomo para la tabla/lista responsiva del Mercado Agroganadero.
*/
export const MercadoAgroWidget = () => {
const { data, loading, error } = useApiData<CotizacionGanado[]>('/mercados/agroganadero');
// Hooks para obtener los datos y el estado de feriado.
const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionGanado[]>('/mercados/agroganadero');
const isHoliday = useIsHoliday('BA');
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 del mercado agroganadero disponibles.</Alert>; }
// Estado de carga unificado.
const isLoading = dataLoading || isHoliday === null;
if (isLoading) {
return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
}
if (dataError) {
return <Alert severity="error">{dataError}</Alert>;
}
if (!data || data.length === 0) {
if (isHoliday) {
return <HolidayAlert />;
}
return <Alert severity="info">No hay datos del mercado agroganadero disponibles.</Alert>;
}
return (
<Box>
{/* Si es feriado, mostramos la alerta como un aviso encima del contenido. */}
{isHoliday && (
<Box sx={{ mb: 2 }}>
<HolidayAlert />
</Box>
)}
{/* VISTA DE ESCRITORIO (se oculta en móvil) */}
<TableContainer component={Paper} sx={{ display: { xs: 'none', md: 'block' } }}>
<Table size="small" aria-label="tabla mercado agroganadero">
@@ -105,9 +135,10 @@ export const MercadoAgroWidget = () => {
))}
</Box>
<Tooltip title={`Última actualización: ${formatFullDateTime(data[0].fechaRegistro)}`}>
{/* La información de la fuente se muestra siempre, usando la fecha del primer registro */}
<Tooltip title={`Última actualización: ${formatDateOnly(data[0].fechaRegistro)}`}>
<Typography variant="caption" sx={{ p: 1, display: 'block', textAlign: 'right', color: 'text.secondary' }}>
Fuente: Mercado Agroganadero S.A.
{formatDateOnly(data[0].fechaRegistro)} - Fuente: Mercado Agroganadero S.A.
</Typography>
</Tooltip>
</Box>

2
frontend/src/components/MervalHeroCard.tsx
View File

@@ -90,7 +90,7 @@ export const MervalHeroCard = () => {
)}
{/* El contenido principal del widget siempre se muestra si hay datos. */}
<Paper elevation={3} sx={{ p: 2 }}>
<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>

50
frontend/src/components/UsaIndexHeroCard.tsx
View File

@@ -1,13 +1,20 @@
import { useState } from 'react';
import React, { 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';
// Importaciones de nuestro proyecto
import type { CotizacionBolsa } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData';
import { useIsHoliday } from '../hooks/useIsHoliday';
import { formatInteger } from '../utils/formatters';
import { HistoricalChartWidget } from './HistoricalChartWidget';
import { HolidayAlert } from './common/HolidayAlert';
/**
* Sub-componente interno para mostrar la variación del índice.
*/
const VariacionIndex = ({ actual, anterior }: { actual: number, anterior: number }) => {
if (anterior === 0) return null;
const variacionPuntos = actual - anterior;
@@ -33,21 +40,53 @@ const VariacionIndex = ({ actual, anterior }: { actual: number, anterior: number
);
};
/**
* Widget autónomo para la tarjeta de héroe del S&P 500.
*/
export const UsaIndexHeroCard = () => {
const { data: allUsaData, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/eeuu');
// Hooks para obtener los datos y el estado de feriado para el mercado de EEUU.
const { data: allUsaData, loading: dataLoading, error: dataError } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/eeuu');
const isHoliday = useIsHoliday('US');
// 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 indexData = allUsaData?.find(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 (!indexData) { return <Alert severity="info">No se encontraron datos para el índice S&P 500.</Alert>; }
// Estado de carga unificado: esperamos a que AMBAS llamadas a la API terminen.
const isLoading = dataLoading || isHoliday === null;
if (isLoading) {
return <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', p: 4, height: { xs: 'auto', md: '445px' } }}><CircularProgress /></Box>;
}
if (dataError) {
return <Alert severity="error">{dataError}</Alert>;
}
// Si no hay datos del S&P 500, mostramos el mensaje apropiado.
if (!indexData) {
if (isHoliday) {
return <HolidayAlert />;
}
return <Alert severity="info">No se encontraron datos para el índice S&P 500.</Alert>;
}
// Si hay datos, renderizamos el contenido completo.
return (
<Box>
{/* Si es feriado, mostramos la alerta como un aviso encima del contenido. */}
{isHoliday && (
<Box sx={{ mb: 2 }}>
<HolidayAlert />
</Box>
)}
<Paper elevation={3} sx={{ p: 2, mb: 3 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
<Box>
@@ -69,5 +108,6 @@ export const UsaIndexHeroCard = () => {
<HistoricalChartWidget ticker={indexData.ticker} mercado="EEUU" dias={dias} />
</Box>
</Paper>
</Box>
);
};

8
frontend/src/components/common/HolidayAlert.tsx
View File

@@ -1,10 +1,16 @@
import { Alert } from '@mui/material';
import CelebrationIcon from '@mui/icons-material/Celebration';
import { formatDateOnly } from '../../utils/formatters';
export const HolidayAlert = () => {
// Obtener la fecha actual en la zona horaria de Buenos Aires
const nowInBuenosAires = new Date(
new Date().toLocaleString('en-US', { timeZone: 'America/Argentina/Buenos_Aires' })
);
return (
<Alert severity="info" icon={<CelebrationIcon fontSize="inherit" />}>
Mercado cerrado por feriado.
{formatDateOnly(nowInBuenosAires.toISOString())} Mercado cerrado por feriado.
</Alert>
);
};

43
frontend/src/components/raw-data/RawAgroTable.tsx
View File

@@ -1,11 +1,17 @@
import { Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button } from '@mui/material';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
// Importaciones de nuestro proyecto
import { useApiData } from '../../hooks/useApiData';
import { useIsHoliday } from '../../hooks/useIsHoliday';
import type { CotizacionGanado } from '../../models/mercadoModels';
import { formatInteger, formatCurrency, formatFullDateTime } from '../../utils/formatters';
import { copyToClipboard } from '../../utils/clipboardUtils';
import { HolidayAlert } from '../common/HolidayAlert';
// Función para convertir datos a formato CSV
/**
* Función para convertir los datos de la tabla a un formato CSV para el portapapeles.
*/
const toCSV = (headers: string[], data: CotizacionGanado[]) => {
const headerRow = headers.join(';');
const dataRows = data.map(row =>
@@ -17,18 +23,25 @@ const toCSV = (headers: string[], data: CotizacionGanado[]) => {
formatCurrency(row.mediano),
formatInteger(row.cabezas),
formatInteger(row.kilosTotales),
formatInteger(row.importeTotal)
formatInteger(row.importeTotal),
formatFullDateTime(row.fechaRegistro)
].join(';')
);
return [headerRow, ...dataRows].join('\n');
};
/**
* Componente de tabla de datos crudos para el Mercado Agroganadero,
* diseñado para la página de redacción.
*/
export const RawAgroTable = () => {
const { data, loading, error } = useApiData<CotizacionGanado[]>('/mercados/agroganadero');
// Hooks para obtener los datos y el estado de feriado.
const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionGanado[]>('/mercados/agroganadero');
const isHoliday = useIsHoliday('BA');
const handleCopy = () => {
if (!data) return;
const headers = ["Categoría", "Especificaciones", "Máximo", "Mínimo", "Mediano", "Cabezas", "Kg Total", "Importe Total"];
const headers = ["Categoría", "Especificaciones", "Máximo", "Mínimo", "Mediano", "Cabezas", "Kg Total", "Importe Total", "Fecha de Registro"];
const csvData = toCSV(headers, data);
copyToClipboard(csvData)
@@ -39,12 +52,28 @@ export const RawAgroTable = () => {
});
};
if (loading) return <CircularProgress />;
if (error) return <Alert severity="error">{error}</Alert>;
if (!data) return null;
// Estado de carga unificado.
const isLoading = dataLoading || isHoliday === null;
if (isLoading) return <CircularProgress />;
if (dataError) return <Alert severity="error">{dataError}</Alert>;
if (!data || data.length === 0) {
if (isHoliday) {
return <HolidayAlert />;
}
return <Alert severity="info">No hay datos del mercado agroganadero disponibles.</Alert>;
}
return (
<Box>
{/* Si es feriado, mostramos una alerta informativa encima de la tabla. */}
{isHoliday && (
<Box sx={{ mb: 2 }}>
<HolidayAlert />
</Box>
)}
<Button startIcon={<ContentCopyIcon />} onClick={handleCopy} sx={{ mb: 1 }}>
Copiar como CSV
</Button>

47
frontend/src/components/raw-data/RawBolsaLocalTable.tsx
View File

@@ -1,11 +1,17 @@
import { Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button } from '@mui/material';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
// Importaciones de nuestro proyecto
import { useApiData } from '../../hooks/useApiData';
import { useIsHoliday } from '../../hooks/useIsHoliday';
import type { CotizacionBolsa } from '../../models/mercadoModels';
import { formatCurrency, formatFullDateTime } from '../../utils/formatters';
import { copyToClipboard } from '../../utils/clipboardUtils';
import { HolidayAlert } from '../common/HolidayAlert';
// Función para convertir datos a formato CSV
/**
* Función para convertir los datos de la tabla a formato CSV.
*/
const toCSV = (headers: string[], data: CotizacionBolsa[]) => {
const headerRow = headers.join(';');
const dataRows = data.map(row =>
@@ -14,36 +20,57 @@ const toCSV = (headers: string[], data: CotizacionBolsa[]) => {
row.nombreEmpresa,
formatCurrency(row.precioActual),
formatCurrency(row.cierreAnterior),
`${row.porcentajeCambio.toFixed(2)}%`
`${row.porcentajeCambio.toFixed(2)}%`,
formatFullDateTime(row.fechaRegistro)
].join(';')
);
return [headerRow, ...dataRows].join('\n');
};
/**
* Componente de tabla de datos crudos para la Bolsa Local (MERVAL y acciones),
* diseñado para la página de redacción.
*/
export const RawBolsaLocalTable = () => {
const { data, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
// Hooks para obtener los datos y el estado de feriado.
const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
const isHoliday = useIsHoliday('BA');
const handleCopy = () => {
if (!data) return;
const headers = ["Ticker", "Nombre", "Último Precio", "Cierre Anterior", "Variación %"];
const headers = ["Ticker", "Nombre", "Último Precio", "Cierre Anterior", "Variación %", "Fecha de Registro"];
const csvData = toCSV(headers, data);
copyToClipboard(csvData)
.then(() => {
alert('¡Tabla copiada al portapapeles!');
})
.then(() => alert('¡Tabla copiada al portapapeles!'))
.catch(err => {
console.error('Error al copiar:', err);
alert('Error: No se pudo copiar la tabla.');
});
};
if (loading) return <CircularProgress />;
if (error) return <Alert severity="error">{error}</Alert>;
if (!data) return null;
// Estado de carga unificado.
const isLoading = dataLoading || isHoliday === null;
if (isLoading) return <CircularProgress />;
if (dataError) return <Alert severity="error">{dataError}</Alert>;
if (!data || data.length === 0) {
if (isHoliday) {
return <HolidayAlert />;
}
return <Alert severity="info">No hay datos disponibles para el mercado local.</Alert>;
}
return (
<Box>
{/* Si es feriado, mostramos una alerta informativa encima de la tabla. */}
{isHoliday && (
<Box sx={{ mb: 2 }}>
<HolidayAlert />
</Box>
)}
<Button startIcon={<ContentCopyIcon />} onClick={handleCopy} sx={{ mb: 1 }}>
Copiar como CSV
</Button>

43
frontend/src/components/raw-data/RawBolsaUsaTable.tsx
View File

@@ -1,11 +1,17 @@
import { Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button } from '@mui/material';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
// Importaciones de nuestro proyecto
import { useApiData } from '../../hooks/useApiData';
import { useIsHoliday } from '../../hooks/useIsHoliday';
import type { CotizacionBolsa } from '../../models/mercadoModels';
import { formatCurrency, formatFullDateTime } from '../../utils/formatters';
import { copyToClipboard } from '../../utils/clipboardUtils';
import { HolidayAlert } from '../common/HolidayAlert';
// Función para convertir datos a formato CSV
/**
* Función para convertir los datos de la tabla a formato CSV.
*/
const toCSV = (headers: string[], data: CotizacionBolsa[]) => {
const headerRow = headers.join(';');
const dataRows = data.map(row =>
@@ -14,18 +20,25 @@ const toCSV = (headers: string[], data: CotizacionBolsa[]) => {
row.nombreEmpresa,
formatCurrency(row.precioActual, 'USD'),
formatCurrency(row.cierreAnterior, 'USD'),
`${row.porcentajeCambio.toFixed(2)}%`
`${row.porcentajeCambio.toFixed(2)}%`,
formatFullDateTime(row.fechaRegistro)
].join(';')
);
return [headerRow, ...dataRows].join('\n');
};
/**
* Componente de tabla de datos crudos para la Bolsa de EEUU y ADRs,
* diseñado para la página de redacción.
*/
export const RawBolsaUsaTable = () => {
const { data, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/eeuu');
// Hooks para obtener los datos y el estado de feriado para el mercado de EEUU.
const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/eeuu');
const isHoliday = useIsHoliday('US');
const handleCopy = () => {
if (!data) return;
const headers = ["Ticker", "Nombre", "Último Precio (USD)", "Cierre Anterior (USD)", "Variación %"];
const headers = ["Ticker", "Nombre", "Último Precio (USD)", "Cierre Anterior (USD)", "Variación %", "Fecha de Registro"];
const csvData = toCSV(headers, data);
copyToClipboard(csvData)
@@ -36,12 +49,28 @@ export const RawBolsaUsaTable = () => {
});
};
if (loading) return <CircularProgress />;
if (error) return <Alert severity="error">{error}</Alert>;
if (!data || data.length === 0) return <Alert severity="info">No hay datos disponibles (el fetcher puede estar desactivado).</Alert>;
// Estado de carga unificado.
const isLoading = dataLoading || isHoliday === null;
if (isLoading) return <CircularProgress />;
if (dataError) return <Alert severity="error">{dataError}</Alert>;
if (!data || data.length === 0) {
if (isHoliday) {
return <HolidayAlert />;
}
return <Alert severity="info">No hay datos disponibles para el mercado de EEUU (el fetcher puede estar desactivado).</Alert>;
}
return (
<Box>
{/* Si es feriado, mostramos una alerta informativa encima de la tabla. */}
{isHoliday && (
<Box sx={{ mb: 2 }}>
<HolidayAlert />
</Box>
)}
<Button startIcon={<ContentCopyIcon />} onClick={handleCopy} sx={{ mb: 1 }}>
Copiar como CSV
</Button>

43
frontend/src/components/raw-data/RawGranosTable.tsx
View File

@@ -1,11 +1,17 @@
import { Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button } from '@mui/material';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
// Importaciones de nuestro proyecto
import { useApiData } from '../../hooks/useApiData';
import { useIsHoliday } from '../../hooks/useIsHoliday';
import type { CotizacionGrano } from '../../models/mercadoModels';
import { formatInteger, formatDateOnly, formatFullDateTime } from '../../utils/formatters';
import { copyToClipboard } from '../../utils/clipboardUtils';
import { HolidayAlert } from '../common/HolidayAlert';
// Función para convertir datos a formato CSV
/**
* Función para convertir los datos de la tabla a formato CSV.
*/
const toCSV = (headers: string[], data: CotizacionGrano[]) => {
const headerRow = headers.join(';');
const dataRows = data.map(row =>
@@ -13,18 +19,25 @@ const toCSV = (headers: string[], data: CotizacionGrano[]) => {
row.nombre,
formatInteger(row.precio),
formatInteger(row.variacionPrecio),
formatDateOnly(row.fechaOperacion)
formatDateOnly(row.fechaOperacion),
formatFullDateTime(row.fechaRegistro)
].join(';')
);
return [headerRow, ...dataRows].join('\n');
};
/**
* Componente de tabla de datos crudos para el mercado de Granos,
* diseñado para la página de redacción.
*/
export const RawGranosTable = () => {
const { data, loading, error } = useApiData<CotizacionGrano[]>('/mercados/granos');
// Hooks para obtener los datos y el estado de feriado para el mercado argentino.
const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionGrano[]>('/mercados/granos');
const isHoliday = useIsHoliday('BA');
const handleCopy = () => {
if (!data) return;
const headers = ["Grano", "Precio ($/Tn)", "Variación", "Fecha Op."];
const headers = ["Grano", "Precio ($/Tn)", "Variación", "Fecha Op.", "Fecha de Registro"];
const csvData = toCSV(headers, data);
copyToClipboard(csvData)
@@ -35,12 +48,28 @@ export const RawGranosTable = () => {
});
};
if (loading) return <CircularProgress />;
if (error) return <Alert severity="error">{error}</Alert>;
if (!data) return null;
// Estado de carga unificado.
const isLoading = dataLoading || isHoliday === null;
if (isLoading) return <CircularProgress />;
if (dataError) return <Alert severity="error">{dataError}</Alert>;
if (!data || data.length === 0) {
if (isHoliday) {
return <HolidayAlert />;
}
return <Alert severity="info">No hay datos de granos disponibles.</Alert>;
}
return (
<Box>
{/* Si es feriado, mostramos una alerta informativa encima de la tabla. */}
{isHoliday && (
<Box sx={{ mb: 2 }}>
<HolidayAlert />
</Box>
)}
<Button startIcon={<ContentCopyIcon />} onClick={handleCopy} sx={{ mb: 1 }}>
Copiar como CSV
</Button>

7
frontend/src/utils/formatters.ts
View File

@@ -12,11 +12,8 @@ export const formatCurrency = (num: number, currency = 'ARS') => {
};
export const formatCurrency2Decimal = (num: number, currency = 'ARS') => {
const style = currency === 'USD' ? 'currency' : 'decimal';
const locale = currency === 'USD' ? 'en-US' : 'es-AR';
return new Intl.NumberFormat(locale, {
style: style,
return new Intl.NumberFormat('es-AR', {
style: 'decimal',
currency: currency,
minimumFractionDigits: 2,
maximumFractionDigits: 2,