From 643f1dc35aae3d4a76e57a7074878f6c61836b75 Mon Sep 17 00:00:00 2001
From: Zichao Lin <earthjasonlin@163.com>
Date: Mon, 6 Jul 2026 22:13:46 +0800
Subject: [PATCH] fix(dashboard): extract labels/data from tuple list for
 Chart.js

---
 app/templates/dashboard.html | 41 ++++++++++++++++--------------------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 8e464b2..487c47d 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -77,29 +77,24 @@
 </div>
 <script>
 (function() {
-    var labels, data, colors, elId;
-    {% for stat in sent_country_stats %}
-    labels = {{ stat.labels|tojson }};
-    data = {{ stat.data|tojson }};
-    colors = labels.map(function(l) { return '#f59e0b'; });
-    elId = 'chart-sent';
-    new Chart(document.getElementById(elId), {
-        type: 'bar',
-        data: { labels: labels, datasets: [{ data: data, backgroundColor: colors, borderRadius: 4 }] },
-        options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
-    });
-    {% endfor %}
-    {% for stat in received_country_stats %}
-    labels = {{ stat.labels|tojson }};
-    data = {{ stat.data|tojson }};
-    colors = labels.map(function(l) { return '#8b5cf6'; });
-    elId = 'chart-received';
-    new Chart(document.getElementById(elId), {
-        type: 'bar',
-        data: { labels: labels, datasets: [{ data: data, backgroundColor: colors, borderRadius: 4 }] },
-        options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
-    });
-    {% endfor %}
+    var labels = {{ sent_country_stats|map(attribute=0)|list|tojson }};
+    var data = {{ sent_country_stats|map(attribute=1)|list|tojson }};
+    if (labels.length) {
+        new Chart(document.getElementById('chart-sent'), {
+            type: 'bar',
+            data: { labels: labels, datasets: [{ data: data, backgroundColor: '#f59e0b', borderRadius: 4 }] },
+            options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
+        });
+    }
+    var rlabels = {{ received_country_stats|map(attribute=0)|list|tojson }};
+    var rdata = {{ received_country_stats|map(attribute=1)|list|tojson }};
+    if (rlabels.length) {
+        new Chart(document.getElementById('chart-received'), {
+            type: 'bar',
+            data: { labels: rlabels, datasets: [{ data: rdata, backgroundColor: '#8b5cf6', borderRadius: 4 }] },
+            options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
+        });
+    }
 })();
 </script>
 {% endif %}