Merge branch 'main' into '67-date-filtering-on-home-screen'

# Conflicts: # components/index.tsx
2024-01-25 18:26:46 +00:00 · 2024-01-25 18:26:46 +00:00 · 4ec0f214f7
commit 4ec0f214f7
parent 8149ec234f 0edc962bc9
7 changed files with 234 additions and 66 deletions
--- a/app/(tabs)/(stats)/index.tsx
+++ b/app/(tabs)/(stats)/index.tsx
@ -1,53 +1,24 @@
 import React from 'react';
-import { StyleSheet, View, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native';
+import { Graph } from '../../../components';
 import BudgetOverview from '../../../components/stats/BudgetOverview';
-import { useTheme } from '../../contexts/ThemeContext';
-import Widget from '../../../components/stats/Widget';
-import CategoryProgressBarList from '../../../components/stats/CategoryProgressBarList';
 import BudgetRemaining from '../../../components/stats/BudgetRemaining';
-import DebugMenu from '../../../services/DebugMenu';
 import SavingsOverview from '../../../components/stats/SavingsOverview';
-import FinancialAdvice from '../../../components/stats/FinancialAdvice';
+import Widget from '../../../components/stats/Widget';

 export default function Page() {
-    const { colors } = useTheme();
-
-    // Mock data #TODO Database einbinden
-    // what to do when amount too small?
-
-    const spent = 120.75;
-    const budget = 696.96;
-
-  
-
-    const styles = StyleSheet.create({
-        container: {
-            flex: 1,
-            backgroundColor: colors.backgroundColor,
-            marginTop: 50,
-            alignItems: 'center',
-        },
-    });

    return (
-        <View style={styles.container}>
-            <ScrollView>
-                <DebugMenu />
-                <Widget title='"Financial" Tips' backgroundColor='orange'>
-                    <FinancialAdvice/>
-                </Widget>
-                <Widget title="Budget Overview" />
-                <Widget>
-                    <BudgetRemaining/>
-                </Widget>
-                <Widget title='Your Expenses so far' image={require('../../../assets/images/8b14el.jpg')}/>
-                <Widget>
-                    <BudgetOverview/>
-                </Widget>
-                <Widget>
-                    <SavingsOverview/>
-                </Widget>
-            </ScrollView>
-        </View>
+        <SafeAreaView style={{flex: 1}}>
+            <Widget title="Budget Overview"/>
+            <Graph/>
+            <BudgetRemaining/>
+            <Widget>
+                <BudgetOverview/>
+            </Widget>
+            <Widget>
+                <SavingsOverview/>
+            </Widget>
+        </SafeAreaView>
    );
 }
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@ -3,9 +3,9 @@ import { StyleSheet } from "react-native";

 import { FontAwesome } from "@expo/vector-icons";
 import { Redirect } from "expo-router";
-import React, { useEffect } from "react";
-import { useTheme } from "../contexts/ThemeContext";
+import React from "react";
 import { useAuth } from "../contexts/AuthContext";
+import { useTheme } from "../contexts/ThemeContext";

 export default function Layout() {
    const {authState} = useAuth()
@ -52,6 +52,7 @@ export default function Layout() {
            <Tabs.Screen name="(stats)/index" options={
                {
                    tabBarLabel: "Stats",
+                    unmountOnBlur: true,
                    tabBarIcon: ({size, color}) => (
                        <FontAwesome name="bar-chart" size={size} color={color}/>),
                }
--- a/components/index.tsx
+++ b/components/index.tsx
@ -9,13 +9,13 @@ import CategorySelectorModal from "./expense/CategorySelectorModal"
 import DateSelectorButton from "./expense/DateSelectorButton"

 //common
+import AutoDecimalInput from "./common/AutoDecimalInput"
 import CustomCard from "./common/CustomCard"
+import RoundedButton from "./common/RoundedButton"
+import TextInputBar from "./common/TextInputBar"
 import NavigationButton from "./common/button"
 import LoadingSymbol from "./common/loadingSymbol"
 import Plus from "./common/plus"
-import TextInputBar from "./common/TextInputBar"
-import AutoDecimalInput from "./common/AutoDecimalInput"
-import RoundedButton from "./common/RoundedButton"
 import EmptyListCompenent from "./common/EmptyListCompenent"

 //login
@ -27,26 +27,30 @@ import TypeSelectorSwitch from "./budget/typeSelectorSwitch"
 //login
 import Input from "./login/input"

+//stats
+import Graph from "./stats/Graph"
+
 export {
+  AutoDecimalInput,
  BudgetHeader,
  ButtonSetting,
-  CustomCard,
-  ExpenseItem,
-  Input,
-  LoadingSymbol,
-  Plus,
-  TextInputBar,
-  ToggleSetting,
-  Welcome,
-  AutoDecimalInput,
+  CategoryItem,
  CategorySelector,
  CategorySelectorModal,
-  DateSelectorButton,
-  RoundedButton,
-  CategoryItem,
-  TypeSelectorSwitch,
-  NavigationButton,
+  CustomCard,
  CustomColorPicker,
+  DateSelectorButton,
  EmptyListCompenent,
+  ExpenseItem,
+  Graph,
+  Input,
+  LoadingSymbol,
+  NavigationButton,
+  Plus,
+  RoundedButton,
+  TextInputBar,
+  ToggleSetting,
+  TypeSelectorSwitch,
+  Welcome
 }

--- a/components/stats/Graph.tsx
+++ b/components/stats/Graph.tsx
@ -0,0 +1,30 @@
+import { Dimensions, View } from "react-native";
+import { PieChart } from "react-native-chart-kit";
+import { useTheme } from "../../app/contexts/ThemeContext";
+import useFetch from "../../hooks/useFetch";
+
+const Graph = () => {
+    const {colors} = useTheme();
+
+    const {data} = useFetch({sql: "SELECT c.name AS name, c.color AS color, SUM(e.amount) as total FROM category c LEFT JOIN expense e ON e.category_guid = c.guid GROUP BY c.guid", args: []});
+    const acctual_data = data.map(item => ({...item, legendFontColor: colors.primaryText, legendFontSize: 14}));
+ 
+    return (
+        <View style={{backgroundColor: colors.backgroundColor, borderRadius: 10, margin: 10}}>
+        <PieChart
+          data={acctual_data}
+          width={Dimensions.get("window").width}
+          height={240}
+          chartConfig={{
+            color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
+          }}
+          backgroundColor="transparent"
+          accessor="total"
+          paddingLeft="15"
+          avoidFalseZero={true}
+        />
+        </View>
+    );
+}
+
+export default Graph;
--- a/components/stats/PieChart.tsx
+++ b/components/stats/PieChart.tsx
@ -1 +0,0 @@
-//honestly just fuck graphs
--- a/package-lock.json
+++ b/package-lock.json
@ -26,6 +26,7 @@
        "react-dom": "18.2.0",
        "react-native": "0.72.6",
        "react-native-calendars": "^1.1303.0",
+        "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",
@ -7410,6 +7411,12 @@
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "peer": true
+    },
    "node_modules/bplist-creator": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.1.0.tgz",
@ -8233,6 +8240,47 @@
        "hyphenate-style-name": "^1.0.3"
      }
    },
+    "node_modules/css-select": {
+      "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",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "peer": true,
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "peer": true,
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
    "node_modules/cssom": {
      "version": "0.5.0",
      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@ -8522,6 +8570,32 @@
        "node": ">=8"
      }
    },
+    "node_modules/dom-serializer": {
+      "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",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "peer": true
+    },
    "node_modules/domexception": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@ -8535,6 +8609,35 @@
        "node": ">=12"
      }
    },
