fix: grafik bar

components/division/reportChartDocument.tsx

@@ -2,40 +2,54 @@ import Styles from "@/constants/Styles";
 import { Dimensions, View } from "react-native";
 import { BarChart } from "react-native-gifted-charts";
 import { useTheme } from "@/providers/ThemeProvider";
+import { useMemo } from "react";
 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;
  
+   const maxValue = useMemo(() => {
+      const maxVal = data.reduce((max: number, obj: { value: number; }) => Math.max(max, obj.value), 0);
+      if (maxVal === 0) return 10;
+      if (maxVal < 5) return 5;
+      return Math.ceil(maxVal / 10) * 10;
+   }, [data]);
+
+   const barData = useMemo(() => {
+      return data.map(item => ({
+         ...item,
+         frontColor: item.value > 0 ? "#fac858" : "transparent",
+         topLabelComponent: () => (
+            <View style={{ marginBottom: 5 }}>
+               <View
+                  style={{
+                     alignItems: 'center',
+                     justifyContent: 'center',
+                     width: width * 0.25
+                  }}>
+                  <Text style={{ color: colors.text, fontSize: 12 }}>{item.value > 0 ? item.value : ""}</Text>
+               </View>
+            </View>
+         )
+      }))
+   }, [data, colors.text]);
+
    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
+            key={JSON.stringify(data)}
             xAxisLabelTextStyle={{ color: colors.text }}
             yAxisTextStyle={{ color: colors.text }}
             showFractionalValues={false}
             showYAxisIndices
-            noOfSections={maxValue < 5 ? 2 : 4}
+            noOfSections={maxValue < 5 ? (maxValue === 0 ? 4 : maxValue) : 4}
             maxValue={maxValue}
-            data={data}
+            data={barData}
             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>
    )

components/division/reportChartEvent.tsx

@@ -2,44 +2,54 @@ import Styles from "@/constants/Styles";
 import { Dimensions, View } from "react-native";
 import { BarChart } from "react-native-gifted-charts";
 import { useTheme } from "@/providers/ThemeProvider";
+import { useMemo } from "react";
 import Text from "../Text";
 
 export default function ReportChartEvent({ data }: { data: { label: string; value: number; }[] }) {
    const { colors } = useTheme();
    const width = Dimensions.get("window").width;
-   const maxValue = Math.max(...data.map(i => i.value))
+ 
-   const barData = [
+   const maxValue = useMemo(() => {
-      { value: 23, label: 'Akan Datang', },
+      const maxVal = data.reduce((max: number, obj: { value: number; }) => Math.max(max, obj.value), 0);
-      { value: 12, label: 'Selesai' },
+      if (maxVal === 0) return 10;
-   ];
+      if (maxVal < 5) return 5;
+      return Math.ceil(maxVal / 10) * 10;
+   }, [data]);
+ 
+   const barData = useMemo(() => {
+      return data.map(item => ({
+         ...item,
+         frontColor: item.value > 0 ? "#177AD5" : "transparent",
+         topLabelComponent: () => (
+            <View style={{ marginBottom: 5 }}>
+               <View
+                  style={{
+                     alignItems: 'center',
+                     justifyContent: 'center',
+                     width: width * 0.25
+                  }}>
+                  <Text style={{ color: colors.text, fontSize: 12 }}>{item.value > 0 ? item.value : ""}</Text>
+               </View>
+            </View>
+         )
+      }))
+   }, [data, colors.text]);
 
    return (
       <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.background }]}>
          <Text style={[Styles.textSubtitle, Styles.mv15]}>ACARA DIVISI</Text>
          <BarChart
+            key={JSON.stringify(data)}
             xAxisLabelTextStyle={{ color: colors.text }}
             yAxisTextStyle={{ color: colors.text }}
             showFractionalValues={false}
             showYAxisIndices
-            noOfSections={maxValue < 5 ? 2 : 4}
+            noOfSections={maxValue < 5 ? (maxValue === 0 ? 4 : maxValue) : 4}
             maxValue={maxValue}
-            frontColor="#177AD5"
+            data={barData}
-            data={data}
             isAnimated
             width={width - 140}
             barWidth={width * 0.25}
-            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>
    )

components/home/chartDokumenHome.tsx

@@ -32,11 +32,6 @@ export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }
                frontColor: val > 0 ? (item.color || '#fac858') : 'transparent',
                label: item.label,
                value: val,
-               topLabelComponent: () => (
-                  <View style={{ marginBottom: 5 }}>
-                     <Text style={{ color: colors.text, fontSize: 12 }}>{val > 0 ? val : ""}</Text>
-                  </View>
-               )
             }
          }) as Props
       },
@@ -53,6 +48,17 @@ export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }
       return Math.ceil(maxVal / 10) * 10;
    }, [chartData]);
  
+   const barData = useMemo(() => {
+      return chartData.map(item => ({
+         ...item,
+         topLabelComponent: () => (
+            <View style={{ marginBottom: 5 }}>
+               <Text style={{ color: colors.text, fontSize: 12 }}>{item.value > 0 ? item.value : ""}</Text>
+            </View>
+         )
+      }))
+   }, [chartData, colors.text]);
+
    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>
@@ -65,7 +71,7 @@ export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }
                   showYAxisIndices
                   noOfSections={maxValue < 5 ? (maxValue === 0 ? 4 : maxValue) : 4}
                   maxValue={maxValue}
-                  data={chartData}
+                  data={barData}
                   isAnimated
                   width={width - 140}
                   barWidth={width * 0.25}