chart

ef7c3c30 · cabelt · 08894a6a · ef7c3c30 · ef7c3c30 · ef7c3c30
Commit ef7c3c30 authored 1 year ago by cabelt
--- a/app/profile.js
+++ b/app/profile.js
-import { Pressable, StyleSheet, Text, Button, View, Appearance, useColorScheme, Image } from "react-native";
+import { ScrollView, Pressable, Dimensions, StyleSheet, Text, Button, View, Appearance, useColorScheme, Image } from "react-native";
 import { Link } from "expo-router";
 import { StatusBar } from 'expo-status-bar';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { BarChart } from 'react-native-chart-kit';

 export default function profile() {
-
    const colorScheme = useColorScheme();

    const themeTextStyle = colorScheme === 'light' ? styles.lightThemeText : styles.darkThemeText;
    const themeContainerStyle =
        colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
    
-    const xLabels = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];
+    const width = Dimensions.get('window').width - 10
+    const height = 250

+    const data = {
+        labels: ["Mon", "Tues", "Wed", "Thur", "Fri", "Sat", "Sun"],
+        datasets: [
+            {
+                data: [1, 2, 1, 4, 3, 2, 3]
+            }
+        ]
+    };
+    
    return (
        <SafeAreaProvider>
            <View style={[styles.container, themeContainerStyle]}>
@@ -39,21 +49,62 @@ export default function profile() {
                        <Text style={styles.statValue}>456</Text>
                    </View>
                </View>
+                {chartConfigs.map(chartConfig => {
+                    const labelStyle = {
+                        color: chartConfig.color(),
+                        marginVertical: 10,
+                        textAlign: 'center',
+                        fontSize: 20
+                    }
+                    const graphStyle = {
+                        marginVertical: 8,
+                        ...chartConfig.style
+                    }
+                    const axisStyle = {
+                        color: chartConfig.color(),
+                        textAlign: 'center',
+                        fontSize: 15
+                    }
+                    return (
+                        <ScrollView
+                            key={Math.random()}
+                            style={{
+                                backgroundColor: chartConfig.backgroundColor
+                            }}
+                        >
+                            <Text style={labelStyle}>Social Media Screen Time in Hours</Text>
+                            <BarChart
+                                width={width}
+                                height={height}
+                                data={data}
+                                chartConfig={chartConfig}
+                                style={graphStyle}
+                                fromZero="True"
+                            />
+                            <Text style={axisStyle}>Days of the Week</Text>
+                        </ScrollView>
+                    )
+                })}
                <StatusBar style="auto" />
            </View>
        </SafeAreaProvider>
    );
 }

+const chartConfigs = [
+    {
+        backgroundColor: '#0091EA',
+        backgroundGradientFrom: '#0091EA',
+        backgroundGradientTo: '#0091EA',
+        color: (opacity = 1) => `rgba(${255}, ${255}, ${255}, ${opacity})`
+    }
+]
+
 const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        flex: 1,
    },
-    chart: {
-        width: 200,
-        height: 200,
-    },
    header: {
        flexDirection: 'row',
        alignItems: 'center',

--- a/package-lock.json
+++ b/package-lock.json
@@ -8,23 +8,24 @@
      "name": "my-app",
      "version": "1.0.0",
      "dependencies": {
-        "@expo/webpack-config": "^18.1.3",
+        "@expo/webpack-config": "^19.0.0",
        "expo": "^49.0.16",
+        "expo-clipboard": "~4.3.1",
        "expo-constants": "~14.4.2",
        "expo-linking": "~5.0.2",
-        "expo-router": "^2.0.10",
+        "expo-router": "^2.0.0",
        "expo-sqlite": "~11.3.3",
        "expo-status-bar": "~1.6.0",
        "expo-system-ui": "~2.4.0",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-native": "0.72.5",
-        "react-native-chart": "^0.1.14",
        "react-native-chart-kit": "^6.12.0",
        "react-native-gesture-handler": "~2.12.0",
        "react-native-reanimated": "~3.3.0",
        "react-native-safe-area-context": "4.6.3",
        "react-native-screens": "~3.22.0",
+        "react-native-svg": "^13.14.0",
        "react-native-web": "~0.19.6"
      },
      "devDependencies": {
@@ -3257,9 +3258,9 @@
      "integrity": "sha512-TI+l71+5aSKnShYclFa14Kum+hQMZ86b95SH6tQUG3qZEmLTarvWpKwqtTwQKqvlJSJrpFiSFu3eCuZokY6zWA=="
    },
    "node_modules/@expo/webpack-config": {
-      "version": "18.1.3",
-      "resolved": "https://registry.npmjs.org/@expo/webpack-config/-/webpack-config-18.1.3.tgz",
-      "integrity": "sha512-lG2G7KmdW0y70b87Ul9A/1l1DgagSTqA3iIegxOYJCv38X7pNUcq0zIl+suBWtDV1ITkXmrfuYMPFMA1jqgtvA==",
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@expo/webpack-config/-/webpack-config-19.0.0.tgz",
+      "integrity": "sha512-mX28BNyf4Cs0+4L44QQyhy5QMVfsYhOdB9Fpf3rp982KTKUsy01UFJ0irGI1jQ68jXrQn5/WU4u1pvN6DDao5Q==",
      "dependencies": {
        "@babel/core": "^7.20.2",
        "babel-loader": "^8.3.0",
@@ -9280,6 +9281,14 @@
        "url-parse": "^1.5.9"
      }
    },
+    "node_modules/expo-clipboard": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/expo-clipboard/-/expo-clipboard-4.3.1.tgz",
+      "integrity": "sha512-WIsjvAsr2+/NZRa84mKxjui1EdPpdKbQIC2LN/KMBNuT7g4GQYL3oo9WO9G/C7doKQ7f7pnfdvO3N6fUnoRoJw==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
    "node_modules/expo-constants": {
      "version": "14.4.2",
      "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-14.4.2.tgz",
@@ -15243,14 +15252,6 @@
        "react": "18.2.0"
      }
    },
