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

Fix: Y Axis Chart Width

Browse Source
This commit is contained in:
dmolinari
2025-07-14 11:59:51 -03:00
parent e670ebaac7
commit 37bc4b0206
3 changed files with 4 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@ import { Box, CircularProgress, Alert } from '@mui/material';
import type { CotizacionBolsa } from '../models/mercadoModels'; import type { CotizacionBolsa } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData'; import { useApiData } from '../hooks/useApiData';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { formatFullDateTime, formatCurrency2Decimal } from '../utils/formatters'; import { formatFullDateTime, formatCurrency2Decimal, formatCurrency } from '../utils/formatters';
interface HistoricalChartWidgetProps { interface HistoricalChartWidgetProps {
ticker: string; ticker: string;
@@ -46,7 +46,7 @@ export const HistoricalChartWidget = ({ ticker, mercado, dias }: HistoricalChart
// 2. Formateador de ticks para el eje Y más robusto // 2. Formateador de ticks para el eje Y más robusto
const yAxisTickFormatter = (tick: number) => { const yAxisTickFormatter = (tick: number) => {
// Usamos el formateador de moneda // Usamos el formateador de moneda
return `$${formatCurrency2Decimal(tick)}`; return `$${formatCurrency(tick)}`;
}; };
return ( return (
@@ -57,7 +57,7 @@ export const HistoricalChartWidget = ({ ticker, mercado, dias }: HistoricalChart
<YAxis <YAxis
domain={[domainMin, domainMax]} domain={[domainMin, domainMax]}
tickFormatter={yAxisTickFormatter} tickFormatter={yAxisTickFormatter}
width={80} // Damos un poco más de espacio para números grandes width={75} // Damos un poco más de espacio para números grandes
/> />
<Tooltip <Tooltip
formatter={(value: number) => [`$${formatCurrency2Decimal(value)}`, 'Precio']} formatter={(value: number) => [`$${formatCurrency2Decimal(value)}`, 'Precio']}

2
frontend/src/hooks/useApiData.ts
View File

@@ -14,11 +14,9 @@ export function useApiData<T>(endpoint: string) {
setLoading(true); setLoading(true);
setError(null); setError(null);
try { try {
// --- V CORRECCIÓN DEFINITIVA V ---
// Construimos la URL completa y absoluta para la llamada. // Construimos la URL completa y absoluta para la llamada.
const fullUrl = `${API_ROOT}${endpoint}`; const fullUrl = `${API_ROOT}${endpoint}`;
const response = await apiClient.get<T>(fullUrl); const response = await apiClient.get<T>(fullUrl);
// --- ^ CORRECCIÓN DEFINITIVA ^ ---
setData(response.data); setData(response.data);
} catch (err) { } catch (err) {
if (err instanceof AxiosError) { if (err instanceof AxiosError) {

2
frontend/src/main.tsx
View File

@@ -31,7 +31,7 @@ const widgetRegistry = {
'mercado-agro-tarjetas': MercadoAgroCardWidget, 'mercado-agro-tarjetas': MercadoAgroCardWidget,
'mercado-agro-tabla': MercadoAgroWidget, 'mercado-agro-tabla': MercadoAgroWidget,
// Página completa como un widget // Widget Página datos crudos
'pagina-datos-crudos': RawDataView, 'pagina-datos-crudos': RawDataView,
}; };