43 lines
1.6 KiB
HTML
43 lines
1.6 KiB
HTML
{% extends "admin/change_list.html" %}
|
|
|
|
{% block content %}
|
|
<div style="display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px;">
|
|
<div style="flex: 1; min-width: 400px; background: white; padding: 15px; border: 1px solid #ccc; border-radius: 4px;">
|
|
<h3 style="margin-top:0">Top Countries (Filtered)</h3>
|
|
<canvas id="countryChart" height="150"></canvas>
|
|
</div>
|
|
|
|
<div style="flex: 1; min-width: 400px; background: white; padding: 15px; border: 1px solid #ccc; border-radius: 4px;">
|
|
<h3 style="margin-top:0">Top Cities (Filtered)</h3>
|
|
<canvas id="cityChart" height="150"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
{{ block.super }}
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const countryRaw = JSON.parse('{{ country_data|safe }}');
|
|
const cityRaw = JSON.parse('{{ city_data|safe }}');
|
|
|
|
const setupChart = (canvasId, data, label, color) => {
|
|
new Chart(document.getElementById(canvasId), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.map(i => i.country || i.city || 'Unknown'),
|
|
datasets: [{
|
|
label: label,
|
|
data: data.map(i => i.total),
|
|
backgroundColor: color
|
|
}]
|
|
},
|
|
options: { indexAxis: 'y', responsive: true }
|
|
});
|
|
};
|
|
|
|
setupChart('countryChart', countryRaw, 'Visitors', '#3498db');
|
|
setupChart('cityChart', cityRaw, 'Visitors', '#e67e22');
|
|
});
|
|
</script>
|
|
{% endblock %} |