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

{% if chart_data and chart_period %}
{% block extrahead %}
{{ block.super }}

<link rel="stylesheet" href="{% static 'admin_list_charts/css/chart.min.css' %}" />
<script src="{% static 'admin_list_charts/js/chart.bundle.min.js' %}"></script>
{% endblock %}

{% block content %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    var data = {{ chart_data|safe }};
    data.forEach((d) => { d.x = new Date(d.x); });
    
    var ctx = document.getElementById('listChart').getContext('2d');
    var chart = new Chart(ctx, {
	type: 'bar',
	data: {
	    datasets: [{
		data: data,
		backgroundColor: 'Orange',
	    }]
	},
	options: {
	    responsive: true,
	    legend: {
		display: false,
	    },
	    scales: {
		xAxes: [{
		    type: 'time',
		    time: {
			unit: '{{ chart_period }}',
			round: '{{ chart_period }}',
		    }
		}],
		yAxes: [{
                    ticks: {
			beginAtZero: true,
                    }
		}]
	    }
	}
    });
});
</script>

<canvas id="listChart" style="margin-bottom:4em; width:100%; height:50%;"></canvas>

{{ block.super }}
{% endblock %}
{% endif %}