fix(dashboard): extract labels/data from tuple list for Chart.js

This commit is contained in:
2026-07-06 22:13:46 +08:00
parent f448a900f5
commit 643f1dc35a

View File

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