{# ups/widget_history.html — Chart.js multi-line: battery%, load%, input voltage #}
{% if not labels_json or labels_json == '[]' %}
<div style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem 0;">No UPS history for last {{ hours }}h.</div>
{% else %}
<div style="position:relative;height:160px;">
  <canvas id="chart-ups-hist-{{ widget_id }}"></canvas>
</div>
<script>
(function() {
  var ctx = document.getElementById("chart-ups-hist-{{ widget_id }}");
  if (!ctx || !window.Chart) return;
  var existing = Chart.getChart(ctx);
  if (existing) existing.destroy();
  new Chart(ctx.getContext("2d"), {
    type: "line",
    data: {
      labels: {{ labels_json | safe }},
      datasets: [
        {
          label: "Battery %",
          data: {{ battery_json | safe }},
          borderColor: "#26d96b",
          fill: false,
          tension: 0.3,
          pointRadius: 0,
          borderWidth: 1.5,
          yAxisID: "y",
        },
        {
          label: "Load %",
          data: {{ load_json | safe }},
          borderColor: "#e07828",
          fill: false,
          tension: 0.3,
          pointRadius: 0,
          borderWidth: 1.5,
          yAxisID: "y",
        },
        {
          label: "Input V",
          data: {{ voltage_json | safe }},
          borderColor: "#7c5ef4",
          fill: false,
          tension: 0.3,
          pointRadius: 0,
          borderWidth: 1.5,
          yAxisID: "y2",
        },
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: false,
      plugins: {
        legend: {
          labels: { color: "#6858a0", boxWidth: 10, font: { size: 10 } }
        }
      },
      scales: {
        x: { display: false },
        y: {
          min: 0,
          max: 100,
          grid: { color: "rgba(30,30,62,0.8)" },
          ticks: { color: "#6858a0", font: { size: 10 } },
          title: { display: true, text: "%", color: "#6858a0", font: { size: 9 } },
        },
        y2: {
          position: "right",
          grid: { drawOnChartArea: false },
          ticks: { color: "#7c5ef4", font: { size: 10 } },
          title: { display: true, text: "V", color: "#7c5ef4", font: { size: 9 } },
        },
      }
    }
  });
})();
</script>
<div style="font-size:0.72rem;color:var(--text-muted);margin-top:0.35rem;text-align:right;">
  last {{ hours }}h
</div>
{% endif %}