wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: grafik bar

Browse Source
This commit is contained in:
amaliadwiy
2026-04-20 16:27:44 +08:00
parent 5dac451754
commit 8b8ea61a13
3 changed files with 72 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
components/division/reportChartDocument.tsx
View File

@@ -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>
)

50
components/division/reportChartEvent.tsx
View File

@@ -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>
)

18
components/home/chartDokumenHome.tsx
View File

@@ -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}