.

Inventory/Server-Detail.php

@@ -161,7 +161,7 @@
               </div>
             </div>
           </div>
-          <script src="fillchart.js"></script>
+          <script src="fillchart2.js"></script>
         </div>
 
         <!-- Drives -->

Inventory/fillchart2.js

@@ -0,0 +1,139 @@
+let typ = document.getElementById("type").dataset.value;
+let computer = document.getElementById("computer").dataset.value;
+
+async function fetchAndDisplayData() {
+  try {
+    const response = await fetch(`z_data_${typ}.php?c=${computer}`);
+    const jsonData = await response.json();
+    const data = jsonData.data || jsonData; // Utilisation plus robuste
+
+    const cpuKey = Object.keys(data).find(key => key.includes('CPU'));
+    const ramKey = Object.keys(data).find(key => key.includes('Memory'));
+
+    // Utilisation d'un Set pour collecter les labels uniques plus efficacement
+    const uniqueLabels = new Set();
+    if (cpuKey && data[cpuKey]) {
+      data[cpuKey].forEach(point => uniqueLabels.add(point.datetime));
+    }
+    if (ramKey && data[ramKey]) {
+      data[ramKey].forEach(point => uniqueLabels.add(point.datetime));
+    }
+    const labels = Array.from(uniqueLabels).sort(); // Conversion en Array et tri
+
+    // Fonction pour créer une map de données
+    const createDataMap = (key, rawData) => {
+      const map = {};
+      if (key && rawData[key]) {
+        rawData[key].forEach(point => {
+          map[point.datetime] = parseFloat(point.avg_value);
+        });
+      }
+      return map;
+    };
+
+    const cpuDataMap = createDataMap(cpuKey, data);
+    const ramDataMap = createDataMap(ramKey, data);
+
+    // Fonction pour générer les données du graphique
+    const getChartData = (map, sortedLabels) => sortedLabels.map(label => map[label] ?? null);
+
+    const cpuChartData = getChartData(cpuDataMap, labels);
+    const ramChartData = getChartData(ramDataMap, labels);
+
+    // Formatage des labels pour l'axe X
+    const formattedLabels = labels.map(label => {
+      const date = new Date(label);
+      return !isNaN(date)
+        ? date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
+        : 'Invalid Date';
+    });
+
+    // *** Fonction pour créer un graphique (adaptée pour v2.x) ***
+    const createChartV2 = (canvasId, label, chartData, formattedLabels) => {
+      const ctx = document.getElementById(canvasId)?.getContext('2d');
+      if (!ctx) {
+        console.error(`Canvas element with id "${canvasId}" not found.`);
+        return null;
+      }
+      return new Chart(ctx, {
+        type: 'line',
+        data: {
+          labels: formattedLabels,
+          datasets: [{
+            label: label, // Garde le label pour l'infobulle
+            data: chartData,
+            borderColor: 'rgb(54, 162, 235)',
+            backgroundColor: 'rgba(54, 162, 235, 0.1)',
+            fill: true,
+            tension: 0.3,
+            pointRadius: 0
+          }]
+        },
+        options: {
+          legend: {
+             display: false // Cacher la légende en v2
+          },
+          responsive: true,
+          maintainAspectRatio: false,
+          scales: {
+            yAxes: [{ // *** Utilisation de yAxes (tableau) pour v2.x ***
+              ticks: {
+                beginAtZero: true,
+                // Ajout de la fonction callback pour formater les labels de l'axe Y
+                callback: function(value, index, values) { // Note: le 3ème argument est 'values' en v2
+                  return value + '%'; // Ajoute le symbole %
+                }
+                // max: 100, // Optionnel mais recommandé pour les pourcentages
+                // stepSize: 5 // Optionnel: pour suggérer un intervalle
+              }
+              // scaleLabel: { // Si vous vouliez un titre d'axe en v2 (ce que vous ne voulez pas)
+              //   display: false,
+              //   labelString: 'Utilisation (%)'
+              // }
+            }],
+            xAxes: [{ // *** xAxes doit aussi être dans un tableau en v2.x ***
+              // ... autres options pour l'axe X si nécessaire ...
+            }]
+          },
+          tooltips: { // *** 'tooltips' au pluriel en v2.x ***
+             callbacks: {
+                 label: function(tooltipItem, data) { // Arguments différents en v2
+                     let label = data.datasets[tooltipItem.datasetIndex].label || '';
+                     if (label) {
+                         label += ': ';
+                     }
+                     // tooltipItem.yLabel contient la valeur numérique en v2
+                     if (tooltipItem.yLabel !== null && typeof tooltipItem.yLabel !== 'undefined') {
+                         label += tooltipItem.yLabel + '%';
+                     }
+                     return label;
+                 }
+             }
+          }
+        }
+      });
+    };
+
+    // Création des graphiques en utilisant la fonction adaptée pour v2.x
+    if (cpuKey && data[cpuKey]?.length > 0) {
+      createChartV2('cpuChart', 'CPU (%)', cpuChartData, formattedLabels);
+    } else {
+      const cpuChartElement = document.getElementById('cpuChart');
+      if (cpuChartElement) cpuChartElement.style.display = 'none';
+      console.log("Pas de données CPU à afficher.");
+    }
+
+    if (ramKey && data[ramKey]?.length > 0) {
+      createChartV2('ramChart', 'Memory (%)', ramChartData, formattedLabels);
+    } else {
+      const ramChartElement = document.getElementById('ramChart');
+      if (ramChartElement) ramChartElement.style.display = 'none';
+      console.log("Pas de données RAM à afficher.");
+    }
+
+  } catch (error) {
+    console.error('Erreur lors de la récupération ou de l\'affichage des données:', error);
+  }
+}
+
+window.addEventListener('load', fetchAndDisplayData);