{% extends 'base.html.twig' %}

{% block title %}Statistiques{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" integrity="sha512-/zs32ZEJh+/EO2N1b0PEdoA10JkdC3zJ8L5FTiQu82LR9S/rOQNfQN7U59U9BC12swNeRAz3HSzIL2vpp4fv3w==" crossorigin="anonymous">
{% endblock %}

{% block body %}
<div class="container">
    <h1>Statistiques</h1>
    <canvas id="categories" width="400" height="100"></canvas>

    <canvas id="annonces" width="400" height="100"></canvas>
</div>
{% endblock %}

{% block javascripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
<script>
    let categories = document.querySelector("#categories")
    let categGraph = new Chart(categories, {
        type: "pie",
        data: {
            labels: {{ categNom|raw }},
            datasets: [{
                label: "Répartition des catégories",
                data: {{ categCount|raw }},
                backgroundColor: {{ categColor|raw }}
            }]
        }
    })

    let annonces = document.querySelector("#annonces")
    let annGraph = new Chart(annonces, {
        type: "line",
        data: {
            labels: {{ dates|raw }},
            datasets: [{
                label: "Nombre d'annonces",
                data: {{ annoncesCount|raw }}
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    })
</script>
{% endblock %}