feat(frontend): add median statistic to wakeup and bedtime plots

frontend/src/components/stats/BedtimePlot.tsx

@@ -51,8 +51,13 @@ const BedtimePlot: React.FC<WakeupBedtimeProps> = ({ from_date, to_date, wakeup_
     const min = Math.min(...validMinutes);
     const max = Math.max(...validMinutes);
     const avg = validMinutes.reduce((sum, m) => sum + m, 0) / validMinutes.length;
+    const sorted = [...validMinutes].sort((a, b) => a - b);
+    const mid = Math.floor(sorted.length / 2);
+    const median = sorted.length % 2 !== 0
+      ? sorted[mid]
+      : (sorted[mid - 1] + sorted[mid]) / 2;
 
-    return { min, max, avg };
+    return { min, max, avg, median };
   }, [wakeupBedtime]);
 
   if (isLoading) return <div className="text-center p-4">Loading plot...</div>;
@@ -80,8 +85,8 @@ const BedtimePlot: React.FC<WakeupBedtimeProps> = ({ from_date, to_date, wakeup_
               domain={['dataMin - 30', 'dataMax + 30']}
             />
             <Tooltip
-             formatter={(value: number) => [
+              formatter={(value: unknown) => [
-               formatMinutesAfter(value, bedtime_ref),
+                typeof value === 'number' ? formatMinutesAfter(value, bedtime_ref) : String(value ?? ''),
                 'Bedtime',
               ]}
              labelFormatter={(label) => label}
@@ -97,7 +102,7 @@ const BedtimePlot: React.FC<WakeupBedtimeProps> = ({ from_date, to_date, wakeup_
         </LineChart>
       </ResponsiveContainer>
       {stats && (
-        <div className="mt-4 pt-4 border-t border-gray-100 grid grid-cols-3 gap-2 text-center">
+       <div className="mt-4 pt-4 border-t border-gray-100 grid grid-cols-4 gap-2 text-center">
            <div>
              <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Earliest</p>
              <p className="text-sm font-semibold text-gray-800">{formatMinutesAfter(stats.min, bedtime_ref)}</p>
@@ -110,6 +115,10 @@ const BedtimePlot: React.FC<WakeupBedtimeProps> = ({ from_date, to_date, wakeup_
               <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Average</p>
               <p className="text-sm font-semibold text-gray-800">{formatMinutesAfter(Math.round(stats.avg), bedtime_ref)}</p>
             </div>
+            <div>
+              <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Median</p>
+              <p className="text-sm font-semibold text-gray-800">{formatMinutesAfter(Math.round(stats.median), bedtime_ref)}</p>
+            </div>
          </div>
       )}
     </div>

frontend/src/components/stats/WakeupPlot.tsx

@@ -54,7 +54,13 @@ const WakeupPlot: React.FC<WakeupBedtimeProps> = ({ from_date, to_date, wakeup_r
       const max = Math.max(...validMinutes);
       const avg = validMinutes.reduce((sum, m) => sum + m, 0) / validMinutes.length;
 
-    return { min, max, avg };
+      const sorted = [...validMinutes].sort((a, b) => a - b);
+      const mid = Math.floor(sorted.length / 2);
+      const median = sorted.length % 2 !== 0
+        ? sorted[mid]
+        : (sorted[mid - 1] + sorted[mid]) / 2;
+
+      return { min, max, avg, median };
     }, [wakeupBedtime]);
 
   if (isLoading) return <div className="text-center p-4">Loading plot...</div>;
@@ -82,8 +88,8 @@ const WakeupPlot: React.FC<WakeupBedtimeProps> = ({ from_date, to_date, wakeup_r
              domain={['dataMin - 30', 'dataMax + 30']}
            />
             <Tooltip
-             formatter={(value: number) => [
+              formatter={(value: unknown) => [
-               formatMinutesAfter(value, wakeup_ref),
+                typeof value === 'number' ? formatMinutesAfter(value, wakeup_ref) : String(value ?? ''),
                 'Wakeup',
               ]}
              labelFormatter={(label) => label}
@@ -99,7 +105,7 @@ const WakeupPlot: React.FC<WakeupBedtimeProps> = ({ from_date, to_date, wakeup_r
         </LineChart>
       </ResponsiveContainer>
       {stats && (
-        <div className="mt-4 pt-4 border-t border-gray-100 grid grid-cols-3 gap-2 text-center">
+        <div className="mt-4 pt-4 border-t border-gray-100 grid grid-cols-4 gap-2 text-center">
           <div>
             <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Earliest</p>
             <p className="text-sm font-semibold text-gray-800">{formatMinutesAfter(stats.min, wakeup_ref)}</p>
@@ -112,6 +118,10 @@ const WakeupPlot: React.FC<WakeupBedtimeProps> = ({ from_date, to_date, wakeup_r
              <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Average</p>
              <p className="text-sm font-semibold text-gray-800">{formatMinutesAfter(Math.round(stats.avg), wakeup_ref)}</p>
            </div>
+           <div>
+             <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Median</p>
+             <p className="text-sm font-semibold text-gray-800">{formatMinutesAfter(Math.round(stats.median), wakeup_ref)}</p>
+           </div>
         </div>
       )}
     </div>