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

commit part sekian

Browse Source
This commit is contained in:
Randa Firman Putra
2025-08-22 18:21:53 +07:00
parent 91f3445c3c
commit 744c3db464
8 changed files with 1241 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
components/chartsDashboard/kkdashboardchart.tsx Normal file
View File

@@ -0,0 +1,221 @@
'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;
nama_kelompok: string;
jumlah_mahasiswa: number;
}
interface Props {
selectedYear: string;
}
export default function KelompokKeahlianStatusChart({ selectedYear }: 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/kk-dashboard?tahun_angkatan=${selectedYear}`
);
if (!response.ok) {
throw new Error('Failed to fetch data');
}
const result = await response.json();
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]);
// 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
{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>
);
}

179
components/chartsDashboard/kkdashboardtepatpiechart.tsx Normal file
View File

@@ -0,0 +1,179 @@
'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";
// Dynamically import ApexCharts to avoid SSR issues
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface KelompokKeahlianLulusTepatData {
nama_kelompok: string;
jumlah_lulusan_tercepat: number;
}
export default function KelompokKeahlianLulusTepatPieChart() {
const { theme } = useTheme();
const [data, setData] = useState<KelompokKeahlianLulusTepatData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
setError(null);
const url = `/api/mahasiswa/kk-dashboard-tepat`;
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
}
const result = await response.json();
setData(result);
} catch (err) {
console.error('Error in fetchData:', err);
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
} finally {
setLoading(false);
}
};
fetchData();
}, []);
const chartOptions: ApexOptions = {
chart: {
type: 'pie',
toolbar: {
show: true,
tools: {
download: true,
selection: true,
zoom: true,
zoomin: true,
zoomout: true,
pan: true,
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
},
labels: [],
colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
legend: {
position: 'bottom',
fontSize: '14px',
markers: {
size: 12,
strokeWidth: 0
},
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'
},
offsetY: 0,
dropShadow: {
enabled: false
}
},
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + " mahasiswa"
}
}
}
};
// Process data for series
const processSeriesData = () => {
const kelompokKeahlian = data.map(item => item.nama_kelompok);
const jumlahData = data.map(item => item.jumlah_lulusan_tercepat);
return {
series: jumlahData,
labels: kelompokKeahlian
};
};
const { series, labels } = processSeriesData();
const totalLulusTepat = data.reduce((sum, item) => sum + item.jumlah_lulusan_tercepat, 0);
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 Lulusan Tepat Waktu
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={{...chartOptions, labels}}
series={series}
type="pie"
height="100%"
width="100%"
/>
)}
</div>
</CardContent>
</Card>
);
}

270
components/chartsDashboard/masastudiaktifchart.tsx Normal file
View File

@@ -0,0 +1,270 @@
'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 MasaStudiAktifData {
tahun_angkatan: number;
rata_rata_masa_studi_aktif_tahun: number;
rata_rata_masa_studi_lulus_tahun: number;
}
interface Props {
selectedYear: string;
}
export default function MasaStudiAktifChart({ selectedYear }: Props) {
const { theme } = useTheme();
const [mounted, setMounted] = useState(false);
const [data, setData] = useState<MasaStudiAktifData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
setMounted(true);
}, []);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
setError(null);
let url = '/api/mahasiswa/masa-studi-aktif';
if (selectedYear && selectedYear !== 'all') {
url += `?tahun_angkatan=${selectedYear}`;
}
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
}
const result = await response.json();
if (!Array.isArray(result)) {
throw new Error('Invalid data format received from server');
}
// Sort data by tahun_angkatan
const sortedData = result.sort((a: MasaStudiAktifData, b: MasaStudiAktifData) => a.tahun_angkatan - b.tahun_angkatan);
setData(sortedData);
} catch (err) {
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
} finally {
setLoading(false);
}
};
fetchData();
}, [selectedYear]);
// Chart options and series
const chartOptions: ApexOptions = {
chart: {
type: selectedYear === 'all' ? 'line' : 'bar',
toolbar: {
show: true,
tools: {
download: true,
selection: true,
zoom: true,
zoomin: true,
zoomout: true,
pan: true,
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
zoom: {
enabled: true,
type: 'x',
autoScaleYaxis: true
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
borderRadius: 4,
},
},
stroke: {
curve: 'straight',
width: 3,
lineCap: 'round'
},
markers: {
size: 5,
strokeWidth: 2,
strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'],
colors: ['#3B82F6'],
hover: {
size: 7
}
},
dataLabels: {
enabled: true,
formatter: function (val: number) {
return val.toFixed(1);
},
style: {
fontSize: '14px',
fontWeight: 'bold',
colors: [theme === 'dark' ? '#fff' : '#000']
},
background: {
enabled: false
},
offsetY: -10
},
xaxis: {
categories: data.map(item => item.tahun_angkatan.toString()),
title: {
text: 'Tahun Angkatan',
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
title: {
text: 'Rata-rata Masa Studi (tahun)',
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
}
},
min: 0,
max: 8,
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
},
formatter: function (val: number) {
return val.toFixed(1);
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
}
},
grid: {
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4,
padding: {
top: 20,
right: 0,
bottom: 0,
left: 0
}
},
colors: ['#3B82F6'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val.toFixed(1) + ' tahun';
}
},
marker: {
show: true
}
},
legend: {
show: true,
position: 'top',
horizontalAlign: 'right',
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
}
}
};
const series = [{
name: 'Rata-rata Masa Studi Aktif (tahun)',
data: data.map(item => item.rata_rata_masa_studi_aktif_tahun)
}];
if (!mounted) {
return null;
}
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 dark:text-red-400">
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">
Rata-rata Masa Studi Mahasiswa Aktif
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={chartOptions}
series={series}
type={selectedYear === 'all' ? 'line' : 'bar'}
height="100%"
width="100%"
/>
)}
</div>
</CardContent>
</Card>
);
}

270
components/chartsDashboard/masastudiluluschart.tsx Normal file
View File

@@ -0,0 +1,270 @@
'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 MasaStudiAktifData {
tahun_angkatan: number;
rata_rata_masa_studi_aktif_tahun: number;
rata_rata_masa_studi_lulus_tahun: number;
}
interface Props {
selectedYear: string;
}
export default function MasaStudiLulusChart({ selectedYear }: Props) {
const { theme } = useTheme();
const [mounted, setMounted] = useState(false);
const [data, setData] = useState<MasaStudiAktifData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
setMounted(true);
}, []);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
setError(null);
let url = '/api/mahasiswa/masa-studi-aktif';
if (selectedYear && selectedYear !== 'all') {
url += `?tahun_angkatan=${selectedYear}`;
}
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
}
const result = await response.json();
if (!Array.isArray(result)) {
throw new Error('Invalid data format received from server');
}
// Sort data by tahun_angkatan
const sortedData = result.sort((a: MasaStudiAktifData, b: MasaStudiAktifData) => a.tahun_angkatan - b.tahun_angkatan);
setData(sortedData);
} catch (err) {
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
} finally {
setLoading(false);
}
};
fetchData();
}, [selectedYear]);
// Chart options and series
const chartOptions: ApexOptions = {
chart: {
type: selectedYear === 'all' ? 'line' : 'bar',
toolbar: {
show: true,
tools: {
download: true,
selection: true,
zoom: true,
zoomin: true,
zoomout: true,
pan: true,
reset: true
}
},
background: theme === 'dark' ? '#0F172B' : '#fff',
zoom: {
enabled: true,
type: 'x',
autoScaleYaxis: true
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
borderRadius: 4,
},
},
stroke: {
curve: 'straight',
width: 3,
lineCap: 'round'
},
markers: {
size: 5,
strokeWidth: 2,
strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'],
colors: ['#3B82F6'],
hover: {
size: 7
}
},
dataLabels: {
enabled: true,
formatter: function (val: number) {
return val.toFixed(1);
},
style: {
fontSize: '14px',
fontWeight: 'bold',
colors: [theme === 'dark' ? '#fff' : '#000']
},
background: {
enabled: false
},
offsetY: -10
},
xaxis: {
categories: data.map(item => item.tahun_angkatan.toString()),
title: {
text: 'Tahun Angkatan',
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
},
axisTicks: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
}
},
yaxis: {
title: {
text: 'Rata-rata Masa Studi (tahun)',
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
}
},
min: 0,
max: 8,
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
},
formatter: function (val: number) {
return val.toFixed(1);
}
},
axisBorder: {
show: true,
color: theme === 'dark' ? '#374151' : '#E5E7EB'
}
},
grid: {
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
strokeDashArray: 4,
padding: {
top: 20,
right: 0,
bottom: 0,
left: 0
}
},
colors: ['#3B82F6'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val.toFixed(1) + ' tahun';
}
},
marker: {
show: true
}
},
legend: {
show: true,
position: 'top',
horizontalAlign: 'right',
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
}
}
};
const series = [{
name: 'Rata-rata Masa Studi Lulus (tahun)',
data: data.map(item => item.rata_rata_masa_studi_lulus_tahun)
}];
if (!mounted) {
return null;
}
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 dark:text-red-400">
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">
Rata-rata Masa Studi Mahasiswa Lulus
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={chartOptions}
series={series}
type={selectedYear === 'all' ? 'line' : 'bar'}
height="100%"
width="100%"
/>
)}
</div>
</CardContent>
</Card>
);
}