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;
}

document.addEventListener("DOMContentLoaded", () => {
    const urlParams = new URLSearchParams(window.location.search);
    const projectId = urlParams.get("id");
    getDataProjectMetricsFromApi(projectId)
    .then(project_metrics => {
      console.log(project_metrics)
      display_metrics(project_metrics);
    })
    .catch(error => {
      console.error(error);
    });
    document.getElementById("projets").addEventListener("click", () => {
      window.location.href = "../index.html";
      current_project="";
    });
    global_project_list=JSON.parse(localStorage.getItem("project_list"));
    document.getElementById("name_project").innerHTML=global_project_list[projectId-1].titre;
});