30 lines
No EOL
1.1 KiB
TypeScript
30 lines
No EOL
1.1 KiB
TypeScript
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} = 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={acctual_data}
|
|
width={Dimensions.get("window").width}
|
|
height={240}
|
|
chartConfig={{
|
|
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
|
|
}}
|
|
backgroundColor="transparent"
|
|
accessor="total"
|
|
paddingLeft="15"
|
|
avoidFalseZero={true}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default Graph; |