Update ApiDocs and HistoryCharts components; enhance PollutionMap with heat layer and toggle Voronoi visibility

frontend/src/components/ApiDocs.jsx

@@ -6,12 +6,12 @@ const ApiDocs = ({ json }) => {
   if (!json) return <p className="text-muted">No hay documentación disponible.</p>;
 
   const renderEndpoints = (endpoints) => (
-    <Accordion>
+    <Accordion className='overflow-auto'>
       {endpoints.map((ep, index) => (
         <Accordion.Item eventKey={index.toString()} key={index}>
-          <Accordion.Header>
+          <Accordion.Header className='d-flex align-items-center flex-wrap'>
             <span className={`badge bg-${getMethodColor(ep.method)} me-2 text-uppercase`}>{ep.method}</span>
-            <code>{ep.path}</code>
+            <code className='text-break flex-grow-1'>{ep.path}</code>
           </Accordion.Header>
           <Accordion.Body>
             {ep.description && <p className="mb-2">{ep.description}</p>}

frontend/src/components/HistoryCharts.jsx

@@ -108,22 +108,23 @@ const HistoryChartsContent = () => {
         cards={historyData.map(({ title, data, borderColor, backgroundColor }) => ({
           title,
           content: (
-            <Line style={{ minHeight: "250px" }}
+            <Line
               data={{
                 labels: timeLabels,
                 datasets: [{ data, borderColor, backgroundColor, fill: true, tension: 0.4 }]
               }}
               options={options}
+              style={{  minHeight: "250px", width: '100%'}}
             />
           ),
           styleMode: "override",
           className: "col-lg-6 col-xxs-12 d-flex flex-column align-items-center",
-          style: { minHeight: "250px" }
+          style: { minHeight: "250px", width: '100%' }
         }))}
       />
       <span className="m-0 p-0 d-flex align-items-center justify-content-center">
         <FontAwesomeIcon icon={faInfoCircle} className="me-2" />
-        <p className="m-0 p-0">El historial muestra datos de los últimos 3 días</p>
+        <p className="m-0 p-0">El historial muestra datos de los últimos 3 días, el mapa del día actual, y arriba del todo los datos son los últimos recogidos independientemente de la fecha</p>
       </span>
     </>
   );

frontend/src/components/PollutionMap.jsx

@@ -39,9 +39,9 @@ const PollutionMapContent = () => {
   const { config, configLoading, configError } = useConfig();
   const { data, dataLoading, dataError } = useDataContext();
 
-  const mapRef = useRef(null);           // Referencia al mapa
+  const mapRef = useRef(null);         
-  const voronoiLayerRef = useRef(null);  // Referencia al layer de Voronoi
+  const voronoiLayerRef = useRef(null); 
-  const [showVoronoi, setShowVoronoi] = useState(true);
+  const [showVoronoi, setShowVoronoi] = useState(false);
 
   useEffect(() => {
     if (!data || !config) return;
@@ -80,6 +80,12 @@ const PollutionMapContent = () => {
         '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
     }).addTo(map);
 
+    const points = data
+      .filter(p => isToday(p.timestamp))
+      .map(p => [p.lat, p.lon, p.carbonMonoxide]);
+
+    L.heatLayer(points, { radius: 25 }).addTo(map);
+
     fetch("/voronoi_sevilla_geovoronoi.geojson")
       .then(res => res.json())
       .then(geojson => {
@@ -105,18 +111,11 @@ const PollutionMapContent = () => {
         console.error("Error cargando el GeoJSON:", err);
       });
 
-    const points = data
-      .filter(p => isToday(p.timestamp))
-      .map(p => [p.lat, p.lon, p.carbonMonoxide]);
-
-    L.heatLayer(points, { radius: 25 }).addTo(map);
-
     return () => {
       map.remove();
     };
   }, [data, config]);
 
-  // Esta parte gestiona el toggle del voronoi
   const toggleVoronoi = () => {
     const map = mapRef.current;
     const voronoiLayer = voronoiLayerRef.current;

frontend/vite.config.js

@@ -5,7 +5,7 @@ import cleanPlugin from 'vite-plugin-clean'
 // https://vite.dev/config/
 export default defineConfig({
   server: {
-    host: "localhost",
+    host: "0.0.0.0",
     port: 3000,
   },
   resolve: {