36 lines
1.8 KiB
Markdown
36 lines
1.8 KiB
Markdown
|
|
# Date Navigation Feature - Walkthrough
|
|
|
|
We have implemented a Date Navigation feature for the Health Dashboard, allowing you to explore historical health data.
|
|
|
|
## Features Added
|
|
|
|
1. **Date Navigator UI**:
|
|
* Added `Previous` (<) and `Next` (>) arrow buttons.
|
|
* Added a central Date Display text (e.g., "Today", "Dec 21", "Dec 20 - Dec 26").
|
|
* Responsive design: Visible on both mobile and desktop.
|
|
* Styled with TailwindCSS for a clean, professional look consistent with the existing theme.
|
|
|
|
2. **Navigation Logic**:
|
|
* **Day View**: Moves back/forward by 1 day.
|
|
* **Week View**: Moves back/forward by 7 days.
|
|
* **Month View**: Moves back/forward by 1 month.
|
|
* The Date Display updates dynamically to reflect the current period.
|
|
|
|
3. **Backend Updates**:
|
|
* Updated `/api/health/stats` endpoint to accept a `ref_date` parameter.
|
|
* Modified database queries to filtering data `between(start, end)` based on the selected reference date.
|
|
* This ensures you can view past weeks and months accurately.
|
|
|
|
4. **UX Improvements**:
|
|
* **Empty State Handling**: If you navigate to a date with no data, the dashboard fields reset to `--` placeholders instead of showing stale data from the previous view.
|
|
* **Loading Feedback**: Existing toast notifications indicate if data loading fails.
|
|
|
|
## How to Verification
|
|
|
|
1. Open the Health Dashboard.
|
|
2. You should see the new Date Navigator explicitly to the left of the "Day/Week/Month" toggle.
|
|
3. Click `<` to go back in time. The data (steps, sleep, heart rate, etc.) should update.
|
|
4. Switch to "Week" view. The date text should show a range (e.g., "Dec 15 - Dec 21").
|
|
5. Click `>` to return to recent dates. "Today" will be displayed when you are back to the current date.
|