{# History-charts fragment for the full-metrics page — lazy-loaded via HTMX so
   the date_bin history query never blocks the page shell, and refreshed on a
   slow cadence / range change. #}
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1rem;">
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.5rem;">Utilization % — last {{ range_key }}</div>
    <div style="height:220px;"><canvas id="chart-util"></canvas></div>
  </div>
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.5rem;">Throughput (B/s) — last {{ range_key }}</div>
    <div style="height:220px;"><canvas id="chart-net"></canvas></div>
  </div>
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.5rem;">Load &amp; pressure — last {{ range_key }}</div>
    <div style="height:220px;"><canvas id="chart-pressure"></canvas></div>
  </div>
</div>

<script>
(function () {
  const series = {{ series|tojson }};
  // This fragment is re-swapped on poll / range change. Destroy the previous
  // chart instances first so Chart.js doesn't leak detached canvases.
  (window._hostCharts || []).forEach(function (c) { try { c.destroy(); } catch (e) {} });
  window._hostCharts = [];
  const fmtTime = (v) => { const d = new Date(v); return ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2); };
  const baseOpts = (ymax) => ({
    responsive: true, maintainAspectRatio: false,
    interaction: { mode: "index", intersect: false },
    elements: { point: { radius: 0 } },
    scales: {
      x: { type: "linear", ticks: { callback: (v) => fmtTime(v), maxTicksLimit: 8, color: "#8a8a92", font: { size: 10 } }, grid: { color: "#30303a" } },
      y: { beginAtZero: true, max: ymax, ticks: { color: "#8a8a92", font: { size: 10 } }, grid: { color: "#30303a" } },
    },
    plugins: {
      legend: { labels: { color: "#b8b8b0", boxWidth: 10, font: { size: 11 } } },
      tooltip: { callbacks: { title: function (items) { return items.length ? fmtTime(items[0].parsed.x) : ""; } } },
    },
  });
  const mk = (id, datasets, ymax) => {
    const el = document.getElementById(id);
    if (!el) return;
    window._hostCharts.push(new Chart(el.getContext("2d"), {
      type: "line",
      data: { datasets: datasets.map((d) => ({
        label: d.label,
        data: (series[d.key] || []).map((p) => ({ x: p[0], y: p[1] })),
        borderColor: d.color, backgroundColor: d.color, borderWidth: 1.5, tension: 0.25,
      })) },
      options: baseOpts(ymax),
    }));
  };
  mk("chart-util", [
    { key: "cpu_pct", label: "CPU %", color: "#c8a840" },
    { key: "mem_used_pct", label: "Mem %", color: "#4aa86a" },
    { key: "disk_used_pct_worst", label: "Disk % (worst)", color: "#c87840" },
  ], 100);
  mk("chart-net", [
    { key: "net_rx_bps", label: "Net RX", color: "#4aa86a" },
    { key: "net_tx_bps", label: "Net TX", color: "#c84048" },
    { key: "disk_read_bps", label: "Disk read", color: "#6aa0d0" },
    { key: "disk_write_bps", label: "Disk write", color: "#c8a840" },
  ], undefined);
  mk("chart-pressure", [
    { key: "load_1m", label: "Load 1m", color: "#c8a840" },
    { key: "psi_mem_some_avg10", label: "Mem PSI %", color: "#c84048" },
    { key: "temp_c_max", label: "Temp °C", color: "#c87840" },
  ], undefined);
})();
</script>