Reports screen: SleepPieChart added && report time bugfix

alperengozum · Jan 1, 2024 · e612b1d · e612b1d
1 parent ba01575
commit e612b1d
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 20 deletions.
diff --git a/app.config.ts b/app.config.ts
diff --git a/app.json b/app.json
@@ -1,9 +1,9 @@
 {
   "displayName": "Sleepwell",
   "expo": {
-    "name": "sleepwell-expo",
-    "slug": "sleepwell-expo",
-    "version": "1.0.0",
+    "name": "Sleepwell",
+    "slug": "Sleepwell",
+    "version": "0.2",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
@@ -33,5 +33,9 @@
     "plugins": [
       "expo-localization"
     ]
+  },
+  "react-native-google-mobile-ads": {
+    "android_app_id": "ca-app-pub-------~------",
+    "ios_app_id": "ca-app-pub--------~------"
   }
 }
diff --git a/src/components/charts/SleepIndicatorChart.tsx b/src/components/charts/SleepIndicatorChart.tsx
@@ -23,7 +23,7 @@ export const SleepIndicatorChart = ({sleeps}: { sleeps: Array<Sleep> | undefined
         }
 
         return (
-          <GenericCard style={{marginVertical: 10, backgroundColor: "#440e6a", display: "flex"}}>
+          <GenericCard style={{marginVertical: 10, backgroundColor: "#3d0c5f", display: "flex"}}>
             <HStack my={5} mr={5} justifyContent="space-between" alignItems="center" textAlign="center"
                     divider={<Divider/>}>
               <VStack mx={5} flex={1} alignItems="center">

diff --git a/src/components/charts/SleepPieChart.tsx b/src/components/charts/SleepPieChart.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import {GenericCard} from "../cards/GenericCard";
+import {Dimensions} from "react-native";
+import {Sleep} from "../../store/SleepStore";
+import {Observer} from "mobx-react";
+import {LineChart, PieChart} from "react-native-chart-kit";
+import {Text} from "native-base";
+
+const sleepColors = ["#f3e8ff", "#e9d5ff", "#d8b4fe", "#c084fc", "#a855f7", "#9333ea", "#7e22ce", "#6b21a8", "#581c87", "#4c1d95", "#4527a0", "#382b7f", "#2d3a59", "#27303f", "#1e213a"]
+
+export const SleepPieChart = ({sleeps}: {sleeps: Array<Sleep> | undefined }) => {
+  return (
+    <Observer>
+      {() => {
+        let data: { name: string; value: number; color: string; legendFontColor: string }[] | undefined = sleeps?.reduce((acc, sleep, i) => {
+          if (sleep.cycle !== undefined) {
+            const existingIndex = acc.findIndex((item) => item.name === `${sleep.cycle} Cycles`);
+
+            if (existingIndex !== -1) {
+              acc[existingIndex].value += 1;
+            } else {
+              acc.push({
+                name: `${sleep.cycle} Cycles`,
+                value: 1,
+                color: sleepColors[i % sleepColors.length],
+                legendFontColor: "white",
+              });
+            }
+          }
+          return acc;
+        }, [] as { name: string; value: number; color: string; legendFontColor: string }[]);
+
+        if (!data || data.length == 0) {
+          data = [{
+            name: "No Sleep Data",
+            value: 100,
+            color: "white",
+            legendFontColor: "white",
+          }]
+        }
+
+        return (
+          <GenericCard style={{marginVertical: 10, backgroundColor: "#360b54", marginTop: 5}}>
+            <Text color="white" fontSize="md" bold textAlign="center">Sleep Cycles</Text>
+            <PieChart
+              data={data}
+              accessor={"value"}
+              backgroundColor={"#360b54"}
+              width={Dimensions.get("window").width}
+              height={Dimensions.get("window").height / 3}
+              paddingLeft={"15"}
+              center={[10, 0]}
+              chartConfig={{
+                decimalPlaces: 0,
+                color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
+                labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
+              }}
+              style={{borderRadius: 20}}
+            />
+          </GenericCard>);
+      }}
+    </Observer>
+  );
+};
diff --git a/src/components/lists/ReportsList.tsx b/src/components/lists/ReportsList.tsx
@@ -9,6 +9,7 @@ import Ionicons from "react-native-vector-icons/Ionicons";
 import {SleepIndicatorChart} from "../charts/SleepIndicatorChart";
 import {SleepLineChart} from "../charts/SleepLineChart";
 import {getMonthBefore} from "../../utils/DateUtils";
+import {SleepPieChart} from "../charts/SleepPieChart";
 
 interface List {
   name: string | number;
@@ -38,7 +39,7 @@ export const ReportsList = ({selectedDate, setSelectedDate}: ReportsListProps) =
   const getSleeps = () => {
     return SleepStore.getSleeps(SleepType.SLEEP, {
       start: selectedDate?.start || getMonthBefore(),
-      end: selectedDate?.end || new Date()
+      end: selectedDate?.end || new Date(new Date().setHours(0, 0, 0, 0))
     })
   }
   const buildList = (): Array<List> => {
@@ -73,6 +74,7 @@ export const ReportsList = ({selectedDate, setSelectedDate}: ReportsListProps) =
           }}>
             <SleepLineChart sleeps={getSleeps()}/>
             <SleepIndicatorChart sleeps={getSleeps()}/>
+            <SleepPieChart sleeps={getSleeps()}/>
           </GenericHeaderCard>
         );
       case ListType.ITEM:

diff --git a/src/screen/Reports.tsx b/src/screen/Reports.tsx
@@ -8,14 +8,14 @@ import {useFocusEffect} from "@react-navigation/native";
 export default function Reports() {
   const [selectedDate, setSelectedDate] = React.useState<SleepFilter>({
     start: getMonthBefore(),
-    end: new Date()
+    end: new Date(new Date().setHours(0, 0, 0, 0))
   });
 
   useFocusEffect(React.useCallback(() => {
     return () => {
       setSelectedDate({
         start: getMonthBefore(),
-        end: new Date()
+        end: new Date(new Date().setHours(0, 0, 0, 0))
       });
     };
   }, []))