Merge pull request #287 from COS301-SE-2024/feat/mobile/occupancy-int…

…egration

Feat/mobile/occupancy integration

frontend/occupi-mobile-backup/screens/Login/SignUp.tsx

@@ -34,7 +34,7 @@ import { Controller, useForm } from 'react-hook-form';
 import { AlertTriangle, EyeIcon, EyeOffIcon } from 'lucide-react-native';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Keyboard } from 'react-native';
+import { Keyboard, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
 // import { FacebookIcon, GoogleIcon } from './assets/Icons/Social';
 import StyledExpoRouterLink from '../../components/StyledExpoRouterLink';
 import { router } from 'expo-router';
@@ -161,14 +161,14 @@ const SignUpForm = () => {
   };
 
   return (
-    <>
+    <KeyboardAvoidingView>
       <VStack justifyContent="space-between">
         <FormControl
           isInvalid={(!!errors.email || isEmailFocused) && !!errors.email}
           isRequired={true}
         >
           <FormControlLabel mb="$1">
-            <FormControlLabelText fontWeight="$normal">Deloitte Email Address</FormControlLabelText>
+            <FormControlLabelText fontWeight="$normal">Deloitte Email Addss</FormControlLabelText>
           </FormControlLabel>
           <Controller
             name="email"
@@ -418,7 +418,7 @@ const SignUpForm = () => {
           text="Signup"
         />
       )}
-    </>
+    </KeyboardAvoidingView>
   );
 };
 
@@ -509,14 +509,14 @@ function SignUpFormComponent() {
 
 export default function SignUp() {
   return (
-    <View flex="$1" pt="$12" backgroundColor='white'>
+    <ScrollView>
+    <View pt="$12" backgroundColor='white'>
       <Box
         sx={{
           '@md': {
             display: 'flex',
           },
         }}
-        flex={1}
         display="none"
       >
         {/* <SideContainerWeb /> */}
@@ -525,5 +525,6 @@ export default function SignUp() {
         <SignUpFormComponent />
       </Box>
     </View>
+    {/* // </ScrollView> */}
   );
 }

frontend/occupi-mobile4/components/LineGraph.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react'
+import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
+import {
+    View,
+  } from '@gluestack-ui/themed';
+  import * as SecureStore from 'expo-secure-store';
+  import { LineChart } from "react-native-gifted-charts"
+import { useColorScheme } from 'react-native';
+import { useTheme } from './ThemeContext';
+
+const LineGraph = (data) => {
+  const colorscheme = useColorScheme();
+  const { theme } = useTheme();
+  const currentTheme = theme === "system" ? colorscheme : theme;
+    // console.log(data.data);
+    const labels = currentTheme === 'dark' ? "lightgray" : "darkgrey";
+    const [accentColour, setAccentColour] = useState<string>('greenyellow');
+    useEffect(() => {
+        const getAccentColour = async () => {
+          let accentcolour = await SecureStore.getItemAsync('accentColour');
+          setAccentColour(accentcolour);
+        };
+        getAccentColour();
+      }, []);
+  return (
+    <View
+        style={{ width: wp('100%'), height: hp('35%'), flexDirection: 'column' }}
+        // style={{
+        //   // marginVertical: 100,
+        //   paddingVertical: 20,
+        //   backgroundColor: '#414141',
+        // }}
+        >
+        <LineChart
+          isAnimated
+          width={wp('80%')}
+          thickness={3}
+          color={accentColour}
+          maxValue={5}
+          noOfSections={5}
+          // hideRules
+          animateOnDataChange
+          animationDuration={1000}
+          onDataChangeAnimationDuration={300}
+          areaChart
+          endSpacing={0}
+          yAxisTextStyle={{color: labels}}
+          xAxisLabelTextStyle={{color: labels}}
+          data={data.data}
+          hideDataPoints
+          startFillColor={accentColour}
+          endFillColor={accentColour}
+          startOpacity={0.5}
+          endOpacity={0.1}
+          spacing={47}
+          backgroundColor={currentTheme === 'dark' ? "#414141" : "white"}
+          // showVerticalLines
+          // verticalLinesColor="rgba(14,164,164,0.5)"
+          // rulesColor="gray"
+          rulesType="dashed"
+          initialSpacing={20}
+          yAxisColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
+          xAxisColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
+        />
+      </View>
+  )
+}
+
+export default LineGraph