Merge pull request #565 from lifeomic/sleep-chart-bug-fixes

fix: Sleep Chart Bug Fixes

Author: sternetj

src/components/MyData/SleepChart/DailyChart.tsx

@@ -175,10 +175,12 @@ export const DailyChart = (props: Props) => {
         <ActivityIndicatorView animating={isFetching} />
       </View>
 
-      <DataSelector
-        onBlockScrollChange={onBlockScrollChange}
-        prepareTooltipData={prepareTooltipData}
-      />
+      {data.length > 0 && (
+        <DataSelector
+          onBlockScrollChange={onBlockScrollChange}
+          prepareTooltipData={prepareTooltipData}
+        />
+      )}
     </View>
   );
 };

src/components/MyData/SleepChart/MultiDayChart.tsx

@@ -207,10 +207,12 @@ export const MultiDayChart = (props: Props) => {
         <ActivityIndicatorView animating={isFetching} />
       </View>
 
-      <DataSelector
-        onBlockScrollChange={onBlockScrollChange}
-        prepareTooltipData={prepareTooltipData}
-      />
+      {data.length > 0 && (
+        <DataSelector
+          onBlockScrollChange={onBlockScrollChange}
+          prepareTooltipData={prepareTooltipData}
+        />
+      )}
     </View>
   );
 };
@@ -226,6 +228,10 @@ const SleepBar = (props: BarProps) => {
   };
   let total = 0;
 
+  if (props.datum.components.length === 0) {
+    return null;
+  }
+
   props.datum.components.forEach((component: ObservationComponent) => {
     if (!component?.valuePeriod?.start || !component?.valuePeriod?.end) {
       return;

src/components/MyData/SleepChart/useSleepChartData.ts

@@ -1,7 +1,14 @@
 import { useEffect, useState } from 'react';
 import { useFhirClient } from '../../../hooks';
 import { ScaleTime, scaleTime } from 'd3-scale';
-import { differenceInDays, min, max, startOfDay, endOfDay } from 'date-fns';
+import {
+  differenceInDays,
+  min,
+  max,
+  startOfDay,
+  endOfDay,
+  isValid,
+} from 'date-fns';
 import { useCommonChartProps } from '../useCommonChartProps';
 import { Observation } from 'fhir/r3';
 import compact from 'lodash/compact';
@@ -87,9 +94,12 @@ export const useSleepChartData = (props: Props) => {
         {} as { start?: Date; end?: Date },
       );
 
+      const startDate = start && isValid(start) ? start : new Date(0);
+      const endDate = end && isValid(end) ? end : new Date(0);
+
       const newXDomain = scaleTime()
         .range([0, common.plotAreaWidth])
-        .domain([new Date(start ?? 0), new Date(end ?? 0)]);
+        .domain([startDate, endDate]);
 
       setChartData({ sleepData: newSleepData, xDomain: newXDomain, dateRange });
       setIsLoading(false);

src/screens/MyDataScreen.tsx

@@ -110,6 +110,7 @@ export const MyDataScreen = () => {
         {config?.homeTab?.myDataSettings?.components.map((component, index) => (
           <React.Fragment key={`${component.type}-${index}`}>
             <View
+              style={styles.chartWrapperContainer}
               onLayout={(e) => {
                 chartDimensions.current[index] = e.nativeEvent.layout;
               }}
@@ -327,6 +328,9 @@ const defaultStyles = createStyles('MyDataScreen', (theme) => ({
     marginBottom: 24,
     marginTop: 5,
   },
+  chartWrapperContainer: {
+    width: '100%',
+  },
 }));
 
 declare module '@styles' {