61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { View, Dimensions, StyleSheet } from 'react-native';
|
||
|
|
import { BarChart } from 'react-native-chart-kit';
|
||
|
|
|
||
|
|
const data = {
|
||
|
|
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
data: [
|
||
|
|
Math.random() * 100,
|
||
|
|
Math.random() * 100,
|
||
|
|
Math.random() * 100,
|
||
|
|
Math.random() * 100,
|
||
|
|
Math.random() * 100,
|
||
|
|
Math.random() * 100,
|
||
|
|
Math.random() * 100,
|
||
|
|
Math.random() * 100,
|
||
|
|
Math.random() * 100,
|
||
|
|
Math.random() * 100,
|
||
|
|
Math.random() * 100,
|
||
|
|
Math.random() * 100
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
export function Overview() {
|
||
|
|
return (
|
||
|
|
<View style={styles.container}>
|
||
|
|
<BarChart
|
||
|
|
data={data}
|
||
|
|
width={Dimensions.get("window").width - 40}
|
||
|
|
height={220}
|
||
|
|
yAxisLabel="$"
|
||
|
|
chartConfig={{
|
||
|
|
backgroundColor: "#ffffff",
|
||
|
|
backgroundGradientFrom: "#ffffff",
|
||
|
|
backgroundGradientTo: "#ffffff",
|
||
|
|
decimalPlaces: 2,
|
||
|
|
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
|
||
|
|
style: {
|
||
|
|
borderRadius: 16
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
style={{
|
||
|
|
marginVertical: 8,
|
||
|
|
borderRadius: 16
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
marginTop: 10,
|
||
|
|
},
|
||
|
|
});
|