d1041211043_randa/portaldata
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change Bug Charts

Browse Source
This commit is contained in:
Randa Firman Putra
2025-06-24 04:23:19 +07:00
parent 25812386cb
commit 39f16d6a5e
14 changed files with 45 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/AsalDaerahChart.tsx
View File

@@ -92,7 +92,6 @@ export default function AsalDaerahChart() {
},
maxWidth: 200,
},
tickAmount: undefined,
},
fill: {
opacity: 1,

22
components/JenisPendaftaranBeasiswaChart.tsx
View File

@@ -162,7 +162,8 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
}
},
tickAmount: 5,
},
fill: {
opacity: 1
@@ -203,23 +204,6 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
const series = processSeriesData();
// Calculate the maximum value from all series for y-axis padding
const maxValue = Math.max(
...series.flatMap(s => s.data)
);
// Add 20% padding to the maximum value
const yAxisMax = Math.ceil(maxValue * 1.2);
// Update chart options with y-axis max
const updatedChartOptions: ApexOptions = {
...chartOptions,
yaxis: {
...chartOptions.yaxis,
max: yAxisMax
}
};
if (loading) {
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -268,7 +252,7 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && series.length > 0 && (
<Chart
options={updatedChartOptions}
options={chartOptions}
series={series}
type="bar"
height="100%"

8
components/JenisPendaftaranChart.tsx
View File

@@ -213,20 +213,12 @@ export default function JenisPendaftaranChart() {
setSeries(seriesData);
// Calculate the maximum value from all series
const maxValue = Math.max(
...seriesData.flatMap(series => series.data)
);
// Add 20% padding to the maximum value
const xAxisMax = Math.ceil(maxValue * 1.1);
setOptions(prev => ({
...prev,
xaxis: {
...prev.xaxis,
categories: tahunAngkatan,
max: xAxisMax
},
}));
} catch (err) {

22
components/JenisPendaftaranLulusChart.tsx
View File

@@ -159,7 +159,8 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
}
},
tickAmount: 5,
},
fill: {
opacity: 1
@@ -200,23 +201,6 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
const series = processSeriesData();
// Calculate the maximum value from all series for y-axis padding
const maxValue = Math.max(
...series.flatMap(s => s.data)
);
// Add 20% padding to the maximum value
const yAxisMax = Math.ceil(maxValue * 1.2);
// Update chart options with y-axis max
const updatedChartOptions: ApexOptions = {
...chartOptions,
yaxis: {
...chartOptions.yaxis,
max: yAxisMax
}
};
if (loading) {
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -265,7 +249,7 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && series.length > 0 && (
<Chart
options={updatedChartOptions}
options={chartOptions}
series={series}
type="bar"
height="100%"

3
components/JenisPendaftaranPrestasiChart.tsx
View File

@@ -162,9 +162,6 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
},
max: function(val) {
return Math.ceil(val * 1.2);
}
},
fill: {
opacity: 1

23
components/JenisPendaftaranStatusChart.tsx
View File

@@ -135,7 +135,9 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
}
}
},
min:0,
tickAmount: 5
},
fill: {
opacity: 1,
@@ -188,23 +190,6 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
const series = processSeriesData();
console.log('Processed series data:', series);
// Calculate the maximum value from all series for y-axis padding
const maxValue = Math.max(
...series.flatMap(s => s.data)
);
// Add 20% padding to the maximum value
const yAxisMax = Math.ceil(maxValue * 1.2);
// Update chart options with y-axis max
const updatedChartOptions: ApexOptions = {
...chartOptions,
yaxis: {
...chartOptions.yaxis,
max: yAxisMax
}
};
if (loading) {
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -253,7 +238,7 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
<div className="h-[350px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={updatedChartOptions}
options={chartOptions}
series={series}
type="bar"
height="100%"

22
components/LulusTepatWaktuChart.tsx
View File

@@ -177,7 +177,8 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
}
},
tickAmount: 5,
},
fill: {
opacity: 1
@@ -218,23 +219,6 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
const series = processSeriesData();
// Calculate the maximum value from all series for y-axis padding
const maxValue = Math.max(
...series.flatMap(s => s.data)
);
// Add 20% padding to the maximum value
const yAxisMax = Math.ceil(maxValue * 1.2);
// Update chart options with y-axis max
const updatedChartOptions: ApexOptions = {
...chartOptions,
yaxis: {
...chartOptions.yaxis,
max: yAxisMax
}
};
if (loading) {
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -283,7 +267,7 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && series.length > 0 && (
<Chart
options={updatedChartOptions}
options={chartOptions}
series={series}
type="bar"
height="100%"

22
components/NamaBeasiswaChart.tsx
View File

@@ -142,7 +142,8 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
}
},
tickAmount: 5,
},
yaxis: {
title: {
@@ -203,23 +204,6 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
const series = processSeriesData();
// Calculate the maximum value from all series for y-axis padding
const maxValue = Math.max(
...series.flatMap(s => s.data)
);
// Add 20% padding to the maximum value
const yAxisMax = Math.ceil(maxValue * 1.2);
// Update chart options with y-axis max
const updatedChartOptions: ApexOptions = {
...chartOptions,
yaxis: {
...chartOptions.yaxis,
max: yAxisMax
}
};
if (loading) {
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -268,7 +252,7 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
<div className="h-[400px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && series.length > 0 && (
<Chart
options={updatedChartOptions}
options={chartOptions}
series={series}
type="bar"
height="100%"

14
components/StatistikMahasiswaChart.tsx
View File

@@ -105,7 +105,9 @@ export default function StatistikMahasiswaChart() {
fontSize: '12px',
colors: '#000'
}
}
},
min:0,
tickAmount: 5
}
],
fill: {
@@ -243,15 +245,6 @@ export default function StatistikMahasiswaChart() {
// Update categories when data changes
useEffect(() => {
if (statistikData.length > 0) {
// Calculate the maximum value from all series
const maxValue = Math.max(
...statistikData.map(item => item.total_mahasiswa),
...statistikData.map(item => item.pria),
...statistikData.map(item => item.wanita)
);
// Add 50% padding to the maximum value
const yAxisMax = Math.ceil(maxValue * 1.2);
setChartOptions(prev => ({
...prev,
@@ -262,7 +255,6 @@ export default function StatistikMahasiswaChart() {
yaxis: [
{
...prev.yaxis[0],
max: yAxisMax
}
]
}));

115
components/StatusMahasiswaChart.tsx
View File

@@ -21,13 +21,15 @@ export default function StatusMahasiswaChart() {
const [error, setError] = useState<string | null>(null);
const [data, setData] = useState<StatusData[]>([]);
const [series, setSeries] = useState<ApexAxisChartSeries>([]);
const [options, setOptions] = useState<ApexOptions>({
const chartOptions: ApexOptions = {
chart: {
type: 'bar',
stacked: false,
toolbar: {
show: true,
},
background: theme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
@@ -42,7 +44,7 @@ export default function StatusMahasiswaChart() {
},
style: {
fontSize: '12px',
colors: ['#000']
colors: [theme === 'dark' ? '#fff' : '#000']
}
},
stroke: {
@@ -51,19 +53,19 @@ export default function StatusMahasiswaChart() {
colors: ['transparent'],
},
xaxis: {
categories: [],
categories: [...new Set(data.map(item => item.tahun_angkatan))].sort(),
title: {
text: 'Tahun Angkatan',
style: {
fontSize: '14px',
fontWeight: 'bold',
color: '#000'
color: theme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: '#000'
colors: theme === 'dark' ? '#fff' : '#000'
}
}
},
@@ -73,15 +75,15 @@ export default function StatusMahasiswaChart() {
style: {
fontSize: '14px',
fontWeight: 'bold',
color: '#000'
color: theme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: '#000'
colors: theme === 'dark' ? '#fff' : '#000'
}
}
},
},
fill: {
opacity: 1,
@@ -96,19 +98,19 @@ export default function StatusMahasiswaChart() {
horizontal: 10,
},
labels: {
colors: '#000'
colors: theme === 'dark' ? '#fff' : '#000'
}
},
colors: ['#008FFB', '#00E396', '#FEB019', '#EF4444'],
tooltip: {
theme: 'light',
theme: theme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa";
}
}
}
});
};
useEffect(() => {
const fetchData = async () => {
@@ -143,26 +145,6 @@ export default function StatusMahasiswaChart() {
}));
setSeries(seriesData);
// Calculate the maximum value from all series
const maxValue = Math.max(
...seriesData.flatMap(series => series.data)
);
// Add 20% padding to the maximum value
const yAxisMax = Math.ceil(maxValue * 1.2);
setOptions(prev => ({
...prev,
xaxis: {
...prev.xaxis,
categories: tahunAngkatan,
},
yaxis: {
...prev.yaxis,
max: yAxisMax
}
}));
} catch (err) {
console.error('Error in fetchData:', err);
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
@@ -174,73 +156,6 @@ export default function StatusMahasiswaChart() {
fetchData();
}, []);
// Update theme when it changes
useEffect(() => {
const currentTheme = theme === 'system' ? systemTheme : theme;
const textColor = currentTheme === 'dark' ? '#fff' : '#000';
const tooltipTheme = currentTheme === 'dark' ? 'dark' : 'light';
setOptions(prev => ({
...prev,
chart: {
...prev.chart,
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
},
dataLabels: {
...prev.dataLabels,
style: {
...prev.dataLabels?.style,
colors: [textColor]
}
},
xaxis: {
...prev.xaxis,
title: {
...prev.xaxis?.title,
style: {
...prev.xaxis?.title?.style,
color: textColor
}
},
labels: {
...prev.xaxis?.labels,
style: {
...prev.xaxis?.labels?.style,
colors: textColor
}
}
},
yaxis: {
...(prev.yaxis as ApexYAxis),
title: {
...(prev.yaxis as ApexYAxis)?.title,
style: {
...(prev.yaxis as ApexYAxis)?.title?.style,
color: textColor
}
},
labels: {
...(prev.yaxis as ApexYAxis)?.labels,
style: {
...(prev.yaxis as ApexYAxis)?.labels?.style,
colors: textColor
}
}
},
legend: {
...prev.legend,
labels: {
...prev.legend?.labels,
colors: textColor
}
},
tooltip: {
...prev.tooltip,
theme: tooltipTheme
}
}));
}, [theme, systemTheme]);
if (loading) {
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -285,10 +200,10 @@ export default function StatusMahasiswaChart() {
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[350px] w-full max-w-5xl mx-auto">
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={options}
options={chartOptions}
series={series}
type="bar"
height="100%"

18
components/StatusMahasiswaFilterChart.tsx
View File

@@ -190,22 +190,6 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
const series = processSeriesData();
console.log('Processed series data:', series);
// Calculate the maximum value from all series for y-axis padding
const maxValue = Math.max(
...series.flatMap(s => s.data)
);
// Add 20% padding to the maximum value
const yAxisMax = Math.ceil(maxValue * 1.2);
// Update chart options with y-axis max
const updatedChartOptions: ApexOptions = {
...chartOptions,
yaxis: {
...chartOptions.yaxis,
max: yAxisMax
}
};
if (loading) {
return (
@@ -255,7 +239,7 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
<div className="h-[350px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={updatedChartOptions}
options={chartOptions}
series={series}
type="bar"
height="100%"

24
components/TingkatPrestasiChart.tsx
View File

@@ -141,7 +141,7 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
}
},
},
yaxis: {
title: {
@@ -161,7 +161,8 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
}
},
tickAmount: 5,
},
fill: {
opacity: 1
@@ -202,23 +203,6 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
const series = processSeriesData();
// Calculate the maximum value from all series for y-axis padding
const maxValue = Math.max(
...series.flatMap(s => s.data)
);
// Add 20% padding to the maximum value
const yAxisMax = Math.ceil(maxValue * 1.2);
// Update chart options with y-axis max
const updatedChartOptions: ApexOptions = {
...chartOptions,
yaxis: {
...chartOptions.yaxis,
max: yAxisMax
}
};
if (loading) {
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -266,7 +250,7 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
<div className="h-[400px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && series.length > 0 && (
<Chart
options={updatedChartOptions}
options={chartOptions}
series={series}
type="bar"
height="100%"

22
components/TotalBeasiswaChart.tsx
View File

@@ -174,7 +174,8 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
}
},
tickAmount: 5,
},
fill: {
opacity: 1
@@ -215,23 +216,6 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
const series = processSeriesData();
// Calculate the maximum value from all series for y-axis padding
const maxValue = Math.max(
...series.flatMap(s => s.data)
);
// Add 20% padding to the maximum value
const yAxisMax = Math.ceil(maxValue * 1.2);
// Update chart options with y-axis max
const updatedChartOptions: ApexOptions = {
...chartOptions,
yaxis: {
...chartOptions.yaxis,
max: yAxisMax
}
};
if (loading) {
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -280,7 +264,7 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && series.length > 0 && (
<Chart
options={updatedChartOptions}
options={chartOptions}
series={series}
type="bar"
height="100%"

22
components/TotalPrestasiChart.tsx
View File

@@ -173,7 +173,8 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
}
},
tickAmount: 5,
},
fill: {
opacity: 1
@@ -214,23 +215,6 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
const series = processSeriesData();
// Calculate the maximum value from all series for y-axis padding
const maxValue = Math.max(
...series.flatMap(s => s.data)
);
// Add 20% padding to the maximum value
const yAxisMax = Math.ceil(maxValue * 1.2);
// Update chart options with y-axis max
const updatedChartOptions: ApexOptions = {
...chartOptions,
yaxis: {
...chartOptions.yaxis,
max: yAxisMax
}
};
if (loading) {
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -278,7 +262,7 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && series.length > 0 && (
<Chart
options={updatedChartOptions}
options={chartOptions}
series={series}
type="bar"
height="100%"