From 3a50753c8afa162457684fabd1cd57370f225078 Mon Sep 17 00:00:00 2001
From: dmolinari <dmolinari@eldia.com>
Date: Mon, 7 Jul 2025 10:01:10 -0300
Subject: [PATCH] Fix: Time Zone Format

---
 .../components/AgroHistoricalChartWidget.tsx    | 15 +++++++++++----
 .../components/GrainsHistoricalChartWidget.tsx  | 11 ++++++++++-
 .../src/components/HistoricalChartWidget.tsx    | 17 ++++++++++++-----
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/AgroHistoricalChartWidget.tsx b/frontend/src/components/AgroHistoricalChartWidget.tsx
index f7a3816..2ab632a 100644
--- a/frontend/src/components/AgroHistoricalChartWidget.tsx
+++ b/frontend/src/components/AgroHistoricalChartWidget.tsx
@@ -2,15 +2,15 @@ import { Box, CircularProgress, Alert } from '@mui/material';
 import type { CotizacionGanado } from '../models/mercadoModels';
 import { useApiData } from '../hooks/useApiData';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { formatFullDateTime } from '../utils/formatters';
 
 interface AgroHistoricalChartWidgetProps {
   categoria: string;
   especificaciones: string;
 }
 
-const formatXAxis = (tickItem: string) => {
-    const date = new Date(tickItem);
-    return date.toLocaleDateString('es-AR', { day: '2-digit', month: '2-digit' });
+const formatTooltipLabel = (label: string) => {
+    return formatFullDateTime(label);
 };
 
 export const AgroHistoricalChartWidget = ({ categoria, especificaciones }: AgroHistoricalChartWidgetProps) => {
@@ -29,13 +29,20 @@ export const AgroHistoricalChartWidget = ({ categoria, especificaciones }: AgroH
         return <Alert severity="info" sx={{ height: 300 }}>No hay suficientes datos históricos para graficar esta categoría.</Alert>;
     }
 
+    const formatXAxis = (tickItem: string) => {
+        return new Date(tickItem).toLocaleDateString('es-AR', { day: '2-digit', month: '2-digit' });
+    };
+
     return (
         <ResponsiveContainer width="100%" height={300}>
             <LineChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                 <CartesianGrid strokeDasharray="3 3" />
                 <XAxis dataKey="fechaRegistro" tickFormatter={formatXAxis} />
                 <YAxis domain={['dataMin - 10', 'dataMax + 10']} tickFormatter={(tick) => `$${tick.toLocaleString('es-AR')}`} />
-                <Tooltip formatter={(value: number) => [`$${value.toFixed(2)}`, 'Precio Promedio']} />
+                <Tooltip 
+                    formatter={(value: number) => [`$${value.toFixed(2)}`, 'Precio Promedio']} 
+                    labelFormatter={formatTooltipLabel}
+                />
                 <Legend />
                 <Line type="monotone" dataKey="promedio" name="Precio Promedio" stroke="#028fbe" strokeWidth={2} dot={false} />
             </LineChart>
diff --git a/frontend/src/components/GrainsHistoricalChartWidget.tsx b/frontend/src/components/GrainsHistoricalChartWidget.tsx
index c81d142..a96baf3 100644
--- a/frontend/src/components/GrainsHistoricalChartWidget.tsx
+++ b/frontend/src/components/GrainsHistoricalChartWidget.tsx
@@ -2,11 +2,16 @@ import { Box, CircularProgress, Alert } from '@mui/material';
 import type { CotizacionGrano } from '../models/mercadoModels';
 import { useApiData } from '../hooks/useApiData';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { formatFullDateTime } from '../utils/formatters';
 
 interface GrainsHistoricalChartWidgetProps {
   nombre: string;
 }
 
+const formatTooltipLabel = (label: string) => {
+    return formatFullDateTime(label);
+};
+
 const formatXAxis = (tickItem: string) => {
     const date = new Date(tickItem);
     return date.toLocaleDateString('es-AR', { day: '2-digit', month: '2-digit' });
@@ -32,9 +37,13 @@ export const GrainsHistoricalChartWidget = ({ nombre }: GrainsHistoricalChartWid
         <ResponsiveContainer width="100%" height={300}>
             <LineChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                 <CartesianGrid strokeDasharray="3 3" />
+                {/* Para los granos, usamos la fecha de operación en el eje X, que es más relevante */}
                 <XAxis dataKey="fechaOperacion" tickFormatter={formatXAxis} />
                 <YAxis domain={['dataMin - 1000', 'dataMax + 1000']} tickFormatter={(tick) => `$${tick.toLocaleString('es-AR')}`} />
-                <Tooltip formatter={(value: number) => [`$${value.toFixed(0)}`, 'Precio']} />
+                <Tooltip 
+                    formatter={(value: number) => [`$${value.toFixed(0)}`, 'Precio']} 
+                    labelFormatter={formatTooltipLabel}
+                />
                 <Legend />
                 <Line type="monotone" dataKey="precio" name="Precio" stroke="#028fbe" strokeWidth={2} dot={false} />
             </LineChart>
diff --git a/frontend/src/components/HistoricalChartWidget.tsx b/frontend/src/components/HistoricalChartWidget.tsx
index d3c87e1..8aaba60 100644
--- a/frontend/src/components/HistoricalChartWidget.tsx
+++ b/frontend/src/components/HistoricalChartWidget.tsx
@@ -2,6 +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';
 
 interface HistoricalChartWidgetProps {
     ticker: string;
@@ -9,10 +10,8 @@ interface HistoricalChartWidgetProps {
     dias: number;
 }
 
-// Formateador para el eje X (muestra DD/MM)
-const formatXAxis = (tickItem: string) => {
-    const date = new Date(tickItem);
-    return date.toLocaleDateString('es-AR', { day: '2-digit', month: '2-digit' });
+const formatTooltipLabel = (label: string) => {
+    return formatFullDateTime(label);
 };
 
 export const HistoricalChartWidget = ({ ticker, mercado, dias }: HistoricalChartWidgetProps) => {
@@ -31,13 +30,21 @@ export const HistoricalChartWidget = ({ ticker, mercado, dias }: HistoricalChart
         return <Alert severity="info" sx={{height: 300}}>No hay suficientes datos históricos para graficar.</Alert>;
     }
 
+    // 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' });
+    };
+
     return (
         <ResponsiveContainer width="100%" height={300}>
             <LineChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                 <CartesianGrid strokeDasharray="3 3" />
                 <XAxis dataKey="fechaRegistro" tickFormatter={formatXAxis} />
                 <YAxis domain={['dataMin - 1', 'dataMax + 1']} tickFormatter={(tick) => `$${tick.toLocaleString('es-AR')}`} />
-                <Tooltip formatter={(value: number) => [`$${value.toFixed(2)}`, 'Precio']} />
+                <Tooltip 
+                    formatter={(value: number) => [`$${value.toFixed(2)}`, 'Precio']} 
+                    labelFormatter={formatTooltipLabel} 
+                />
                 <Legend />
                 <Line type="monotone" dataKey="precioActual" name="Precio de Cierre" stroke="#028fbe" strokeWidth={2} dot={false} />
             </LineChart>