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;
    const cpuKey = Object.keys(data).find(key => key.includes('CPU'));
    const ramKey = Object.keys(data).find(key => key.includes('Memory'));
    const labels = [];
    if (cpuKey && data[cpuKey]) {
      data[cpuKey].forEach(point => {
        if (!labels.includes(point.datetime)) {
          labels.push(point.datetime);
        }
      });
    }
    if (ramKey && data[ramKey]) {
      data[ramKey].forEach(point => {
        if (!labels.includes(point.datetime)) {
          labels.push(point.datetime);
        }
      });
    }
    labels.sort();
    const cpuDataMap = {};
    const ramDataMap = {};
    if (cpuKey && data[cpuKey]) {
      data[cpuKey].forEach(point => {
        cpuDataMap[point.datetime] = parseFloat(point.avg_value);
      });
    }
    if (ramKey && data[ramKey]) {
      data[ramKey].forEach(point => {
        ramDataMap[point.datetime] = parseFloat(point.avg_value);
      });
    }
    const cpuChartData = labels.map(label => cpuDataMap[label] || null);
    const ramChartData = labels.map(label => ramDataMap[label] || null);
    const formattedLabels = labels.map(label => {
      const date = new Date(label);
      return date.toLocaleTimeString('fr-FR', {hour: '2-digit', minute: '2-digit'});
    });
    if (cpuKey && data[cpuKey] && data[cpuKey].length > 0) {
      const ctx1 = document.getElementById('cpuChart').getContext('2d');
      new Chart(ctx1, {
        type: 'line',
        data: {
          labels: formattedLabels,
          datasets: [{
            label: 'CPU (%)',
            data: cpuChartData,
            borderColor: 'rgb(54, 162, 235)',
            backgroundColor: 'rgba(54, 162, 235, 0.1)',
            fill: true,
            tension: 0.3,
            pointRadius: 0
          }]
        },
        options: {
          legend: {display: false},
          responsive: true,
          maintainAspectRatio: false,
          scales: {y: {beginAtZero: true}}
        }
      });
    }
    if (ramKey && data[ramKey] && data[ramKey].length > 0) {
      const ctx2 = document.getElementById('ramChart').getContext('2d');
      new Chart(ctx2, {
        type: 'line',
        data: {
          labels: formattedLabels,
          datasets: [{
            label: 'Memory (%)',
            data: ramChartData,
            borderColor: 'rgb(54, 162, 235)',
            backgroundColor: 'rgba(54, 162, 235, 0.1)',
            fill: true,
            tension: 0.3,
            pointRadius: 0
          }]
        },
        options: {
          legend: {display: false},
          responsive: true,
          maintainAspectRatio: false,
          scales: {y: {beginAtZero: true}}
        }
      });
    }
        
  } catch (error) {
    console.error('Erreur:', error);
  }
}

window.addEventListener('load', fetchAndDisplayData);