From 84dbae49c1a2a99d5e1280e8cdb5c71dfc7ea130 Mon Sep 17 00:00:00 2001
From: thschleicher <thschleicher@edu.aau.at>
Date: Thu, 25 Jan 2024 17:33:02 +0100
Subject: [PATCH] graph working kinda

---
 components/stats/Graph.tsx | 77 ++++++++++++--------------------------
 1 file changed, 24 insertions(+), 53 deletions(-)

diff --git a/components/stats/Graph.tsx b/components/stats/Graph.tsx
index 42e083f..33ebd2d 100644
--- a/components/stats/Graph.tsx
+++ b/components/stats/Graph.tsx
@@ -1,64 +1,35 @@
-import { View } from "react-native";
+import { useEffect } from "react";
 import { PieChart } from "react-native-chart-kit";
+import useFetch from "../../hooks/useFetch";
 
 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
-        }
-      ];
-
+    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])
+ 
     return (
-    <View>
         <PieChart
-            data={data}
-            height={600}
-            width={600}    
-            chartConfig={chartConfig}
-            accessor="population"
-            style={graphStyle}
+          data={data}
+          width={333}
+          height={333}
+          chartConfig={{
+            backgroundColor: '#e26a00',
+            backgroundGradientFrom: '#fb8c00',
+            backgroundGradientTo: '#ffa726',
+            decimalPlaces: 2, // optional, defaults to 2dp
+            color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
+            style: {
+              borderRadius: 16
+            }
+          }}
+          accessor="total"
+          backgroundColor="red"
+          paddingLeft="15"
+          absolute
         />
-    </View>
     );
 }