earthjasonlin/mailova
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dashboard): split country stats into sent/received bar charts side by side

Browse Source
This commit is contained in:
Zichao Lin
2026-07-06 20:41:39 +08:00
parent cf06ab236d
commit f6db3a4f55
2 changed files with 42 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/templates/dashboard.html
View File

@@ -59,33 +59,43 @@
</div>
{% endif %}
{% if country_stats %}
{% if sent_country_stats or received_country_stats %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<div style="background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1.25rem;margin-bottom:1.5rem">
<h2 style="margin-bottom:.75rem">🌍 国家/地区分布</h2>
<canvas id="country-chart" height="100"></canvas>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem">
{% if sent_country_stats %}
<div style="background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1.25rem">
<h2 style="margin-bottom:.75rem">📤 寄出</h2>
<canvas id="chart-sent"></canvas>
</div>
{% endif %}
{% if received_country_stats %}
<div style="background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1.25rem">
<h2 style="margin-bottom:.75rem">📬 收到</h2>
<canvas id="chart-received"></canvas>
</div>
{% endif %}
</div>
<script>
new Chart(document.getElementById('country-chart'), {
{% if sent_country_stats %}
new Chart(document.getElementById('chart-sent'), {
type: 'bar',
data: {
labels: [{% for code, _ in country_stats %}'{{ code|flag }} {{ code }}',{% endfor %}],
datasets: [{
data: [{% for _, count in country_stats %}{{ count }},{% endfor %}],
backgroundColor: '#3b82f6',
borderRadius: 4,
maxBarThickness: 40
}]
labels: [{% for code, _ in sent_country_stats %}'{{ code|flag }} {{ code }}',{% endfor %}],
datasets: [{ data: [{% for _, count in sent_country_stats %}{{ count }},{% endfor %}], backgroundColor: '#3b82f6', borderRadius: 4, maxBarThickness: 40 }]
},
options: {
responsive: true,
plugins: { legend: { display: false } },
scales: {
y: { beginAtZero: true, ticks: { stepSize: 1 } },
x: { grid: { display: false } }
}
}
options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } }, x: { grid: { display: false } } } }
});
{% endif %}
{% if received_country_stats %}
new Chart(document.getElementById('chart-received'), {
type: 'bar',
data: {
labels: [{% for code, _ in received_country_stats %}'{{ code|flag }} {{ code }}',{% endfor %}],
datasets: [{ data: [{% for _, count in received_country_stats %}{{ count }},{% endfor %}], backgroundColor: '#8b5cf6', borderRadius: 4, maxBarThickness: 40 }]
},
options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } }, x: { grid: { display: false } } } }
});
{% endif %}
</script>
{% endif %}