feat(MoodBySleepForPeriod): add chart

client/src/components/pages/Stats/Explore/index.tsx

@@ -8,6 +8,7 @@ import LocationsForPeriod from "../LocationsForPeriod";
 import MeditationImpactForPeriod from "../MeditationImpactForPeriod";
 import MoodByHourForPeriod from "../MoodByHourForPeriod";
 import MoodByLocationForPeriod from "../MoodByLocationForPeriod";
+import MoodBySleepForPeriod from "../MoodBySleepForPeriod";
 import MoodByWeekdayForPeriod from "../MoodByWeekdayForPeriod";
 import MoodChartForPeriod from "../MoodChartForPeriod";
 import MoodCloudForPeriod from "../MoodCloudForPeriod";
@@ -248,6 +249,7 @@ export default function Explore() {
           />
         </>
       ) : null}
+      <MoodBySleepForPeriod dateFrom={localState.dateFrom} dateTo={dateTo} />
       <WeightChartForPeriod
         dateFrom={localState.dateFrom}
         dateTo={dateTo}

client/src/components/pages/Stats/Month.tsx

@@ -25,6 +25,7 @@ import LocationsForPeriod from "./LocationsForPeriod";
 import MeditationImpactForPeriod from "./MeditationImpactForPeriod";
 import MoodByHourForPeriod from "./MoodByHourForPeriod";
 import MoodByLocationForPeriod from "./MoodByLocationForPeriod";
+import MoodBySleepForPeriod from "./MoodBySleepForPeriod";
 import MoodByWeekdayForPeriod from "./MoodByWeekdayForPeriod";
 import MoodCalendarForMonth from "./MoodCalendarForMonth";
 import MoodCell from "../../shared/MoodCell";
@@ -171,6 +172,7 @@ function Month({ date, nextDate, prevDate, showNext, showPrevious }: Props) {
           <p>No mood data for this month.</p>
         </Paper>
       )}
+      <MoodBySleepForPeriod dateFrom={date} dateTo={nextDate} />
       <WeightChartForPeriod
         dateFrom={date}
         dateTo={nextDate}

client/src/components/pages/Stats/MoodBySleepForPeriod.tsx

@@ -0,0 +1,77 @@
+import { Chart, Paper } from "eri";
+import { MOOD_INTEGERS, MOOD_RANGE } from "../../../constants";
+import {
+  computeMean,
+  defaultDict,
+  getIdsInInterval,
+  moodToColor,
+} from "../../../utils";
+import eventsSlice from "../../../store/eventsSlice";
+import { useSelector } from "react-redux";
+
+interface Props {
+  dateFrom: Date;
+  dateTo: Date;
+}
+
+export default function MoodBySleepForPeriod({ dateFrom, dateTo }: Props) {
+  const meanMoodsByDay = useSelector(eventsSlice.selectors.meanMoodsByDay);
+  const minutesSleptByDateAwoke = useSelector(
+    eventsSlice.selectors.minutesSleptByDateAwoke,
+  );
+  const minutesSleptKeys = getIdsInInterval(
+    Object.keys(minutesSleptByDateAwoke),
+    dateFrom,
+    dateTo,
+  );
+  const meanMoodsKeys = getIdsInInterval(
+    Object.keys(meanMoodsByDay),
+    dateFrom,
+    dateTo,
+  );
+  if (minutesSleptKeys.length < 2 || meanMoodsKeys.length < 2) return;
+  const meanMoodsKeysSet = new Set(meanMoodsKeys);
+  const intersectingKeys = minutesSleptKeys.filter((key) =>
+    meanMoodsKeysSet.has(key),
+  );
+  if (intersectingKeys.length < 2) return;
+
+  const points = intersectingKeys.map((key) => {
+    const y = meanMoodsByDay[key];
+    return {
+      color: moodToColor(y),
+      x: minutesSleptByDateAwoke[key] / 60,
+      y,
+    };
+  });
+
+  const ysByX = defaultDict((): number[] => []);
+  // Round to nearest 12 for a resolution of 5 minutes
+  for (const { x, y } of points) ysByX[Math.round(x * 12) / 12].push(y);
+  const linePoints = Object.keys(ysByX).map((x) => ({
+    x: Number(x),
+    y: computeMean(ysByX[x]),
+  }));
+
+  return (
+    <Paper>
+      <h3>Average mood by time slept</h3>
+      <Chart.LineChart
+        aria-label="Chart displaying mood against time slept"
+        domain={[0, Math.ceil(Math.max(...points.map(({ x }) => x)) / 5) * 5]}
+        points={points}
+        range={MOOD_RANGE}
+        xAxisTitle="Hours slept"
+        yAxisLabels={MOOD_INTEGERS.map(String)}
+        yAxisTitle="Mood"
+      >
+        <Chart.Line
+          thickness={2}
+          data={linePoints
+            .map(({ x, y }): [number, number] => [x, y])
+            .sort(([a], [b]) => a - b)}
+        />
+      </Chart.LineChart>
+    </Paper>
+  );
+}

client/src/components/pages/Stats/Week.tsx

@@ -17,6 +17,7 @@ import LocationsForPeriod from "./LocationsForPeriod";
 import MeditationImpactForPeriod from "./MeditationImpactForPeriod";
 import MoodByHourForPeriod from "./MoodByHourForPeriod";
 import MoodByLocationForPeriod from "./MoodByLocationForPeriod";
+import MoodBySleepForPeriod from "./MoodBySleepForPeriod";
 import MoodByWeekdayForPeriod from "./MoodByWeekdayForPeriod";
 import MoodChartForPeriod from "./MoodChartForPeriod";
 import MoodCloud from "./MoodCloud";
@@ -120,6 +121,7 @@ function Week({ date, nextDate, prevDate, showNext, showPrevious }: Props) {
         </Paper>
       )}
       <SleepChartForWeek dateFrom={date} />
+      <MoodBySleepForPeriod dateFrom={date} dateTo={nextDate} />
       <WeightChartForPeriod
         centerXAxisLabels
         dateFrom={date}

client/src/components/pages/Stats/Year/index.tsx

@@ -18,6 +18,7 @@ import MeditationImpactForPeriod from "../MeditationImpactForPeriod";
 import MoodByHourForPeriod from "../MoodByHourForPeriod";
 import MoodByLocationForPeriod from "../MoodByLocationForPeriod";
 import MoodByMonthForPeriod from "./MoodByMonthForPeriod";
+import MoodBySleepForPeriod from "../MoodBySleepForPeriod";
 import MoodByWeekdayForPeriod from "../MoodByWeekdayForPeriod";
 import MoodCalendarForMonth from "../MoodCalendarForMonth";
 import MoodChartForPeriod from "../MoodChartForPeriod";
@@ -149,6 +150,7 @@ function Year({ date, nextDate, prevDate, showNext, showPrevious }: Props) {
         dateTo={nextDate}
         xLabels={xLabels}
       />
+      <MoodBySleepForPeriod dateFrom={date} dateTo={nextDate} />
       <WeightChartForPeriod
         centerXAxisLabels
         dateFrom={date}