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

Fix: Time Zone Format

Browse Source
This commit is contained in:
dmolinari
2025-07-07 10:01:10 -03:00
parent d66765c646
commit 3a50753c8a
3 changed files with 33 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/AgroHistoricalChartWidget.tsx
View File

@@ -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>

11
frontend/src/components/GrainsHistoricalChartWidget.tsx
View File

@@ -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>

17
frontend/src/components/HistoricalChartWidget.tsx
View File

@@ -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>