From 1b0ccc54a2bb450a52a38281fa83b3d649671ed9 Mon Sep 17 00:00:00 2001
From: mrtoine <anthony.violet@outlook.be>
Date: Tue, 16 Dec 2025 10:52:55 +0100
Subject: [PATCH] Ajout du template `stats_charts.html` pour afficher des
 graphiques statistiques interactifs avec Chart.js.

---
 templates/home/stats_charts.html | 96 ++++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 templates/home/stats_charts.html

diff --git a/templates/home/stats_charts.html b/templates/home/stats_charts.html
new file mode 100644
index 0000000..159bdcd
--- /dev/null
+++ b/templates/home/stats_charts.html
@@ -0,0 +1,96 @@
+{% extends "layout.html" %}
+{% load static %}
+
+{% block title %}- Stats · Graphiques{% endblock %}
+
+{% block extra_head %}
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+  <style>
+    .card{background:var(--bg-200);border-radius:12px;padding:16px;border:1px solid var(--bg-300)}
+    .grid{display:grid;grid-template-columns:1fr;gap:24px;margin:16px 0}
+    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
+    .toolbar{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:8px 0}
+    @media (max-width: 960px){.grid-2{grid-template-columns:1fr}}
+  </style>
+{% endblock %}
+
+{% block content %}
+  <div class="container">
+    <h1>Graphiques statistiques</h1>
+
+    <form method="get" class="toolbar">
+      <div>
+        <label for="p">Période:&nbsp;</label>
+        <select id="p" name="p" onchange="this.form.submit()">
+          {% for opt in period_options %}
+            <option value="{{ opt }}" {% if p == opt %}selected{% endif %}>{{ opt }} jours</option>
+          {% endfor %}
+        </select>
+        <span style="margin-left:8px;color:var(--fg-300)">Du {{ start_date }} au {{ end_date }}</span>
+      </div>
+      <div style="color:var(--fg-300)">Mise en cache 15 minutes</div>
+    </form>
+
+    <div class="grid">
+      <div class="card">
+        <h3>Visiteurs uniques par jour</h3>
+        <canvas id="chartVisitors" height="120"></canvas>
+      </div>
+      <div class="card">
+        <h3>Conversions (visiteurs devenus utilisateurs) par jour</h3>
+        <canvas id="chartConversions" height="120"></canvas>
+      </div>
+    </div>
+
+    <div class="grid-2">
+      <div class="card">
+        <h3>Top sources (visiteurs uniques)</h3>
+        <canvas id="chartSources" height="200"></canvas>
+      </div>
+      <div class="card">
+        <h3>Top pays (visiteurs uniques)</h3>
+        <canvas id="chartCountries" height="200"></canvas>
+      </div>
+    </div>
+
+    <p style="margin-top:16px"><a href="{% url 'home:stats_dashboard' %}">← Retour au tableau de bord</a></p>
+  </div>
+
+  <script>
+    const labels = {{ labels_json|safe }};
+    const visitorsSeries = {{ visitors_series_json|safe }};
+    const conversionsSeries = {{ conversions_series_json|safe }};
+    const sourcesLabels = {{ sources_labels_json|safe }};
+    const sourcesValues = {{ sources_values_json|safe }};
+    const countriesLabels = {{ countries_labels_json|safe }};
+    const countriesValues = {{ countries_values_json|safe }};
+
+    const ctxVisitors = document.getElementById('chartVisitors');
+    new Chart(ctxVisitors, {
+      type: 'line',
+      data: { labels, datasets: [{ label: 'Visiteurs uniques', data: visitorsSeries, borderColor: '#4f46e5', backgroundColor: 'rgba(79,70,229,.2)', tension:.2 }] },
+      options: { responsive: true, scales: { y: { beginAtZero: true } }, plugins: { legend: { position: 'bottom' } } }
+    });
+
+    const ctxConv = document.getElementById('chartConversions');
+    new Chart(ctxConv, {
+      type: 'line',
+      data: { labels, datasets: [{ label: 'Conversions', data: conversionsSeries, borderColor: '#059669', backgroundColor: 'rgba(5,150,105,.2)', tension:.2 }] },
+      options: { responsive: true, scales: { y: { beginAtZero: true } }, plugins: { legend: { position: 'bottom' } } }
+    });
+
+    const ctxSources = document.getElementById('chartSources');
+    new Chart(ctxSources, {
+      type: 'doughnut',
+      data: { labels: sourcesLabels, datasets: [{ data: sourcesValues, backgroundColor: ['#4f46e5','#059669','#f59e0b','#ef4444','#10b981','#3b82f6','#8b5cf6','#f97316','#22c55e','#14b8a6'] }] },
+      options: { plugins: { legend: { position: 'bottom' } } }
+    });
+
+    const ctxCountries = document.getElementById('chartCountries');
+    new Chart(ctxCountries, {
+      type: 'bar',
+      data: { labels: countriesLabels, datasets: [{ label: 'Visiteurs', data: countriesValues, backgroundColor: '#f59e0b' }] },
+      options: { responsive: true, scales: { y: { beginAtZero: true } }, plugins: { legend: { display: false } } }
+    });
+  </script>
+{% endblock %}