+    "node_modules/domhandler": {
+      "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"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "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",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
    "node_modules/dotenv": {
      "version": "16.0.3",
      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
@ -8598,7 +8701,6 @@
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
      "engines": {
        "node": ">=0.12"
      },
@ -13484,6 +13586,12 @@
      "resolved": "https://registry.npmjs.org/md5hex/-/md5hex-1.0.0.tgz",
      "integrity": "sha512-c2YOUbp33+6thdCUi34xIyOU/a7bvGKj/3DB1iaPMTuPHf/Q2d5s4sn1FaCOO43XkXggnb08y5W2PU8UNYNLKQ=="
    },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "peer": true
+    },
    "node_modules/media-typer": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@ -14687,6 +14795,18 @@
        "node": ">=4"
      }
    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "peer": true,
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
    "node_modules/nullthrows": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@ -15048,6 +15168,14 @@
        "node": ">=8"
      }
    },
+    "node_modules/paths-js": {
+      "version": "0.4.11",
+      "resolved": "https://registry.npmjs.org/paths-js/-/paths-js-0.4.11.tgz",
+      "integrity": "sha512-3mqcLomDBXOo7Fo+UlaenG6f71bk1ZezPQy2JCmYHy2W2k5VKpP+Jbin9H0bjXynelTbglCqdFhSEkeIkKTYUA==",
+      "engines": {
+        "node": ">=0.11.0"
+      }
+    },
    "node_modules/picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@ -15248,6 +15376,11 @@
        "node": ">=4.0.0"
      }
    },
+    "node_modules/point-in-polygon": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz",
+      "integrity": "sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw=="
+    },
    "node_modules/postcss": {
      "version": "8.4.32",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
@ -15770,6 +15903,21 @@
        "moment": "^2.29.4"
      }
    },
+    "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",
+      "integrity": "sha512-nZLGyCFzZ7zmX0KjYeeSV1HKuPhl1wOMlTAqa0JhlyW62qV/1ZPXHgT8o9s8mkFaGxdqbspOeuaa6I9jUQDgnA==",
+      "dependencies": {
+        "lodash": "^4.17.13",
+        "paths-js": "^0.4.10",
+        "point-in-polygon": "^1.0.1"
+      },
+      "peerDependencies": {
+        "react": "> 16.7.0",
+        "react-native": ">= 0.50.0",
+        "react-native-svg": "> 6.4.1"
+      }
+    },
    "node_modules/react-native-gesture-handler": {
      "version": "2.12.1",
      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.12.1.tgz",
@ -15829,6 +15977,20 @@
        "react-native": "*"
      }
    },
+    "node_modules/react-native-svg": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-14.1.0.tgz",
+      "integrity": "sha512-HeseElmEk+AXGwFZl3h56s0LtYD9HyGdrpg8yd9QM26X+d7kjETrRQ9vCjtxuT5dCZEIQ5uggU1dQhzasnsCWA==",
+      "peer": true,
+      "dependencies": {
+        "css-select": "^5.1.0",
+        "css-tree": "^1.1.3"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
    "node_modules/react-native-swipe-gestures": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz",
--- a/package.json
+++ b/package.json
@ -20,6 +20,7 @@
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-native-async-storage/async-storage": "1.18.2",
+    "@react-native-community/datetimepicker": "7.2.0",
    "@react-navigation/native": "^6.0.2",
    "expo": "~49.0.15",
    "expo-font": "~11.4.0",
@ -35,14 +36,14 @@
    "react-dom": "18.2.0",
    "react-native": "0.72.6",
    "react-native-calendars": "^1.1303.0",
+    "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-uuid": "^2.0.1",
    "react-native-web": "~0.19.6",
-    "reanimated-color-picker": "^2.4.2",
-    "@react-native-community/datetimepicker": "7.2.0"
+    "reanimated-color-picker": "^2.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",