testing yuk

This commit is contained in:
Randa Firman Putra
2025-09-14 16:59:31 +07:00
parent 248fed0d0b
commit 60211ae829
63 changed files with 315 additions and 315 deletions

View File

@@ -6,7 +6,7 @@ import { ApexOptions } from 'apexcharts';
import { useTheme } from 'next-themes';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
// Dynamically import ApexCharts to avoid SSR issues
// Import ApexCharts secara dinamis untuk menghindari masalah SSR
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface AsalDaerahBeasiswaData {
@@ -48,13 +48,13 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
const result = await response.json();
if (!Array.isArray(result)) {
throw new Error('Invalid data format received from server');
throw new Error('Format data tidak valid diterima dari server');
}
setData(result);
} catch (err) {
console.error('Error in fetchData:', err);
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengambil data');
} finally {
setLoading(false);
}
@@ -109,7 +109,7 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
},
xaxis: {
categories: [...new Set(data.map(item => item.kabupaten))].sort(),
categories: [...new Set(data.map(item => item.kabupaten))].sort(), // Ambil kabupaten unik dan urutkan
title: {
text: 'Jumlah Mahasiswa',
style: {
@@ -166,7 +166,7 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
const series = [{
name: 'Jumlah Mahasiswa',
data: [...new Set(data.map(item => item.kabupaten))].sort().map(kabupaten => {
data: [...new Set(data.map(item => item.kabupaten))].sort().map(kabupaten => { // Ambil kabupaten unik, urutkan, dan map ke jumlah mahasiswa
const item = data.find(d => d.kabupaten === kabupaten);
return item ? item.jumlah_mahasiswa : 0;
})

View File

@@ -9,7 +9,7 @@ import { Button } from "@/components/ui/button";
import { ExternalLink } from "lucide-react";
import Link from "next/link";
// Dynamically import ApexCharts to avoid SSR issues
// Import ApexCharts secara dinamis untuk menghindari masalah SSR
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface AsalDaerahData {
@@ -107,7 +107,7 @@ export default function AsalDaerahChart({
fill: {
opacity: 1,
},
colors: ['#3B82F6'], // Blue color for bars
colors: ['#3B82F6'], // Warna biru untuk bar
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
y: {
@@ -118,7 +118,7 @@ export default function AsalDaerahChart({
}
});
// Update theme when it changes
// Perbarui tema saat berubah
useEffect(() => {
setOptions(prev => ({
...prev,
@@ -193,12 +193,12 @@ export default function AsalDaerahChart({
const result = await response.json();
if (!Array.isArray(result)) {
throw new Error('Invalid data format received from server');
throw new Error('Format data tidak valid diterima dari server');
}
setData(result);
// Process data for chart
// Proses data untuk chart
const kabupaten = result.map(item => item.kabupaten);
const jumlah = result.map(item => item.jumlah);
@@ -215,7 +215,7 @@ export default function AsalDaerahChart({
}));
} catch (err) {
console.error('Error in fetchData:', err);
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengambil data');
} finally {
setLoading(false);
}
@@ -264,11 +264,11 @@ export default function AsalDaerahChart({
);
}
// Calculate dynamic height based on number of kabupaten
// Hitung tinggi dinamis berdasarkan jumlah kabupaten
const calculateHeight = () => {
const minHeight = 100;
const barHeight = 15; // Height per bar in pixels
const padding = 50; // Extra space for title, legend, etc.
const barHeight = 15; // Tinggi per bar dalam piksel
const padding = 50; // Ruang ekstra untuk judul, legenda, dll
const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
return `${dynamicHeight}px`;
};

View File

@@ -6,7 +6,7 @@ import { ApexOptions } from 'apexcharts';
import { useTheme } from 'next-themes';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
// Dynamically import ApexCharts to avoid SSR issues
// Import ApexCharts secara dinamis untuk menghindari masalah SSR
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface AsalDaerahLulusChartProps {
@@ -110,7 +110,7 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
fill: {
opacity: 1,
},
colors: ['#3B82F6'], // Blue color for bars
colors: ['#3B82F6'], // Warna biru untuk bar
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
y: {
@@ -121,7 +121,7 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
}
});
// Update theme when it changes
// Perbarui tema saat berubah
useEffect(() => {
const currentTheme = theme;
setOptions(prev => ({
@@ -196,7 +196,7 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
const data = await response.json();
setChartData(data);
// Process data for chart
// Proses data untuk chart
const kabupaten = data.map((item: ChartData) => item.kabupaten);
const jumlah = data.map((item: ChartData) => item.jumlah_lulus_tepat_waktu);
@@ -212,7 +212,7 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
},
}));
} catch (err) {
setError(err instanceof Error ? err.message : 'An error occurred');
setError(err instanceof Error ? err.message : 'Terjadi kesalahan');
console.error('Error fetching data:', err);
} finally {
setIsLoading(false);

View File

@@ -6,7 +6,7 @@ import { ApexOptions } from 'apexcharts';
import { useTheme } from 'next-themes';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
// Dynamically import ApexCharts to avoid SSR issues
// Import ApexCharts secara dinamis untuk menghindari masalah SSR
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface AsalDaerahData {
@@ -126,7 +126,7 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
fill: {
opacity: 1,
},
colors: ['#3B82F6'], // Blue color for bars
colors: ['#3B82F6'], // Warna biru untuk bar
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
y: {
@@ -137,7 +137,7 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
}
});
// Update theme when it changes
// Perbarui tema saat berubah
useEffect(() => {
setOptions(prev => ({
...prev,
@@ -212,12 +212,12 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
const result = await response.json();
if (!Array.isArray(result)) {
throw new Error('Invalid data format received from server');
throw new Error('Format data tidak valid diterima dari server');
}
setData(result);
// Process data for chart
// Proses data untuk chart
const kabupaten = result.map(item => item.kabupaten);
const jumlah = result.map(item => item.jumlah);
@@ -248,7 +248,7 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
}));
} catch (err) {
console.error('Error in fetchData:', err);
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengambil data');
} finally {
setLoading(false);
}
@@ -299,11 +299,11 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
);
}
// Calculate dynamic height based on number of kabupaten
// Hitung tinggi dinamis berdasarkan jumlah kabupaten
const calculateHeight = () => {
const minHeight = 100;
const barHeight = 15; // Height per bar in pixels
const padding = 50; // Extra space for title, legend, etc.
const barHeight = 15; // Tinggi per bar dalam piksel
const padding = 50; // Ruang ekstra untuk judul, legenda, dll
const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
return `${dynamicHeight}px`;
};

View File

@@ -6,7 +6,7 @@ import { ApexOptions } from 'apexcharts';
import { useTheme } from 'next-themes';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
// Dynamically import ApexCharts to avoid SSR issues
// Import ApexCharts secara dinamis untuk menghindari masalah SSR
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface AsalDaerahPrestasiData {
@@ -48,13 +48,13 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
const result = await response.json();
if (!Array.isArray(result)) {
throw new Error('Invalid data format received from server');
throw new Error('Format data tidak valid diterima dari server');
}
setData(result);
} catch (err) {
console.error('Error in fetchData:', err);
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengambil data');
} finally {
setLoading(false);
}
@@ -109,7 +109,7 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
},
xaxis: {
categories: [...new Set(data.map(item => item.kabupaten))].sort(),
categories: [...new Set(data.map(item => item.kabupaten))].sort(), // Ambil kabupaten unik dan urutkan
title: {
text: 'Jumlah Mahasiswa',
style: {
@@ -166,7 +166,7 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
const series = [{
name: 'Jumlah Mahasiswa',
data: [...new Set(data.map(item => item.kabupaten))].sort().map(kabupaten => {
data: [...new Set(data.map(item => item.kabupaten))].sort().map(kabupaten => { // Ambil kabupaten unik, urutkan, dan map ke jumlah mahasiswa prestasi
const item = data.find(d => d.kabupaten === kabupaten);
return item ? item.asal_daerah_mahasiswa_prestasi : 0;
})

View File

@@ -6,7 +6,7 @@ import { ApexOptions } from 'apexcharts';
import { useTheme } from 'next-themes';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
// Dynamically import ApexCharts to avoid SSR issues
// Import ApexCharts secara dinamis untuk menghindari masalah SSR
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface AsalDaerahStatusData {
@@ -44,7 +44,7 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
const result = await response.json();
console.log('Received data:', result);
// Sort data by kabupaten
// Urutkan data berdasarkan kabupaten
const sortedData = result.sort((a: AsalDaerahStatusData, b: AsalDaerahStatusData) =>
a.kabupaten.localeCompare(b.kabupaten)
);
@@ -52,7 +52,7 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
setData(sortedData);
} catch (err) {
console.error('Error in fetchData:', err);
setError(err instanceof Error ? err.message : 'An error occurred');
setError(err instanceof Error ? err.message : 'Terjadi kesalahan');
} finally {
setLoading(false);
}
@@ -61,12 +61,12 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
fetchData();
}, [selectedYear, selectedStatus]);
// Log data changes
// Log perubahan data
useEffect(() => {
console.log('Current data state:', data);
}, [data]);
// Get unique kabupaten
// Ambil kabupaten unik
const kabupaten = [...new Set(data.map(item => item.kabupaten))].sort();
console.log('Kabupaten:', kabupaten);
@@ -164,7 +164,7 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
}
};
// Process data for series
// Proses data untuk series
const processSeriesData = () => {
const seriesData = kabupaten.map(kab => {
const item = data.find(d => d.kabupaten === kab);

View File

@@ -6,7 +6,7 @@ import { ApexOptions } from 'apexcharts';
import { useTheme } from 'next-themes';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
// Dynamically import ApexCharts to avoid SSR issues
// Import ApexCharts secara dinamis untuk menghindari masalah SSR
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface IPKBeasiswaData {
@@ -161,7 +161,7 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
}
});
// Update theme when it changes
// Perbarui tema saat berubah
useEffect(() => {
const currentTheme = theme;
setOptions(prev => ({
@@ -250,12 +250,12 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
const result = await response.json();
if (!Array.isArray(result)) {
throw new Error('Invalid data format received from server');
throw new Error('Format data tidak valid diterima dari server');
}
setData(result);
// Process data for chart
// Proses data untuk chart
const tahunAngkatan = result.map(item => item.tahun_angkatan);
const rataRataIPK = result.map(item => item.rata_rata_ipk);
@@ -272,7 +272,7 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
}));
} catch (err) {
console.error('Error in fetchData:', err);
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengambil data');
} finally {
setLoading(false);
}

View File

@@ -9,7 +9,7 @@ import { Button } from "@/components/ui/button";
import { ExternalLink } from "lucide-react";
import Link from "next/link";
// Dynamically import ApexCharts to avoid SSR issues
// Import ApexCharts secara dinamis untuk menghindari masalah SSR
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface IPKData {
@@ -145,7 +145,7 @@ export default function IPKChart({
left: 0
}
},
colors: ['#3B82F6'], // Blue color for line
colors: ['#3B82F6'], // Warna biru untuk garis
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
y: {
@@ -167,7 +167,7 @@ export default function IPKChart({
}
});
// Update theme when it changes
// Perbarui tema saat berubah
useEffect(() => {
const currentTheme = theme;
setOptions(prev => ({
@@ -256,12 +256,12 @@ export default function IPKChart({
const result = await response.json();
if (!Array.isArray(result)) {
throw new Error('Invalid data format received from server');
throw new Error('Format data tidak valid diterima dari server');
}
setData(result);
// Process data for chart
// Proses data untuk chart
const tahunAngkatan = result.map(item => item.tahun_angkatan);
const rataRataIPK = result.map(item => item.rata_rata_ipk);
@@ -278,7 +278,7 @@ export default function IPKChart({
}));
} catch (err) {
console.error('Error in fetchData:', err);
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengambil data');
} finally {
setLoading(false);
}

View File

@@ -117,7 +117,7 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
}
});
// Update theme when it changes
// Perbarui tema saat berubah
useEffect(() => {
const currentTheme = theme;
setOptions(prev => ({
@@ -202,7 +202,7 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
return;
}
// Process data for chart
// Proses data untuk chart
const labels = data.map((item: any) => {
console.log('Processing item:', item);
return item.jk === 'Pria' ? 'Laki-laki' : 'Perempuan';
@@ -223,7 +223,7 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
}
setCategories(labels);
// Untuk bar chart, kita memerlukan array dari objects
// Untuk bar chart, kita memerlukan array dari objek
setSeries([{
name: 'Rata-rata IPK',
data: values

View File

@@ -6,7 +6,7 @@ import { ApexOptions } from 'apexcharts';
import { useTheme } from 'next-themes';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
// Dynamically import ApexCharts to avoid SSR issues
// Import ApexCharts secara dinamis untuk menghindari masalah SSR
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface IPKLulusTepatData {
@@ -138,7 +138,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
left: 0
}
},
colors: ['#3B82F6'], // Blue color for line
colors: ['#3B82F6'], // Warna biru untuk garis
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
y: {
@@ -160,7 +160,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
}
});
// Update theme when it changes
// Perbarui tema saat berubah
useEffect(() => {
const currentTheme = theme;
setOptions(prev => ({
@@ -248,7 +248,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
const fetchedData: IPKLulusTepatData[] = await response.json();
setData(fetchedData);
// Process data for chart
// Proses data untuk chart
const tahunAngkatan = fetchedData.map(item => item.tahun_angkatan);
const rataRataIPK = fetchedData.map(item => item.rata_rata_ipk);
@@ -264,7 +264,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
},
}));
} catch (error) {
setError(error instanceof Error ? error.message : 'An error occurred');
setError(error instanceof Error ? error.message : 'Terjadi kesalahan');
console.error('Error fetching data:', error);
} finally {
setLoading(false);

View File

@@ -6,7 +6,7 @@ import { ApexOptions } from 'apexcharts';
import { useTheme } from 'next-themes';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
// Dynamically import ApexCharts to avoid SSR issues
// Import ApexCharts secara dinamis untuk menghindari masalah SSR
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface IPKPrestasiData {
@@ -161,7 +161,7 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
}
});
// Update theme when it changes
// Perbarui tema saat berubah
useEffect(() => {
const currentTheme = theme;
setOptions(prev => ({
@@ -250,15 +250,15 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
const result = await response.json();
if (!Array.isArray(result)) {
throw new Error('Invalid data format received from server');
throw new Error('Format data tidak valid diterima dari server');
}
setData(result);
// Sort data by tahun_angkatan in ascending order
// Urutkan data berdasarkan tahun_angkatan secara ascending
const sortedData = [...result].sort((a, b) => a.tahun_angkatan - b.tahun_angkatan);
// Process data for chart
// Proses data untuk chart
const tahunAngkatan = sortedData.map(item => item.tahun_angkatan);
const rataRataIPK = sortedData.map(item => item.rata_rata_ipk);
@@ -275,7 +275,7 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
}));
} catch (err) {
console.error('Error in fetchData:', err);
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengambil data');
} finally {
setLoading(false);
}

View File

@@ -6,7 +6,7 @@ import { ApexOptions } from 'apexcharts';
import { useTheme } from 'next-themes';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
// Dynamically import ApexCharts to avoid SSR issues
// Import ApexCharts secara dinamis untuk menghindari masalah SSR
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface IpkStatusData {
@@ -53,10 +53,10 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
if (!Array.isArray(result)) {
console.error('Invalid data format:', result);
throw new Error('Invalid data format received from server');
throw new Error('Format data tidak valid diterima dari server');
}
// Sort data by tahun_angkatan
// Urutkan data berdasarkan tahun_angkatan
const sortedData = result.sort((a: IpkStatusData, b: IpkStatusData) =>
a.tahun_angkatan - b.tahun_angkatan
);
@@ -65,7 +65,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
setData(sortedData);
} catch (err) {
console.error('Error in fetchData:', err);
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengambil data');
} finally {
setLoading(false);
}
@@ -74,7 +74,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
fetchData();
}, [selectedYear, selectedStatus]);
// Log data changes
// Log perubahan data
useEffect(() => {
console.log('Current data state:', data);
}, [data]);
@@ -219,7 +219,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
}
};
// Process data for series
// Proses data untuk series
const processSeriesData = () => {
return [{
name: 'Rata-rata IPK',

View File

@@ -8,7 +8,7 @@ import { useTheme } from "next-themes";
import { ExternalLink } from "lucide-react";
import Link from "next/link";
// Import ApexCharts secara dinamis untuk menghindari error SSR
// Import ApexCharts secara dinamis untuk menghindari masalah SSR
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface MahasiswaStatistik {
@@ -174,7 +174,7 @@ export default function StatistikMahasiswaChart({
const statistikData = await statistikResponse.json();
setStatistikData(statistikData);
} catch (err) {
setError(err instanceof Error ? err.message : 'An error occurred');
setError(err instanceof Error ? err.message : 'Terjadi kesalahan');
console.error('Error fetching data:', err);
} finally {
setLoading(false);
@@ -184,7 +184,7 @@ export default function StatistikMahasiswaChart({
fetchData();
}, []);
// Update theme when it changes
// Perbarui tema saat berubah
useEffect(() => {
const currentTheme = theme;
const textColor = currentTheme === 'dark' ? '#fff' : '#000';
@@ -253,7 +253,7 @@ export default function StatistikMahasiswaChart({
}));
}, [theme]);
// Update categories when data changes
// Perbarui kategori saat data berubah
useEffect(() => {
if (statistikData.length > 0) {

View File

@@ -38,13 +38,13 @@ export default function StatistikPerAngkatanChart({ tahunAngkatan }: Props) {
const result = await response.json();
if (!Array.isArray(result)) {
throw new Error('Invalid data format received from server');
throw new Error('Format data tidak valid diterima dari server');
}
setStatistikData(result);
} catch (err) {
console.error('Error in fetchData:', err);
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengambil data');
} finally {
setLoading(false);
}
@@ -119,7 +119,7 @@ export default function StatistikPerAngkatanChart({ tahunAngkatan }: Props) {
}
});
// Update theme when it changes
// Perbarui tema saat berubah
useEffect(() => {
const currentTheme = theme;
const textColor = currentTheme === 'dark' ? '#fff' : '#000';
@@ -152,7 +152,7 @@ export default function StatistikPerAngkatanChart({ tahunAngkatan }: Props) {
}));
}, [theme]);
// Update dataLabels formatter when data changes
// Perbarui formatter dataLabels saat data berubah
useEffect(() => {
if (statistikData.length > 0) {
setChartOptions(prev => ({