Skip to content

[Service] Fwd: Statistiken überarbeiten #20

@tickbot

Description

@tickbot

Titel

Statistiken-UI verbessern: Diagramme optisch aufwerten (Monthy Hall Web)

Beschreibung

Die aktuellen Statistik-Diagramme auf der Monthy Hall Web-Seite wirken momentan sehr basic und unästhetisch. Bitte das UI/UX-Design der Diagramme überarbeiten, kleinere Graphen verwenden, stärker zentrieren und eine moderne Farbwelt nutzen.

Anforderungen / Umsetzungsvorschläge

  • Design-Redesign der Statistik-Diagramme (Linien-, Balken- und ggf. Tortendiagramme).
  • Graphen kleiner machen und stärker zentrieren, innerhalb konsistenter Cards/Container.
  • Neue Farbpalette und Design-Token verwenden; Farben konsistent across Charts, ggf. Design-System anpassen.
  • Layout: responsive, Charts zentriert in Desktop- und Mobile-Layout, einheitliche Abstände/Paddings.
  • Zugänglichkeit: ausreichende Kontraste, aria-labels/Tooltips, keyboard-navigierbar.
  • Performance: Charts rendern schnell, keine größeren Reworks am Datenfluss.
  • Deliverables: Design-Dokument (Farben, Typo, Abstände), vor/nach Screenshots, aktualisierte Styles/Komponenten.
  • Abhängigkeiten: ggf. Update der Diagramm-Bibliothek oder Anpassungen an bestehender Implementation; API bleibt unverändert.

Akzeptanzkriterien (Definition of Done)

  • Alle Diagramme auf der Statistik-Seite verwenden den neuen Stil gemäß Design-Dokument.
  • Graphen sind zentriert, mit konsistentem Padding, und passen sich responsiv an verschiedene Bildschirmbreiten an.
  • Diagramme sind deutlich kleiner im Erscheinungsbild, ohne Lesbarkeit der Daten zu beeinträchtigen.
  • Neue Farben erfüllen WCAG AA-Kontrastanforderungen (oder dokumentierter Kompromiss).
  • Keine Änderungen am zugrunde liegenden Datenfluss; Daten bleiben unverändert.
  • Screenshots vor/nach dem Implementieren vorhanden und in PR-Kommentaren verlinkt.
  • QA bestätigt Visuals auf Desktop und Mobile; keine regressiven Darstellungen.

Notizen

  • Bitte einen separaten Branch/PR verwenden (z. B. feature/chart-ui-polish).
  • Falls relevant, stubben wir eine kurze Design-Review-Session ein.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions