[FEAT] Charts & Visualisierungen erweitern #26

New Issue

Lars · 2026-03-23T18:05:27+01:00

Lars commented

2026-03-23 18:05:27 +01:00

Priorit�t: Medium-High
Aufwand: ~8-10h

Problem

Viele Daten werden erfasst aber kaum visualisiert:

Gewicht: Nur Liste, kein Trend-Chart
Umf�nge: Nur Liste, kein Verlauf
Vitalwerte: Nur Stats-Zahlen, keine Graphen
Schlaf: Nur Stats, kein Verlaufs-Chart
Ruhetage: Nur Liste, keine Wochen-�bersicht

L�sung: Comprehensive Charts

1. Gewicht-Trends (WeightScreen.jsx)

Chart:

Line-Chart: Gewicht �ber Zeit (30/90/365 Tage)
Trendlinie (linear regression)
Zielgewicht als horizontale Linie (wenn Ziel gesetzt)

2. Umf�nge-Verlauf (CircumScreen.jsx)

Chart:

Multi-Line-Chart: Alle 8 Messpunkte �ber Zeit
Farbcodiert pro K�rperstelle
Toggle: Einzelne Linien ein/ausblenden

3. Vitalwerte-Trends (VitalsPage.jsx)

Charts:

Tab 1 (Baseline): RHR + HRV Verlauf (30 Tage)
Tab 2 (BP): Blutdruck-Chart mit Zonen-Markierung (WHO/ISH)
Trend-Indikatoren (???)

4. Schlaf-Analyse (SleepPage.jsx)

Charts:

Schlafdauer-Verlauf (14/30 Tage)
Schlafphasen-Verteilung (Stacked Bar)
Schlafqualit�t-Trend
Korrelation: Schlaf ? Ruhepuls n�chsten Tag

5. Ruhetage-Kalender (RestDaysPage.jsx)

Visualisierung:

Wochenkalender-View (4 Wochen)
Farbcodiert: Kraft/Cardio/Entspannung
Zeigt auch geplante Aktivit�ten

6. Aktivit�ts-Balance (History.jsx - erweitern)

Neue Charts:

Trainingstypen-Verteilung (schon vorhanden ?)
W�chentliche Trainingsminuten (Stacked Bar pro Typ)
HF-Zonen-Verteilung (wenn Daten vorhanden)
Intensit�ts-Heatmap (Kalender-View)

Tech-Stack

Library: Chart.js oder Recharts
Responsive Design
Loading States
Keine Daten ? Placeholder mit Call-to-Action

Betroffene Dateien

frontend/src/pages/WeightScreen.jsx
frontend/src/pages/CircumScreen.jsx
frontend/src/pages/VitalsPage.jsx
frontend/src/pages/SleepPage.jsx
frontend/src/pages/RestDaysPage.jsx
frontend/src/pages/History.jsx
frontend/src/components/charts/* (NEU)

Akzeptanzkriterien

Jedes Modul hat min. 1 aussagekr�ftigen Chart
Charts sind responsive (Mobile + Desktop)
Zeitraum-Filter (7/30/90/365 Tage)
Trend-Indikatoren sichtbar
Performance: Charts laden < 500ms

**Priorit�t:** Medium-High **Aufwand:** ~8-10h ## Problem Viele Daten werden erfasst aber kaum visualisiert: - Gewicht: Nur Liste, kein Trend-Chart - Umf�nge: Nur Liste, kein Verlauf - Vitalwerte: Nur Stats-Zahlen, keine Graphen - Schlaf: Nur Stats, kein Verlaufs-Chart - Ruhetage: Nur Liste, keine Wochen-�bersicht ## L�sung: Comprehensive Charts ### 1. Gewicht-Trends (WeightScreen.jsx) **Chart:** - Line-Chart: Gewicht �ber Zeit (30/90/365 Tage) - Trendlinie (linear regression) - Zielgewicht als horizontale Linie (wenn Ziel gesetzt) ### 2. Umf�nge-Verlauf (CircumScreen.jsx) **Chart:** - Multi-Line-Chart: Alle 8 Messpunkte �ber Zeit - Farbcodiert pro K�rperstelle - Toggle: Einzelne Linien ein/ausblenden ### 3. Vitalwerte-Trends (VitalsPage.jsx) **Charts:** - Tab 1 (Baseline): RHR + HRV Verlauf (30 Tage) - Tab 2 (BP): Blutdruck-Chart mit Zonen-Markierung (WHO/ISH) - Trend-Indikatoren (???) ### 4. Schlaf-Analyse (SleepPage.jsx) **Charts:** - Schlafdauer-Verlauf (14/30 Tage) - Schlafphasen-Verteilung (Stacked Bar) - Schlafqualit�t-Trend - Korrelation: Schlaf ? Ruhepuls n�chsten Tag ### 5. Ruhetage-Kalender (RestDaysPage.jsx) **Visualisierung:** - Wochenkalender-View (4 Wochen) - Farbcodiert: Kraft/Cardio/Entspannung - Zeigt auch geplante Aktivit�ten ### 6. Aktivit�ts-Balance (History.jsx - erweitern) **Neue Charts:** - Trainingstypen-Verteilung (schon vorhanden ?) - W�chentliche Trainingsminuten (Stacked Bar pro Typ) - HF-Zonen-Verteilung (wenn Daten vorhanden) - Intensit�ts-Heatmap (Kalender-View) ### Tech-Stack - Library: Chart.js oder Recharts - Responsive Design - Loading States - Keine Daten ? Placeholder mit Call-to-Action ### Betroffene Dateien - frontend/src/pages/WeightScreen.jsx - frontend/src/pages/CircumScreen.jsx - frontend/src/pages/VitalsPage.jsx - frontend/src/pages/SleepPage.jsx - frontend/src/pages/RestDaysPage.jsx - frontend/src/pages/History.jsx - frontend/src/components/charts/* (NEU) ### Akzeptanzkriterien - Jedes Modul hat min. 1 aussagekr�ftigen Chart - Charts sind responsive (Mobile + Desktop) - Zeitraum-Filter (7/30/90/365 Tage) - Trend-Indikatoren sichtbar - Performance: Charts laden < 500ms

Lars added the

feature

low

develop

labels 2026-03-23 18:05:27 +01:00

Lars referenced this issue from a commit

2026-03-26 15:26:21 +01:00

docs: comprehensive functional concept analysis

Sign in to join this conversation.