86 lines
3.6 KiB
TypeScript
86 lines
3.6 KiB
TypeScript
import Styles from "@/constants/Styles";
|
|
import { apiGetDataHome } from "@/lib/api";
|
|
import { useAuthSession } from "@/providers/AuthProvider";
|
|
import { useTheme } from "@/providers/ThemeProvider";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { View } from "react-native";
|
|
import { PieChart } from "react-native-gifted-charts";
|
|
import Skeleton from "../skeleton";
|
|
import Text from "../Text";
|
|
|
|
type Props = {
|
|
value: number;
|
|
text: string;
|
|
color: string;
|
|
}[]
|
|
|
|
export default function ChartProgresHome({ refreshing }: { refreshing: boolean }) {
|
|
const { decryptToken, token } = useAuthSession()
|
|
const { colors } = useTheme();
|
|
|
|
// TanStack Query for Progress Chart data
|
|
const { data: chartData = [], isLoading } = useQuery({
|
|
queryKey: ['homeData', 'progress'],
|
|
queryFn: async () => {
|
|
const hasil = await decryptToken(String(token?.current))
|
|
const response = await apiGetDataHome({ cat: "progress", user: hasil })
|
|
return response.data.map((item: { color: any; text: any; value: any; }) => ({
|
|
color: item.color,
|
|
text: item.text,
|
|
value: Number(item.value)
|
|
})) as Props
|
|
},
|
|
enabled: !!token?.current,
|
|
staleTime: 0,
|
|
})
|
|
|
|
return (
|
|
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
|
|
<Text style={[Styles.textSubtitle, Styles.mv15]}>PROGRES KEGIATAN</Text>
|
|
{
|
|
isLoading ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
|
|
:
|
|
<>
|
|
<PieChart
|
|
data={chartData}
|
|
showText
|
|
showValuesAsTooltipText
|
|
textColor={'black'}
|
|
radius={120}
|
|
textSize={15}
|
|
focusOnPress={false}
|
|
showValuesAsLabels
|
|
showTextBackground={false}
|
|
textBackgroundRadius={0}
|
|
isAnimated
|
|
/>
|
|
|
|
<View style={[Styles.mt15]}>
|
|
<View style={[Styles.rowSpaceBetween, Styles.w80]}>
|
|
<View style={[Styles.rowItemsCenter, Styles.w60]}>
|
|
<View style={[Styles.iconContent, { backgroundColor: '#177AD5' }]}></View>
|
|
<Text style={[Styles.textInformation, Styles.ml10]}>Segera Dikerjakan</Text>
|
|
</View>
|
|
|
|
<View style={[Styles.rowItemsCenter, Styles.w50]}>
|
|
<View style={[Styles.iconContent, { backgroundColor: '#92cc76' }]}></View>
|
|
<Text style={[Styles.textInformation, Styles.ml10]}>Selesai</Text>
|
|
</View>
|
|
</View>
|
|
<View style={[Styles.rowSpaceBetween, Styles.w80, Styles.mt10]}>
|
|
<View style={[Styles.rowItemsCenter, Styles.w60]}>
|
|
<View style={[Styles.iconContent, { backgroundColor: '#fac858' }]}></View>
|
|
<Text style={[Styles.textInformation, Styles.ml10]}>Dikerjakan</Text>
|
|
</View>
|
|
|
|
<View style={[Styles.rowItemsCenter, Styles.w50]}>
|
|
<View style={[Styles.iconContent, { backgroundColor: '#ED6665' }]}></View>
|
|
<Text style={[Styles.textInformation, Styles.ml10]}>Dibatalkan</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</>
|
|
}
|
|
</View>
|
|
)
|
|
} |