42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
import Styles from "@/constants/Styles";
|
|
import { Dimensions, View } from "react-native";
|
|
import { BarChart } from "react-native-gifted-charts";
|
|
import { useTheme } from "@/providers/ThemeProvider";
|
|
import Text from "../Text";
|
|
|
|
export default function ReportChartDocument({ data }: { data: { label: string; value: number; }[] }) {
|
|
const { colors } = useTheme();
|
|
const maxValue = Math.max(...data.map(i => i.value))
|
|
const width = Dimensions.get("window").width;
|
|
|
|
return (
|
|
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.background }]}>
|
|
<Text style={[Styles.textSubtitle, Styles.mv15]}>JUMLAH DOKUMEN</Text>
|
|
<BarChart
|
|
xAxisLabelTextStyle={{ color: colors.text }}
|
|
yAxisTextStyle={{ color: colors.text }}
|
|
showFractionalValues={false}
|
|
showYAxisIndices
|
|
noOfSections={maxValue < 5 ? 2 : 4}
|
|
maxValue={maxValue}
|
|
data={data}
|
|
isAnimated
|
|
width={width - 140}
|
|
barWidth={width * 0.25}
|
|
frontColor="#fac858"
|
|
renderTooltip={(item: any, index: any) => {
|
|
return (
|
|
<View
|
|
style={{
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: width * 0.25
|
|
}}>
|
|
<Text style={{ color: colors.text }}>{item.value}</Text>
|
|
</View>
|
|
);
|
|
}}
|
|
/>
|
|
</View>
|
|
)
|
|
} |