feat: Aufteilung – Drill-down in Kategorie per Klick auf Tortensegment (A13-T6)

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

finance/app/templates/_aufteilung_kategorie.html

@@ -0,0 +1,9 @@
+{% from "_torte_macros.html" import torte %}
+{% if detail_hinweis %}
+<div class="warning">{{ detail_hinweis }}</div>
+{% elif detail %}
+<h2>{{ detail.titel }}: {{ detail.summe|eur }} € / Monat</h2>
+{% if detail.enthaelt %}<p class="hinweis-klein">Enthält: {{ detail.enthaelt|join(', ') }}</p>{% endif %}
+{{ torte(detail.segmente, 'Posten: ' ~ detail.titel) }}
+{% endif %}
+{% if oob %}{% include "_aufteilung_torte.html" %}{% endif %}

finance/app/templates/_aufteilung_torte.html

@@ -1,4 +1,4 @@
 {% from "_torte_macros.html" import torte %}
-<div id="aufteilung-torte">
+<div id="aufteilung-torte"{% if oob %} hx-swap-oob="true"{% endif %}>
   {{ torte(haupt, haupt_titel) }}
 </div>

finance/app/templates/_torte_macros.html

@@ -1,18 +1,29 @@
 {# 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}. #}
+    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 }}" class="seg {{ s.color }}"><title>{{ s.label }}: {{ s.value|eur }} € ({{ s.share|pct }})</title></path>
-    {% else %}<circle r="1" class="seg {{ s.color }}"><title>{{ s.label }}: {{ s.value|eur }} € ({{ s.share|pct }})</title></circle>{% endif %}
+    {% 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><span class="swatch {{ s.color }}"></span><span>{{ s.label }}</span><span class="legende-wert">{{ s.value|eur }} € · {{ s.share|pct }}{% if seg.zusatz %} · {{ seg.zusatz }}{% endif %}</span></li>
+    <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>

finance/app/templates/aufteilung.html

@@ -66,6 +66,8 @@
   <p>Gesamte Einkünfte: <strong>{{ s.income|eur }} €</strong></p>
     <div>
       {% include "_aufteilung_torte.html" %}
+      <p class="hinweis-klein">Für Kategorie-Aufteilung auf Segment klicken</p>
+      <div id="aufteilung-kategorie">{% include "_aufteilung_kategorie.html" %}</div>
     </div>
   {% endif %}
 {% endif %}