Skip to content

Commit

Permalink
Merge pull request #418 from COS301-SE-2024/mobile/feat/analytics
Browse files Browse the repository at this point in the history
Mobile/feat/analytics
  • Loading branch information
KamogeloMoeketse authored Oct 1, 2024
2 parents e8a09b8 + 4c72da9 commit 93e3d8b
Show file tree
Hide file tree
Showing 76 changed files with 9,430 additions and 2,755 deletions.
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
#Thu Jul 04 00:58:00 SAST 2024
gradle.version=8.1.1
#Thu Sep 26 13:00:57 CAT 2024
gradle.version=8.9
Binary file not shown.
11 changes: 10 additions & 1 deletion frontend/occupi-mobile4/app.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
"icon": "./assets/images/icon.png",
"scheme": "myapp",
"userInterfaceStyle": "automatic",
"assetBundlePatterns": [
"**/*"
],
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
Expand Down Expand Up @@ -46,7 +49,13 @@
"expo-secure-store",
"expo-location",
"expo-notifications",
"expo-sensors"
"expo-sensors",
[
"expo-av",
{
"microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone."
}
]
],
"experiments": {
"typedRoutes": true
Expand Down
80 changes: 43 additions & 37 deletions frontend/occupi-mobile4/app/_layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import 'react-native-reanimated';
import { GluestackUIProvider } from "@gluestack-ui/themed";
import { ThemeProvider } from '@/components/ThemeContext';
import { NavBarProvider } from '@/components/NavBarProvider';
import { config } from "@gluestack-ui/config"; // Optional if you want to use default theme
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { config } from "@gluestack-ui/config";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
Expand All @@ -32,40 +32,46 @@ export default function RootLayout() {
const theme = colorScheme === 'dark' ? DarkTheme : DefaultTheme;

return (
<GluestackUIProvider config={config} theme={theme}>
<ThemeProvider>
<NavBarProvider>
<Stack>
<Stack.Screen name="index" options={{ headerShown: false }} />
<Stack.Screen name="login" options={{ headerShown: false }} />
<Stack.Screen name="signup" options={{ headerShown: false }} />
<Stack.Screen name="forgot-password" options={{ headerShown: false }} />
<Stack.Screen name="verify-otp" options={{ headerShown: false }} />
<Stack.Screen name="create-password" options={{ headerShown: false }} />
<Stack.Screen name="home" options={{ headerShown: false }} />
<Stack.Screen name="bookings" options={{ headerShown: false }} />
<Stack.Screen name="viewbookings" options={{ headerShown: false }} />
<Stack.Screen name="notifications" options={{ headerShown: false }} />
<Stack.Screen name="onboarding1" options={{ headerShown: false }} />
<Stack.Screen name="onboarding2" options={{ headerShown: false }} />
<Stack.Screen name="onboarding3" options={{ headerShown: false }} />
<Stack.Screen name="profile" options={{ headerShown: false }} />
<Stack.Screen name="welcome" options={{ headerShown: false }} />
<Stack.Screen name="settings" options={{ headerShown: false }} />
<Stack.Screen name="office-details" options={{ headerShown: false }} />
<Stack.Screen name="booking-details" options={{ headerShown: false }} />
<Stack.Screen name="viewbookingdetails" options={{ headerShown: false }} />
<Stack.Screen name="faqpage" options={{ headerShown: false }} />
<Stack.Screen name="set-details" options={{ headerShown: false }} />
<Stack.Screen name="set-notifications" options={{ headerShown: false }} />
<Stack.Screen name="set-security" options={{ headerShown: false }} />
<Stack.Screen name="set-appearance" options={{ headerShown: false }} />
<Stack.Screen name="notiftester" options={{ headerShown: false }} />
<Stack.Screen name="changepassword" options={{ headerShown: false }} />
<Stack.Screen name="info" options={{ headerShown: false }} />
</Stack>
</NavBarProvider>
</ThemeProvider>
</GluestackUIProvider>
<GestureHandlerRootView style={{ flex: 1 }}>
<GluestackUIProvider config={config}>
<ThemeProvider>
<NavBarProvider>
<Stack>
<Stack.Screen name="index" options={{ headerShown: false }} />
<Stack.Screen name="login" options={{ headerShown: false }} />
<Stack.Screen name="signup" options={{ headerShown: false }} />
<Stack.Screen name="forgot-password" options={{ headerShown: false }} />
<Stack.Screen name="verify-otp" options={{ headerShown: false }} />
<Stack.Screen name="create-password" options={{ headerShown: false }} />
<Stack.Screen name="home" options={{ headerShown: false }} />
<Stack.Screen name="bookings" options={{ headerShown: false }} />
<Stack.Screen name="viewbookings" options={{ headerShown: false }} />
<Stack.Screen name="notifications" options={{ headerShown: false }} />
<Stack.Screen name="onboarding1" options={{ headerShown: false }} />
<Stack.Screen name="onboarding2" options={{ headerShown: false }} />
<Stack.Screen name="onboarding3" options={{ headerShown: false }} />
<Stack.Screen name="profile" options={{ headerShown: false }} />
<Stack.Screen name="welcome" options={{ headerShown: false }} />
<Stack.Screen name="settings" options={{ headerShown: false }} />
<Stack.Screen name="office-details" options={{ headerShown: false }} />
<Stack.Screen name="booking-details" options={{ headerShown: false }} />
<Stack.Screen name="viewbookingdetails" options={{ headerShown: false }} />
<Stack.Screen name="faqpage" options={{ headerShown: false }} />
<Stack.Screen name="set-details" options={{ headerShown: false }} />
<Stack.Screen name="set-notifications" options={{ headerShown: false }} />
<Stack.Screen name="set-security" options={{ headerShown: false }} />
<Stack.Screen name="set-appearance" options={{ headerShown: false }} />
<Stack.Screen name="notiftester" options={{ headerShown: false }} />
<Stack.Screen name="changepassword" options={{ headerShown: false }} />
<Stack.Screen name="info" options={{ headerShown: false }} />
<Stack.Screen name="loadingscreen" options={{ headerShown: false }} />
<Stack.Screen name="occubot" options={{ headerShown: false }} />
<Stack.Screen name="stats" options={{ headerShown: false }} />
<Stack.Screen name="recommendations" options={{ headerShown: false }} />
</Stack>
</NavBarProvider>
</ThemeProvider>
</GluestackUIProvider>
</GestureHandlerRootView>
);
}
7 changes: 7 additions & 0 deletions frontend/occupi-mobile4/app/loadingscreen.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import LoadingScreen from "../screens/Dashboard/LoadingScreen";

export default function Home() {
return (
<LoadingScreen />
);
}
7 changes: 7 additions & 0 deletions frontend/occupi-mobile4/app/occubot.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import OccuBot from "../screens/Dashboard/OccuBot";

export default function Home() {
return (
<OccuBot />
);
}
14 changes: 14 additions & 0 deletions frontend/occupi-mobile4/app/recommendations.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';
import Recommendations from "../screens/Dashboard/Recommendations";

export default function Home() {
const handleClose = () => {
// Add your close logic here

console.log('Recommendations closed');
};

return (
<Recommendations onClose={handleClose} />
);
}
7 changes: 7 additions & 0 deletions frontend/occupi-mobile4/app/stats.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import Stats from "../screens/Dashboard/Stats";

export default function Home() {
return (
<Stats />
);
}
76 changes: 76 additions & 0 deletions frontend/occupi-mobile4/components/AnalyticsGraph.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import React, { useEffect, useState } from 'react';
import { widthPercentageToDP as wp } from 'react-native-responsive-screen';
import {
View, Text
} 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 AnalyticsGraph = ({data,title,x_axis}) => {
const colorscheme = useColorScheme();
const { theme } = useTheme();
const currentTheme = theme === "system" ? colorscheme : theme;
// console.log(data);
const labels = currentTheme === 'dark' ? "lightgray" : "#242424";
const [accentColour, setAccentColour] = useState<string>('greenyellow');
useEffect(() => {
const getAccentColour = async () => {
let accentcolour = await SecureStore.getItemAsync('accentColour');
setAccentColour(accentcolour);
};
getAccentColour();
}, []);

return (
<View my="$2" w="$full" flexDirection='column' alignItems='center' justifyContent='space-around'>
<Text underline color={currentTheme === 'dark' ? "$white" : "$black"}>{title}</Text>
<LineChart
isAnimated
width={wp('85%')}
thickness={3}
color={accentColour}
maxValue={10}
noOfSections={10}
hideRules
animateOnDataChange
animationDuration={1000}
onDataChangeAnimationDuration={300}
areaChart
focusEnabled
showDataPointOnFocus
textColor1={currentTheme === 'dark' ? "white" : "black"}
focusedDataPointColor={'white'}
showStripOnFocus
showTextOnFocus
endSpacing={20}
yAxisTextStyle={{color: labels}}
xAxisLabelTextStyle={{color: labels, fontSize: 8.5}}
data={data}
// hideDataPoints
curved
startFillColor={accentColour}
endFillColor={accentColour}
startOpacity={0.5}
endOpacity={0.1}
spacing={data.length > 30 ? 30 : data.length*2}
// rotateLabel
backgroundColor="transparent"
// showVerticalLines
// verticalLinesColor="rgba(14,164,164,0.5)"
// rulesColor="gray"
// rulesType="dashed"
xAxisColor="transparent"
yAxisColor="transparent"
initialSpacing={2}
// yAxisColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
// xAxisColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
/>
<Text color={currentTheme === 'dark' ? "$white" : "$black"}>{x_axis}</Text>
</View>
)
}

export default AnalyticsGraph;
33 changes: 17 additions & 16 deletions frontend/occupi-mobile4/components/BarGraph.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import React, { useEffect, useState } from 'react'
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import React, { useEffect, useState } from 'react';
import { widthPercentageToDP as wp } from 'react-native-responsive-screen';
import {
View, Text
} from '@gluestack-ui/themed';
import * as SecureStore from 'expo-secure-store';
import { BarChart } from "react-native-gifted-charts"
View
} from '@gluestack-ui/themed';
import * as SecureStore from 'expo-secure-store';
import { BarChart } from "react-native-gifted-charts";
import { useColorScheme } from 'react-native';
import { useTheme } from './ThemeContext';
import { convertValues } from '@/utils/occupancy';
import { convertValues, convertValuesHour } from '@/utils/occupancy';


