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

Change total mahasiswa

Browse Source
This commit is contained in:
Randa Firman Putra
2025-06-24 00:50:02 +07:00
parent fadca46dc1
commit eb7c884c41
19 changed files with 569 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/AsalDaerahPerAngkatanChart.tsx
View File

@@ -227,11 +227,19 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
name: 'Jumlah Mahasiswa',
data: jumlah
}]);
// Calculate the maximum value from data
const maxValue = Math.max(...jumlah);
// Add 10% padding to the maximum value
const xAxisMax = Math.ceil(maxValue * 1.1);
setOptions(prev => ({
...prev,
xaxis: {
...prev.xaxis,
categories: kabupaten,
max: xAxisMax
},
chart: {
...prev.chart,

19
components/JenisPendaftaranBeasiswaChart.tsx
View File

@@ -203,6 +203,23 @@ 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">
@@ -251,7 +268,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={chartOptions}
options={updatedChartOptions}
series={series}
type="bar"
height="100%"

10
components/JenisPendaftaranChart.tsx
View File

@@ -212,11 +212,21 @@ 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) {

19
components/JenisPendaftaranLulusChart.tsx
View File

@@ -200,6 +200,23 @@ 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">
@@ -248,7 +265,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={chartOptions}
options={updatedChartOptions}
series={series}
type="bar"
height="100%"

3
components/JenisPendaftaranPrestasiChart.tsx
View File

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

19
components/JenisPendaftaranStatusChart.tsx
View File

@@ -188,6 +188,23 @@ 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">
@@ -236,7 +253,7 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
<div className="h-[350px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={chartOptions}
options={updatedChartOptions}
series={series}
type="bar"
height="100%"

19
components/LulusTepatWaktuChart.tsx
View File

@@ -218,6 +218,23 @@ 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">
@@ -266,7 +283,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={chartOptions}
options={updatedChartOptions}
series={series}
type="bar"
height="100%"

19
components/NamaBeasiswaChart.tsx
View File

@@ -203,6 +203,23 @@ 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">
@@ -251,7 +268,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={chartOptions}
options={updatedChartOptions}
series={series}
type="bar"
height="100%"

36
components/StatistikMahasiswaChart.tsx
View File

@@ -68,9 +68,9 @@ export default function StatistikMahasiswaChart() {
},
},
stroke: {
show: true,
width: [0, 0, 2],
colors: ['transparent', 'transparent', '#10B981'],
show: false,
width: [0, 0, 0],
colors: ['transparent', 'transparent', 'transparent'],
curve: 'straight' as const
},
xaxis: {
@@ -124,7 +124,7 @@ export default function StatistikMahasiswaChart() {
colors: '#000'
}
},
colors: ['#3B82F6', '#EC4899', '#10B981'],
colors: ['#3B82F6', '#10B981', '#EC4899'],
tooltip: {
theme: 'light',
y: [
@@ -243,12 +243,28 @@ 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,
xaxis: {
...prev.xaxis,
categories: statistikData.map(item => item.tahun_angkatan)
}
},
yaxis: [
{
...prev.yaxis[0],
max: yAxisMax
}
]
}));
}
}, [statistikData]);
@@ -259,15 +275,15 @@ export default function StatistikMahasiswaChart() {
type: 'bar' as const,
data: statistikData.map(item => item.pria)
},
{
name: 'Total',
type: 'bar' as const,
data: statistikData.map(item => item.total_mahasiswa)
},
{
name: 'Perempuan',
type: 'bar' as const,
data: statistikData.map(item => item.wanita)
},
{
name: 'Total',
type: 'line' as const,
data: statistikData.map(item => item.total_mahasiswa)
}
];

13
components/StatusMahasiswaChart.tsx
View File

@@ -143,12 +143,25 @@ 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);

19
components/StatusMahasiswaFilterChart.tsx
View File

@@ -190,6 +190,23 @@ 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 (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -238,7 +255,7 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
<div className="h-[350px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={chartOptions}
options={updatedChartOptions}
series={series}
type="bar"
height="100%"

25
components/TingkatPrestasiChart.tsx
View File

@@ -11,7 +11,7 @@ const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface TingkatPrestasiData {
tahun_angkatan: number;
tingkat: string;
tingkat_prestasi: string;
tingkat_mahasiswa_prestasi: number;
}
@@ -67,12 +67,12 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
if (!data.length) return [];
const years = [...new Set(data.map(item => item.tahun_angkatan))].sort();
const tingkatTypes = [...new Set(data.map(item => item.tingkat))].sort();
const tingkatTypes = [...new Set(data.map(item => item.tingkat_prestasi))].sort();
return tingkatTypes.map(tingkat => ({
name: tingkat,
data: years.map(year => {
const item = data.find(d => d.tahun_angkatan === year && d.tingkat === tingkat);
const item = data.find(d => d.tahun_angkatan === year && d.tingkat_prestasi === tingkat);
return item?.tingkat_mahasiswa_prestasi || 0;
})
}));
@@ -202,6 +202,23 @@ 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">
@@ -249,7 +266,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={chartOptions}
options={updatedChartOptions}
series={series}
type="bar"
height="100%"

40
components/TingkatPrestasiPieChart.tsx
View File

@@ -11,7 +11,7 @@ const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface TingkatPrestasiData {
tahun_angkatan: number;
tingkat: string;
tingkat_prestasi: string;
tingkat_mahasiswa_prestasi: number;
}
@@ -52,6 +52,23 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
fetchData();
}, [selectedYear, selectedJenisPrestasi]);
// Process data for series
const processSeriesData = () => {
// Data sudah difilter dari API berdasarkan tahun angkatan dan jenis prestasi
// Langsung gunakan data yang diterima dari API
const tingkat = [...new Set(data.map(item => item.tingkat_prestasi))].sort();
const jumlahData = tingkat.map(t => {
const item = data.find(d => d.tingkat_prestasi === t);
return item ? item.tingkat_mahasiswa_prestasi : 0;
});
return {
series: jumlahData,
labels: tingkat
};
};
const { series, labels } = processSeriesData();
const chartOptions: ApexOptions = {
chart: {
type: 'pie',
@@ -69,7 +86,7 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
}
}
},
labels: [],
labels: labels,
colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4'],
legend: {
position: 'bottom',
@@ -110,23 +127,6 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
}
};
// Process data for series
const processSeriesData = () => {
// Filter data sesuai tahun angkatan
const filtered = data.filter(item => String(item.tahun_angkatan) === String(selectedYear));
const tingkat = [...new Set(filtered.map(item => item.tingkat))].sort();
const jumlahData = tingkat.map(t => {
const item = filtered.find(d => d.tingkat === t);
return item ? item.tingkat_mahasiswa_prestasi : 0;
});
return {
series: jumlahData,
labels: tingkat
};
};
const { series, labels } = processSeriesData();
if (loading) {
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -174,7 +174,7 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
<div className="h-[350px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={{...chartOptions, labels}}
options={chartOptions}
series={series}
type="pie"
height="100%"

19
components/TotalBeasiswaChart.tsx
View File

@@ -215,6 +215,23 @@ 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">
@@ -263,7 +280,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={chartOptions}
options={updatedChartOptions}
series={series}
type="bar"
height="100%"

19
components/TotalPrestasiChart.tsx
View File

@@ -214,6 +214,23 @@ 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">
@@ -261,7 +278,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={chartOptions}
options={updatedChartOptions}
series={series}
type="bar"
height="100%"