{% extends "admin/change_list.html" %}
{% load static %}

<!-- Override extrahead to add Chart.js -->
{% block extrahead %}
{{ block.super }}
<link rel="stylesheet" href="{% static "drf_api_logger/css/Chart.min.css" %}" />
<script src="{% static "drf_api_logger/js/Chart.bundle.min.js" %}"></script>
<script>

document.addEventListener('DOMContentLoaded', () => {
  const ctx = document.getElementById('countChart').getContext('2d');

  const chartData = [
    {% for item in analytics %}
    {"date": "{{ item.added_on__date.isoformat }}", "y": {{ item.total }}},
    {% endfor %}
  ];

  // Parse the dates to JS
  chartData.forEach((d) => {
    d.x = new Date(d.date);
  });

  // Render the chart
  const chart = new Chart(ctx, {
    type: 'bar',
    data: {
      datasets: [
        {
          label: 'Number of API calls',
          data: chartData,
          backgroundColor: 'rgb(33,150,243)',
        },
      ],
    },
    options: {
      responsive: true,
      scales: {
        xAxes: [
          {
            type: 'time',
            time: {
              unit: 'day',
              round: 'day',
              tooltipFormat:'DD/MM/YYYY',
              displayFormats: {
                day: 'MMM D',
              },
            },
          },
        ],
        yAxes: [
          {
            ticks: {
              beginAtZero: true,
            },
          },
        ],
      },
    },
  });

  var color = Chart.helpers.color;

  var barChartData = {
      labels: {{ status_code_count_keys }},
      datasets: [{
          label: 'Number of API calls by status code',
          backgroundColor: 'rgb(33,150,243)',
          borderColor: 'rgb(33,150,243)',
          borderWidth: 1,
          data: {{ status_code_count_values }}
      }]
  };

  window.onload = function() {
      var ctx = document.getElementById('statusCodeChart').getContext('2d');
      window.myBar = new Chart(ctx, {
          type: 'bar',
          data: barChartData,
          options: {
              responsive: true,
              legend: {
                  position: 'top',
              },
              title: {
                  display: true,
                  text: 'API calls by status code'
              }
          }
      });

      {% if profiling_enabled and sql_distribution %}
      var sqlCtx = document.getElementById('sqlQueryChart').getContext('2d');
      var sqlChartData = [
        {% for item in sql_distribution %}
        {"date": "{{ item.added_on__date.isoformat }}", "y": {{ item.avg_queries|floatformat:1 }}},
        {% endfor %}
      ];

      sqlChartData.forEach(function(d) {
        d.x = new Date(d.date);
      });

      new Chart(sqlCtx, {
        type: 'bar',
        data: {
          datasets: [{
            label: 'Avg SQL queries per request',
            data: sqlChartData,
            backgroundColor: 'rgb(255, 152, 0)',
          }]
        },
        options: {
          responsive: true,
          scales: {
            xAxes: [{
              type: 'time',
              time: {
                unit: 'day',
                round: 'day',
                tooltipFormat: 'DD/MM/YYYY',
                displayFormats: { day: 'MMM D' }
              }
            }],
            yAxes: [{
              ticks: { beginAtZero: true },
              scaleLabel: {
                display: true,
                labelString: 'Queries'
              }
            }]
          },
          title: {
            display: true,
            text: 'Average SQL queries per request (daily)'
          }
        }
      });
      {% endif %}
  };
});
</script>
{% endblock %}

{% block content %}
<!-- Render our chart -->
<div style="width: 80%;">
  <canvas style="margin-bottom: 30px; width: 60%; height: 50%;" id="countChart"></canvas>
</div>
<div style="width: 80%; margin-top: 24px;">
  <canvas style="margin-bottom: 30px; width: 60%; height: 50%;" id="statusCodeChart"></canvas>
</div>
{% if profiling_enabled %}
<div style="width: 80%; margin-top: 24px;">
  <canvas style="margin-bottom: 30px; width: 60%; height: 50%;" id="sqlQueryChart"></canvas>
</div>
{% endif %}
<!-- Render the rest of the ChangeList view -->
{{ block.super }}
{% endblock %}