From 996770020f6f2525760cb7a157a39263045a00e2 Mon Sep 17 00:00:00 2001
From: Zichao Lin <earthjasonlin@163.com>
Date: Tue, 28 Jul 2026 07:41:16 +0800
Subject: [PATCH] feat(dashboard): change country charts from bar to pie with
 legend

---
 app/templates/dashboard.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index e2b6d85..475882b 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -78,22 +78,22 @@
 <script>
 {% if sent_country_stats %}
 new Chart(document.getElementById('chart-sent'), {
-    type: 'bar',
+    type: 'pie',
     data: {
         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 }]
+        datasets: [{ data: [{% for _, count in sent_country_stats %}{{ count }},{% endfor %}], backgroundColor: ['#3b82f6','#f59e0b','#10b981','#8b5cf6','#ef4444','#06b6d4','#f97316','#84cc16','#ec4899','#6366f1'] }]
     },
-    options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } }, x: { grid: { display: false } } } }
+    options: { responsive: true, plugins: { legend: { position: 'bottom', labels: { padding: 12, usePointStyle: true } } } }
 });
 {% endif %}
 {% if received_country_stats %}
 new Chart(document.getElementById('chart-received'), {
-    type: 'bar',
+    type: 'pie',
     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 }]
+        datasets: [{ data: [{% for _, count in received_country_stats %}{{ count }},{% endfor %}], backgroundColor: ['#8b5cf6','#3b82f6','#f59e0b','#10b981','#ef4444','#06b6d4','#f97316','#84cc16','#ec4899','#6366f1'] }]
     },
-    options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } }, x: { grid: { display: false } } } }
+    options: { responsive: true, plugins: { legend: { position: 'bottom', labels: { padding: 12, usePointStyle: true } } } }
 });
 {% endif %}
 </script>