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

Change update semester

Browse Source
This commit is contained in:
Randa Firman Putra
2025-08-21 00:13:35 +07:00
parent 04150b681d
commit f7a7359408
13 changed files with 667 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/charts/IPKLulusTepatChart.tsx
View File

@@ -51,7 +51,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
}
},
stroke: {
curve: 'smooth',
curve: 'straight',
width: 3,
lineCap: 'round'
},
@@ -322,13 +322,13 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
<div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
<Chart
options={options}
series={series}
type="line"
height="100%"
width="90%"
width="100%"
/>
</div>
</CardContent>

3
components/charts/JenisPendaftaranLulusPieChart.tsx
View File

@@ -169,9 +169,6 @@ export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) {
Jenis Pendaftaran Mahasiswa Lulus Tepat Waktu
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
<div className="text-lg font-semibold text-gray-600 dark:text-gray-300">
Total Mahasiswa: {totalMahasiswa}
</div>
</CardHeader>
<CardContent>
<div className="h-[300px] w-full max-w-5xl mx-auto">

224
components/charts/KelompokKeahlianStatusChart.tsx Normal file
View File

@@ -0,0 +1,224 @@
'use client';
import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import { ApexOptions } from 'apexcharts';
import { useTheme } from 'next-themes';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface KelompokKeahlianStatusData {
tahun_angkatan: number;
status_kuliah: string;
nama_kelompok: string;
jumlah_mahasiswa: number;
}
interface Props {
selectedYear: string;
selectedStatus: string;
}
export default function KelompokKeahlianStatusChart({ selectedYear, selectedStatus }: Props) {
const { theme } = useTheme();
const [data, setData] = useState<KelompokKeahlianStatusData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const response = await fetch(
`/api/mahasiswa/kelompok-keahlian-status?tahun_angkatan=${selectedYear}&status_kuliah=${selectedStatus}`
);
if (!response.ok) {
throw new Error('Failed to fetch data');
}
const result = await response.json();
// Sort data by nama_kelompok
const sortedData = result.sort((a: KelompokKeahlianStatusData, b: KelompokKeahlianStatusData) =>
a.nama_kelompok.localeCompare(b.nama_kelompok)
);
setData(sortedData);
} catch (err) {
setError(err instanceof Error ? err.message : 'An error occurred');
} finally {
setLoading(false);
}
};
fetchData();
}, [selectedYear, selectedStatus]);
// Get unique tahun_angkatan (series)
const years = [...new Set(data.map(item => item.tahun_angkatan))].sort((a, b) => Number(a) - Number(b));
// Get unique kelompok keahlian (x axis)
const kelompokList = [...new Set(data.map(item => item.nama_kelompok))];
// Process data for series
const processSeriesData = () => {
return kelompokList.map(kelompok => {
const seriesData = years.map(tahun => {
const found = data.find(item => item.tahun_angkatan === tahun && item.nama_kelompok === kelompok);
return found ? found.jumlah_mahasiswa : 0;
});
return {
name: kelompok,
data: seriesData
};
});
};
const series = processSeriesData();
const chartOptions: ApexOptions = {
chart: {
type: 'bar',
stacked: true,
toolbar: {
show: true,
},
background: theme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
horizontal: true,
columnWidth: '55%',
},
},
dataLabels: {
enabled: true,
formatter: function (val: number) {
return val.toString();
},
style: {
fontSize: '12px',
colors: [theme === 'dark' ? '#fff' : '#000']
}
},
stroke: {
show: true,
width: 2,
colors: ['transparent'],
},
xaxis: {
categories: years.map(y => y.toString()),
title: {
text: 'Tahun Angkatan',
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
}
}
},
yaxis: {
title: {
text: 'Jumlah Mahasiswa',
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
}
},
},
fill: {
opacity: 1,
},
legend: {
position: 'top',
fontSize: '14px',
markers: {
size: 12,
},
itemMargin: {
horizontal: 10,
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
}
},
colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + ' mahasiswa';
}
}
}
};
if (loading) {
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Loading...
</CardTitle>
</CardHeader>
</Card>
);
}
if (error) {
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold text-red-500">
Error: {error}
</CardTitle>
</CardHeader>
</Card>
);
}
if (data.length === 0) {
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Tidak ada data yang tersedia
</CardTitle>
</CardHeader>
</Card>
);
}
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Kelompok Keahlian Mahasiswa {selectedStatus}
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={chartOptions}
series={series}
type="bar"
height="100%"
width="100%"
/>
)}
</div>
</CardContent>
</Card>
);
}

