78 lines
3 KiB
HTML
78 lines
3 KiB
HTML
{% extends "layout.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}- Stats · Graphiques{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
{% include "partials/_stats_head.html" %}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<h1>Graphiques statistiques</h1>
|
|
|
|
{% include "partials/_stats_toolbar.html" %}
|
|
|
|
<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 %}
|