38 lines
2.1 KiB
Markdown
38 lines
2.1 KiB
Markdown
# Plan: Add Median Statistic to Wakeup and Bedtime Plots
|
|
|
|
## Overview
|
|
The goal is to add a fourth statistic, "Median", to the summary section below the Wakeup and Bedtime trend graphs in `WakeupPlot.tsx` and `BedtimePlot.tsx`. Currently, these components display "Earliest", "Latest", and "Average".
|
|
|
|
## Detailed Tasks
|
|
|
|
### 1. Update `frontend/src/components/stats/WakeupPlot.tsx`
|
|
- **Sub-task 1.1: Update Statistics Calculation**
|
|
- Locate the `stats` `useMemo` block.
|
|
- Calculate the median of `validMinutes`.
|
|
- *Note*: To calculate the median, sort the array and pick the middle element (or average of two middle elements if even).
|
|
- Include `median` in the returned object: `{ min, max, avg, median }`.
|
|
- **Sub-task 1.2: Update UI Layout**
|
|
- Find the statistics container div (currently `grid grid-cols-3`).
|
|
- Change the Tailwind class from `grid-cols-3` to `grid-cols-4`.
|
|
- **Sub-task 1.3: Add Median Display**
|
|
- Add a new `div` for the "Median" statistic.
|
|
- Use identical styling to the existing three blocks.
|
|
- Display the value using `formatMinutesAfter(Math.round(stats.median), wakeup_ref)`.
|
|
|
|
### 2. Update `frontend/src/components/stats/BedtimePlot.tsx`
|
|
- **Sub-task 2.1: Update Statistics Calculation**
|
|
- Locate the `stats` `useMemo` block.
|
|
- Calculate the median of `validMinutes`.
|
|
- Include `median` in the returned object: `{ min, max, avg, median }`.
|
|
- **Sub-task 2.2: Update UI Layout**
|
|
- Find the statistics container div (currently `grid grid-cols-3`).
|
|
- Change the Tailwind class from `grid-cols-3` to `grid-cols-4`.
|
|
- **Sub-task 2.3: Add Median Display**
|
|
- Add a new `div` for the "Median" statistic.
|
|
- Use identical styling to the existing three blocks.
|
|
- Display the value using `formatMinutesAfter(Math.round(stats.median), bedtime_ref)`.
|
|
|
|
## Verification Plan
|
|
1. **Visual Inspection**: Ensure the four statistics are evenly spaced and aligned in a single row below each graph.
|
|
2. **Logic Check**: Manually verify with a small set of known numbers (e.g., [10, 20, 30] -> median 20; [10, 20, 30, 40] -> median 25) that the calculation is correct.
|