babymonitor/plan.md

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.