maj

js/projet_detail.js

@@ -1,18 +1,7 @@
-function display_metrics(metrics_datas) {
-  // Get data from API and then generate HTML code to display the data in a table
-  const table = document.getElementById("table-metrics");
-  let datas = `
-    <tr><th>Date</th> <th>Température</th> <th>Hygrométrie</th>
-    </tr>`;
-  for (let i = 0; i < metrics_datas.length; i++) {
-    datas += `
-      <tr>
-        <th>${formatDate(metrics_datas[i].date_metrique)}</th>
-        <th>${metrics_datas[i].temperature}</th>
-        <th>${metrics_datas[i].hygrometrie}</th>
-      </tr>`;
-  }
-  table.innerHTML = datas;
+let myChart; // Declare a global variable to hold the chart instance
+
+function display_metrics() {
+  // Implementation for display_metrics function
 }
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -33,6 +22,12 @@ document.addEventListener("DOMContentLoaded", () => {
   document.getElementById("name_project").innerHTML =
     global_project_list[projectId - 1].titre;
 
+  generateViewMetric();
+
+  document.getElementById("metric_selector").addEventListener("change", () => {
+    generateViewMetric();
+  });
+
   fetch("https://timelapse.kerboul.me/api/smile")
     .then((response) => response.blob())
     .then((blob) => {
@@ -63,11 +58,42 @@ document.addEventListener("DOMContentLoaded", () => {
     if (tableImage.classList.contains("hiddenTable")) {
       tableImage.classList.remove("hiddenTable");
       tableImage.classList.add("full-view");
-      document.getElementById("toggle-view").innerHTML="See first images"
+      document.getElementById("toggle-view").innerHTML = "See first images";
     } else {
       tableImage.classList.remove("full-view");
       tableImage.classList.add("hiddenTable");
-      document.getElementById("toggle-view").innerHTML="See all images"
+      document.getElementById("toggle-view").innerHTML = "See all images";
     }
   });
 });
+
+function generateViewMetric() {
+  const ctx = document.getElementById("metric_viewer").getContext("2d");
+
+  // Destroy the existing chart instance if it exists
+  if (myChart) {
+    myChart.destroy();
+  }
+
+  // Create a new chart instance
+  myChart = new Chart(ctx, {
+    type: "bar",
+    data: {
+      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+      datasets: [
+        {
+          label: "# of Votes",
+          data: [12, 19, 3, 5, 2, 3],
+          borderWidth: 1,
+        },
+      ],
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true,
+        },
+      },
+    },
+  });
+}