51 lines
2.2 KiB
TypeScript
51 lines
2.2 KiB
TypeScript
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 formatTooltipLabel = (label: string) => {
|
|
return formatFullDateTime(label);
|
|
};
|
|
|
|
export const AgroHistoricalChartWidget = ({ categoria, especificaciones }: AgroHistoricalChartWidgetProps) => {
|
|
const apiUrl = `/mercados/agroganadero/history?categoria=${encodeURIComponent(categoria)}&especificaciones=${encodeURIComponent(especificaciones)}&dias=30`;
|
|
const { data, loading, error } = useApiData<CotizacionGanado[]>(apiUrl);
|
|
|
|
if (loading) {
|
|
return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4, height: 300 }}><CircularProgress /></Box>;
|
|
}
|
|
|
|
if (error) {
|
|
return <Alert severity="error" sx={{ height: 300 }}>{error}</Alert>;
|
|
}
|
|
|
|
if (!data || data.length < 2) {
|
|
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']}
|
|
labelFormatter={formatTooltipLabel}
|
|
/>
|
|
<Legend />
|
|
<Line type="monotone" dataKey="promedio" name="Precio Promedio" stroke="#028fbe" strokeWidth={2} dot={false} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}; |