diff --git a/web/src/dashboard/cards.jsx b/web/src/dashboard/cards.jsx index 7d188cb..5226356 100644 --- a/web/src/dashboard/cards.jsx +++ b/web/src/dashboard/cards.jsx @@ -380,6 +380,14 @@ function KarteBewegungen() { // ---------------------------------------------------------------- Diagramme function KarteAblaufRing() { 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"); + } if (fehler) return
{fehler}
; if (!daten) return
Lädt…
; @@ -388,9 +396,20 @@ function KarteAblaufRing() { { name: "In Ordnung", value: daten.ok, color: tokenFarbe("--ok", "#2e7d55") }, { name: "Bald ablaufend", value: daten.soon, color: tokenFarbe("--warn", "#b06f14") }, { name: "Abgelaufen", value: daten.expired, color: tokenFarbe("--danger", "#c0392b") }, - { name: "Ohne MHD", value: daten.no_date, color: tokenFarbe("--muted", "#6b7480") }, ]; - return ; + if (mitOhneMhd) { + segmente.push({ name: "Ohne MHD", value: daten.no_date, color: tokenFarbe("--muted", "#6b7480") }); + } + return ( +
+ + +
+ ); } function KarteKategorienRing() { diff --git a/web/src/styles.css b/web/src/styles.css index 384ac50..8a7bf3a 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -674,6 +674,9 @@ 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); } .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); }