431 lines
12 KiB
TypeScript
431 lines
12 KiB
TypeScript
'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 ApexCharts secara dinamis untuk menghindari masalah SSR
|
|
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
|
|
|
|
interface BimbinganDosenData {
|
|
id_dosen: number;
|
|
nama_dosen: string;
|
|
selesai: number;
|
|
belum_selesai: number;
|
|
total: number;
|
|
}
|
|
|
|
interface Props {
|
|
tahunAngkatan: string;
|
|
}
|
|
|
|
export default function BimbinganDosenPerAngkatanChart({ tahunAngkatan }: Props) {
|
|
const { theme } = useTheme();
|
|
const [mounted, setMounted] = useState(false);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [data, setData] = useState<BimbinganDosenData[]>([]);
|
|
const [series, setSeries] = useState<ApexAxisChartSeries>([
|
|
{
|
|
name: 'Selesai',
|
|
data: []
|
|
},
|
|
{
|
|
name: 'Belum Selesai',
|
|
data: []
|
|
}
|
|
]);
|
|
const [options, setOptions] = useState<ApexOptions>({
|
|
chart: {
|
|
type: 'bar',
|
|
stacked: true,
|
|
toolbar: {
|
|
show: true,
|
|
tools: {
|
|
download: true,
|
|
selection: true,
|
|
zoom: true,
|
|
zoomin: true,
|
|
zoomout: true,
|
|
pan: true,
|
|
reset: true,
|
|
customIcons: []
|
|
},
|
|
export: {
|
|
csv: {
|
|
filename: `bimbingan-dosen-angkatan`,
|
|
columnDelimiter: ',',
|
|
headerCategory: 'Nama Dosen',
|
|
headerValue: 'Jumlah Bimbingan'
|
|
}
|
|
},
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: true,
|
|
columnWidth: '85%',
|
|
distributed: false,
|
|
barHeight: '90%',
|
|
dataLabels: {
|
|
position: 'center'
|
|
}
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
formatter: function (val: number) {
|
|
return val > 0 ? val.toString() : '';
|
|
},
|
|
style: {
|
|
fontSize: '12px',
|
|
colors: [theme === 'dark' ? '#fff' : '#000']
|
|
},
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 1,
|
|
colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
|
|
},
|
|
xaxis: {
|
|
categories: [],
|
|
title: {
|
|
text: 'Jumlah Bimbingan',
|
|
style: {
|
|
fontSize: '14px',
|
|
fontWeight: 'bold',
|
|
color: theme === 'dark' ? '#fff' : '#000'
|
|
}
|
|
},
|
|
labels: {
|
|
style: {
|
|
fontSize: '12px',
|
|
colors: theme === 'dark' ? '#fff' : '#000'
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Nama Dosen',
|
|
style: {
|
|
fontSize: '14px',
|
|
fontWeight: 'bold',
|
|
color: theme === 'dark' ? '#fff' : '#000'
|
|
}
|
|
},
|
|
labels: {
|
|
style: {
|
|
fontSize: '14px',
|
|
colors: theme === 'dark' ? '#fff' : '#000'
|
|
},
|
|
maxWidth: 200,
|
|
},
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
fontSize: '14px',
|
|
markers: {
|
|
size: 12,
|
|
},
|
|
itemMargin: {
|
|
horizontal: 10,
|
|
},
|
|
horizontalAlign: 'center',
|
|
labels: {
|
|
colors: theme === 'dark' ? '#fff' : '#000'
|
|
}
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0
|
|
}
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
colors: ['#10B981', '#F59E0B'], // Hijau untuk Selesai, Kuning untuk Belum Selesai
|
|
tooltip: {
|
|
theme: theme === 'dark' ? 'dark' : 'light',
|
|
shared: true,
|
|
intersect: false,
|
|
custom: function({ series, seriesIndex, dataPointIndex, w }: any) {
|
|
const dosen = w.globals.labels[dataPointIndex];
|
|
const isDark = theme === 'dark';
|
|
|
|
// Hitung total untuk dosen ini
|
|
let total = 0;
|
|
series.forEach((seriesData: number[]) => {
|
|
total += seriesData[dataPointIndex] || 0;
|
|
});
|
|
|
|
const statusNames = ['Selesai', 'Belum Selesai'];
|
|
const statusColors = ['#10B981', '#F59E0B'];
|
|
|
|
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: 180px;
|
|
">
|
|
<div style="
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: ${isDark ? '#f1f5f9' : '#1f2937'};
|
|
margin-bottom: 8px;
|
|
text-align: center;
|
|
">${dosen}</div>`;
|
|
|
|
// Tambahkan setiap status
|
|
series.forEach((seriesData: number[], index: number) => {
|
|
const value = seriesData[dataPointIndex] || 0;
|
|
tooltipContent += `
|
|
<div style="display: flex; align-items: center; margin-bottom: 4px;">
|
|
<div style="width: 8px; height: 8px; background: ${statusColors[index]}; border-radius: 50%; margin-right: 8px;"></div>
|
|
<span style="font-size: 12px; color: ${isDark ? '#cbd5e1' : '#374151'};">${statusNames[index]}</span>
|
|
<span style="font-size: 12px; font-weight: 600; color: ${isDark ? '#f1f5f9' : '#1f2937'}; margin-left: auto;">${value}</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</span>
|
|
<span style="font-size: 13px; font-weight: 700; color: #6366f1; margin-left: auto;">${total}</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
return tooltipContent;
|
|
}
|
|
}
|
|
});
|
|
|
|
// Perbarui tema saat berubah
|
|
useEffect(() => {
|
|
setOptions(prev => ({
|
|
...prev,
|
|
chart: {
|
|
...prev.chart,
|
|
background: theme === 'dark' ? '#0F172B' : '#fff',
|
|
},
|
|
dataLabels: {
|
|
...prev.dataLabels,
|
|
style: {
|
|
...prev.dataLabels?.style,
|
|
colors: [theme === 'dark' ? '#fff' : '#000']
|
|
}
|
|
},
|
|
xaxis: {
|
|
...prev.xaxis,
|
|
title: {
|
|
...prev.xaxis?.title,
|
|
style: {
|
|
...prev.xaxis?.title?.style,
|
|
color: theme === 'dark' ? '#fff' : '#000'
|
|
}
|
|
},
|
|
labels: {
|
|
...prev.xaxis?.labels,
|
|
style: {
|
|
...prev.xaxis?.labels?.style,
|
|
colors: theme === '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: theme === '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: theme === 'dark' ? '#fff' : '#000'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
...prev.legend,
|
|
labels: {
|
|
...prev.legend?.labels,
|
|
colors: theme === 'dark' ? '#fff' : '#000'
|
|
}
|
|
},
|
|
tooltip: {
|
|
...prev.tooltip,
|
|
theme: theme === 'dark' ? 'dark' : 'light'
|
|
}
|
|
}));
|
|
}, [theme]);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const response = await fetch(`/api/mahasiswa/bimbingan-dosen?tahun_angkatan=${tahunAngkatan}`);
|
|
|
|
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('Format data tidak valid diterima dari server');
|
|
}
|
|
|
|
// Urutkan data berdasarkan kategori "Belum Selesai" dari terbanyak ke terkecil
|
|
const sortedResult = result.sort((a, b) => b.belum_selesai - a.belum_selesai);
|
|
setData(sortedResult);
|
|
|
|
// Proses data untuk chart
|
|
const namaDosen = sortedResult.map(item => item.nama_dosen);
|
|
const selesaiData = sortedResult.map(item => item.selesai);
|
|
const belumSelesaiData = sortedResult.map(item => item.belum_selesai);
|
|
|
|
setSeries([
|
|
{
|
|
name: 'Selesai',
|
|
data: selesaiData
|
|
},
|
|
{
|
|
name: 'Belum Selesai',
|
|
data: belumSelesaiData
|
|
}
|
|
]);
|
|
|
|
setOptions(prev => ({
|
|
...prev,
|
|
xaxis: {
|
|
...prev.xaxis,
|
|
categories: namaDosen,
|
|
},
|
|
chart: {
|
|
...prev.chart,
|
|
toolbar: {
|
|
...prev.chart?.toolbar,
|
|
export: {
|
|
...prev.chart?.toolbar?.export,
|
|
csv: {
|
|
...prev.chart?.toolbar?.export?.csv,
|
|
filename: `bimbingan-dosen-angkatan-${tahunAngkatan}`,
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}));
|
|
} catch (err) {
|
|
console.error('Error in fetchData:', err);
|
|
setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengambil data');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (tahunAngkatan) {
|
|
fetchData();
|
|
}
|
|
}, [tahunAngkatan]);
|
|
|
|
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 bimbingan yang tersedia untuk angkatan {tahunAngkatan}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Hitung tinggi dinamis berdasarkan jumlah dosen
|
|
const calculateHeight = () => {
|
|
const minHeight = 200;
|
|
const barHeight = 25; // Tinggi per bar dalam piksel
|
|
const padding = 100; // Ruang ekstra untuk judul, legenda, dll
|
|
const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
|
|
return `${dynamicHeight}px`;
|
|
};
|
|
|
|
return (
|
|
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl font-bold dark:text-white">
|
|
Bimbingan Dosen Angkatan {tahunAngkatan}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div
|
|
className="w-full"
|
|
style={{ height: calculateHeight() }}
|
|
>
|
|
<Chart
|
|
options={options}
|
|
series={series}
|
|
type="bar"
|
|
height="100%"
|
|
width="100%"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|