first attempt at graph

2024-01-25 17:20:56 +01:00 · 2024-01-25 17:20:56 +01:00 · ab2ef25615
commit ab2ef25615
parent 79405f318d
6 changed files with 250 additions and 36 deletions
--- a/components/stats/Graph.tsx
+++ b/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;