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

again n again

Browse Source
This commit is contained in:
Randa Firman Putra
2025-12-04 22:15:37 +07:00
parent 82bec8eecc
commit 700a153b86
33 changed files with 1437 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/chartsDashboard/DistribusiIPKChart.tsx
View File

@@ -285,7 +285,7 @@ export default function DistribusiIPKChart({
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Memuat data distribusi IPK...
Loading...
</CardTitle>
</CardHeader>
</Card>
@@ -327,7 +327,7 @@ export default function DistribusiIPKChart({
<CardHeader>
<div className="flex justify-between items-center">
<CardTitle className="text-xl font-bold dark:text-white">
Distribusi IPK
Persentase Distribusi IPK Berdasarkan Tahun Angkatan
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
{showDetailButton && (

2
components/chartsDashboard/DistribusiIPKChartPerangkatan.tsx
View File

@@ -199,7 +199,7 @@ export default function DistribusiIPKChartPerangkatan({ selectedYear }: Props) {
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Distribusi IPK
Persentase Distribusi IPK
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
</CardHeader>

491
components/chartsDashboard/MKBelumDiambilChart.tsx Normal file
View File

@@ -0,0 +1,491 @@
'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";
import { Button } from "@/components/ui/button";
import { ExternalLink } from "lucide-react";
import Link from "next/link";
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface MKBelumDiambilData {
tahun_angkatan: number;
jenis_mk: string;
jumlah_belum_diambil: number;
total_mata_kuliah: number;
total_mahasiswa: number;
}
interface MKBelumDiambilChartProps {
selectedYear?: string;
height?: string;
showDetailButton?: boolean;
}
export default function MKBelumDiambilChart({
selectedYear = 'all',
height = "h-[300px] sm:h-[350px] md:h-[300px]",
showDetailButton = true
}: MKBelumDiambilChartProps) {
const { theme } = useTheme();
const [mounted, setMounted] = useState(false);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [data, setData] = useState<MKBelumDiambilData[]>([]);
const [series, setSeries] = useState<ApexAxisChartSeries>([]);
const [options, setOptions] = useState<ApexOptions>({
chart: {
type: 'bar',
stacked: true,
toolbar: {
show: true,
},
background: theme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
horizontal: true,
barHeight: '70%',
},
},
dataLabels: {
enabled: true,
formatter: function (val: number, opts: any) {
const dataPointIndex = opts.dataPointIndex;
// Hitung total untuk tahun angkatan ini
const allSeries = opts.w.config.series;
let totalForYear = 0;
allSeries.forEach((series: any) => {
totalForYear += series.data[dataPointIndex] || 0;
});
if (totalForYear === 0 || val === 0) return '';
const percentage = ((val / totalForYear) * 100).toFixed(0);
return percentage + '%';
},
style: {
fontSize: '12px',
colors: [theme === 'dark' ? '#fff' : '#000']
}
},
stroke: {
show: true,
width: 2,
colors: ['transparent'],
},
xaxis: {
categories: [],
title: {
text: 'Jumlah Mata Kuliah Belum Diambil',
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
}
},
min: 0,
tickAmount: 5
},
yaxis: {
title: {
text: 'Tahun Angkatan',
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: ['#3B82F6', '#10B981', '#F59E0B'], // Wajib (blue), Pilihan Wajib (green), Pilihan (amber)
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
shared: true,
intersect: false,
custom: function({ series, seriesIndex, dataPointIndex, w }: any) {
const tahun = w.globals.labels[dataPointIndex];
const isDark = theme === 'dark';
// Hitung total untuk tahun ini
let total = 0;
series.forEach((seriesData: number[]) => {
total += seriesData[dataPointIndex] || 0;
});
const jenisMKNames = w.config.series.map((s: any) => s.name);
const jenisMKColors = w.config.colors;
let tooltipContent = `
<div style="
padding: 12px 16px;
background: ${isDark ? 'rgba(30, 41, 59, 0.95)' : 'rgba(255, 255, 255, 0.95)'};
backdrop-filter: blur(10px);
border: none;
border-radius: 12px;
box-shadow: 0 8px 32px ${isDark ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.1)'};
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
min-width: 200px;
">
<div style="
font-size: 13px;
font-weight: 600;
color: ${isDark ? '#f1f5f9' : '#1f2937'};
margin-bottom: 8px;
text-align: center;
">Angkatan ${tahun}</div>`;
// Tambahkan setiap jenis MK
series.forEach((seriesData: number[], index: number) => {
const value = seriesData[dataPointIndex] || 0;
if (value > 0) {
const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0';
tooltipContent += `
<div style="display: flex; align-items: center; margin-bottom: 4px;">
<div style="width: 8px; height: 8px; background: ${jenisMKColors[index]}; border-radius: 50%; margin-right: 8px;"></div>
<span style="font-size: 12px; color: ${isDark ? '#cbd5e1' : '#374151'};">${jenisMKNames[index]}</span>
<span style="font-size: 12px; font-weight: 600; color: ${isDark ? '#f1f5f9' : '#1f2937'}; margin-left: auto;">${value} (${percentage}%)</span>
</div>`;
}
});
// Tambahkan total
tooltipContent += `
<div style="
border-top: 1px solid ${isDark ? '#475569' : '#e5e7eb'};
margin-top: 8px;
padding-top: 8px;
display: flex;
align-items: center;
">
<div style="width: 8px; height: 8px; background: #6366f1; border-radius: 50%; margin-right: 8px;"></div>
<span style="font-size: 12px; font-weight: 600; color: ${isDark ? '#f1f5f9' : '#1f2937'};">Total MK Belum Diambil</span>
<span style="font-size: 13px; font-weight: 700; color: #6366f1; margin-left: auto;">${total}</span>
</div>
</div>
`;
return tooltipContent;
}
}
});
// Update theme when it changes
useEffect(() => {
const currentTheme = theme;
setOptions(prev => ({
...prev,
chart: {
...prev.chart,
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
},
dataLabels: {
...prev.dataLabels,
formatter: function (val: number, opts: any) {
const dataPointIndex = opts.dataPointIndex;
// Hitung total untuk tahun angkatan ini
const allSeries = opts.w.config.series;
let totalForYear = 0;
allSeries.forEach((series: any) => {
totalForYear += series.data[dataPointIndex] || 0;
});
if (totalForYear === 0 || val === 0) return '';
const percentage = ((val / totalForYear) * 100).toFixed(0);
return percentage + '%';
},
style: {
...prev.dataLabels?.style,
colors: [currentTheme === 'dark' ? '#fff' : '#000']
}
},
xaxis: {
...prev.xaxis,
title: {
...prev.xaxis?.title,
style: {
...prev.xaxis?.title?.style,
color: currentTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
...prev.xaxis?.labels,
style: {
...prev.xaxis?.labels?.style,
colors: currentTheme === 'dark' ? '#fff' : '#000'
}
}
},
yaxis: {
...prev.yaxis,
title: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
color: currentTheme === 'dark' ? '#fff' : '#000'
}
},
labels: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
style: {
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
colors: currentTheme === 'dark' ? '#fff' : '#000'
}
}
},
legend: {
...prev.legend,
labels: {
...prev.legend?.labels,
colors: currentTheme === 'dark' ? '#fff' : '#000'
}
},
tooltip: {
...prev.tooltip,
theme: currentTheme === 'dark' ? 'dark' : 'light',
custom: function({ series, seriesIndex, dataPointIndex, w }: any) {
const tahun = w.globals.labels[dataPointIndex];
const isDark = currentTheme === 'dark';
// Hitung total untuk tahun ini
let total = 0;
series.forEach((seriesData: number[]) => {
total += seriesData[dataPointIndex] || 0;
});
const jenisMKNames = w.config.series.map((s: any) => s.name);
const jenisMKColors = w.config.colors;
let tooltipContent = `
<div style="
padding: 12px 16px;
background: ${isDark ? 'rgba(30, 41, 59, 0.95)' : 'rgba(255, 255, 255, 0.95)'};
backdrop-filter: blur(10px);
border: none;
border-radius: 12px;
box-shadow: 0 8px 32px ${isDark ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.1)'};
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
min-width: 200px;
">
<div style="
font-size: 13px;
font-weight: 600;
color: ${isDark ? '#f1f5f9' : '#1f2937'};
margin-bottom: 8px;
text-align: center;
">Angkatan ${tahun}</div>`;
// Tambahkan setiap jenis MK
series.forEach((seriesData: number[], index: number) => {
const value = seriesData[dataPointIndex] || 0;
if (value > 0) {
const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0';
tooltipContent += `
<div style="display: flex; align-items: center; margin-bottom: 4px;">
<div style="width: 8px; height: 8px; background: ${jenisMKColors[index]}; border-radius: 50%; margin-right: 8px;"></div>
<span style="font-size: 12px; color: ${isDark ? '#cbd5e1' : '#374151'};">${jenisMKNames[index]}</span>
<span style="font-size: 12px; font-weight: 600; color: ${isDark ? '#f1f5f9' : '#1f2937'}; margin-left: auto;">${value} (${percentage}%)</span>
</div>`;
}
});
// Tambahkan total
tooltipContent += `
<div style="
border-top: 1px solid ${isDark ? '#475569' : '#e5e7eb'};
margin-top: 8px;
padding-top: 8px;
display: flex;
align-items: center;
">
<div style="width: 8px; height: 8px; background: #6366f1; border-radius: 50%; margin-right: 8px;"></div>
<span style="font-size: 12px; font-weight: 600; color: ${isDark ? '#f1f5f9' : '#1f2937'};">Total MK Belum Diambil</span>
<span style="font-size: 13px; font-weight: 700; color: #6366f1; margin-left: auto;">${total}</span>
</div>
</div>
`;
return tooltipContent;
}
}
}));
}, [theme]);
useEffect(() => {
setMounted(true);
}, []);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
setError(null);
const url = selectedYear === 'all'
? '/api/mahasiswa/mkbelumdiambil'
: `/api/mahasiswa/mkbelumdiambil?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');
}
setData(result);
// Ambil tahun angkatan unik dan urutkan
const tahunAngkatan = [...new Set(result.map(item => item.tahun_angkatan))].sort((a, b) => a - b);
// Ambil jenis MK unik dan urutkan sesuai urutan: Wajib, Pilihan Wajib, Pilihan
const jenisMKOrder = ['Wajib', 'Pilihan Wajib', 'Pilihan'];
const jenisMK = [...new Set(result.map(item => item.jenis_mk))].sort((a, b) => {
return jenisMKOrder.indexOf(a) - jenisMKOrder.indexOf(b);
});
// Buat series data
const seriesData = jenisMK.map(jenis => ({
name: jenis,
data: tahunAngkatan.map(tahun => {
const item = result.find(d => d.tahun_angkatan === tahun && d.jenis_mk === jenis);
return item ? item.jumlah_belum_diambil : 0;
}),
}));
setSeries(seriesData);
setOptions(prev => ({
...prev,
xaxis: {
...prev.xaxis,
categories: tahunAngkatan,
},
}));
} catch (err) {
console.error('Error in fetchData:', err);
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
} finally {
setLoading(false);
}
};
fetchData();
}, [selectedYear]);
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">
Memuat data mata kuliah belum diambil...
</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">
Mata Kuliah Belum Diambil
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
Tidak ada data yang tersedia untuk periode ini.
</p>
</CardContent>
</Card>
);
}
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<div className="flex justify-between items-center">
<CardTitle className="text-xl font-bold dark:text-white">
Mata Kuliah Belum Diambil Berdasarkan Jenis MK
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
{showDetailButton && (
<Link href="/detail/mk-belum-diambil" target="_blank">
<Button variant="outline" size="sm" className="flex items-center gap-1 dark:text-white">
<ExternalLink className="size-3" />
Detail
</Button>
</Link>
)}
</div>
</CardHeader>
<CardContent>
<div className={`${height} w-full max-w-5xl mx-auto`}>
<Chart
options={options}
series={series}
type="bar"
height="100%"
width="100%"
/>
</div>
</CardContent>
</Card>
);
}

2
components/chartsDashboard/NamaBeasiswaDashChart.tsx
View File

@@ -329,7 +329,7 @@ export default function NamaBeasiswaDashChart({
<CardHeader>
<div className="flex justify-between items-center">
<CardTitle className="text-xl font-bold dark:text-white">
Nama Beasiswa Mahasiswa
Persentase Jumlah Mahasiswa Berdasarkan Nama Beasiswa dan Tahun Angkatan
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
{showDetailButton && (

2
components/chartsDashboard/NamaBeasiswaDashPieChartPerangkatan.tsx
View File

@@ -199,7 +199,7 @@ export default function NamaBeasiswaDashPieChartPerangkatan({ selectedYear }: Pr
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Nama Beasiswa
Persentase Jumlah Mahasiswa Berdasarkan Nama Beasiswa
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
</CardHeader>

2
components/chartsDashboard/ProvinsiMahasiswaPieChart.tsx
View File

@@ -171,7 +171,7 @@ export default function ProvinsiMahasiswaPieChart({
<CardHeader>
<div className="flex justify-between items-center">
<CardTitle className="text-xl font-bold dark:text-white">
Asal Provinsi Mahasiswa
Persentase Jumlah Mahasiswa Berdasarkan Asal Provinsi
</CardTitle>
{showDetailButton && (
<Link href="/detail/asal-provinsi" target="_blank">

2
components/chartsDashboard/StatusMahasiswaPieChartPerangkatan.tsx
View File

@@ -175,7 +175,7 @@ export default function StatusMahasiswaPieChartPerangkatan({ selectedYear }: Pro
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Status Mahasiswa
Persentase Jumlah Mahasiswa Berdasarkan Status Kuliah
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
</CardHeader>

4
components/chartsDashboard/TerancamDOChart.tsx
View File

@@ -177,7 +177,7 @@ export default function TerancamDOChart({
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Memuat data terancam DO...
Loading...
</CardTitle>
</CardHeader>
</Card>
@@ -223,7 +223,7 @@ export default function TerancamDOChart({
<CardHeader>
<div className="flex justify-between items-center">
<CardTitle className="text-xl font-bold dark:text-white">
Mahasiswa Terancam Drop Out
Jumlah Mahasiswa Terancam Drop Out Berdasarkan Tahun Angkatan
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
{showDetailButton && (

2
components/chartsDashboard/TingkatPrestasiDashChart.tsx
View File

@@ -314,7 +314,7 @@ export default function TingkatPrestasiDashChart({
<CardHeader>
<div className="flex justify-between items-center">
<CardTitle className="text-xl font-bold dark:text-white">
Tingkat Prestasi Mahasiswa
Persentase Jumlah Mahasiswa Berdasarkan Tingkat Prestasi dan Tahun Angkatan
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
{showDetailButton && (

2
components/chartsDashboard/TingkatPrestasiPieChartDash.tsx
View File

@@ -166,7 +166,7 @@ export default function TingkatPrestasiPieChart({ selectedYear }: Props) {
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Tingkat Prestasi
Persentase Jumlah Mahasiswa Berdasarkan Tingkat Prestasi
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
</CardHeader>

2
components/chartsDashboard/kkdashboardchart.tsx
View File

@@ -285,7 +285,7 @@ export default function KelompokKeahlianStatusChart({
<CardHeader>
<div className="flex justify-between items-center">
<CardTitle className="text-xl font-bold dark:text-white">
Kelompok Keahlian Mahasiswa
Persentase Jumlah Mahasiswa Berdasarkan Kelompok Keahlian dan Tahun Angkatan
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
{showDetailButton && (

2
components/chartsDashboard/kkdashboardpiechartperangkatan.tsx
View File

@@ -166,7 +166,7 @@ export default function KelompokKeahlianPieChartPerAngkatan({ selectedYear }: Pr
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Kelompok Keahlian
Persentase Jumlah Mahasiswa Berdasarkan Kelompok Keahlian
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
</CardHeader>

2
components/chartsDashboard/kkdashboardtepatpiechart.tsx
View File

@@ -170,7 +170,7 @@ export default function KelompokKeahlianLulusTepatPieChart({
<CardHeader>
<div className="flex justify-between items-center">
<CardTitle className="text-xl font-bold dark:text-white">
Kelompok Keahlian Lulusan Tepat Waktu
Persentase Jumlah Mahasiswa Lulus Tepat Waktu Berdasarkan Kelompok Keahlian
</CardTitle>
{showDetailButton && (
<Link href="/detail/kelompok-keahlian-lulus-tepat" target="_blank">

2
components/chartsDashboard/masastudiluluschart.tsx
View File

@@ -261,7 +261,7 @@ export default function MasaStudiLulusChart({
<CardHeader>
<div className="flex justify-between items-center">
<CardTitle className="text-xl font-bold dark:text-white">
Rata-rata Masa Studi Mahasiswa Lulus
Rata-rata Masa Studi Mahasiswa Lulus Berdasarkan Tahun Angkatan
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
{showDetailButton && (