{% extends "traite/base.html" %} {% load static %} {% block content %}
<div class="row py-3">
  <h1 class="text-center">Tableau de bord</h1>
</div>
<div class="d-flex flex-wrap justify-content-between mx-1 mb-3">
  <div class="flex-grow-1 m-2 p-3 rounded bg-success">
    <p>Total des cas de traites</p>
    <h3 class="text-white">{{ nb_castraites }}</h3>
    <div class="text-end">
      <i class="bi bi-eye-fill"></i>
    </div>
  </div>
  <div class="flex-grow-1 m-2 p-3 rounded bg-accent">
    <p>Total des victimes</p>
    <h3 class="text-white">{{ nb_victimes }}</h3>
    <div class="text-end">
      <i class="bi bi-eye-fill"></i>
    </div>
  </div>
  <div class="flex-grow-1 m-2 p-3 rounded bg-dark">
    <p>Total des auteurs</p>
    <h3 class="text-white">{{ nb_trafiquants }}</h3>
    <div class="text-end">
      <i class="bi bi-eye-fill px-1"></i>
    </div>
  </div>
</div>
<div class="container overflow-hidden">
  <div class="row gx-4 mb-4">
    <div class="col">
      <div class="border-blue rounded h-100">
        <canvas id="byMonthChart" ></canvas>
      </div>
    </div>
    <div class="col">
      <div class="border-blue rounded h-100">
        <canvas id="byInfractionChart" ></canvas>
      </div>
    </div>
  </div>
  <div class="row gx-4">
    <div class="col">
      <div class="border-blue rounded h-100">
        <canvas id="byAgeChart"></canvas>
      </div>
    </div>
    <div class="col">
      <div class="border-blue rounded h-100">
        <canvas id="bySexeChart"></canvas>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctByMonth = document.getElementById("byMonthChart");
  const ctByInfraction = document.getElementById("byInfractionChart");
  const ctBySexe = document.getElementById("bySexeChart");
  const ctByAge = document.getElementById("byAgeChart");
  const encoder = new TextEncoder();


  new Chart(ctByMonth, {
    type: "line",
    data: {
      labels: [{% for data in traite_par_date %}"{{data.date__year}}",{% endfor %}],
      datasets: [
        {
          label: "Cas de traite",
          data: [{% for data in traite_par_date %}"{{data.total}}",{% endfor %}],
          fill: false,
          borderColor: "rgb(75, 192, 192)",
          tension: 0.1,
        },
      ],
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
        },
      },
      plugins: {
        legend: {
          position: "top",
          align: "end",
        },
        title: {
          display: true,
          text: "Evolution des cas de traite",
          align: "start",
          color: "#071952",
          font: { size: 24, weight: "bold" },
        },
      },
      layout: {
        padding: 20,
      },
    },
  });

  new Chart(ctByAge, {
    type: "bar",
    data: {
      labels: [{% for data in victime_par_age %}"{{data.age_group}}",{% endfor %} ],

      datasets: [
        {
          label: "Nbre de cas ",
          data: [{% for data in victime_par_age %}"{{data.total}}",{% endfor %} ],
          backgroundColor: [
            "rgb(132, 129, 221)",
            "rgb(239, 146, 52)",
            "rgba(0, 244, 193, 0.27)",
            "rgba(0, 124, 198, 0.45)",
            "rgba(0, 0, 75, 0.58)",
          ],
          hoverOffset: 4,
        },
      ],
    },
    options: {
      plugins: {
        title: {
          display: true,
          text: "Victimes par tranche d'age",
          align: "start",
          color: "#071952",
          font: { size: 24, weight: "bold" },
        },
        legend: {
                display: false,
                labels: {
                    color: 'rgb(255, 99, 132)'
                },
                position:'bottom',
                align:'start',

            }
      },
      layout: {
        padding: 20,
      },
    },
  });

  new Chart(ctBySexe, {
    type: "pie",
    data: {
      labels: [{% for data in victime_par_sexe %}"{{data.sexe}}",{% endfor %}],
      datasets: [
        {
          label: "Nbre de victimes ",
          data: [{% for data in victime_par_sexe %}"{{data.total}}",{% endfor %}],
          backgroundColor: ["rgb(87, 82, 209)", "rgba(0, 115, 197, 0.77)"],
          hoverOffset: 4,
        },
      ],
    },
    options: {
      plugins: {
        title: {
          display: true,
          text: "Victimes par sexe",
          align: "start",
          color: "#071952",
          font: { size: 24, weight: "bold" },
        },
      },
      layout: {
        padding: 20,
      },
    },
  });

  new Chart(ctByInfraction, {
    type: "pie",
    data: {
      labels: [{% for data in traite_par_infraction %}"{{data.types_infraction__libelle}}",{% endfor %}],

      datasets: [
        {
          label: "Nbre de cas ",
          data: [{% for data in traite_par_infraction %}"{{data.total}}",{% endfor %} ],
          backgroundColor: [
            "rgb(132, 129, 221)",
            "rgb(239, 146, 52)",
            "rgba(0, 244, 193, 0.27)",
            "rgba(0, 124, 198, 0.45)",
            "rgba(0, 0, 75, 0.58)",
          ],
          hoverOffset: 4,
        },
      ],
    },
    options: {
      plugins: {
        title: {
          display: true,
          text: "Cas de traite par type d'infraction",
          align: "start",
          color: "#071952",
          font: { size: 24, weight: "bold" },
        },
      },
      layout: {
        padding: 20,
      },
    },
  });
</script>
{% endblock content %}