database

html/index.html

@@ -64,6 +64,7 @@
                 <div id="disk_space"></div>
                 <p class="card-text">Memory usage (total size <span id="memory_size"></span> Mb) </p>
                 <div id="memory_space"></div>
+                <p class="card-text"> Database size: <span id="database_size"></span> </p>
               </div>
             </div>
           </div>
@@ -73,10 +74,7 @@
           <div class="card"> 
             <div class="card-body">
               <h5 class="card-title">Mesures PM</h5>
-              <p class="card-text">Particules Fines </p>
-              <canvas id="sensorPMChart" width="400" height="200"></canvas>
-
-          
+              <canvas id="sensorPMChart" style="width: 100%; max-width: 600px; height: 200px;"></canvas>
             </div>
           </div>
         </div>
@@ -152,6 +150,34 @@ window.onload = function() {
                             console.error('AJAX request failed:', status, error);
                         }
                 });
+
+              //get database size
+              $.ajax({
+                url: 'launcher.php?type=database_size',
+                dataType: 'json', // Specify that you expect a JSON response
+                method: 'GET', // Use GET or POST depending on your needs
+                success: function(response) {
+                  console.log(response);
+                  
+                          if (response.size_megabytes !== undefined) {
+                          // Extract and format the size in MB
+                          const databaseSizeMB = response.size_megabytes + " MB";
+
+                          // Update the HTML element with the database size
+                          const databaseSizeElement = document.getElementById("database_size");
+                          databaseSizeElement.textContent = databaseSizeMB;
+
+                          console.log("Database size:", databaseSizeMB);
+                          } else if (response.error) {
+                              // Handle errors from the PHP response
+                              console.error("Error from server:", response.error);
+                          }
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+
               
               //get disk free space
               $.ajax({
@@ -289,7 +315,41 @@ window.onload = function() {
                     },
                     options: {
                         responsive: true,
-                        maintainAspectRatio: false
+                        maintainAspectRatio: true,
+                        plugins: {
+                          legend: {
+                              position: 'top'
+                          }
+                      },
+                      scales: {
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'Time'
+                            },
+                            ticks: {
+                              autoSkip: true,
+                              maxTicksLimit: 5,
+                              callback: function(value, index) {
+                                  // Access the correct label from the `labels` array
+                                  const label = labels[index]; // Use the original `labels` array
+                                  if (label && typeof label === 'string' && label.includes(' ')) {
+                                      return label.split(' ')[1].slice(0, 5); // Extract "HH:MM"
+                                  }
+                                  return value; // Fallback for invalid labels
+                              }
+                          }
+
+
+                        },
+                        y: {
+                            title: {
+                                display: true,
+                                text: 'Values (µg/m³)'
+                            }
+                        }
+                    }
+
                     }
                 });
             } else {