158
components/charts/KelompokKeahlianStatusPieChart.tsx Normal file
View File

@@ -0,0 +1,158 @@
'use client';
import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import { ApexOptions } from 'apexcharts';
import { useTheme } from 'next-themes';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface KelompokKeahlianStatusData {
tahun_angkatan: number;
status_kuliah: string;
nama_kelompok: string;
jumlah_mahasiswa: number;
}
interface Props {
selectedYear: string;
selectedStatus: string;
}
export default function KelompokKeahlianStatusPieChart({ selectedYear, selectedStatus }: Props) {
const { theme } = useTheme();
const [data, setData] = useState<KelompokKeahlianStatusData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const response = await fetch(
`/api/mahasiswa/kelompok-keahlian-status?tahun_angkatan=${selectedYear}&status_kuliah=${selectedStatus}`
);
if (!response.ok) {
throw new Error('Failed to fetch data');
}
const result = await response.json();
// Sort data by nama_kelompok
const sortedData = result.sort((a: KelompokKeahlianStatusData, b: KelompokKeahlianStatusData) =>
a.nama_kelompok.localeCompare(b.nama_kelompok)
);
setData(sortedData);
} catch (err) {
setError(err instanceof Error ? err.message : 'An error occurred');
} finally {
setLoading(false);
}
};
fetchData();
}, [selectedYear, selectedStatus]);
// Pie chart: label = nama_kelompok, value = jumlah_mahasiswa
const labels = data.map(item => item.nama_kelompok);
const series = data.map(item => item.jumlah_mahasiswa);
const chartOptions: ApexOptions = {
chart: {
type: 'pie',
background: theme === 'dark' ? '#0F172B' : '#fff',
},
labels,
legend: {
position: 'bottom',
fontSize: '14px',
markers: {
size: 12,
},
itemMargin: {
horizontal: 10,
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
}
},
dataLabels: {
enabled: true,
formatter: function (val: number) {
return `${val.toFixed(0)}%`;
},
style: {
fontSize: '14px',
fontFamily: 'Inter, sans-serif',
fontWeight: '500'
},
},
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + ' mahasiswa';
}
}
},
colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
};
if (loading) {
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Loading...
</CardTitle>
</CardHeader>
</Card>
);
}
if (error) {
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold text-red-500">
Error: {error}
</CardTitle>
</CardHeader>
</Card>
);
}
if (data.length === 0) {
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Tidak ada data yang tersedia
</CardTitle>
</CardHeader>
</Card>
);
}
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Kelompok Keahlian Mahasiswa {selectedStatus}
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] w-full max-w-3xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={chartOptions}
series={series}
type="pie"
height="100%"
width="100%"
/>
)}
</div>
</CardContent>
</Card>
);
}

1
components/charts/LulusTepatWaktuPieChart.tsx
View File

@@ -109,7 +109,6 @@ export default function LulusTepatWaktuPieChart({ selectedYear }: Props) {
}
};
// Process data for series
const processSeriesData = () => {
const maleData = data.find(item => item.jk === 'Pria')?.jumlah_lulus_tepat_waktu || 0;
const femaleData = data.find(item => item.jk === 'Wanita')?.jumlah_lulus_tepat_waktu || 0;

9
components/charts/StatistikMahasiswaChart.tsx
View File

@@ -304,13 +304,6 @@ export default function StatistikMahasiswaChart() {
}
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Total Mahasiswa
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
<Chart
options={chartOptions}
@@ -320,7 +313,5 @@ export default function StatistikMahasiswaChart() {
width="100%"
/>
</div>
</CardContent>
</Card>
);
}