36 lines
No EOL
1 KiB
TypeScript
36 lines
No EOL
1 KiB
TypeScript
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])
|
|
|
|
return (
|
|
<PieChart
|
|
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
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default Graph; |