mobile-darmasaba/components/home/chartProgresHome.tsx

import Styles from "@/constants/Styles";
import { apiGetDataHome } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useEffect, useState } from "react";
import { Text, View } from "react-native";
import { PieChart } from "react-native-gifted-charts";
import Skeleton from "../skeleton";

type Props = {
   value: number;
   text: string;
   color: string;
}[]

export default function ChartProgresHome() {
   const { decryptToken, token } = useAuthSession()
   const [data, setData] = useState<Props>([])
   const [loading, setLoading] = useState(true)

   async function handleData() {
      try {
         setLoading(true)
         const hasil = await decryptToken(String(token?.current))
         const response = await apiGetDataHome({ cat: "progress", user: hasil })
         const convertedArray = response.data.map((item: { color: any; text: any; value: any; }) => ({
            color: item.color,
            text: item.text,
            value: Number(item.value)
         }));
         setData(convertedArray)
      } catch (error) {
         console.error(error)
      } finally {
         setLoading(false)
      }
   }

   useEffect(() => {
      handleData()
   }, []);

   return (
      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
         <Text style={[Styles.textSubtitle, Styles.mv15]}>PROGRES KEGIATAN</Text>
         {
            loading ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
               :
               <>
                  <PieChart
                     data={data}
                     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>
   )
}