From 8b8ea61a137f86dc1eefd412b0d0cdfe2608b9b8 Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Mon, 20 Apr 2026 16:27:44 +0800
Subject: [PATCH] fix: grafik bar

---
 components/division/reportChartDocument.tsx | 46 ++++++++++++-------
 components/division/reportChartEvent.tsx    | 50 ++++++++++++---------
 components/home/chartDokumenHome.tsx        | 18 +++++---
 3 files changed, 72 insertions(+), 42 deletions(-)

diff --git a/components/division/reportChartDocument.tsx b/components/division/reportChartDocument.tsx
index 9cb0957..80beea6 100644
--- a/components/division/reportChartDocument.tsx
+++ b/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>
    )
diff --git a/components/division/reportChartEvent.tsx b/components/division/reportChartEvent.tsx
index ec3398e..c9f9235 100644
--- a/components/division/reportChartEvent.tsx
+++ b/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 = [
-      { value: 23, label: 'Akan Datang', },
-      { value: 12, label: 'Selesai' },
-   ];
+ 
+   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 ? "#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={data}
+            data={barData}
             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>
    )
diff --git a/components/home/chartDokumenHome.tsx b/components/home/chartDokumenHome.tsx
index fa87790..c36d7ed 100644
--- a/components/home/chartDokumenHome.tsx
+++ b/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
       },
@@ -52,6 +47,17 @@ export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }
       if (maxVal < 5) return 5;
       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' }]}>
@@ -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}