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', }); };