{% extends "base.html" %}
{% block content %}
<div class="container mt-4">
    <h3>Asset Distribution by Region</h3>
    <canvas id="barChart" height="120"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const regions = {{ regions|map(attribute='region')|list|tojson }};
    const counts = {{ regions|map(attribute='count')|list|tojson }};

    new Chart(document.getElementById("barChart"), {
        type: 'bar',
        data: {
            labels: regions,
            datasets: [{
                label: 'Number of Assets',
                data: counts,
                backgroundColor: 'rgba(75, 192, 192, 0.7)'
            }]
        }
    });
</script>
{% endblock %}