-    "node_modules/react-native-chart": {
-      "version": "0.1.14",
-      "resolved": "https://registry.npmjs.org/react-native-chart/-/react-native-chart-0.1.14.tgz",
-      "integrity": "sha512-pie127Gh5/F19cvWxLgl9dZ20tcqcmrcERrKtC3f+n6l/N9hPxiXRtGQBRmJooEFZhRAWJZe4ufi4KSXfrqQhg==",
-      "peerDependencies": {
-        "react-native": ">0.15.0"
-      }
-    },
    "node_modules/react-native-chart-kit": {
      "version": "6.12.0",
      "resolved": "https://registry.npmjs.org/react-native-chart-kit/-/react-native-chart-kit-6.12.0.tgz",
@@ -15329,7 +15330,6 @@
      "version": "13.14.0",
      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.14.0.tgz",
      "integrity": "sha512-27ZnxUkHgWICimhuj6MuqBkISN53lVvgWJB7pIypjXysAyM+nqgQBPh4vXg+7MbqLBoYvR4PiBgKfwwGAqVxHg==",
-      "peer": true,
      "dependencies": {
        "css-select": "^5.1.0",
        "css-tree": "^1.1.3"
@@ -15343,7 +15343,6 @@
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
-      "peer": true,
      "dependencies": {
        "boolbase": "^1.0.0",
        "css-what": "^6.1.0",
@@ -15359,7 +15358,6 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-      "peer": true,
      "dependencies": {
        "domelementtype": "^2.3.0",
        "domhandler": "^5.0.2",
@@ -15373,7 +15371,6 @@
      "version": "5.0.3",
      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-      "peer": true,
      "dependencies": {
        "domelementtype": "^2.3.0"
      },
@@ -15388,7 +15385,6 @@
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
-      "peer": true,
      "dependencies": {
        "dom-serializer": "^2.0.0",
        "domelementtype": "^2.3.0",
@@ -15402,7 +15398,6 @@
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "peer": true,
      "engines": {
        "node": ">=0.12"
      },

--- a/package.json
+++ b/package.json
@@ -9,22 +9,25 @@
    "web": "expo start --web"
  },
  "dependencies": {
+    "@expo/webpack-config": "^19.0.0",
    "expo": "^49.0.16",
+    "expo-clipboard": "~4.3.1",
+    "expo-constants": "~14.4.2",
+    "expo-linking": "~5.0.2",
+    "expo-router": "^2.0.0",
+    "expo-sqlite": "~11.3.3",
    "expo-status-bar": "~1.6.0",
    "expo-system-ui": "~2.4.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.5",
+    "react-native-chart-kit": "^6.12.0",
+    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
-    "react-native-web": "~0.19.6",
-    "expo-router": "^2.0.0",
    "react-native-screens": "~3.22.0",
-    "expo-linking": "~5.0.2",
-    "expo-constants": "~14.4.2",
-    "react-native-gesture-handler": "~2.12.0",
-    "@expo/webpack-config": "^19.0.0",
-    "expo-sqlite": "~11.3.3"
+    "react-native-svg": "^13.14.0",
+    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",