graph works

app/(tabs)/(stats)/index.tsx

@@ -1,33 +1,13 @@
 import React from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
+import { SafeAreaView } from 'react-native';
 import { Graph } from '../../../components';
-import { useTheme } from '../../contexts/ThemeContext';
 
 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>
+        <SafeAreaView style={{flex: 1}}>
 
-                <Graph/>
+            <Graph/>
 
 
                 {/* <DebugMenu />
@@ -45,7 +25,6 @@ export default function Page() {
                 <Widget>
                     <SavingsOverview/>
                 </Widget> */}
-            </ScrollView>
-        </View>
+        </SafeAreaView>
     );
 }

components/stats/Graph.tsx

@@ -1,35 +1,29 @@
-import { useEffect } from "react";
+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, 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} = 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={data}
-          width={333}
-          height={333}
+          data={acctual_data}
+          width={Dimensions.get("window").width}
+          height={240}
           chartConfig={{
-            backgroundColor: '#e26a00',
-            backgroundGradientFrom: '#fb8c00',
-            backgroundGradientTo: '#ffa726',
-            decimalPlaces: 2, // optional, defaults to 2dp
             color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
-            style: {
-              borderRadius: 16
-            }
           }}
+          backgroundColor="transparent"
           accessor="total"
-          backgroundColor="red"
           paddingLeft="15"
-          absolute
+          avoidFalseZero={true}
         />
+        </View>
     );
 }