rdmsandClaude Opus 5.5
3ef20034d3
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
31 lines
1.8 KiB
HTML
31 lines
1.8 KiB
HTML
{# Torte + Legende (Ausbaustufe 13). segmente: Liste von Dicts
|
|
{s: engine.pie.Slice, q: Query-String für den Drill-down oder None,
|
|
gewaehlt: bool, zusatz: Zusatztext oder None}.
|
|
Klickbar sind SVG-Segmente (hx-get direkt am <path>, kein SVG-<a>, weil
|
|
htmx nur HTML-Links am Navigieren hindert) und die Legenden-Links (auch
|
|
ohne JS und per Tastatur nutzbar). #}
|
|
{% macro seg_attrs(seg) -%}
|
|
class="seg {{ seg.s.color }}{% if seg.q %} klickbar{% endif %}{% if seg.gewaehlt %} gewaehlt{% endif %}"
|
|
{%- if seg.q %} hx-get="/aufteilung/kategorie?{{ seg.q }}" hx-target="#aufteilung-kategorie" hx-push-url="/aufteilung?{{ seg.q }}"{% endif %}
|
|
{%- endmacro %}
|
|
|
|
{% macro torte(segmente, titel) %}
|
|
<figure class="torte">
|
|
<figcaption>{{ titel }}</figcaption>
|
|
<svg class="torte-svg" viewBox="-1.05 -1.05 2.1 2.1" role="img" aria-label="{{ titel }}">
|
|
{% for seg in segmente %}{% set s = seg.s %}
|
|
{% if s.path %}<path d="{{ s.path }}" {{ seg_attrs(seg) }}><title>{{ s.label }}: {{ s.value|eur }} € ({{ s.share|pct }})</title></path>
|
|
{% else %}<circle r="1" {{ seg_attrs(seg) }}><title>{{ s.label }}: {{ s.value|eur }} € ({{ s.share|pct }})</title></circle>{% endif %}
|
|
{% endfor %}
|
|
</svg>
|
|
<ul class="legende">
|
|
{% for seg in segmente %}{% set s = seg.s %}
|
|
<li{% if seg.gewaehlt %} class="gewaehlt"{% endif %}><span class="swatch {{ s.color }}"></span>
|
|
{%- if seg.q %}<a href="/aufteilung?{{ seg.q }}" hx-get="/aufteilung/kategorie?{{ seg.q }}" hx-target="#aufteilung-kategorie" hx-push-url="/aufteilung?{{ seg.q }}">{{ s.label }}</a>
|
|
{%- else %}<span>{{ s.label }}</span>{% endif %}
|
|
<span class="legende-wert">{{ s.value|eur }} € · {{ s.share|pct }}{% if seg.zusatz %} · {{ seg.zusatz }}{% endif %}</span></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</figure>
|
|
{% endmacro %}
|