diff --git a/web/src/dashboard/cards.jsx b/web/src/dashboard/cards.jsx index 9f5423d..b952a5f 100644 --- a/web/src/dashboard/cards.jsx +++ b/web/src/dashboard/cards.jsx @@ -428,16 +428,10 @@ function KarteBewegungen() { } // ---------------------------------------------------------------- Diagramme -function KarteAblaufRing() { +function KarteAblaufRing({ props: karteProps }) { const { daten, fehler } = useDaten(() => api.dashboardExpirySplit()); - // Ob „Ohne MHD" (Gegenstände/undatierte Chargen) mitgezählt wird – gemerkt. - const [mitOhneMhd, setMitOhneMhd] = useState( - () => localStorage.getItem("ablauf_mit_ohne_mhd") !== "0", - ); - function umschalten(on) { - setMitOhneMhd(on); - localStorage.setItem("ablauf_mit_ohne_mhd", on ? "1" : "0"); - } + // Ob „Ohne MHD" (Gegenstände/undatierte Chargen) mitgezählt wird – Karten-Einstellung. + const mitOhneMhd = karteProps?.mit_ohne_mhd ?? true; if (fehler) return
{fehler}
; if (!daten) return
Lädt…
; @@ -450,16 +444,7 @@ function KarteAblaufRing() { if (mitOhneMhd) { segmente.push({ name: "Ohne MHD", value: daten.no_date, color: tokenFarbe("--muted", "#6b7480") }); } - return ( -
- - -
- ); + return ; } function KarteKategorienRing({ props: karteProps }) { @@ -685,6 +670,7 @@ export const KARTEN = { titel: "Ablauf-Anteile", icon: "clock", vorschau: "ring", beschreibung: "Ring: in Ordnung, bald ablaufend, abgelaufen", standard: { w: 4, h: 6 }, min: { w: 3, h: 5 }, + config: [{ key: "mit_ohne_mhd", type: "boolean", label: "„Ohne MHD“ einbeziehen", default: true }], komponente: KarteAblaufRing, }, "category-donut": { diff --git a/web/src/styles.css b/web/src/styles.css index 9f13fa5..aa84a34 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -778,13 +778,10 @@ select.zeitraum:hover { color: var(--text); } gap: var(--sp-4); flex-wrap: wrap; flex: 1; min-height: 0; } -/* Ablauf-Ring mit „Ohne MHD"-Umschalter darueber; der Ring fuellt den Rest. */ -.ring-mit-schalter { display: flex; flex-direction: column; flex: 1; min-height: 0; } -.ring-schalter { flex: 0 0 auto; justify-content: flex-end; margin: 0 0 4px; font-size: 0.78rem; color: var(--muted); } -/* Der Umschalter ist eine Karten-Einstellung: nur sichtbar, wenn man das - Dashboard gerade bearbeitet. Die Wahl wirkt trotzdem in der normalen Ansicht. */ -.ring-mit-schalter .ring-schalter { display: none; } -.dash-grid.editing .ring-mit-schalter .ring-schalter { display: flex; } +/* Bei vielen Kategorien (Detailansicht) soll der Ring stehen bleiben und nur die + Legende scrollen – nicht die ganze Karte. Deshalb füllt die Legende die Höhe + des Ring-Bereichs und scrollt in sich; der Ring bleibt mittig fixiert. */ +.chart-donut .chart-legend { align-self: stretch; min-height: 0; overflow-y: auto; } .donut-svg { width: 160px; height: 160px; flex: 0 0 auto; } .donut-svg circle { transition: stroke-width 120ms ease; cursor: default; } .donut-value { font-size: 20px; font-weight: 680; fill: var(--text); }