Merge pull request #27 from TomPlum/develop

Sleep stage breakdown chart improvements
TomPlum · Nov 17, 2024 · c6a41eb · c6a41eb
2 parents d52b826 + 0237445
commit c6a41eb
Show file tree

Hide file tree

Showing 48 changed files with 1,274 additions and 166 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ A simple 2D line chart visualisation of my sleep data as recorded by my Apple Wa
 <!-- TOC -->
 
 # Examples
-- [Recent sleep quality vs awake time stacked charts](https://tomplum.github.io/sleep?metric=awake_time&start=1722911767000&end=1728182167000&lng=en&stacked=false&metrics=quality%2Cawake_time)
+- [Recent sleep quality vs awake time stacked charts](https://tomplum.github.io/sleep?metric=quality&start=1720652400000&end=1731283200000&lng=en&stacked=true&metrics=quality%2Cawake_time)
 - [Sleep quality over time across all recorded sessions](https://tomplum.github.io/sleep?metric=quality&start=1534457817000&end=1728199961000&lng=en&stacked=false&metrics=quality%2Cdeep_sleep)
 
 # Metrics

diff --git a/eslint.config.js b/eslint.config.js
@@ -27,6 +27,7 @@ export default tseslint.config(
       '@typescript-eslint/semi': 'off',
       'object-curly-spacing': ['error', 'always'],
       'quotes': ['error', 'single'],
+      'quote-props': ['error', 'as-needed'],
       'import/extensions': ['error', 'never', { 'json': 'always' }],
       'react-refresh/only-export-components': [
         'warn',

diff --git a/src/context/SleepContext.ts b/src/context/SleepContext.ts
@@ -9,6 +9,7 @@ export const SleepContext = createContext<SleepContextBag>({
     latestSession: new Date()
   },
   sleepStageData: {},
+  sleepSoundData: {},
   isSleepDataLoading: true,
   rangeStart: new Date(),
   setRangeStart: (start: Date) => {

diff --git a/src/context/SleepContextProvider.tsx b/src/context/SleepContextProvider.tsx
@@ -9,7 +9,7 @@ import { useRawSleepData } from 'data/useRawSleepData'
 
 export const SleepContextProvider = ({ children }: PropsWithChildren) => {
   const { i18n } = useTranslation()
-  const { sleepData, sessionStages, loading } = useRawSleepData()
+  const { sleepData, sessionStages, sessionSounds, loading } = useRawSleepData()
 
   const {
     currentMetric,
@@ -49,6 +49,7 @@ export const SleepContextProvider = ({ children }: PropsWithChildren) => {
   const value = useMemo<SleepContextBag>(() => ({
     sleepData,
     sleepStageData: sessionStages,
+    sleepSoundData: sessionSounds,
     isSleepDataLoading: loading,
     rangeStart: rangeStart ?? new Date(),
     setRangeStart,
@@ -63,7 +64,7 @@ export const SleepContextProvider = ({ children }: PropsWithChildren) => {
     setStackedView,
     stackedMetrics: stackedMetrics ?? [],
     setStackedMetrics: handleSetStackedMetrics
-  }), [currentMetric, handleSetStackedMetrics, improvementDate, loading, rangeEnd, rangeStart, sessionStages, setCurrentMetric, setRangeEnd, setRangeStart, setStackedView, sleepData, sleepGraphData2d, stackedMetrics, stackedView])
+  }), [currentMetric, handleSetStackedMetrics, improvementDate, loading, rangeEnd, rangeStart, sessionSounds, sessionStages, setCurrentMetric, setRangeEnd, setRangeStart, setStackedView, sleepData, sleepGraphData2d, stackedMetrics, stackedView])
 
   return (
     <SleepContext.Provider value={value}>

diff --git a/src/context/types.ts b/src/context/types.ts
@@ -2,7 +2,7 @@ import { PillowSleepData } from 'data/useSleepData'
 import { SleepMetric } from 'modules/controls/MetricConfiguration'
 import { SleepGraph2DDataResponse } from 'modules/graph/hooks/useSleepGraph2DData'
 import { Dispatch, SetStateAction } from 'react'
-import { RawSleepSessionStages } from 'data/useRawSleepData/types'
+import { RawSleepSessionSounds, RawSleepSessionStages } from 'data/useRawSleepData/types'
 
 
 export interface SleepContextBag {
@@ -20,6 +20,12 @@ export interface SleepContextBag {
    */
   sleepStageData: RawSleepSessionStages
 
+  /**
+   * A map of sleep sound data for a given sleep
+   * session ID.
+   */
+  sleepSoundData: RawSleepSessionSounds
+
   /**
    * Whether the read IO or conversion process of
    * the data is in progress.

diff --git a/src/data/useLinearRegression/useLinearRegression.spec.ts b/src/data/useLinearRegression/useLinearRegression.spec.ts
@@ -82,12 +82,12 @@ describe('Linear Regression Hook', () => {
 
     expect(result.current.regressionLineDeltaHorizontal).toStrictEqual([
       {
-        'xDate': 1724454000000,
-        'y': 59.99999932863284
+        xDate: 1724454000000,
+        y: 59.99999932863284
       },
       {
-        'xDate': 1724540400000,
-        'y': 59.99999932863284
+        xDate: 1724540400000,
+        y: 59.99999932863284
       }
     ])
   })
@@ -107,12 +107,12 @@ describe('Linear Regression Hook', () => {
 
     expect(result.current.regressionLineDeltaVertical).toStrictEqual([
       {
-        'xDate': 1724540400000,
-        'y': 59.99999932863284
+        xDate: 1724540400000,
+        y: 59.99999932863284
       },
       {
-        'xDate': 1724540400000,
-        'y': 19.99999932863284
+        xDate: 1724540400000,
+        y: 19.99999932863284
       }
     ])
   })

diff --git a/src/data/useSleepData/useSleepData.spec.ts b/src/data/useSleepData/useSleepData.spec.ts
@@ -40,88 +40,88 @@ describe('Sleep Data (CSV) Parsing Hook', () => {
       loading: false,
       error: null,
       sleepData: {
-        'earliestSession': new Date('2018-08-16T22:16:57.000Z'),
-        'latestSession': new Date('2018-08-21T06:00:21.000Z'),
+        earliestSession: new Date('2018-08-16T22:16:57.000Z'),
+        latestSession: new Date('2018-08-21T06:00:21.000Z'),
         sessions: [
           {
-            'audioRecordings': 65,
-            'duration': {
-              'awake': 90,
-              'deep': 130,
-              'light': 170,
-              'rem': 50,
-              'total': 440,
+            audioRecordings: 65,
+            duration: {
+              awake: 90,
+              deep: 130,
+              light: 170,
+              rem: 50,
+              total: 440,
             },
-            'endTime': new Date('2018-08-17T05:36:42.000Z'),
-            'id': 'session-0',
-            'isNap': false,
-            'mood': SleepMood.OK,
-            'sleepQuality': 56,
-            'startTime': new Date('2018-08-16T22:16:57.000Z'),
+            endTime: new Date('2018-08-17T05:36:42.000Z'),
+            id: 'session-0',
+            isNap: false,
+            mood: SleepMood.OK,
+            sleepQuality: 56,
+            startTime: new Date('2018-08-16T22:16:57.000Z'),
           },
           {
-            'audioRecordings': 69,
-            'duration': {
-              'awake': 420,
-              'deep': 330,
-              'light': 190,
-              'rem': 90,
-              'total': 513,
+            audioRecordings: 69,
+            duration: {
+              awake: 420,
+              deep: 330,
+              light: 190,
+              rem: 90,
+              total: 513,
            },
-            'endTime': new Date('2018-08-18T06:31:27.000Z'),
-            'id': 'session-1',
-            'isNap': false,
-            'mood': SleepMood.OK,
-            'sleepQuality': 50,
-            'startTime': new Date('2018-08-17T21:57:59.000Z'),
+            endTime: new Date('2018-08-18T06:31:27.000Z'),
+            id: 'session-1',
+            isNap: false,
+            mood: SleepMood.OK,
+            sleepQuality: 50,
+            startTime: new Date('2018-08-17T21:57:59.000Z'),
           },
           {
-            'audioRecordings': 12,
-            'duration': {
-              'awake': 67,
-              'deep': 190,
-              'light': 190,
-              'rem': 70,
-              'total': 517,
+            audioRecordings: 12,
+            duration: {
+              awake: 67,
+              deep: 190,
+              light: 190,
+              rem: 70,
+              total: 517,
             },
-            'endTime': new Date('2018-08-19T07:30:35.000Z'),
-            'id': 'session-2',
-            'isNap': false,
-            'mood': SleepMood.GOOD,
-            'sleepQuality': 72,
-            'startTime': new Date('2018-08-18T22:53:27.000Z'),
+            endTime: new Date('2018-08-19T07:30:35.000Z'),
+            id: 'session-2',
+            isNap: false,
+            mood: SleepMood.GOOD,
+            sleepQuality: 72,
+            startTime: new Date('2018-08-18T22:53:27.000Z'),
           },
           {
-            'audioRecordings': 5,
-            'duration': {
-              'awake': 102,
-              'deep': 150,
-              'light': 160,
-              'rem': 30,
-              'total': 442,
+            audioRecordings: 5,
+            duration: {
+              awake: 102,
+              deep: 150,
+              light: 160,
+              rem: 30,
+              total: 442,
             },
-            'endTime': new Date('2018-08-20T06:00:39.000Z'),
-            'id': 'session-3',
-            'isNap': false,
-            'mood': SleepMood.UNKNOWN,
-            'sleepQuality': 56,
-            'startTime': new Date('2018-08-19T22:38:42.000Z'),
+            endTime: new Date('2018-08-20T06:00:39.000Z'),
+            id: 'session-3',
+            isNap: false,
+            mood: SleepMood.UNKNOWN,
+            sleepQuality: 56,
+            startTime: new Date('2018-08-19T22:38:42.000Z'),
           },
           {
-            'audioRecordings': 9,
-            'duration': {
-              'awake': 45,
-              'deep': 150,
-              'light': 240,
-              'rem': 70,
-              'total': 505,
+            audioRecordings: 9,
+            duration: {
+              awake: 45,
+              deep: 150,
+              light: 240,
+              rem: 70,
+              total: 505,
             },
-            'endTime': new Date('2018-08-21T06:00:21.000Z'),
-            'id': 'session-4',
-            'isNap': false,
-            'mood': SleepMood.GOOD,
-            'sleepQuality': 76,
-            'startTime': new Date('2018-08-20T21:35:34.000Z'),
+            endTime: new Date('2018-08-21T06:00:21.000Z'),
+            id: 'session-4',
+            isNap: false,
+            mood: SleepMood.GOOD,
+            sleepQuality: 76,
+            startTime: new Date('2018-08-20T21:35:34.000Z'),
           }
         ]
       }

diff --git a/src/env.ts b/src/env.ts
@@ -0,0 +1,16 @@
+/**
+ * A utility function to return the current
+ * Vite mode. Mostly introduced to be able
+ * to mock the mode in Vitest tests.
+ */
+export const env = () => {
+  return import.meta.env.MODE
+}
+
+/**
+ * Checks if the current Vite mode is production.
+ * @returns true if the current mode is production, else false.
+ */
+export const isProduction = (): boolean => {
+  return env() === 'production'
+}
diff --git a/src/hooks/useQueryParams/types.ts b/src/hooks/useQueryParams/types.ts
@@ -19,6 +19,7 @@ export interface SleepQueryParams {
   end?: Date
   lng?: string
   stacked?: boolean
+  selected?: number
 }
 
 export interface QueryParamsResponse {

diff --git a/src/hooks/useQueryParams/useQueryParams.ts b/src/hooks/useQueryParams/useQueryParams.ts
@@ -34,7 +34,8 @@ export const useQueryParams = (): QueryParamsResponse => {
       end: searchParams.has('end') ? new Date(Number(searchParams.get('end'))) : undefined,
       lng: searchParams.get('lng') ?? 'en',
       stacked: searchParams.has('stacked') ? searchParams.get('stacked') === 'true' : undefined,
-      metrics: searchParams.has('metrics') ? searchParams.get('metrics')?.split(',') as SleepMetric[] : undefined
+      metrics: searchParams.has('metrics') ? searchParams.get('metrics')?.split(',') as SleepMetric[] : undefined,
+      selected: searchParams.get('selected') ? Number(searchParams.get('selected')) : undefined,
     }
   }, [searchParams])
 

diff --git a/src/modules/graph/SleepSessionsGraph3D.tsx b/src/modules/graph/SleepSessionsGraph3D.tsx
@@ -17,7 +17,6 @@ interface LinkConfig {
 export const SleepSessionsGraph3D = () => {
   const graphRef = useRef<ForceGraphMethods>()
   const { sleepData, loading } = useSleepData()
-  console.log(sleepData)
 
   useEffect(() => {
    if (graphRef.current) {
@@ -94,11 +93,9 @@ export const SleepSessionsGraph3D = () => {
       links
     }
   }, [sleepData?.sessions])
-  console.log('Graph Data', graphData)
 
   // @ts-expect-error to fix later if I come back
   const linkColor = useCallback(link => {
-    console.log(link.source)
     switch(link.source.group) {
       case 'sleepQuality': {
         return '#9a30fe'

diff --git a/src/modules/graph/components/DurationBreakdownPie/DurationBreakdownPie.tsx b/src/modules/graph/components/DurationBreakdownPie/DurationBreakdownPie.tsx
@@ -43,6 +43,8 @@ export const DurationBreakdownPie = ({ data }: DurationBreakdownPieProps) => {
         outerRadius={80}
         stroke='#0e0e0e'
         labelLine={false}
+        animationBegin={0}
+        animationDuration={500}
         label={renderCustomizedLabel}
       >
         {pieData.map(({ metric }, index) => (

diff --git a/src/modules/graph/components/SleepSessionInfo/SleepSessionInfo.module.scss b/src/modules/graph/components/SleepSessionInfo/SleepSessionInfo.module.scss
@@ -6,6 +6,7 @@
   .info {
     width: 15%;
     display: flex;
+    flex-direction: column;
     padding: 15px;
   }
 }