98 lines
3.4 KiB
TypeScript
98 lines
3.4 KiB
TypeScript
import Styles from "@/constants/Styles";
|
|
import { apiGetDataHome } from "@/lib/api";
|
|
import { useAuthSession } from "@/providers/AuthProvider";
|
|
import { useTheme } from "@/providers/ThemeProvider";
|
|
import { useEffect, useState } from "react";
|
|
import { Dimensions, View } from "react-native";
|
|
import { BarChart } from "react-native-gifted-charts";
|
|
import Skeleton from "../skeleton";
|
|
import Text from "../Text";
|
|
|
|
type Props = {
|
|
value: number;
|
|
label: string;
|
|
frontColor: string;
|
|
}[]
|
|
|
|
export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }) {
|
|
const [loading, setLoading] = useState(true)
|
|
const { decryptToken, token } = useAuthSession()
|
|
const { colors } = useTheme();
|
|
const [data, setData] = useState<Props>([])
|
|
const [maxValue, setMaxValue] = useState(5)
|
|
const [chartKey, setChartKey] = useState(0)
|
|
const barData = [
|
|
{ value: 23, label: 'Gambar', frontColor: '#fac858' },
|
|
{ value: 12, label: 'Dokumen', frontColor: '#92cc76' },
|
|
];
|
|
const width = Dimensions.get("window").width;
|
|
|
|
|
|
async function handleData(loading: boolean) {
|
|
try {
|
|
setLoading(loading)
|
|
const hasil = await decryptToken(String(token?.current))
|
|
const response = await apiGetDataHome({ cat: "dokumen", user: hasil })
|
|
const maxVal = response.data.reduce((max: number, obj: { value: number; }) => Math.max(max, Number(obj.value)), 0);
|
|
const roundUp = maxVal > 0 ? Math.ceil(maxVal / 10) * 10 : 10;
|
|
setMaxValue(roundUp)
|
|
const convertedArray = response.data.map((item: { color: any; label: any; value: any; }) => ({
|
|
frontColor: item.color,
|
|
label: item.label,
|
|
value: Number(item.value)
|
|
}));
|
|
setData(convertedArray)
|
|
setChartKey((prev: number) => prev + 1)
|
|
} catch (error) {
|
|
console.error(error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (refreshing) {
|
|
handleData(false)
|
|
}
|
|
}, [refreshing]);
|
|
|
|
useEffect(() => {
|
|
handleData(true)
|
|
}, []);
|
|
|
|
return (
|
|
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
|
|
<Text style={[Styles.textSubtitle, Styles.mv15]}>JUMLAH DOKUMEN</Text>
|
|
{
|
|
loading ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
|
|
:
|
|
<BarChart
|
|
key={chartKey}
|
|
showFractionalValues={false}
|
|
showYAxisIndices
|
|
noOfSections={4}
|
|
maxValue={maxValue}
|
|
data={data}
|
|
isAnimated
|
|
width={width - 140}
|
|
barWidth={width * 0.25}
|
|
yAxisTextStyle={{ color: colors.text }}
|
|
xAxisLabelTextStyle={{ color: colors.text }}
|
|
renderTooltip={(item: any, index: any) => {
|
|
return (
|
|
<View
|
|
style={{
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: width * 0.25
|
|
}}>
|
|
<Text>{item.value}</Text>
|
|
</View>
|
|
);
|
|
}}
|
|
/>
|
|
}
|
|
|
|
</View>
|
|
)
|
|
} |