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


<!-- Override extrahead to add Chart.js -->
{% block extrahead %}
    {{ block.super }}
    <script type="module" src="https://unpkg.com/chart.js@4.4.0/dist/chart.umd.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
                const usageCtx = document.getElementById('usageGraph').getContext('2d');
                new Chart(
                    usageCtx,
                    {
                        type: 'bar',
                        data: {
                            labels: [{% for u in usage %}'{{ u.name }}', {% endfor %}],
                            datasets: [{
                                label: 'usage',
                                data: [{% for u in usage %}{{ u.uses }},{% endfor %}]
                            }]
                        }
                    }
                );
            }
        );


    </script>
{% endblock %}

{% block content %}
    <!-- Render our chart -->
    <div style="width: 80%;">
        <h2>Usage graph</h2>
        <canvas style="margin-bottom: 30px; width: 60%; height: 50%;" id="usageGraph"></canvas>
    </div>
    <!-- Render the rest of the ChangeList view -->
    {{ block.super }}
{% endblock %}
