{% comment %}

Mockup barplot

{% endcomment %}

{% load string_extras %}

<style>
    .placeholder.list { height: .5em; }
    .placeholder.list.bullet { width: .5em; }
    .placeholder.rectangle { height: 60px; }

    .w-25 { width: 25px; }
    .w-30 { width: 30px; }
    .w-35 { width: 35px; }
    .w-40 { width: 40px; }
    .w-45 { width: 45px; }
    .w-50 { width: 50px; }
    .w-60 { width: 60px; }
    .w-65 { width: 65px; }
    .w-80 { width: 80px; }
    .w-90 { width: 90px; }
</style>

<div class="row">
    <div class="col-auto">
        <div>
            <span class="placeholder list w-80"></span>

            {% for width in "60,30,50"|split %}
                <div>
                    <span class="placeholder list bullet"></span>
                    <span class="placeholder list w-{{ width }}"></span>
                </div>
            {% endfor %}

            <span class="placeholder list w-65 mt-5"></span>

            {% for width in "45,35,40,25"|split %}
                <div>
                    <span class="placeholder list bullet"></span>
                    <span class="placeholder list w-{{ width }}"></span>
                </div>
            {% endfor %}
        </div>
    </div>

    <div class="col-auto">
        {% for row in "1,2,3;1,2,3;1,2,3;1,2"|split:";" %}
            <div>
                {% for column in row|split %}
                    <span class="placeholder rectangle m-1 w-90"></span>
                {% endfor %}
            </div>
        {% endfor %}
    </div>
</div>