{# traefik/widget_request_chart.html — Chart.js request rate + error % over time #}
{% if not labels_json or labels_json == '[]' %}
<div style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem 0;">No data for last {{ hours }}h.</div>
{% else %}
<div style="position:relative;height:160px;">
  <canvas id="chart-traefik-req-{{ widget_id }}"></canvas>
</div>
<script>
(function() {
  var ctx = document.getElementById("chart-traefik-req-{{ 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: "Req/s",
          data: {{ req_rate_json | safe }},
          borderColor: "#7c5ef4",
          backgroundColor: "rgba(124,94,244,0.08)",
          fill: true,
          tension: 0.3,
          pointRadius: 0,
          borderWidth: 1.5,
          yAxisID: "y",
        },
        {
          label: "5xx %",
          data: {{ error_rate_json | safe }},
          borderColor: "#e83848",
          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,
          grid: { color: "rgba(30,30,62,0.8)" },
          ticks: { color: "#6858a0", font: { size: 10 } },
          title: { display: true, text: "req/s", color: "#6858a0", font: { size: 9 } },
        },
        y2: {
          position: "right",
          min: 0,
          max: 100,
          grid: { drawOnChartArea: false },
          ticks: { color: "#e83848", font: { size: 10 } },
          title: { display: true, text: "5xx%", color: "#e83848", 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 %}