diff --git a/frontend/src/components/HistoricalChartWidget.tsx b/frontend/src/components/HistoricalChartWidget.tsx
index 567ff53..67760ae 100644
--- a/frontend/src/components/HistoricalChartWidget.tsx
+++ b/frontend/src/components/HistoricalChartWidget.tsx
@@ -2,7 +2,7 @@ import { Box, CircularProgress, Alert } from '@mui/material';
import type { CotizacionBolsa } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
-import { formatFullDateTime } from '../utils/formatters';
+import { formatFullDateTime, formatCurrency2Decimal } from '../utils/formatters';
interface HistoricalChartWidgetProps {
ticker: string;
@@ -10,6 +10,11 @@ interface HistoricalChartWidgetProps {
dias: number;
}
+// Formateador para el eje X que solo muestra día/mes
+const formatXAxis = (tickItem: string) => {
+ return new Date(tickItem).toLocaleDateString('es-AR', { day: '2-digit', month: '2-digit' });
+};
+
const formatTooltipLabel = (label: string) => {
return formatFullDateTime(label);
};
@@ -23,16 +28,25 @@ export const HistoricalChartWidget = ({ ticker, mercado, dias }: HistoricalChart
}
if (error) {
- return {error};
+ return {error};
}
if (!data || data.length < 2) {
- return No hay suficientes datos históricos para graficar.;
+ return No hay suficientes datos históricos para graficar.;
}
- // Formateador para el eje X que solo muestra día/mes
- const formatXAxis = (tickItem: string) => {
- return new Date(tickItem).toLocaleDateString('es-AR', { day: '2-digit', month: '2-digit' });
+ // 1. Calcular el dominio del eje Y con un margen
+ const prices = data.map(p => p.precioActual);
+ const dataMin = Math.min(...prices);
+ const dataMax = Math.max(...prices);
+ const padding = (dataMax - dataMin) * 0.05; // 5% de padding
+ const domainMin = Math.floor(dataMin - padding);
+ const domainMax = Math.ceil(dataMax + padding);
+
+ // 2. Formateador de ticks para el eje Y más robusto
+ const yAxisTickFormatter = (tick: number) => {
+ // Usamos el formateador de moneda
+ return `$${formatCurrency2Decimal(tick)}`;
};
return (
@@ -40,13 +54,17 @@ export const HistoricalChartWidget = ({ ticker, mercado, dias }: HistoricalChart
- `$${tick.toLocaleString('es-AR')}`} />
- [`$${value.toFixed(2)}`, 'Precio']}
- labelFormatter={formatTooltipLabel}
+
+ [`$${formatCurrency2Decimal(value)}`, 'Precio']}
+ labelFormatter={formatTooltipLabel}
/>
-
+
);
diff --git a/frontend/src/components/MervalHeroCard.tsx b/frontend/src/components/MervalHeroCard.tsx
index dd498fb..df9b232 100644
--- a/frontend/src/components/MervalHeroCard.tsx
+++ b/frontend/src/components/MervalHeroCard.tsx
@@ -5,7 +5,7 @@ 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';
+import { formatInteger, formatCurrency, formatCurrency2Decimal } from '../utils/formatters';
import { HistoricalChartWidget } from './HistoricalChartWidget';
import { useApiData } from '../hooks/useApiData';
@@ -53,7 +53,7 @@ export const MervalHeroCard = () => {
Índice S&P MERVAL
- {formatInteger(mervalData.precioActual)}
+ {formatCurrency2Decimal(mervalData.precioActual)}
diff --git a/frontend/src/utils/formatters.ts b/frontend/src/utils/formatters.ts
index 1103340..0dbeaa8 100644
--- a/frontend/src/utils/formatters.ts
+++ b/frontend/src/utils/formatters.ts
@@ -11,6 +11,18 @@ export const formatCurrency = (num: number, currency = 'ARS') => {
}).format(num);
};
+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,
+ currency: currency,
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2,
+ }).format(num);
+};
+
export const formatInteger = (num: number) => {
return new Intl.NumberFormat('es-AR').format(num);
};
@@ -23,7 +35,7 @@ export const formatFullDateTime = (dateString: string) => {
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
- hourCycle: 'h23', // <--- LA CLAVE PARA EL FORMATO 24HS
+ hourCycle: 'h23',
timeZone: 'America/Argentina/Buenos_Aires',
});
};