const BarGraph = (data) => {
const BarGraph = ({data,tab}) => {
console.log('tab',data)
const colorscheme = useColorScheme();
const { theme } = useTheme();
const currentTheme = theme === "system" ? colorscheme : theme;
Expand All @@ -27,14 +28,13 @@ const BarGraph = (data) => {
}, []);
return (
<View
style={{ width: wp('100%'), height: hp('35%'), flexDirection: 'column' }}
style={{ width: wp('100%'), flexDirection: 'column' }}
// style={{
// // marginVertical: 100,
// paddingVertical: 20,
// backgroundColor: '#414141',
// }}
>
<Text color={currentTheme === "dark" ? 'white' : 'black'} fontWeight="$medium" underline mb="$4" alignSelf='center'>Predicted Occupancy by Number</Text>
<BarChart
isAnimated
width={wp('80%')}
Expand All @@ -48,21 +48,22 @@ const BarGraph = (data) => {
endSpacing={0}
yAxisTextStyle={{color: labels}}
xAxisLabelTextStyle={{color: labels}}
data={convertValues(data.data)}
data={tab === 3 ? convertValues(data) : convertValuesHour(data)}
showGradient
hideRules
frontColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
gradientColor={accentColour}
// barBorderTopLeftRadius={5}
// barBorderTopRightRadius={5}
spacing={20}
backgroundColor={currentTheme === 'dark' ? "#414141" : "white"}
spacing={12}
backgroundColor={currentTheme === 'dark' ? "transparent" : "white"}
// showVerticalLines
// verticalLinesColor="rgba(14,164,164,0.5)"
// rulesColor="gray"
rulesType="dashed"
// rulesType="dashed"
xAxisColor="transparent"
yAxisColor="transparent"
initialSpacing={16}
yAxisColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
xAxisColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
/>
</View>
)
Expand Down
Loading

0 comments on commit 93e3d8b

Please sign in to comment.