maj

js/projet_detail.js

@@ -1,12 +1,24 @@
 let myChart; // Declare a global variable to hold the chart instance
 
-function display_metrics() {
-  // Implementation for display_metrics function
-}
-
 document.addEventListener("DOMContentLoaded", () => {
+
+  // Objects / variables
+
+  const metric_selector = document.getElementById("metric_selector")
   const urlParams = new URLSearchParams(window.location.search);
   const projectId = urlParams.get("id");
+
+  // Initialisation
+
+  generateViewMetric();
+
+  PopulateSelect(metric_selector,projectId);
+
+  metric_selector.addEventListener("change", () => {
+    generateViewMetric();
+  });
+
+
   // getDataProjectMetricsFromApi(projectId)
   //   .then((project_metrics) => {
   //     display_metrics(project_metrics);
@@ -22,11 +34,6 @@ 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())
@@ -77,14 +84,25 @@ function generateViewMetric() {
 
   // Create a new chart instance
   myChart = new Chart(ctx, {
-    type: "bar",
+    type: "line",
     data: {
-      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+      labels: ["January", "February", "March", "April", "May", "June", "July"],
       datasets: [
         {
-          label: "# of Votes",
-          data: [12, 19, 3, 5, 2, 3],
-          borderWidth: 1,
+          label: "Température (F°)",
+          data: [65, 59, 80, 81, 56, 55, 40],
+          fill: false,
+          borderColor: "rgba(75, 192, 192, 1)",
+          tension: 0.1,
+          yAxisID: "y", // Use the default y-axis
+        },
+        {
+          label: "Hygrometrie (%)",
+          data: [28, 48, 40, 19, 86, 27, 90],
+          fill: false,
+          borderColor: "rgba(153, 102, 255, 1)",
+          tension: 0.1,
+          yAxisID: "y1", // Use the second y-axis
         },
       ],
     },
@@ -92,6 +110,14 @@ function generateViewMetric() {
       scales: {
         y: {
           beginAtZero: true,
+          position: "left",
+        },
+        y1: {
+          beginAtZero: true,
+          position: "right",
+          grid: {
+            drawOnChartArea: false, // Only want the grid lines for one axis to show up
+          },
         },
       },
     },