graph working kinda

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: []});
+    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
-        }
-      ];
 
+    useEffect(() => {
+        console.log(data);
+    }, [data])
  
     return (
-    <View>
         <PieChart
           data={data}
-            height={600}
+          width={333}
-            width={600}    
+          height={333}
-            chartConfig={chartConfig}
+          chartConfig={{
-            accessor="population"
+            backgroundColor: '#e26a00',
-            style={graphStyle}
+            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>
     );
 }