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

  const labels = points.map((p) => formatPeriod(p.period, granularity));
  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;
}

const PERIOD_FORMATS = {
  hour:  { hour: "2-digit", minute: "2-digit", day: "2-digit", month: "short" },
  day:   { day: "2-digit", month: "short" },
  week:  { day: "2-digit", month: "short" },
  month: { month: "short", year: "numeric" },
};

function formatPeriod(isoString, granularity) {
  const date = new Date(isoString);
  const opts = PERIOD_FORMATS[granularity] ?? PERIOD_FORMATS.day;
  return date.toLocaleDateString("fr-FR", opts);
}