Merge pull request #293 from bounswe/add-progress-chart-mobile

Progress Graph Added
bounswe · Dec 15, 2024 · 2786b1c · 2786b1c
2 parents 7535cd2 + 3d32e03
commit 2786b1c
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 12 deletions.
diff --git a/mobile/components/Home.js b/mobile/components/Home.js
@@ -34,7 +34,7 @@ const Home = ({ navigation }) => {
   console.log(sessionToken);
   const ProfilePageContainer = () => (
     <View style={currentStyles.page}>
-      <ProfilePage darkMode={darkMode}/>
+      <ProfilePage darkMode={darkMode} navigation/>
     </View>
   );
 

diff --git a/mobile/components/ProfilePage.js b/mobile/components/ProfilePage.js
@@ -349,6 +349,11 @@ useEffect(() => {
             <Text style={styles.statLabel}>Following</Text>
           </View>
         </View>
+<View style={styles.buttonContainer}>
+        <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('ProgressTracker', { username })}>
+                            <Text style={styles.buttonText}>See Your Progress</Text>
+         </TouchableOpacity>
+</View>
         {/*<TouchableOpacity style={styles.followButton} onPress={handleFollowToggle}>
           <Text style={styles.followButtonText}>
             {isFollowing ? 'Following' : 'Follow'}
@@ -430,6 +435,21 @@ const lightStyles = StyleSheet.create({
     fontSize: 14,
     color: 'gray',
   },
+  buttonContainer: {
+
+        alignItems:'center'
+      },
+  button: {
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      backgroundColor: '#6366F1',
+      borderRadius: 10,
+      elevation: 3,
+    },
+   buttonText: {
+      color: '#ffffff',
+      fontWeight: 'bold',
+    },
   followButton: {
     backgroundColor: '#007bff',
     paddingVertical: 10,

diff --git a/mobile/components/ProgressTracker.js b/mobile/components/ProgressTracker.js
@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, FlatList } from 'react-native';
+import React, {  useState, useRef } from 'react';
+import {Dimensions, View, Text, TouchableOpacity, StyleSheet, FlatList } from 'react-native';
 import Svg, { Circle, Defs, LinearGradient, Stop } from 'react-native-svg';
+import { LineChart, BarChart, PieChart, ProgressChart, StackedBarChart } from "react-native-chart-kit";
 
-const ProgressTracker = () => {
+const ProgressTracker = ({username}) => {
   const currentDayIndex = 2; // Let's assume today is Monday (index 2)
   const [selectedDay, setSelectedDay] = useState(currentDayIndex); // Default to today
 
@@ -19,6 +20,51 @@ const ProgressTracker = () => {
   // Example progress for each day (in percentages)
   const progressData = [30, 50, 80, 40, 60, 70, 90];
 
+  const ProgressGraph = ({progress}) => {
+    const [graphWidth, setGraphWidth] = useState(0);
+      const parentViewRef = useRef(null);
+
+      const handleParentLayout = (event) => {
+        const { width } = event.nativeEvent.layout;
+        setGraphWidth(width); // 80% of parent width
+      };
+
+      return (
+        <View ref={parentViewRef} onLayout={handleParentLayout} style={styles.parentContainer}>
+          <LineChart
+            data={{
+              labels: ["Sat", "Sun", "Mon", "Tues", "Wes", "Thurs", "Fri"],
+              datasets: [{ data: progressData }]}}
+            width={0.9*Dimensions.get('window').width} // Use the calculated width
+            height={200}
+            yAxisLabel="%"
+            yAxisInterval={1} // optional, defaults to 1
+            chartConfig={{
+              backgroundColor: "#e26a00",
+              backgroundGradientFrom: "#fb8c00",
+              backgroundGradientTo: "#ffa726",
+              decimalPlaces: 2, // optional, defaults to 2dp
+              color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
+              labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
+              style: {
+                borderRadius: 6
+              },
+              propsForDots: {
+                r: "6",
+                strokeWidth: "2",
+                stroke: "#ffa726"
+              }
+            }}
+            bezier
+            style={{
+              marginVertical: 8,
+              borderRadius: 16
+            }}
+          />
+        </View>
+      );
+  }
+
   const ProgressCircle = ({ progress }) => {
     const radius = 50;
     const strokeWidth = 10;
@@ -80,7 +126,7 @@ const ProgressTracker = () => {
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Fitness Fact</Text>
+      <Text style={styles.title}>Your Progress</Text>
 
       <View style={styles.card}>
         <ProgressCircle progress={progressData[selectedDay]} />
@@ -92,6 +138,7 @@ const ProgressTracker = () => {
         </View>
       </View>
 
+
       <FlatList
         data={days}
         horizontal
@@ -106,10 +153,10 @@ const ProgressTracker = () => {
         keyExtractor={(item) => item.id.toString()}
         contentContainerStyle={styles.daysList}
       />
-
-      <TouchableOpacity style={styles.createPostButton}>
-        <Text style={styles.createPostText}>+ Create New Post</Text>
-      </TouchableOpacity>
+      <View style = {styles.graphCard}>
+           <Text style={styles.progressTitle}>Weekly Progress</Text>
+            <ProgressGraph progress={progressData[selectedDay]} />
+        </View>
     </View>
   );
 };
@@ -127,8 +174,8 @@ const styles = StyleSheet.create({
     color: '#4A4A4A',
     marginBottom: 30,
   },
-  card: {
-    width: '80%',
+  graphCard: {
+    width: '100%',
     backgroundColor: '#FFFFFF',
     borderRadius: 16,
     shadowColor: '#000',

diff --git a/mobile/package-lock.json b/mobile/package-lock.json
diff --git a/mobile/package.json b/mobile/package.json
@@ -19,6 +19,7 @@
     "axios": "^1.7.7",
     "react": "18.3.1",
     "react-native": "0.75.4",
+    "react-native-chart-kit": "^6.12.0",
     "react-native-gesture-handler": "^2.20.0",
     "react-native-lazy-image-loader": "^1.1.5",
     "react-native-linear-gradient": "^2.8.3",