function renderChart(points) {
  const canvas = document.getElementById("consumption-chart");

  const labels = points.map((p) => formatPeriod(p.period));
  const data = points.map((p) => p.delta_m3);

  const style  = getComputedStyle(document.documentElement);
  const accent = style.getPropertyValue('--color-chart').trim();

  let chart = new Chart(canvas, {
    type: "bar",
    data: {
      labels,
      datasets: [
        {
          label: "Consommation (m³)",
          data,
          backgroundColor: accent + 'cc',
          borderColor: accent,
          borderWidth: '1px'
        },
      ],
    },
    options: {
      responsive: true,
      scales: {
        x: {
          grid: { display: false },
          ticks: {
            color: style.getPropertyValue("--color-text-muted").trim()
          },
        },
        y: {
          beginAtZero: true,
          grid: { color: style.getPropertyValue("--color-border").trim() },
          ticks: {
            color: style.getPropertyValue("--color-text-muted").trim(),
            callback: (v) => v.toFixed(2)
          },
        },
      },
    },
  });

  return chart;
}

function formatPeriod(isoString) {
  const date = new Date(isoString);
  return date.toLocaleDateString("fr-FR", { day: "2-digit", month: "short" });
}