From 3320dc95ca47757166226cff650058de947fb404 Mon Sep 17 00:00:00 2001
From: Zichao Lin <earthjasonlin@163.com>
Date: Mon, 6 Jul 2026 20:34:52 +0800
Subject: [PATCH] feat(dashboard): replace Chart.js with pure HTML/CSS bar
 chart, flags render correctly

---
 app/templates/dashboard.html | 37 +++++++++++-------------------------
 1 file changed, 11 insertions(+), 26 deletions(-)

diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 0bd3476..3022e35 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -62,7 +62,17 @@
 {% if country_stats %}
 <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>
+    {% set max_count = country_stats[0][1] if country_stats else 1 %}
+    {% for code, count in country_stats %}
+    <div style="display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem">
+        <span style="width:5rem;text-align:right;font-size:.9rem;flex-shrink:0">{{ code|flag }} {{ code }}</span>
+        <div style="flex:1;background:var(--bg);border-radius:4px;height:1.5rem;overflow:hidden">
+            <div style="width:{{ (count / max_count * 100)|int }}%;height:100%;background:var(--primary);border-radius:4px;min-width:1.5rem;display:flex;align-items:center;justify-content:flex-end;padding-right:.4rem">
+                <span style="font-size:.75rem;font-weight:600;color:#fff">{{ count }}</span>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
 </div>
 {% endif %}
 
@@ -136,29 +146,4 @@
     <p class="empty-sub">创建一个 <a href="/profiles">Profile</a> 开始管理你的明信片</p>
 </div>
 {% endif %}
-{% if country_stats %}
-<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
-<script>
-new Chart(document.getElementById('country-chart'), {
-    type: 'bar',
-    data: {
-        labels: [{% for code, _ in country_stats %}'{{ code }}',{% endfor %}],
-        datasets: [{
-            data: [{% for _, count in 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 } }
-        }
-    }
-});
-</script>
-{% endif %}
 {% endblock %}