47 lines
1.5 KiB
HTML
47 lines
1.5 KiB
HTML
{% macro bar_chart(items, max_count) %}
|
|
<div class="rounded-lg border bg-surface p-5">
|
|
<div class="flex flex-col gap-2">
|
|
{% for item in items %}
|
|
<div class="flex items-center gap-3">
|
|
<span
|
|
class="w-28 shrink-0 text-right text-xs font-medium text-text-secondary truncate"
|
|
>{{ item.0 }}</span
|
|
>
|
|
<div class="flex-1 h-5 rounded bg-surface-alt overflow-hidden">
|
|
<div
|
|
class="h-full rounded bg-accent"
|
|
style="width: {{ item.1 * 100 / max_count }}%"
|
|
></div>
|
|
</div>
|
|
<span class="w-6 shrink-0 text-xs text-text-muted text-right"
|
|
>{{ item.1 }}</span
|
|
>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro bar_chart_weight(items, max_weight) %}
|
|
<div class="rounded-lg border bg-surface p-5">
|
|
<div class="flex flex-col gap-2">
|
|
{% for item in items %}
|
|
<div class="flex items-center gap-3">
|
|
<span
|
|
class="w-28 shrink-0 text-right text-xs font-medium text-text-secondary truncate"
|
|
>{{ item.0 }}</span
|
|
>
|
|
<div class="flex-1 h-5 rounded bg-surface-alt overflow-hidden">
|
|
<div
|
|
class="h-full rounded bg-accent"
|
|
style="width: {{ item.1 * 100.0 / max_weight }}%"
|
|
></div>
|
|
</div>
|
|
<span class="w-14 shrink-0 text-xs text-text-muted text-right"
|
|
>{{ item.2 }}</span
|
|
>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|