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

# Conflicts:
#   components/index.tsx

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
 }
 

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;

components/stats/PieChart.tsx

@@ -1 +0,0 @@
-//honestly just fuck graphs