From 8eb5946108c88bbd2c496cb11e14700797a537b2 Mon Sep 17 00:00:00 2001
From: Jacob Hagstedt <jacob.hagstedt@gmail.com>
Date: Wed, 3 Jun 2026 13:37:17 +0200
Subject: [PATCH] feat(frontend): add median statistic to wakeup and bedtime
 plots

---
 frontend/src/components/stats/BedtimePlot.tsx | 45 +++++++++++--------
 frontend/src/components/stats/WakeupPlot.tsx  | 44 +++++++++++-------
 2 files changed, 54 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/stats/BedtimePlot.tsx b/frontend/src/components/stats/BedtimePlot.tsx
index a5db27a..87c60f5 100644
--- a/frontend/src/components/stats/BedtimePlot.tsx
+++ b/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>;
@@ -79,11 +84,11 @@ const BedtimePlot: React.FC<WakeupBedtimeProps> = ({ from_date, to_date, wakeup_
               tickFormatter={(value) => formatMinutesAfter(Number(value), bedtime_ref)}
               domain={['dataMin - 30', 'dataMax + 30']}
             />
-           <Tooltip
-             formatter={(value: number) => [
-               formatMinutesAfter(value, bedtime_ref),
-               'Bedtime',
-             ]}
+            <Tooltip
+              formatter={(value: unknown) => [
+                typeof value === 'number' ? formatMinutesAfter(value, bedtime_ref) : String(value ?? ''),
+                'Bedtime',
+              ]}
              labelFormatter={(label) => label}
            />
           <Line
@@ -97,20 +102,24 @@ 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>
-            <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>
-          </div>
-          <div>
-            <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Latest</p>
-            <p className="text-sm font-semibold text-gray-800">{formatMinutesAfter(stats.max, bedtime_ref)}</p>
-          </div>
+       <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">Average</p>
-             <p className="text-sm font-semibold text-gray-800">{formatMinutesAfter(Math.round(stats.avg), bedtime_ref)}</p>
+             <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>
            </div>
-        </div>
+           <div>
+             <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Latest</p>
+             <p className="text-sm font-semibold text-gray-800">{formatMinutesAfter(stats.max, bedtime_ref)}</p>
+           </div>
+            <div>
+              <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>
   );
diff --git a/frontend/src/components/stats/WakeupPlot.tsx b/frontend/src/components/stats/WakeupPlot.tsx
index bd22a09..9eff866 100644
--- a/frontend/src/components/stats/WakeupPlot.tsx
+++ b/frontend/src/components/stats/WakeupPlot.tsx
@@ -42,20 +42,26 @@ const WakeupPlot: React.FC<WakeupBedtimeProps> = ({ from_date, to_date, wakeup_r
     }).reverse();
   }, [wakeupBedtime, wakeup_ref]);
 
-  const stats = useMemo(() => {
-    if (!wakeupBedtime?.days) return null;
-    const validMinutes = wakeupBedtime.days
-      .map((day) => day.wakeup_minutes)
-      .filter((m): m is number => m !== null);
+    const stats = useMemo(() => {
+      if (!wakeupBedtime?.days) return null;
+      const validMinutes = wakeupBedtime.days
+        .map((day) => day.wakeup_minutes)
+        .filter((m): m is number => m !== null);
 
-    if (validMinutes.length === 0) return null;
+      if (validMinutes.length === 0) return null;
 
-    const min = Math.min(...validMinutes);
-    const max = Math.max(...validMinutes);
-    const avg = validMinutes.reduce((sum, m) => sum + m, 0) / validMinutes.length;
+      const min = Math.min(...validMinutes);
+      const max = Math.max(...validMinutes);
+      const avg = validMinutes.reduce((sum, m) => sum + m, 0) / validMinutes.length;
 
-    return { min, max, avg };
-  }, [wakeupBedtime]);
+      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>;
   if (!chartData.length) {
@@ -81,11 +87,11 @@ const WakeupPlot: React.FC<WakeupBedtimeProps> = ({ from_date, to_date, wakeup_r
              tickFormatter={(value) => formatMinutesAfter(Number(value), wakeup_ref)}
              domain={['dataMin - 30', 'dataMax + 30']}
            />
-           <Tooltip
-             formatter={(value: number) => [
-               formatMinutesAfter(value, wakeup_ref),
-               'Wakeup',
-             ]}
+            <Tooltip
+              formatter={(value: unknown) => [
+                typeof value === 'number' ? formatMinutesAfter(value, wakeup_ref) : String(value ?? ''),
+                'Wakeup',
+              ]}
              labelFormatter={(label) => label}
            />
           <Line
@@ -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>