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/routers/gui.py

@@ -3,6 +3,7 @@ import re
 from datetime import date, timedelta
 from decimal import Decimal
 from typing import Callable
+from urllib.parse import urlencode
 
 from fastapi import APIRouter, Depends, HTTPException, Request
 from fastapi.templating import Jinja2Templates
@@ -14,8 +15,8 @@ from app.config import get_settings
 from app.db import get_session
 from app.engine.loans import add_months
 from app.engine.recurrence import occurrences
-from app.engine.breakdown import FREI, BreakdownRow, Filters, share
-from app.engine.pie import pie_slices
+from app.engine.breakdown import FREI, BreakdownRow, Filters, category_rows, share
+from app.engine.pie import UEBRIGE, pie_slices
 from app.formats import de_label, eur, pct
 from app.models.tables import (Account, Category, PlannedItem,
                                ProjectionResult, RecurringItem,
@@ -453,12 +454,80 @@ def _aufteilung_context(session: Session, today: date, monat: str | None,
     return ctx
 
 
+def _basis_query(ctx: dict) -> dict:
+    q = {"monat": ctx["monat_wert"], "szenario": ctx["szenario_id"] or "", "gesendet": "1"}
+    f = ctx["filters"]
+    for key, on in (("fixposten", f.recurring), ("einmal", f.planned), ("kredite", f.loans)):
+        if on:
+            q[key] = "1"
+    return q
+
+
+def _drilldown(ctx: dict, kategorie: str | None, sammel: str | None) -> None:
+    """Links der Haupttorte + ggf. zweite Torte. Die Sammelgruppe „Übrige"
+    läuft über sammel=1, damit eine echte Kategorie „Übrige" eindeutig bleibt."""
+    ctx["detail"] = None
+    ctx["detail_hinweis"] = None
+    if ctx["b"] is None:
+        return
+    sammel_gewaehlt = sammel == "1"
+    basis = _basis_query(ctx)
+    for seg in ctx["haupt"]:
+        s = seg["s"]
+        if s.color == "frei":
+            continue
+        extra = {"sammel": "1"} if s.merged else {"kategorie": s.label}
+        seg["q"] = urlencode({**basis, **extra})
+        seg["gewaehlt"] = s.merged if sammel_gewaehlt else (kategorie == s.label and not s.merged)
+    if sammel_gewaehlt:
+        merged = next((seg["s"] for seg in ctx["haupt"] if seg["s"].merged), None)
+        titel = UEBRIGE
+        enthaelt = list(merged.members) if merged else []
+    elif kategorie:
+        titel, enthaelt = kategorie, []
+    else:
+        return
+    rows = category_rows(ctx["b"].rows, set(enthaelt) if sammel_gewaehlt else {kategorie})
+    if not rows:
+        ctx["detail_hinweis"] = f"Kategorie „{titel}“ hat in dieser Auswahl keine Kosten."
+        return
+    income = ctx["s"].income
+    segmente = _segmente(pie_slices([(r.name, -r.amount) for r in rows]))
+    for seg in segmente:
+        anteil = share(seg["s"].value, income)
+        seg["zusatz"] = f"{pct(anteil)} der Einkünfte" if anteil is not None else None
+    ctx["detail"] = {"titel": titel, "enthaelt": enthaelt, "segmente": segmente,
+                     "summe": sum((-r.amount for r in rows), Decimal("0"))}
+
+
 @router.get("/aufteilung", dependencies=[Depends(gui_session)])
 def aufteilung_page(request: Request, monat: str | None = None,
                     szenario: str | None = None, fixposten: str | None = None,
                     einmal: str | None = None, kredite: str | None = None,
-                    gesendet: str | None = None,
+                    gesendet: str | None = None, kategorie: str | None = None,
+                    sammel: str | None = None,
                     session: Session = Depends(get_session)):
     ctx = _aufteilung_context(session, date.today(), monat, szenario, fixposten,
                               einmal, kredite, gesendet)
+    _drilldown(ctx, kategorie, sammel)
     return templates.TemplateResponse(request, "aufteilung.html", ctx)
+
+
+@router.get("/aufteilung/kategorie", dependencies=[Depends(gui_session)])
+def aufteilung_kategorie_fragment(request: Request, monat: str | None = None,
+                                  szenario: str | None = None,
+                                  fixposten: str | None = None,
+                                  einmal: str | None = None,
+                                  kredite: str | None = None,
+                                  gesendet: str | None = None,
+                                  kategorie: str | None = None,
+                                  sammel: str | None = None,
+                                  session: Session = Depends(get_session)):
+    """htmx-Fragment: zweite Torte + Haupttorte out-of-band (Markierung)."""
+    ctx = _aufteilung_context(session, date.today(), monat, szenario, fixposten,
+                              einmal, kredite, gesendet)
+    _drilldown(ctx, kategorie, sammel)
+    if ctx["error"]:
+        ctx["detail_hinweis"] = ctx["error"]
+    ctx["oob"] = ctx["b"] is not None
+    return templates.TemplateResponse(request, "_aufteilung_kategorie.html", ctx)

finance/app/static/style.css

@@ -273,3 +273,9 @@ label:has(input:disabled), label:has(select:disabled) {
 .swatch { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; flex: none; }
 .legende-wert { margin-left: auto; color: #555; white-space: nowrap; }
 .hinweis-klein { font-size: 0.85rem; color: #555; }
+
+.torte-svg .seg.klickbar { cursor: pointer; }
+.torte-svg .seg.klickbar:hover { opacity: 0.85; }
+.torte-svg .seg.gewaehlt { stroke: #222; stroke-width: 0.05; }
+.legende li.gewaehlt { font-weight: bold; }
+#aufteilung-kategorie h2 { font-size: 1.1rem; margin-top: 1.5rem; }

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 %}