dynamic time labels

frontend/public/config/settings.json

@@ -12,15 +12,6 @@
             "sensor": "sensors/sensor"
         },
         "historyChartConfig": {
-            "timeLabels": [
-                "08:00",
-                "09:00",
-                "10:00",
-                "11:00",
-                "12:00",
-                "13:00",
-                "14:00"
-            ],
             "chartOptionsDark": {
                 "responsive": true,
                 "maintainAspectRatio": false,

frontend/src/components/App.jsx

@@ -45,13 +45,17 @@ const App = () => {
     setIsSideMenuOpen(!isSideMenuOpen);
   };
 
+  const closeSideMenu = () => {
+    setIsSideMenuOpen(false);
+  }
+
   return (
     <>
       {/* Planeo añadir un React Router */}
       <MenuButton onClick={toggleSideMenu} />
       <SideMenu isOpen={isSideMenuOpen} onClose={toggleSideMenu} />
       <ThemeButton />
-      <div className={isSideMenuOpen ? 'blur m-0 p-0' : 'm-0 p-0'}>
+      <div className={isSideMenuOpen ? 'blur m-0 p-0' : 'm-0 p-0'} onClick={closeSideMenu}>
         <Header title='Contamin' subtitle='Midiendo la calidad del aire y las calles en Sevilla 🌿🚛' />
         <Home />
       </div>

frontend/src/components/HistoryCharts.jsx

@@ -67,7 +67,15 @@ const HistoryChartsContent = () => {
   const optionsDark = config?.appConfig?.historyChartConfig?.chartOptionsDark ?? {};
   const optionsLight = config?.appConfig?.historyChartConfig?.chartOptionsLight ?? {};
   const options = theme === "dark" ? optionsDark : optionsLight;
-  const timeLabels = config?.appConfig?.historyChartConfig?.timeLabels ?? [];
+  
+  const currentHour = new Date().getHours();
+  console.log("currentHour", currentHour);
+
+  const timeLabels = [
+    `${currentHour - 3}:00`, `${currentHour - 2}:00`, `${currentHour - 1}:00`, `${currentHour}:00`, `${currentHour + 1}:00`, `${currentHour + 2}:00`, `${currentHour + 3}:00`
+  ]
+
+  //const timeLabels = config?.appConfig?.historyChartConfig?.timeLabels ?? [];
 
   if (loading) return <p>Cargando datos...</p>;
 

frontend/src/css/MenuButton.css

@@ -1,7 +1,7 @@
 .menuBtn {
     position: fixed;
     top: 20px;
-    right: 20px;
+    left: 20px;
     z-index: 1000;
     border: none;
     width: 50px;

frontend/src/css/SideMenu.css

@@ -1,19 +1,19 @@
 .side-menu {
     position: fixed;
     top: 0;
-    right: -350px;
+    left: -350px;
     width: 350px;
     height: 100%;
     background-color: #333;
     color: white;
-    transition: right 0.3s ease;
+    transition: left 0.3s ease;
     padding: 30px;
     box-shadow: 2px 0 5px rgba(0,0,0,0.5);
     z-index: 1000;
 }
 
 .side-menu.open {
-    right: 0;    
+    left: 0;    
 }
 
 .blur {