Sust/route em

client/App.js

@@ -4,6 +4,7 @@ import { NavigationContainer } from '@react-navigation/native';
 import LoginScreen from './LogIn';
 import MapScreen from './Map';
 import WeatherScreen from './Weather';
+import Dashboard from './SustainabilityDashboard'
 
 const Stack = createNativeStackNavigator();
 
@@ -14,6 +15,7 @@ export default function App() {
         <Stack.Screen name="Map" component={MapScreen} />
         <Stack.Screen name="LoginScreen" component={LoginScreen} />
         <Stack.Screen name="WeatherScreen" component={WeatherScreen} />
+        <Stack.Screen name="Dashboard" component={Dashboard} />
       </Stack.Navigator>
     </NavigationContainer>
   );

client/Map.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { StyleSheet, View, Text, TouchableOpacity, Alert, Platform } from 'react-native';
 import MapView, { Marker } from 'react-native-maps';
 import * as Location from 'expo-location';
+import Dashboard from './SustainabilityDashboard';
 
 export default function MapScreen({ navigation }) {
     const [webSocket, setWebSocket] = useState(null);
@@ -129,13 +130,19 @@ export default function MapScreen({ navigation }) {
                         <Text style={styles.buttonText}>Send Location</Text>
                     </TouchableOpacity>
                     <TouchableOpacity
-                        style={styles.TouchableOpacity}
+                        style={styles.loginButton}
                         onPress={() => navigation.navigate('LoginScreen')}
                     >
                         <Text style={styles.buttonText}>Log In</Text>
                     </TouchableOpacity>
                     <TouchableOpacity
-                        style={styles.TouchableOpacity1}
+                        style={styles.dashboardButton}
+                        onPress={() => navigation.navigate('Dashboard')}
+                    >
+                        <Text style={styles.buttonText}>Sustainability Dashboard</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                        style={styles.weatherButton}
                         onPress={() => navigation.navigate('WeatherScreen')}
                     >
                         <Text style={styles.buttonText}>Weather</Text>
@@ -158,8 +165,8 @@ const styles = StyleSheet.create({
     },
     sendButton: {
         position: 'absolute',
-        bottom: 20,
-        left: '50%',
+        bottom: 15,
+        left: '80%',
         transform: [{ translateX: -50 }],
         backgroundColor: '#007bff',
         paddingVertical: 10,
@@ -171,7 +178,7 @@ const styles = StyleSheet.create({
         fontWeight: 'bold',
         textAlign: 'center',
     },
-    TouchableOpacity: {
+    loginButton: {
         position: 'absolute',
         alignItems: 'center',
         left: '70%',
@@ -186,7 +193,7 @@ const styles = StyleSheet.create({
         shadowRadius: 5,
         elevation: 5,
     },
-    TouchableOpacity1: {
+    weatherButton: {
         position: 'absolute',
         alignItems: 'center',
         left: '0%',
@@ -201,6 +208,21 @@ const styles = StyleSheet.create({
         shadowRadius: 5,
         elevation: 5,
     },
+    dashboardButton: {
+        position: 'absolute',
+        alignItems: 'center',
+        left: '0%',
+        top: '93%',
+        backgroundColor: '#007bff',
+        paddingVertical: 10,
+        paddingHorizontal: 10,
+        borderRadius: 10,
+        shadowColor: '#000',
+        shadowOpacity: 0.2,
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 5,
+        elevation: 5,
+    },
     error: {
         flex: 1,
         textAlign: 'center',

client/SustainabilityDashboard.js

@@ -0,0 +1,156 @@
+import {
+    LineChart,
+    PieChart
+} from "react-native-chart-kit";
+import { StyleSheet, TouchableOpacity, Text } from 'react-native';
+
+// Dummy pie chart data
+const data = [
+    {
+      name: "Bus",
+      emissions: 20,
+      color: "#e0ac2b",
+      legendFontColor: "#7F7F7F",
+      legendFontSize: 15
+    },
+    {
+      name: "Luas",
+      emissions: 34,
+      color: "#e85252",
+      legendFontColor: "#7F7F7F",
+      legendFontSize: 15
+    },
+    {
+      name: "Train",
+      emissions: 28,
+      color: "#6689c6",
+      legendFontColor: "#7F7F7F",
+      legendFontSize: 15
+    },
+    {
+      name: "Walk",
+      emissions: 45,
+      color: "#9a6fb0",
+      legendFontColor: "#7F7F7F",
+      legendFontSize: 15
+    },
+    {
+        name: "Cycle",
+        emissions: 75,
+        color: "#a53253",
+        legendFontColor: "#7F7F7F",
+        legendFontSize: 15
+      }
+];
+
+// Dummy line chart data - year
+const yearData_lineGraph = {
+    labels: ["January", "February", "March", "April", "May", "June"],
+    datasets: [
+      {
+        data: [455, 896, 231, 473, 147, 369],
+        color: (opacity = 1) => `rgba(7, 32, 114, ${opacity})`,
+        strokeWidth: 2
+      }
+    ],
+    legend: ["Rainy Days"],
+  };
+
+// Dummy line chart data - month
+const monthData_lineGraph = {
+    labels: ["Week 1", "Week 2", "Week 3", "Week 4"],
+    datasets: [
+      {
+        data: [20, 45, 28, 80],
+        color: (opacity = 1) => `rgba(7, 32, 114, ${opacity})`,
+        strokeWidth: 2
+      }
+    ],
+    legend: ["Rainy Days"],
+};
+
+// chart configuration (for chart kit)
+const chartConfig = {
+    backgroundGradientFrom: "#1E2923",
+    backgroundGradientFromOpacity: 0,
+    backgroundGradientTo: "#08130D",
+    backgroundGradientToOpacity: 0,
+    color: (opacity = 1) => `rgba(91, 87, 89, ${opacity})`,
+    strokeWidth: 2,
+    useShadowColorFromDataset: false
+};
+
+export default function Dashboard({ navigation }) {
+    // this needs to be updated reactively, perhaps using usestate
+    let lineGraphData = yearData_lineGraph;
+
+    const switchTimeframe = (time_frame) => {
+
+        if (time_frame == 'm'){
+            lineGraphData = monthData_lineGraph;
+        }
+        else if(time_frame == 'y'){
+            lineGraphData = yearData_lineGraph;
+        }
+    };
+
+    return (
+       <>
+            <PieChart
+                data={data}
+                width={370}
+                height={240}
+                chartConfig={chartConfig}
+                accessor={"emissions"}
+                backgroundColor={"transparent"}
+                paddingLeft={"15"}
+                center={[10, 0]}
+                absolute
+            />
+            <LineChart 
+                style={styles.lineChart}
+                data={lineGraphData}
+                width={370}
+                height={220}
+                chartConfig={chartConfig}
+            />
+            <TouchableOpacity style={styles.monthButton} onPress={switchTimeframe('m')}>
+                <Text style={styles.buttonText}>Month</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.yearButton} onPress={switchTimeframe('y')}>
+                <Text style={styles.buttonText}>Year</Text>
+            </TouchableOpacity>
+        </>
+    )
+  }
+
+const styles = StyleSheet.create({
+    lineChart: {
+        position: 'absolute',
+        bottom: 40,
+        right: '0%',
+        paddingVertical: 10,
+        paddingHorizontal: 20,
+        borderRadius: 10,
+    },
+    monthButton: {
+        position: 'absolute',
+        bottom: 15,
+        left: '80%',
+        transform: [{ translateX: -50 }],
+        backgroundColor: '#007bff',
+        paddingVertical: 10,
+        paddingHorizontal: 20,
+        borderRadius: 10,
+    },
+    yearButton: {
+        position: 'absolute',
+        bottom: 15,
+        left: '20%',
+        transform: [{ translateX: -50 }],
+        backgroundColor: '#007bff',
+        paddingVertical: 10,
+        paddingHorizontal: 20,
+        borderRadius: 10,
+    }
+})

client/__mocks__/@react-native-async-storage/async-storage.js

@@ -0,0 +1,2 @@
+export * from '@react-native-async-storage/async-storage/jest/async-storage-mock';
+

client/caching.jsx

@@ -0,0 +1,84 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export const storeData = async (key, data) => {
+  try {
+    await AsyncStorage.setItem(
+    JSON.stringify(key),
+    JSON.stringify(data),
+    );
+  } catch (error) {
+  console.error('Error storing data in cache');
+  }
+};
+
+export const retrieveData = async (key) => {
+  try {
+    const value = await AsyncStorage.getItem(JSON.stringify(key));
+    if (value !== null) {
+      console.log(value);
+      return value != null ? JSON.parse(value) : null;
+    }
+  } catch (error) {
+    console.error('Error retrieving data from cache')
+  }
+};
+
+export const removeData = async (key) => {
+  try {
+    await AsyncStorage.removeItem(JSON.stringify(key));
+    console.log('Removed successfully');
+  } catch {
+    console.error('Error removing data from cache')
+  }
+};
+
+export const updateData = async (key, changedData) => {
+  try {
+    AsyncStorage.mergeItem(
+      JSON.stringify(key),
+      JSON.stringify(changedData)
+    );
+  } catch (error) {
+    console.error('Error updating data in cache');
+  }
+};
+
+/*
+weekly emisions
+
+{
+  "sustScore": 0,
+  "distanceTravelledPerVehicle": { // running total
+    "bus": 0,
+    "car": 0,
+    "luas": 0,
+    "train": 0,
+    "bike": 0,
+    "walking": 0
+  },
+  "last7daysEmmisions": { // at midnight, each day gets replaced by the day value before it. today replaced with 0
+    "today": 0,
+    "t-1": 0,
+    "t-2": 0,
+    "t-3": 0,
+    "t-4": 0,
+    "t-5": 0,
+    "t-6": 0
+  },
+  "lastYear": { // at mifnight each days total added to it's month, at new month reset to 0
+    "jan": 0,
+    "feb": 0,
+    "mar": 0,
+    "apr": 0,
+    "may": 0,
+    "jun": 0,
+    "jul": 0,
+    "aug": 0,
+    "sep": 0,
+    "oct": 0,
+    "nov": 0,
+    "dec": 0
+  }
+}
+
+*/