first attempt at graph

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"
 
 //login
 import BudgetHeader from "./budget/budgetHeader"
@@ -26,25 +26,14 @@ import TypeSelectorSwitch from "./budget/typeSelectorSwitch"
 //login
 import Input from "./login/input"
 
+//stats
+import Graph from "./stats/Graph"
+
 export {
-  BudgetHeader,
-  ButtonSetting,
-  CustomCard,
-  ExpenseItem,
-  Input,
-  LoadingSymbol,
-  Plus,
-  TextInputBar,
-  ToggleSetting,
-  Welcome,
-  AutoDecimalInput,
-  CategorySelector,
-  CategorySelectorModal,
-  DateSelectorButton,
-  RoundedButton,
-  CategoryItem,
-  TypeSelectorSwitch,
-  NavigationButton,
-  CustomColorPicker
+  AutoDecimalInput, BudgetHeader,
+  ButtonSetting, CategoryItem, CategorySelector,
+  CategorySelectorModal, CustomCard, CustomColorPicker, DateSelectorButton, ExpenseItem, Graph, Input,
+  LoadingSymbol, NavigationButton, Plus, RoundedButton, TextInputBar,
+  ToggleSetting, TypeSelectorSwitch, Welcome
 }
 

components/stats/Graph.tsx

@@ -0,0 +1,65 @@
+import { View } from "react-native";
+import { PieChart } from "react-native-chart-kit";
+
+const Graph = () => {
+
+    // const {data, isLoading, reFetch} = 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: []});
+
+    // useEffect(() => {
+    //     console.log(data);
+    // }, [data])
+
+    const data = [
+        {
+          name: "Seoul",
+          population: 21500000,
+          color: "rgba(131, 167, 234, 1)",
+          legendFontColor: "#7F7F7F",
+          legendFontSize: 15
+        },
+        {
+          name: "Toronto",
+          population: 2800000,
+          color: "#F00",
+          legendFontColor: "#7F7F7F",
+          legendFontSize: 15
+        },
+        {
+          name: "Beijing",
+          population: 527612,
+          color: "red",
+          legendFontColor: "#7F7F7F",
+          legendFontSize: 15
+        },
+        {
+          name: "New York",
+          population: 8538000,
+          color: "#ffffff",
+          legendFontColor: "#7F7F7F",
+          legendFontSize: 15
+        },
+        {
+          name: "Moscow",
+          population: 11920000,
+          color: "rgb(0, 0, 255)",
+          legendFontColor: "#7F7F7F",
+          legendFontSize: 15
+        }
+      ];
+
+
+    return (
+    <View>
+        <PieChart
+            data={data}
+            height={600}
+            width={600}    
+            chartConfig={chartConfig}
+            accessor="population"
+            style={graphStyle}
+        />
+    </View>
+    );
+}
+
+export default Graph;

components/stats/PieChart.tsx

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