34 lines
2.2 KiB
HTML
34 lines
2.2 KiB
HTML
<section class="chart-card">
|
|
<div class="chart-card-head">
|
|
<div><h3>{{ item.chart.name }}</h3>{% if item.chart.description %}<p>{{ item.chart.description }}</p>{% endif %}</div>
|
|
<span class="chart-total">{{ item.total }} Geräte</span>
|
|
</div>
|
|
{% if not item['items'] %}
|
|
<div class="chart-empty">Keine passenden Daten vorhanden.</div>
|
|
{% elif item.chart.chart_type in ['donut', 'pie'] %}
|
|
<div class="donut-layout">
|
|
<div class="donut-chart {% if item.chart.chart_type == 'pie' %}pie-chart{% endif %}" style="background: conic-gradient({{ item.donut_gradient }})"><span>{{ item.total }}</span></div>
|
|
<div class="chart-legend">
|
|
{% for label, value in item['items'] %}
|
|
<div><i style="--legend-color:var(--chart-color-{{ loop.index0 % 12 }})"></i><span>{{ label }}</span><strong>{{ value }}</strong></div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% elif item.chart.chart_type == 'stacked_bar' %}
|
|
<div class="stack-legend">{% for stack in item.stack_values %}<span><i style="--legend-color:var(--chart-color-{{ loop.index0 % 12 }})"></i>{{ stack }}</span>{% endfor %}</div>
|
|
<div class="bar-chart stacked-chart">
|
|
{% for label, values in item['items'] %}
|
|
{% set row_total = values.values()|sum %}
|
|
<div class="bar-row"><div class="bar-label" title="{{ label }}">{{ label }}</div><div class="bar-track">
|
|
{% for stack in item.stack_values %}{% set count = values.get(stack, 0) %}{% if count %}<div class="bar-segment" title="{{ stack }}: {{ count }}" style="width:{{ (count / item.maximum * 100)|round(2) }}%;--segment-color:var(--chart-color-{{ loop.index0 % 12 }})"><span>{{ count }}</span></div>{% endif %}{% endfor %}
|
|
</div><strong class="bar-value">{{ row_total }}</strong></div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="bar-chart">
|
|
{% for label, value in item['items'] %}
|
|
<div class="bar-row"><div class="bar-label" title="{{ label }}">{{ label }}</div><div class="bar-track"><div class="bar-segment" style="width:{{ (value / item.maximum * 100)|round(2) }}%;--segment-color:var(--chart-color-{{ loop.index0 % 12 }})"><span>{{ value }}</span></div></div><strong class="bar-value">{{ value }}</strong></div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</section> |