feat: adaptación de los proyectos para utilizar .env y comienzo de preparación para despliegue en docker

frontend/src/components/AgroHistoricalChartWidget.tsx

@@ -0,0 +1,44 @@
+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';
+
+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' });
+};
+
+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>;
+    }
+
+    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']} />
+                <Legend />
+                <Line type="monotone" dataKey="promedio" name="Precio Promedio" stroke="#028fbe" strokeWidth={2} dot={false} />
+            </LineChart>
+        </ResponsiveContainer>
+    );
+};