feat(dashboard): replace Chart.js with pure HTML/CSS bar chart, flags render correctly
This commit is contained in:
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user