{# Sales-over-time bar chart, in the markup `makeover_webview::chart` emits, so
   one set of rules in layout.css draws this and the described chart alike.
   Expects `chart` in the parent context.

   Both numbers reach the markup as themselves and the stylesheet divides them.
   That is what the described chart needs to compile, and this copy follows it
   so the two cannot drift into two charts. #}
<div class="chart" style="--most: {{ chart.most }}" role="img" aria-label="revenue over time">
    <div class="chart-bars">
    {% for bar in chart.bars %}
        <div class="chart-bar-col" data-tooltip="{{ bar.value }} / {{ bar.count }} sale{% if bar.count != 1 %}s{% endif %}">
            <div class="chart-bar" style="--value: {{ bar.cents }}"></div>
            <div class="chart-bar-label">{{ bar.label }}</div>
        </div>
    {% endfor %}
    </div>
</div>