Change Directory For Charts
This commit is contained in:
Randa Firman Putra
236
components/charts/AsalDaerahBeasiswaChart.tsx
Normal file
236
components/charts/AsalDaerahBeasiswaChart.tsx
Normal file
@@ -0,0 +1,236 @@
|
||||
'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 AsalDaerahBeasiswaData {
|
||||
tahun_angkatan: number;
|
||||
kabupaten: string;
|
||||
jumlah_mahasiswa: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedJenisBeasiswa: string;
|
||||
}
|
||||
|
||||
export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) {
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [data, setData] = useState<AsalDaerahBeasiswaData[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const url = `/api/mahasiswa/asal-daerah-beasiswa?tahunAngkatan=${selectedYear}&jenisBeasiswa=${selectedJenisBeasiswa}`;
|
||||
|
||||
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);
|
||||
} 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, selectedJenisBeasiswa]);
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
columnWidth: '85%',
|
||||
distributed: false,
|
||||
barHeight: '90%',
|
||||
dataLabels: {
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val: number) {
|
||||
return val.toString();
|
||||
},
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: [theme === 'dark' ? '#fff' : '#000']
|
||||
},
|
||||
offsetX: 10,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 1,
|
||||
colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: [...new Set(data.map(item => item.kabupaten))].sort(),
|
||||
title: {
|
||||
text: 'Jumlah Mahasiswa',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Kabupaten',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
},
|
||||
maxWidth: 200,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 10
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
colors: ['#3B82F6'],
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const series = [{
|
||||
name: 'Jumlah Mahasiswa',
|
||||
data: [...new Set(data.map(item => item.kabupaten))].sort().map(kabupaten => {
|
||||
const item = data.find(d => d.kabupaten === kabupaten);
|
||||
return item ? item.jumlah_mahasiswa : 0;
|
||||
})
|
||||
}];
|
||||
|
||||
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">
|
||||
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">
|
||||
Asal Daerah Mahasiswa Beasiswa {selectedJenisBeasiswa}
|
||||
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[600px] w-full">
|
||||
<Chart
|
||||
options={chartOptions}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
277
components/charts/AsalDaerahChart.tsx
Normal file
277
components/charts/AsalDaerahChart.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
'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 AsalDaerahData {
|
||||
kabupaten: string;
|
||||
jumlah: number;
|
||||
}
|
||||
|
||||
export default function AsalDaerahChart() {
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [data, setData] = useState<AsalDaerahData[]>([]);
|
||||
const [series, setSeries] = useState<ApexAxisChartSeries>([{
|
||||
name: 'Jumlah Mahasiswa',
|
||||
data: []
|
||||
}]);
|
||||
const [options, setOptions] = useState<ApexOptions>({
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
columnWidth: '85%',
|
||||
distributed: false,
|
||||
barHeight: '90%',
|
||||
dataLabels: {
|
||||
position: 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val: number) {
|
||||
return val.toString();
|
||||
},
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: [theme === 'dark' ? '#fff' : '#000']
|
||||
},
|
||||
offsetX: 10,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 1,
|
||||
colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: [],
|
||||
title: {
|
||||
text: 'Jumlah Mahasiswa',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Kabupaten',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
},
|
||||
maxWidth: 200,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
colors: ['#3B82F6'], // Blue color for bars
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update theme when it changes
|
||||
useEffect(() => {
|
||||
const currentTheme = theme === 'system' ? systemTheme : theme;
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
chart: {
|
||||
...prev.chart,
|
||||
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
dataLabels: {
|
||||
...prev.dataLabels,
|
||||
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'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
...prev.tooltip,
|
||||
theme: currentTheme === 'dark' ? 'dark' : 'light'
|
||||
}
|
||||
}));
|
||||
}, [theme, systemTheme]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch('/api/mahasiswa/asal-daerah');
|
||||
|
||||
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);
|
||||
|
||||
// Process data for chart
|
||||
const kabupaten = result.map(item => item.kabupaten);
|
||||
const jumlah = result.map(item => item.jumlah);
|
||||
|
||||
setSeries([{
|
||||
name: 'Jumlah Mahasiswa',
|
||||
data: jumlah
|
||||
}]);
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
xaxis: {
|
||||
...prev.xaxis,
|
||||
categories: kabupaten,
|
||||
},
|
||||
}));
|
||||
} catch (err) {
|
||||
console.error('Error in fetchData:', err);
|
||||
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
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">
|
||||
Asal Daerah Mahasiswa
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[600px] w-full">
|
||||
<Chart
|
||||
options={options}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
282
components/charts/AsalDaerahLulusChart.tsx
Normal file
282
components/charts/AsalDaerahLulusChart.tsx
Normal file
@@ -0,0 +1,282 @@
|
||||
'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 AsalDaerahLulusChartProps {
|
||||
selectedYear: string;
|
||||
}
|
||||
|
||||
interface ChartData {
|
||||
tahun_angkatan: string;
|
||||
kabupaten: string;
|
||||
jumlah_lulus_tepat_waktu: number;
|
||||
}
|
||||
|
||||
export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusChartProps) {
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [chartData, setChartData] = useState<ChartData[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [series, setSeries] = useState<ApexAxisChartSeries>([{
|
||||
name: 'Jumlah Lulus Tepat Waktu',
|
||||
data: []
|
||||
}]);
|
||||
|
||||
const [options, setOptions] = useState<ApexOptions>({
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
columnWidth: '55%',
|
||||
dataLabels: {
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val: number) {
|
||||
return val.toString();
|
||||
},
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: [theme === 'dark' ? '#fff' : '#000']
|
||||
},
|
||||
offsetX: 10,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 1,
|
||||
colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: [],
|
||||
title: {
|
||||
text: 'Jumlah Mahasiswa',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Kabupaten',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
},
|
||||
maxWidth: 200,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
colors: ['#3B82F6'], // Blue color for bars
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update theme when it changes
|
||||
useEffect(() => {
|
||||
const currentTheme = theme === 'system' ? systemTheme : theme;
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
chart: {
|
||||
...prev.chart,
|
||||
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
dataLabels: {
|
||||
...prev.dataLabels,
|
||||
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'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
...prev.tooltip,
|
||||
theme: currentTheme === 'dark' ? 'dark' : 'light'
|
||||
}
|
||||
}));
|
||||
}, [theme, systemTheme]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
const response = await fetch(`/api/mahasiswa/asal-daerah-lulus?tahunAngkatan=${selectedYear}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setChartData(data);
|
||||
|
||||
// Process data for chart
|
||||
const kabupaten = data.map((item: ChartData) => item.kabupaten);
|
||||
const jumlah = data.map((item: ChartData) => item.jumlah_lulus_tepat_waktu);
|
||||
|
||||
setSeries([{
|
||||
name: 'Jumlah Lulus Tepat Waktu',
|
||||
data: jumlah
|
||||
}]);
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
xaxis: {
|
||||
...prev.xaxis,
|
||||
categories: kabupaten,
|
||||
},
|
||||
}));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
||||
console.error('Error fetching data:', err);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [selectedYear]);
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
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 (chartData.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">
|
||||
Asal Daerah Mahasiswa Lulus Tepat Waktu
|
||||
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[600px] w-full">
|
||||
<Chart
|
||||
options={options}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
323
components/charts/AsalDaerahPerAngkatanChart.tsx
Normal file
323
components/charts/AsalDaerahPerAngkatanChart.tsx
Normal file
@@ -0,0 +1,323 @@
|
||||
'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 AsalDaerahData {
|
||||
kabupaten: string;
|
||||
jumlah: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
tahunAngkatan: string;
|
||||
}
|
||||
|
||||
export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [data, setData] = useState<AsalDaerahData[]>([]);
|
||||
const [series, setSeries] = useState<ApexAxisChartSeries>([{
|
||||
name: 'Jumlah Mahasiswa',
|
||||
data: []
|
||||
}]);
|
||||
const [options, setOptions] = useState<ApexOptions>({
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true,
|
||||
customIcons: []
|
||||
},
|
||||
export: {
|
||||
csv: {
|
||||
filename: `asal-daerah-angkatan`,
|
||||
columnDelimiter: ',',
|
||||
headerCategory: 'Asal Daerah',
|
||||
headerValue: 'Jumlah Mahasiswa'
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
columnWidth: '85%',
|
||||
distributed: false,
|
||||
barHeight: '90%',
|
||||
dataLabels: {
|
||||
position: 'top'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val: number) {
|
||||
return val.toString();
|
||||
},
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: [theme === 'dark' ? '#fff' : '#000']
|
||||
},
|
||||
offsetX: 10,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 1,
|
||||
colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: [],
|
||||
title: {
|
||||
text: 'Jumlah Mahasiswa',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Kabupaten',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
},
|
||||
maxWidth: 200,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
colors: ['#3B82F6'], // Blue color for bars
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update theme when it changes
|
||||
useEffect(() => {
|
||||
const currentTheme = theme === 'system' ? systemTheme : theme;
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
chart: {
|
||||
...prev.chart,
|
||||
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
dataLabels: {
|
||||
...prev.dataLabels,
|
||||
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'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
...prev.tooltip,
|
||||
theme: currentTheme === 'dark' ? 'dark' : 'light'
|
||||
}
|
||||
}));
|
||||
}, [theme, systemTheme]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch(`/api/mahasiswa/asal-daerah-angkatan?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('Invalid data format received from server');
|
||||
}
|
||||
|
||||
setData(result);
|
||||
|
||||
// Process data for chart
|
||||
const kabupaten = result.map(item => item.kabupaten);
|
||||
const jumlah = result.map(item => item.jumlah);
|
||||
|
||||
setSeries([{
|
||||
name: 'Jumlah Mahasiswa',
|
||||
data: jumlah
|
||||
}]);
|
||||
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
xaxis: {
|
||||
...prev.xaxis,
|
||||
categories: kabupaten,
|
||||
},
|
||||
chart: {
|
||||
...prev.chart,
|
||||
toolbar: {
|
||||
...prev.chart?.toolbar,
|
||||
export: {
|
||||
...prev.chart?.toolbar?.export,
|
||||
csv: {
|
||||
...prev.chart?.toolbar?.export?.csv,
|
||||
filename: `asal-daerah-angkatan-${tahunAngkatan}`,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}));
|
||||
} catch (err) {
|
||||
console.error('Error in fetchData:', err);
|
||||
setError(err instanceof Error ? err.message : 'An error occurred while fetching 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 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">
|
||||
Asal Daerah Mahasiswa Angkatan {tahunAngkatan}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[600px] w-full">
|
||||
<Chart
|
||||
options={options}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
236
components/charts/AsalDaerahPrestasiChart.tsx
Normal file
236
components/charts/AsalDaerahPrestasiChart.tsx
Normal file
@@ -0,0 +1,236 @@
|
||||
'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 AsalDaerahPrestasiData {
|
||||
tahun_angkatan: number;
|
||||
kabupaten: string;
|
||||
asal_daerah_mahasiswa_prestasi: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedJenisPrestasi: string;
|
||||
}
|
||||
|
||||
export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPrestasi }: Props) {
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [data, setData] = useState<AsalDaerahPrestasiData[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const url = `/api/mahasiswa/asal-daerah-prestasi?tahunAngkatan=${selectedYear}&jenisPrestasi=${selectedJenisPrestasi}`;
|
||||
|
||||
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);
|
||||
} 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, selectedJenisPrestasi]);
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
columnWidth: '85%',
|
||||
distributed: false,
|
||||
barHeight: '90%',
|
||||
dataLabels: {
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val: number) {
|
||||
return val.toString();
|
||||
},
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: [theme === 'dark' ? '#fff' : '#000']
|
||||
},
|
||||
offsetX: 10,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 1,
|
||||
colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: [...new Set(data.map(item => item.kabupaten))].sort(),
|
||||
title: {
|
||||
text: 'Jumlah Mahasiswa',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Kabupaten',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
},
|
||||
maxWidth: 200,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 10
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
colors: ['#3B82F6'],
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const series = [{
|
||||
name: 'Jumlah Mahasiswa',
|
||||
data: [...new Set(data.map(item => item.kabupaten))].sort().map(kabupaten => {
|
||||
const item = data.find(d => d.kabupaten === kabupaten);
|
||||
return item ? item.asal_daerah_mahasiswa_prestasi : 0;
|
||||
})
|
||||
}];
|
||||
|
||||
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">
|
||||
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">
|
||||
Asal Daerah Mahasiswa Prestasi {selectedJenisPrestasi}
|
||||
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[600px] w-full">
|
||||
<Chart
|
||||
options={chartOptions}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
241
components/charts/AsalDaerahStatusChart.tsx
Normal file
241
components/charts/AsalDaerahStatusChart.tsx
Normal file
@@ -0,0 +1,241 @@
|
||||
'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 AsalDaerahStatusData {
|
||||
kabupaten: string;
|
||||
tahun_angkatan?: number;
|
||||
status_kuliah: string;
|
||||
total_mahasiswa: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedStatus: string;
|
||||
}
|
||||
|
||||
export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<AsalDaerahStatusData[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('Fetching data with params:', { selectedYear, selectedStatus });
|
||||
|
||||
const response = await fetch(
|
||||
`/api/mahasiswa/asal-daerah-status?tahun_angkatan=${selectedYear}&status_kuliah=${selectedStatus}`
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
console.log('Received data:', result);
|
||||
|
||||
// Sort data by kabupaten
|
||||
const sortedData = result.sort((a: AsalDaerahStatusData, b: AsalDaerahStatusData) =>
|
||||
a.kabupaten.localeCompare(b.kabupaten)
|
||||
);
|
||||
|
||||
setData(sortedData);
|
||||
} catch (err) {
|
||||
console.error('Error in fetchData:', err);
|
||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [selectedYear, selectedStatus]);
|
||||
|
||||
// Log data changes
|
||||
useEffect(() => {
|
||||
console.log('Current data state:', data);
|
||||
}, [data]);
|
||||
|
||||
// Get unique kabupaten
|
||||
const kabupaten = [...new Set(data.map(item => item.kabupaten))].sort();
|
||||
console.log('Kabupaten:', kabupaten);
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
columnWidth: '55%',
|
||||
dataLabels: {
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val: number) {
|
||||
return val.toString();
|
||||
},
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: [theme === 'dark' ? '#fff' : '#000']
|
||||
},
|
||||
offsetX: 10,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: kabupaten,
|
||||
title: {
|
||||
text: 'Jumlah Mahasiswa',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Kabupaten',
|
||||
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'],
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Process data for series
|
||||
const processSeriesData = () => {
|
||||
const seriesData = kabupaten.map(kab => {
|
||||
const item = data.find(d => d.kabupaten === kab);
|
||||
return item ? item.total_mahasiswa : 0;
|
||||
});
|
||||
|
||||
return [{
|
||||
name: 'Jumlah Mahasiswa',
|
||||
data: seriesData
|
||||
}];
|
||||
};
|
||||
|
||||
const series = processSeriesData();
|
||||
|
||||
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">
|
||||
Asal Daerah Mahasiswa {selectedStatus}
|
||||
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[500px] w-full max-w-5xl mx-auto">
|
||||
{typeof window !== 'undefined' && (
|
||||
<Chart
|
||||
options={chartOptions}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
344
components/charts/IPKBeasiswaChart.tsx
Normal file
344
components/charts/IPKBeasiswaChart.tsx
Normal file
@@ -0,0 +1,344 @@
|
||||
'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 IPKBeasiswaData {
|
||||
tahun_angkatan: number;
|
||||
total_mahasiswa_beasiswa: number;
|
||||
rata_rata_ipk: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedJenisBeasiswa: string;
|
||||
}
|
||||
|
||||
export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [data, setData] = useState<IPKBeasiswaData[]>([]);
|
||||
const [series, setSeries] = useState<ApexAxisChartSeries>([{
|
||||
name: 'Rata-rata IPK',
|
||||
data: []
|
||||
}]);
|
||||
const [options, setOptions] = useState<ApexOptions>({
|
||||
chart: {
|
||||
type: 'line',
|
||||
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
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
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(2);
|
||||
},
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
background: {
|
||||
enabled: false
|
||||
},
|
||||
offsetY: -10
|
||||
},
|
||||
xaxis: {
|
||||
categories: [],
|
||||
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 IPK',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
},
|
||||
formatter: function (val: number) {
|
||||
return val.toFixed(2);
|
||||
}
|
||||
},
|
||||
min: 0,
|
||||
max: 4,
|
||||
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(2);
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
horizontalAlign: 'right',
|
||||
labels: {
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update theme when it changes
|
||||
useEffect(() => {
|
||||
const currentTheme = theme === 'system' ? systemTheme : theme;
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
chart: {
|
||||
...prev.chart,
|
||||
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
dataLabels: {
|
||||
...prev.dataLabels,
|
||||
style: {
|
||||
...prev.dataLabels?.style,
|
||||
colors: [currentTheme === 'dark' ? '#fff' : '#000']
|
||||
},
|
||||
background: {
|
||||
...prev.dataLabels?.background,
|
||||
foreColor: currentTheme === 'dark' ? '#fff' : '#000',
|
||||
borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6'
|
||||
}
|
||||
},
|
||||
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'
|
||||
}
|
||||
},
|
||||
axisBorder: {
|
||||
...prev.xaxis?.axisBorder,
|
||||
color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
|
||||
},
|
||||
axisTicks: {
|
||||
...prev.xaxis?.axisTicks,
|
||||
color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
|
||||
}
|
||||
},
|
||||
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'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
...prev.tooltip,
|
||||
theme: currentTheme === 'dark' ? 'dark' : 'light'
|
||||
}
|
||||
}));
|
||||
}, [theme, systemTheme]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch(`/api/mahasiswa/ipk-beasiswa?jenisBeasiswa=${selectedJenisBeasiswa}`);
|
||||
|
||||
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);
|
||||
|
||||
// Process data for chart
|
||||
const tahunAngkatan = result.map(item => item.tahun_angkatan);
|
||||
const rataRataIPK = result.map(item => item.rata_rata_ipk);
|
||||
|
||||
setSeries([{
|
||||
name: 'Rata-rata IPK',
|
||||
data: rataRataIPK
|
||||
}]);
|
||||
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();
|
||||
}, [selectedJenisBeasiswa]);
|
||||
|
||||
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 IPK Mahasiswa Beasiswa {selectedJenisBeasiswa}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
|
||||
<Chart
|
||||
options={options}
|
||||
series={series}
|
||||
type="line"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
339
components/charts/IPKChart.tsx
Normal file
339
components/charts/IPKChart.tsx
Normal file
@@ -0,0 +1,339 @@
|
||||
'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 IPKData {
|
||||
tahun_angkatan: number;
|
||||
rata_rata_ipk: number;
|
||||
}
|
||||
|
||||
export default function IPKChart() {
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [data, setData] = useState<IPKData[]>([]);
|
||||
const [series, setSeries] = useState<ApexAxisChartSeries>([{
|
||||
name: 'Rata-rata IPK',
|
||||
data: []
|
||||
}]);
|
||||
const [options, setOptions] = useState<ApexOptions>({
|
||||
chart: {
|
||||
type: 'line',
|
||||
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
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
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(2);
|
||||
},
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
background: {
|
||||
enabled: false
|
||||
},
|
||||
offsetY: -10
|
||||
},
|
||||
xaxis: {
|
||||
categories: [],
|
||||
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 IPK',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
},
|
||||
formatter: function (val: number) {
|
||||
return val.toFixed(2);
|
||||
}
|
||||
},
|
||||
min: 0,
|
||||
max: 4,
|
||||
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'], // Blue color for line
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val.toFixed(2);
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
horizontalAlign: 'right',
|
||||
labels: {
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update theme when it changes
|
||||
useEffect(() => {
|
||||
const currentTheme = theme === 'system' ? systemTheme : theme;
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
chart: {
|
||||
...prev.chart,
|
||||
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
dataLabels: {
|
||||
...prev.dataLabels,
|
||||
style: {
|
||||
...prev.dataLabels?.style,
|
||||
colors: [currentTheme === 'dark' ? '#fff' : '#000']
|
||||
},
|
||||
background: {
|
||||
...prev.dataLabels?.background,
|
||||
foreColor: currentTheme === 'dark' ? '#fff' : '#000',
|
||||
borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6'
|
||||
}
|
||||
},
|
||||
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'
|
||||
}
|
||||
},
|
||||
axisBorder: {
|
||||
...prev.xaxis?.axisBorder,
|
||||
color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
|
||||
},
|
||||
axisTicks: {
|
||||
...prev.xaxis?.axisTicks,
|
||||
color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
|
||||
}
|
||||
},
|
||||
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'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
...prev.tooltip,
|
||||
theme: currentTheme === 'dark' ? 'dark' : 'light'
|
||||
}
|
||||
}));
|
||||
}, [theme, systemTheme]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch('/api/mahasiswa/ipk');
|
||||
|
||||
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);
|
||||
|
||||
// Process data for chart
|
||||
const tahunAngkatan = result.map(item => item.tahun_angkatan);
|
||||
const rataRataIPK = result.map(item => item.rata_rata_ipk);
|
||||
|
||||
setSeries([{
|
||||
name: 'Rata-rata IPK',
|
||||
data: rataRataIPK
|
||||
}]);
|
||||
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();
|
||||
}, []);
|
||||
|
||||
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 IPK Mahasiswa
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
|
||||
<Chart
|
||||
options={options}
|
||||
series={series}
|
||||
type="line"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
295
components/charts/IPKJenisKelaminChart.tsx
Normal file
295
components/charts/IPKJenisKelaminChart.tsx
Normal file
@@ -0,0 +1,295 @@
|
||||
'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 Props {
|
||||
tahunAngkatan: string;
|
||||
}
|
||||
|
||||
export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [series, setSeries] = useState<any[]>([]);
|
||||
const [categories, setCategories] = useState<string[]>([]);
|
||||
|
||||
const [options, setOptions] = useState<ApexOptions>({
|
||||
chart: {
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true,
|
||||
customIcons: []
|
||||
},
|
||||
export: {
|
||||
csv: {
|
||||
filename: `ipk-jenis-kelamin-angkatan`,
|
||||
columnDelimiter: ',',
|
||||
headerCategory: 'Jenis Kelamin',
|
||||
headerValue: 'Rata-rata IPK'
|
||||
}
|
||||
},
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
colors: ['#3B82F6', '#EC4899'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '30%',
|
||||
borderRadius: 2,
|
||||
distributed: true
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val: number) {
|
||||
return val.toFixed(2);
|
||||
},
|
||||
offsetY: -20,
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
colors: [theme === 'dark' ? '#fff' : '#000']
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: [],
|
||||
title: {
|
||||
text: 'Jenis Kelamin',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 4.0,
|
||||
tickAmount: 4,
|
||||
title: {
|
||||
text: 'Rata-rata IPK',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val.toFixed(2) + " IPK";
|
||||
}
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
|
||||
// Update theme when it changes
|
||||
useEffect(() => {
|
||||
const currentTheme = theme === 'system' ? systemTheme : theme;
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
chart: {
|
||||
...prev.chart,
|
||||
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
dataLabels: {
|
||||
...prev.dataLabels,
|
||||
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: {
|
||||
colors: currentTheme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
...prev.yaxis,
|
||||
title: {
|
||||
...(prev.yaxis as any)?.title,
|
||||
style: {
|
||||
...(prev.yaxis as any)?.title?.style,
|
||||
color: currentTheme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
...(prev.yaxis as any)?.labels,
|
||||
style: {
|
||||
colors: currentTheme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
...prev.tooltip,
|
||||
theme: currentTheme === 'dark' ? 'dark' : 'light'
|
||||
}
|
||||
}));
|
||||
}, [theme, systemTheme]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
if (!tahunAngkatan || tahunAngkatan === 'all') {
|
||||
console.log('Tahun angkatan tidak tersedia atau "all"');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Fetching data for tahun angkatan:', tahunAngkatan);
|
||||
const url = `/api/mahasiswa/ipk-jenis-kelamin?tahun_angkatan=${tahunAngkatan}`;
|
||||
console.log('API URL:', url);
|
||||
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error('Error response:', response.status, response.statusText);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Data received from API:', data);
|
||||
|
||||
if (!data || data.length === 0) {
|
||||
console.log('No data received from API');
|
||||
return;
|
||||
}
|
||||
|
||||
// Process data for chart
|
||||
const labels = data.map((item: any) => {
|
||||
console.log('Processing item:', item);
|
||||
return item.jk === 'Pria' ? 'Laki-laki' : 'Perempuan';
|
||||
});
|
||||
|
||||
const values = data.map((item: any) => {
|
||||
const ipk = parseFloat(item.rata_rata_ipk);
|
||||
console.log(`IPK for ${item.jk}:`, ipk);
|
||||
return ipk;
|
||||
});
|
||||
|
||||
console.log('Processed labels:', labels);
|
||||
console.log('Processed values:', values);
|
||||
|
||||
if (values.length === 0) {
|
||||
console.log('No values to display');
|
||||
return;
|
||||
}
|
||||
|
||||
setCategories(labels);
|
||||
// Untuk bar chart, kita memerlukan array dari objects
|
||||
setSeries([{
|
||||
name: 'Rata-rata IPK',
|
||||
data: values
|
||||
}]);
|
||||
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
xaxis: {
|
||||
...prev.xaxis,
|
||||
categories: labels
|
||||
},
|
||||
chart: {
|
||||
...prev.chart,
|
||||
toolbar: {
|
||||
...prev.chart?.toolbar,
|
||||
export: {
|
||||
...prev.chart?.toolbar?.export,
|
||||
csv: {
|
||||
...prev.chart?.toolbar?.export?.csv,
|
||||
filename: `ipk-jenis-kelamin-angkatan-${tahunAngkatan}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
if (mounted) {
|
||||
fetchData();
|
||||
}
|
||||
}, [tahunAngkatan, mounted]);
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white">
|
||||
Rata-rata IPK Berdasarkan Jenis Kelamin Angkatan {tahunAngkatan}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[400px] w-full">
|
||||
{series.length > 0 && series[0].data?.length > 0 ? (
|
||||
<Chart
|
||||
options={{
|
||||
...options,
|
||||
xaxis: {
|
||||
...options.xaxis,
|
||||
categories: categories
|
||||
}
|
||||
}}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<p className="text-gray-500 dark:text-gray-400">Tidak ada data</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
337
components/charts/IPKLulusTepatChart.tsx
Normal file
337
components/charts/IPKLulusTepatChart.tsx
Normal file
@@ -0,0 +1,337 @@
|
||||
'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 IPKLulusTepatData {
|
||||
tahun_angkatan: number;
|
||||
rata_rata_ipk: number;
|
||||
}
|
||||
|
||||
interface IPKLulusTepatChartProps {
|
||||
selectedYear: string;
|
||||
}
|
||||
|
||||
export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartProps) {
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [data, setData] = useState<IPKLulusTepatData[]>([]);
|
||||
const [series, setSeries] = useState<ApexAxisChartSeries>([{
|
||||
name: 'Rata-rata IPK',
|
||||
data: []
|
||||
}]);
|
||||
const [options, setOptions] = useState<ApexOptions>({
|
||||
chart: {
|
||||
type: 'line',
|
||||
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
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
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(2);
|
||||
},
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
background: {
|
||||
enabled: false
|
||||
},
|
||||
offsetY: -10
|
||||
},
|
||||
xaxis: {
|
||||
categories: [],
|
||||
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 IPK',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
},
|
||||
formatter: function (val: number) {
|
||||
return val.toFixed(2);
|
||||
}
|
||||
},
|
||||
min: 0,
|
||||
max: 4,
|
||||
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'], // Blue color for line
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val.toFixed(2);
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
horizontalAlign: 'right',
|
||||
labels: {
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update theme when it changes
|
||||
useEffect(() => {
|
||||
const currentTheme = theme === 'system' ? systemTheme : theme;
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
chart: {
|
||||
...prev.chart,
|
||||
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
dataLabels: {
|
||||
...prev.dataLabels,
|
||||
style: {
|
||||
...prev.dataLabels?.style,
|
||||
colors: [currentTheme === 'dark' ? '#fff' : '#000']
|
||||
},
|
||||
background: {
|
||||
...prev.dataLabels?.background,
|
||||
foreColor: currentTheme === 'dark' ? '#fff' : '#000',
|
||||
borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6'
|
||||
}
|
||||
},
|
||||
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'
|
||||
}
|
||||
},
|
||||
axisBorder: {
|
||||
...prev.xaxis?.axisBorder,
|
||||
color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
|
||||
},
|
||||
axisTicks: {
|
||||
...prev.xaxis?.axisTicks,
|
||||
color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
|
||||
}
|
||||
},
|
||||
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'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
...prev.tooltip,
|
||||
theme: currentTheme === 'dark' ? 'dark' : 'light'
|
||||
}
|
||||
}));
|
||||
}, [theme, systemTheme]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const response = await fetch(`/api/mahasiswa/ipk-lulus-tepat?tahunAngkatan=${selectedYear}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
|
||||
const fetchedData: IPKLulusTepatData[] = await response.json();
|
||||
setData(fetchedData);
|
||||
|
||||
// Process data for chart
|
||||
const tahunAngkatan = fetchedData.map(item => item.tahun_angkatan);
|
||||
const rataRataIPK = fetchedData.map(item => item.rata_rata_ipk);
|
||||
|
||||
setSeries([{
|
||||
name: 'Rata-rata IPK',
|
||||
data: rataRataIPK
|
||||
}]);
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
xaxis: {
|
||||
...prev.xaxis,
|
||||
categories: tahunAngkatan,
|
||||
},
|
||||
}));
|
||||
} catch (error) {
|
||||
setError(error instanceof Error ? error.message : 'An error occurred');
|
||||
console.error('Error fetching data:', error);
|
||||
} 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">
|
||||
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 IPK Mahasiswa Lulus Tepat Waktu
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
|
||||
<Chart
|
||||
options={options}
|
||||
series={series}
|
||||
type="line"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
347
components/charts/IPKPrestasiChart.tsx
Normal file
347
components/charts/IPKPrestasiChart.tsx
Normal file
@@ -0,0 +1,347 @@
|
||||
'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 IPKPrestasiData {
|
||||
tahun_angkatan: number;
|
||||
total_mahasiswa_prestasi: number;
|
||||
rata_rata_ipk: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedJenisPrestasi: string;
|
||||
}
|
||||
|
||||
export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [data, setData] = useState<IPKPrestasiData[]>([]);
|
||||
const [series, setSeries] = useState<ApexAxisChartSeries>([{
|
||||
name: 'Rata-rata IPK',
|
||||
data: []
|
||||
}]);
|
||||
const [options, setOptions] = useState<ApexOptions>({
|
||||
chart: {
|
||||
type: 'line',
|
||||
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
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
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(2);
|
||||
},
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
background: {
|
||||
enabled: false
|
||||
},
|
||||
offsetY: -10
|
||||
},
|
||||
xaxis: {
|
||||
categories: [],
|
||||
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 IPK',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
},
|
||||
formatter: function (val: number) {
|
||||
return val.toFixed(2);
|
||||
}
|
||||
},
|
||||
min: 0,
|
||||
max: 4,
|
||||
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(2);
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
horizontalAlign: 'right',
|
||||
labels: {
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update theme when it changes
|
||||
useEffect(() => {
|
||||
const currentTheme = theme === 'system' ? systemTheme : theme;
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
chart: {
|
||||
...prev.chart,
|
||||
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
dataLabels: {
|
||||
...prev.dataLabels,
|
||||
style: {
|
||||
...prev.dataLabels?.style,
|
||||
colors: [currentTheme === 'dark' ? '#fff' : '#000']
|
||||
},
|
||||
background: {
|
||||
...prev.dataLabels?.background,
|
||||
foreColor: currentTheme === 'dark' ? '#fff' : '#000',
|
||||
borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6'
|
||||
}
|
||||
},
|
||||
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'
|
||||
}
|
||||
},
|
||||
axisBorder: {
|
||||
...prev.xaxis?.axisBorder,
|
||||
color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
|
||||
},
|
||||
axisTicks: {
|
||||
...prev.xaxis?.axisTicks,
|
||||
color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
|
||||
}
|
||||
},
|
||||
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'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
...prev.tooltip,
|
||||
theme: currentTheme === 'dark' ? 'dark' : 'light'
|
||||
}
|
||||
}));
|
||||
}, [theme, systemTheme]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch(`/api/mahasiswa/ipk-prestasi?jenisPrestasi=${selectedJenisPrestasi}`);
|
||||
|
||||
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);
|
||||
|
||||
// Sort data by tahun_angkatan in ascending order
|
||||
const sortedData = [...result].sort((a, b) => a.tahun_angkatan - b.tahun_angkatan);
|
||||
|
||||
// Process data for chart
|
||||
const tahunAngkatan = sortedData.map(item => item.tahun_angkatan);
|
||||
const rataRataIPK = sortedData.map(item => item.rata_rata_ipk);
|
||||
|
||||
setSeries([{
|
||||
name: 'Rata-rata IPK',
|
||||
data: rataRataIPK
|
||||
}]);
|
||||
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();
|
||||
}, [selectedJenisPrestasi]);
|
||||
|
||||
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 IPK Mahasiswa Prestasi {selectedJenisPrestasi}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
|
||||
<Chart
|
||||
options={options}
|
||||
series={series}
|
||||
type="line"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
295
components/charts/IpkStatusChart.tsx
Normal file
295
components/charts/IpkStatusChart.tsx
Normal file
@@ -0,0 +1,295 @@
|
||||
'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 IpkStatusData {
|
||||
tahun_angkatan: number;
|
||||
status_kuliah: string;
|
||||
total_mahasiswa: number;
|
||||
rata_rata_ipk: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedStatus: string;
|
||||
}
|
||||
|
||||
export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) {
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [data, setData] = useState<IpkStatusData[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const url = `/api/mahasiswa/ipk-status?tahun_angkatan=${selectedYear}&status_kuliah=${selectedStatus}`;
|
||||
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
console.error('Error response:', errorText);
|
||||
throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
console.log('Received data:', result);
|
||||
|
||||
if (!Array.isArray(result)) {
|
||||
console.error('Invalid data format:', result);
|
||||
throw new Error('Invalid data format received from server');
|
||||
}
|
||||
|
||||
// Sort data by tahun_angkatan
|
||||
const sortedData = result.sort((a: IpkStatusData, b: IpkStatusData) =>
|
||||
a.tahun_angkatan - b.tahun_angkatan
|
||||
);
|
||||
|
||||
console.log('Sorted data:', sortedData);
|
||||
setData(sortedData);
|
||||
} 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, selectedStatus]);
|
||||
|
||||
// Log data changes
|
||||
useEffect(() => {
|
||||
console.log('Current data state:', data);
|
||||
}, [data]);
|
||||
|
||||
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: 'smooth',
|
||||
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(2);
|
||||
},
|
||||
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 IPK',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
min: 0,
|
||||
max: 4,
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
},
|
||||
formatter: function (val: number) {
|
||||
return val.toFixed(2);
|
||||
}
|
||||
},
|
||||
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(2);
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
horizontalAlign: 'right',
|
||||
labels: {
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Process data for series
|
||||
const processSeriesData = () => {
|
||||
return [{
|
||||
name: 'Rata-rata IPK',
|
||||
data: data.map(item => item.rata_rata_ipk)
|
||||
}];
|
||||
};
|
||||
|
||||
const series = processSeriesData();
|
||||
|
||||
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">
|
||||
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 IPK Mahasiswa {selectedStatus}
|
||||
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
|
||||
{typeof window !== 'undefined' && (
|
||||
<Chart
|
||||
options={chartOptions}
|
||||
series={series}
|
||||
type={selectedYear === 'all' ? 'line' : 'bar'}
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
266
components/charts/JenisPendaftaranBeasiswaChart.tsx
Normal file
266
components/charts/JenisPendaftaranBeasiswaChart.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
'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 JenisPendaftaranBeasiswaData {
|
||||
tahun_angkatan: number;
|
||||
jenis_pendaftaran: string;
|
||||
jumlah_mahasiswa_beasiswa: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedJenisBeasiswa: string;
|
||||
}
|
||||
|
||||
export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<JenisPendaftaranBeasiswaData[]>([]);
|
||||
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/jenis-pendaftaran-beasiswa?tahunAngkatan=${selectedYear}&jenisBeasiswa=${selectedJenisBeasiswa}`;
|
||||
|
||||
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: JenisPendaftaranBeasiswaData, b: JenisPendaftaranBeasiswaData) =>
|
||||
a.tahun_angkatan - b.tahun_angkatan
|
||||
);
|
||||
|
||||
setData(sortedData);
|
||||
} 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, selectedJenisBeasiswa]);
|
||||
|
||||
// Process data for series
|
||||
const processSeriesData = () => {
|
||||
if (!data.length) return [];
|
||||
|
||||
const years = [...new Set(data.map(item => item.tahun_angkatan))].sort();
|
||||
const pendaftaranTypes = [...new Set(data.map(item => item.jenis_pendaftaran))].sort();
|
||||
|
||||
return pendaftaranTypes.map(pendaftaran => ({
|
||||
name: pendaftaran,
|
||||
data: years.map(year => {
|
||||
const item = data.find(d => d.tahun_angkatan === year && d.jenis_pendaftaran === pendaftaran);
|
||||
return item ? item.jumlah_mahasiswa_beasiswa : 0;
|
||||
})
|
||||
}));
|
||||
};
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
borderRadius: 1,
|
||||
},
|
||||
},
|
||||
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: [...new Set(data.map(item => item.tahun_angkatan))].sort(),
|
||||
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: 'Jumlah Mahasiswa',
|
||||
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'
|
||||
},
|
||||
tickAmount: 5,
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
fontSize: '14px',
|
||||
markers: {
|
||||
size: 12,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
},
|
||||
labels: {
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
|
||||
strokeDashArray: 4,
|
||||
padding: {
|
||||
top: 20,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const series = processSeriesData();
|
||||
|
||||
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">
|
||||
Jenis Pendaftaran Mahasiswa Beasiswa {selectedJenisBeasiswa}
|
||||
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
192
components/charts/JenisPendaftaranBeasiswaPieChart.tsx
Normal file
192
components/charts/JenisPendaftaranBeasiswaPieChart.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
'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 JenisPendaftaranBeasiswaData {
|
||||
tahun_angkatan: number;
|
||||
jenis_pendaftaran: string;
|
||||
jumlah_mahasiswa_beasiswa: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedJenisBeasiswa: string;
|
||||
}
|
||||
|
||||
export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<JenisPendaftaranBeasiswaData[]>([]);
|
||||
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/jenis-pendaftaran-beasiswa?tahunAngkatan=${selectedYear}&jenisBeasiswa=${selectedJenisBeasiswa}`;
|
||||
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();
|
||||
}, [selectedYear, selectedJenisBeasiswa]);
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'pie',
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
}
|
||||
},
|
||||
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 jenisPendaftaran = [...new Set(data.map(item => item.jenis_pendaftaran))].sort();
|
||||
const jumlahData = jenisPendaftaran.map(jenis => {
|
||||
const item = data.find(d => d.jenis_pendaftaran === jenis);
|
||||
return item ? item.jumlah_mahasiswa_beasiswa : 0;
|
||||
});
|
||||
|
||||
return {
|
||||
series: jumlahData,
|
||||
labels: jenisPendaftaran
|
||||
};
|
||||
};
|
||||
|
||||
const { series, labels } = processSeriesData();
|
||||
const totalMahasiswa = data.reduce((sum, item) => sum + item.jumlah_mahasiswa_beasiswa, 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">
|
||||
Jenis Pendaftaran Mahasiswa Beasiswa {selectedJenisBeasiswa}
|
||||
{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-[350px] w-full max-w-5xl mx-auto">
|
||||
{typeof window !== 'undefined' && (
|
||||
<Chart
|
||||
options={{...chartOptions, labels}}
|
||||
series={series}
|
||||
type="pie"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
295
components/charts/JenisPendaftaranChart.tsx
Normal file
295
components/charts/JenisPendaftaranChart.tsx
Normal file
@@ -0,0 +1,295 @@
|
||||
'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 JenisPendaftaranData {
|
||||
tahun_angkatan: number;
|
||||
jenis_pendaftaran: string;
|
||||
jumlah: number;
|
||||
}
|
||||
|
||||
export default function JenisPendaftaranChart() {
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [data, setData] = useState<JenisPendaftaranData[]>([]);
|
||||
const [series, setSeries] = useState<ApexAxisChartSeries>([]);
|
||||
const [options, setOptions] = useState<ApexOptions>({
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
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: [],
|
||||
title: {
|
||||
text: 'Jumlah Mahasiswa',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
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', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update theme when it changes
|
||||
useEffect(() => {
|
||||
const currentTheme = theme === 'system' ? systemTheme : theme;
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
chart: {
|
||||
...prev.chart,
|
||||
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
dataLabels: {
|
||||
...prev.dataLabels,
|
||||
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'
|
||||
}
|
||||
}));
|
||||
}, [theme, systemTheme]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch('/api/mahasiswa/jenis-pendaftaran');
|
||||
|
||||
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);
|
||||
|
||||
const tahunAngkatan = [...new Set(result.map(item => item.tahun_angkatan))]
|
||||
.sort((a, b) => b - a);
|
||||
const jenisPendaftaran = [...new Set(result.map(item => item.jenis_pendaftaran))].sort();
|
||||
|
||||
const seriesData = jenisPendaftaran.map(jenis => ({
|
||||
name: jenis,
|
||||
data: tahunAngkatan.map(tahun => {
|
||||
const item = result.find(d => d.tahun_angkatan === tahun && d.jenis_pendaftaran === jenis);
|
||||
return item ? item.jumlah : 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();
|
||||
}, []);
|
||||
|
||||
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">
|
||||
Jenis Pendaftaran Mahasiswa
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[400px] w-full">
|
||||
<Chart
|
||||
options={options}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
263
components/charts/JenisPendaftaranLulusChart.tsx
Normal file
263
components/charts/JenisPendaftaranLulusChart.tsx
Normal file
@@ -0,0 +1,263 @@
|
||||
'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 JenisPendaftaranLulusData {
|
||||
tahun_angkatan: number;
|
||||
jenis_pendaftaran: string;
|
||||
jumlah_lulus_tepat_waktu: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
}
|
||||
|
||||
export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<JenisPendaftaranLulusData[]>([]);
|
||||
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/jenis-pendaftaran-lulus?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: JenisPendaftaranLulusData, b: JenisPendaftaranLulusData) =>
|
||||
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]);
|
||||
|
||||
// Process data for series
|
||||
const processSeriesData = () => {
|
||||
if (!data.length) return [];
|
||||
|
||||
const years = [...new Set(data.map(item => item.tahun_angkatan))].sort();
|
||||
const pendaftaranTypes = [...new Set(data.map(item => item.jenis_pendaftaran))];
|
||||
|
||||
return pendaftaranTypes.map(type => ({
|
||||
name: type,
|
||||
data: years.map(year => {
|
||||
const item = data.find(d => d.tahun_angkatan === year && d.jenis_pendaftaran === type);
|
||||
return item ? item.jumlah_lulus_tepat_waktu : 0;
|
||||
})
|
||||
}));
|
||||
};
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
borderRadius: 1,
|
||||
},
|
||||
},
|
||||
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: [...new Set(data.map(item => item.tahun_angkatan))].sort(),
|
||||
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: 'Jumlah Mahasiswa',
|
||||
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'
|
||||
},
|
||||
tickAmount: 5,
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
fontSize: '14px',
|
||||
markers: {
|
||||
size: 12,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
},
|
||||
labels: {
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
|
||||
strokeDashArray: 4,
|
||||
padding: {
|
||||
top: 20,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const series = processSeriesData();
|
||||
|
||||
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">
|
||||
Jenis Pendaftaran Mahasiswa Lulus Tepat Waktu
|
||||
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
191
components/charts/JenisPendaftaranLulusPieChart.tsx
Normal file
191
components/charts/JenisPendaftaranLulusPieChart.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
'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 JenisPendaftaranLulusData {
|
||||
tahun_angkatan: number;
|
||||
jenis_pendaftaran: string;
|
||||
jumlah_lulus_tepat_waktu: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
}
|
||||
|
||||
export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<JenisPendaftaranLulusData[]>([]);
|
||||
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/jenis-pendaftaran-lulus?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();
|
||||
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();
|
||||
}, [selectedYear]);
|
||||
|
||||
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 jenisPendaftaran = [...new Set(data.map(item => item.jenis_pendaftaran))].sort();
|
||||
const jumlahData = jenisPendaftaran.map(jenis => {
|
||||
const item = data.find(d => d.jenis_pendaftaran === jenis);
|
||||
return item ? item.jumlah_lulus_tepat_waktu : 0;
|
||||
});
|
||||
|
||||
return {
|
||||
series: jumlahData,
|
||||
labels: jenisPendaftaran
|
||||
};
|
||||
};
|
||||
|
||||
const { series, labels } = processSeriesData();
|
||||
const totalMahasiswa = data.reduce((sum, item) => sum + item.jumlah_lulus_tepat_waktu, 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">
|
||||
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-[350px] w-full max-w-5xl mx-auto">
|
||||
{typeof window !== 'undefined' && (
|
||||
<Chart
|
||||
options={{...chartOptions, labels}}
|
||||
series={series}
|
||||
type="pie"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
250
components/charts/JenisPendaftaranPerAngkatanChart.tsx
Normal file
250
components/charts/JenisPendaftaranPerAngkatanChart.tsx
Normal file
@@ -0,0 +1,250 @@
|
||||
'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 JenisPendaftaranData {
|
||||
tahun_angkatan: number;
|
||||
jenis_pendaftaran: string;
|
||||
jumlah: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
tahunAngkatan: string;
|
||||
}
|
||||
|
||||
export default function JenisPendaftaranPerAngkatanChart({ tahunAngkatan }: Props) {
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [data, setData] = useState<JenisPendaftaranData[]>([]);
|
||||
const [series, setSeries] = useState<number[]>([]);
|
||||
const [options, setOptions] = useState<ApexOptions>({
|
||||
chart: {
|
||||
type: 'pie',
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
}
|
||||
},
|
||||
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, opts: any) {
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update theme when it changes
|
||||
useEffect(() => {
|
||||
const currentTheme = theme === 'system' ? systemTheme : theme;
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
chart: {
|
||||
...prev.chart,
|
||||
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
legend: {
|
||||
...prev.legend,
|
||||
labels: {
|
||||
...prev.legend?.labels,
|
||||
colors: currentTheme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
...prev.tooltip,
|
||||
theme: currentTheme === 'dark' ? 'dark' : 'light'
|
||||
}
|
||||
}));
|
||||
}, [theme, systemTheme]);
|
||||
|
||||
// Update dataLabels formatter when data changes
|
||||
useEffect(() => {
|
||||
if (data.length > 0) {
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
dataLabels: {
|
||||
...prev.dataLabels,
|
||||
formatter: function(val: number, opts: any) {
|
||||
// Calculate the percentage based on the current data
|
||||
const total = data.reduce((sum, item) => sum + item.jumlah, 0);
|
||||
const seriesIndex = opts.seriesIndex;
|
||||
const jenisPendaftaran = prev.labels?.[seriesIndex];
|
||||
|
||||
if (jenisPendaftaran) {
|
||||
const item = data.find(d => d.jenis_pendaftaran === jenisPendaftaran);
|
||||
const jumlah = item ? item.jumlah : 0;
|
||||
const percentage = (jumlah / total) * 100;
|
||||
return `${percentage.toFixed(0)}%`;
|
||||
}
|
||||
return `${val.toFixed(0)}%`;
|
||||
}
|
||||
}
|
||||
}));
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch(`/api/mahasiswa/jenis-pendaftaran?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('Invalid data format received from server');
|
||||
}
|
||||
|
||||
// Process data for pie chart
|
||||
const jenisPendaftaran = [...new Set(result.map(item => item.jenis_pendaftaran))].sort();
|
||||
const jumlahData = jenisPendaftaran.map(jenis => {
|
||||
const item = result.find(d => d.jenis_pendaftaran === jenis);
|
||||
return item ? item.jumlah : 0;
|
||||
});
|
||||
|
||||
setSeries(jumlahData);
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
labels: jenisPendaftaran,
|
||||
}));
|
||||
|
||||
// Store processed data
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
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 yang tersedia
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const totalMahasiswa = data.reduce((sum, item) => sum + item.jumlah, 0);
|
||||
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white">
|
||||
Jenis Pendaftaran Angkatan {tahunAngkatan}
|
||||
</CardTitle>
|
||||
<div className="text-lg font-semibold text-gray-600 dark:text-gray-300">
|
||||
Total Mahasiswa: {totalMahasiswa}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[350px] w-full max-w-5xl mx-auto">
|
||||
<Chart
|
||||
options={options}
|
||||
series={series}
|
||||
type="pie"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
263
components/charts/JenisPendaftaranPrestasiChart.tsx
Normal file
263
components/charts/JenisPendaftaranPrestasiChart.tsx
Normal file
@@ -0,0 +1,263 @@
|
||||
'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 JenisPendaftaranPrestasiData {
|
||||
tahun_angkatan: number;
|
||||
jenis_pendaftaran: string;
|
||||
jenis_pendaftaran_mahasiswa_prestasi: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedJenisPrestasi: string;
|
||||
}
|
||||
|
||||
export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<JenisPendaftaranPrestasiData[]>([]);
|
||||
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/jenis-pendaftaran-prestasi?jenisPrestasi=${selectedJenisPrestasi}`;
|
||||
|
||||
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: JenisPendaftaranPrestasiData, b: JenisPendaftaranPrestasiData) =>
|
||||
a.tahun_angkatan - b.tahun_angkatan
|
||||
);
|
||||
|
||||
setData(sortedData);
|
||||
} catch (err) {
|
||||
console.error('Error in fetchData:', err);
|
||||
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [selectedJenisPrestasi]);
|
||||
|
||||
// Process data for series
|
||||
const processSeriesData = () => {
|
||||
if (!data.length) return [];
|
||||
|
||||
const years = [...new Set(data.map(item => item.tahun_angkatan))].sort();
|
||||
const pendaftaranTypes = [...new Set(data.map(item => item.jenis_pendaftaran))].sort();
|
||||
|
||||
return pendaftaranTypes.map(pendaftaran => ({
|
||||
name: pendaftaran,
|
||||
data: years.map(year => {
|
||||
const item = data.find(d => d.tahun_angkatan === year && d.jenis_pendaftaran === pendaftaran);
|
||||
return item?.jenis_pendaftaran_mahasiswa_prestasi || 0;
|
||||
})
|
||||
}));
|
||||
};
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
borderRadius: 1,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val: number) {
|
||||
return val?.toString() || '0';
|
||||
},
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: [theme === 'dark' ? '#fff' : '#000']
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
xaxis: {
|
||||
categories: [...new Set(data.map(item => item.tahun_angkatan))].sort(),
|
||||
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: 'Jumlah Mahasiswa',
|
||||
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'
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
fontSize: '14px',
|
||||
markers: {
|
||||
size: 12,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
},
|
||||
labels: {
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
|
||||
strokeDashArray: 4,
|
||||
padding: {
|
||||
top: 20,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const series = processSeriesData();
|
||||
|
||||
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">
|
||||
Jenis Pendaftaran Mahasiswa Berprestasi {selectedJenisPrestasi}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
188
components/charts/JenisPendaftaranPrestasiPieChart.tsx
Normal file
188
components/charts/JenisPendaftaranPrestasiPieChart.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
'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 JenisPendaftaranPrestasiData {
|
||||
tahun_angkatan: number;
|
||||
jenis_pendaftaran: string;
|
||||
jenis_pendaftaran_mahasiswa_prestasi: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedJenisPrestasi: string;
|
||||
}
|
||||
|
||||
export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selectedJenisPrestasi }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<JenisPendaftaranPrestasiData[]>([]);
|
||||
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/jenis-pendaftaran-prestasi?tahunAngkatan=${selectedYear}&jenisPrestasi=${selectedJenisPrestasi}`;
|
||||
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();
|
||||
}, [selectedYear, selectedJenisPrestasi]);
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'pie',
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
}
|
||||
},
|
||||
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 filtered = data.filter(item => String(item.tahun_angkatan) === String(selectedYear));
|
||||
const jenisPendaftaran = [...new Set(filtered.map(item => item.jenis_pendaftaran))].sort();
|
||||
const jumlahData = jenisPendaftaran.map(jenis => {
|
||||
const item = filtered.find(d => d.jenis_pendaftaran === jenis);
|
||||
return item ? item.jenis_pendaftaran_mahasiswa_prestasi : 0;
|
||||
});
|
||||
|
||||
return {
|
||||
series: jumlahData,
|
||||
labels: jenisPendaftaran
|
||||
};
|
||||
};
|
||||
|
||||
const { series, labels } = processSeriesData();
|
||||
|
||||
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">
|
||||
Jenis Pendaftaran Mahasiswa Berprestasi {selectedJenisPrestasi} Angkatan {selectedYear}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[350px] w-full max-w-5xl mx-auto">
|
||||
{typeof window !== 'undefined' && (
|
||||
<Chart
|
||||
options={{...chartOptions, labels}}
|
||||
series={series}
|
||||
type="pie"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
252
components/charts/JenisPendaftaranStatusChart.tsx
Normal file
252
components/charts/JenisPendaftaranStatusChart.tsx
Normal file
@@ -0,0 +1,252 @@
|
||||
'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 JenisPendaftaranStatusData {
|
||||
jenis_pendaftaran: string;
|
||||
tahun_angkatan: number;
|
||||
status_kuliah: string;
|
||||
total_mahasiswa: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedStatus: string;
|
||||
}
|
||||
|
||||
export default function JenisPendaftaranStatusChart({ selectedYear, selectedStatus }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<JenisPendaftaranStatusData[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('Fetching data with params:', { selectedYear, selectedStatus });
|
||||
|
||||
const response = await fetch(
|
||||
`/api/mahasiswa/jenis-pendaftaran-status?tahun_angkatan=${selectedYear}&status_kuliah=${selectedStatus}`
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
console.log('Received data:', result);
|
||||
|
||||
// Sort data by tahun_angkatan
|
||||
const sortedData = result.sort((a: JenisPendaftaranStatusData, b: JenisPendaftaranStatusData) =>
|
||||
Number(a.tahun_angkatan) - Number(b.tahun_angkatan)
|
||||
);
|
||||
|
||||
setData(sortedData);
|
||||
} catch (err) {
|
||||
console.error('Error in fetchData:', err);
|
||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [selectedYear, selectedStatus]);
|
||||
|
||||
// Log data changes
|
||||
useEffect(() => {
|
||||
console.log('Current data state:', data);
|
||||
}, [data]);
|
||||
|
||||
// Get unique years and sort them
|
||||
const years = [...new Set(data.map(item => item.tahun_angkatan))].sort((a, b) => Number(a) - Number(b));
|
||||
console.log('Sorted years:', years);
|
||||
|
||||
// Get unique jenis pendaftaran
|
||||
const jenisPendaftaran = [...new Set(data.map(item => item.jenis_pendaftaran))];
|
||||
console.log('Jenis pendaftaran:', jenisPendaftaran);
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
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,
|
||||
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'
|
||||
}
|
||||
},
|
||||
min:0,
|
||||
tickAmount: 5
|
||||
},
|
||||
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";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Process data for series
|
||||
const processSeriesData = () => {
|
||||
return jenisPendaftaran.map(jenis => {
|
||||
const seriesData = new Array(years.length).fill(0);
|
||||
|
||||
data.forEach(item => {
|
||||
if (item.jenis_pendaftaran === jenis) {
|
||||
const yearIndex = years.indexOf(item.tahun_angkatan);
|
||||
if (yearIndex !== -1) {
|
||||
seriesData[yearIndex] = item.total_mahasiswa;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
name: jenis,
|
||||
data: seriesData
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const series = processSeriesData();
|
||||
console.log('Processed series data:', series);
|
||||
|
||||
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">
|
||||
Jenis Pendaftaran Mahasiswa {selectedStatus}
|
||||
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[350px] w-full max-w-5xl mx-auto">
|
||||
{typeof window !== 'undefined' && (
|
||||
<Chart
|
||||
options={chartOptions}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
193
components/charts/JenisPendaftaranStatusPieChart.tsx
Normal file
193
components/charts/JenisPendaftaranStatusPieChart.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
'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 JenisPendaftaranStatusData {
|
||||
jenis_pendaftaran: string;
|
||||
tahun_angkatan: number;
|
||||
status_kuliah: string;
|
||||
total_mahasiswa: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedStatus: string;
|
||||
}
|
||||
|
||||
export default function JenisPendaftaranStatusPieChart({ selectedYear, selectedStatus }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<JenisPendaftaranStatusData[]>([]);
|
||||
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/jenis-pendaftaran-status?tahun_angkatan=${selectedYear}&status_kuliah=${selectedStatus}`
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
setData(result);
|
||||
} catch (err) {
|
||||
console.error('Error in fetchData:', err);
|
||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [selectedYear, selectedStatus]);
|
||||
|
||||
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 jenisPendaftaran = [...new Set(data.map(item => item.jenis_pendaftaran))].sort();
|
||||
const jumlahData = jenisPendaftaran.map(jenis => {
|
||||
const item = data.find(d => d.jenis_pendaftaran === jenis);
|
||||
return item ? item.total_mahasiswa : 0;
|
||||
});
|
||||
|
||||
return {
|
||||
series: jumlahData,
|
||||
labels: jenisPendaftaran
|
||||
};
|
||||
};
|
||||
|
||||
const { series, labels } = processSeriesData();
|
||||
const totalMahasiswa = data.reduce((sum, item) => sum + item.total_mahasiswa, 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">
|
||||
Jenis Pendaftaran Mahasiswa {selectedStatus}
|
||||
{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-[350px] w-full max-w-5xl mx-auto">
|
||||
{typeof window !== 'undefined' && (
|
||||
<Chart
|
||||
options={{...chartOptions, labels}}
|
||||
series={series}
|
||||
type="pie"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
281
components/charts/LulusTepatWaktuChart.tsx
Normal file
281
components/charts/LulusTepatWaktuChart.tsx
Normal file
@@ -0,0 +1,281 @@
|
||||
'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 LulusTepatWaktuData {
|
||||
tahun_angkatan: number;
|
||||
jk: string;
|
||||
jumlah_lulus_tepat_waktu: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
}
|
||||
|
||||
export default function LulusTepatWaktuChart({ selectedYear }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<LulusTepatWaktuData[]>([]);
|
||||
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/lulus-tepat-waktu?tahun_angkatan=${selectedYear}`;
|
||||
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
console.error('Error response:', errorText);
|
||||
throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (!Array.isArray(result)) {
|
||||
console.error('Invalid data format:', result);
|
||||
throw new Error('Invalid data format received from server');
|
||||
}
|
||||
|
||||
// Sort data by tahun_angkatan
|
||||
const sortedData = result.sort((a: LulusTepatWaktuData, b: LulusTepatWaktuData) =>
|
||||
a.tahun_angkatan - b.tahun_angkatan
|
||||
);
|
||||
|
||||
console.log('Sorted data:', sortedData);
|
||||
setData(sortedData);
|
||||
} 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]);
|
||||
|
||||
// Process data for series
|
||||
const processSeriesData = () => {
|
||||
if (!data.length) return [];
|
||||
|
||||
const years = [...new Set(data.map(item => item.tahun_angkatan))].sort();
|
||||
|
||||
const pria = years.map(year => {
|
||||
const item = data.find(d => d.tahun_angkatan === year && d.jk === 'Pria');
|
||||
return item ? item.jumlah_lulus_tepat_waktu : 0;
|
||||
});
|
||||
|
||||
const wanita = years.map(year => {
|
||||
const item = data.find(d => d.tahun_angkatan === year && d.jk === 'Wanita');
|
||||
return item ? item.jumlah_lulus_tepat_waktu : 0;
|
||||
});
|
||||
|
||||
return [
|
||||
{
|
||||
name: 'Laki-laki',
|
||||
data: pria
|
||||
},
|
||||
{
|
||||
name: 'Perempuan',
|
||||
data: wanita
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
borderRadius: 1,
|
||||
},
|
||||
},
|
||||
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: [...new Set(data.map(item => item.tahun_angkatan))].sort(),
|
||||
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: 'Jumlah Mahasiswa',
|
||||
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'
|
||||
},
|
||||
tickAmount: 5,
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
colors: ['#3B82F6', '#EC4899'],
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
fontSize: '14px',
|
||||
markers: {
|
||||
size: 12,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
},
|
||||
labels: {
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
|
||||
strokeDashArray: 4,
|
||||
padding: {
|
||||
top: 20,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const series = processSeriesData();
|
||||
|
||||
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">
|
||||
Mahasiswa Lulus Tepat Waktu
|
||||
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
184
components/charts/LulusTepatWaktuPieChart.tsx
Normal file
184
components/charts/LulusTepatWaktuPieChart.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
'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 LulusTepatWaktuData {
|
||||
tahun_angkatan: number;
|
||||
jk: string;
|
||||
jumlah_lulus_tepat_waktu: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
}
|
||||
|
||||
export default function LulusTepatWaktuPieChart({ selectedYear }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<LulusTepatWaktuData[]>([]);
|
||||
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/lulus-tepat-waktu?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();
|
||||
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();
|
||||
}, [selectedYear]);
|
||||
|
||||
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: ['Laki-laki', 'Perempuan'],
|
||||
colors: ['#3B82F6', '#EC4899'],
|
||||
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 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;
|
||||
return [maleData, femaleData];
|
||||
};
|
||||
|
||||
const series = processSeriesData();
|
||||
const totalMahasiswa = data.reduce((sum, item) => sum + item.jumlah_lulus_tepat_waktu, 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">
|
||||
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-[350px] w-full max-w-5xl mx-auto">
|
||||
{typeof window !== 'undefined' && (
|
||||
<Chart
|
||||
options={chartOptions}
|
||||
series={series}
|
||||
type="pie"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
266
components/charts/NamaBeasiswaChart.tsx
Normal file
266
components/charts/NamaBeasiswaChart.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
'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 NamaBeasiswaData {
|
||||
tahun_angkatan: number;
|
||||
nama_beasiswa: string;
|
||||
jumlah_nama_beasiswa: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedJenisBeasiswa: string;
|
||||
}
|
||||
|
||||
export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<NamaBeasiswaData[]>([]);
|
||||
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/nama-beasiswa?tahunAngkatan=${selectedYear}&jenisBeasiswa=${selectedJenisBeasiswa}`;
|
||||
|
||||
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: NamaBeasiswaData, b: NamaBeasiswaData) =>
|
||||
a.tahun_angkatan - b.tahun_angkatan
|
||||
);
|
||||
|
||||
setData(sortedData);
|
||||
} 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, selectedJenisBeasiswa]);
|
||||
|
||||
// Process data for series
|
||||
const processSeriesData = () => {
|
||||
if (!data.length) return [];
|
||||
|
||||
const years = [...new Set(data.map(item => item.tahun_angkatan))].sort();
|
||||
const beasiswaTypes = [...new Set(data.map(item => item.nama_beasiswa))].sort();
|
||||
|
||||
return beasiswaTypes.map(beasiswa => ({
|
||||
name: beasiswa,
|
||||
data: years.map(year => {
|
||||
const item = data.find(d => d.tahun_angkatan === year && d.nama_beasiswa === beasiswa);
|
||||
return item ? item.jumlah_nama_beasiswa : 0;
|
||||
})
|
||||
}));
|
||||
};
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
borderRadius: 1,
|
||||
},
|
||||
},
|
||||
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: [...new Set(data.map(item => item.tahun_angkatan))].sort(),
|
||||
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'
|
||||
},
|
||||
tickAmount: 5,
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Jumlah Mahasiswa',
|
||||
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'
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
colors: ['#3B82F6', '#EC4899', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#06B6D4'],
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
fontSize: '14px',
|
||||
markers: {
|
||||
size: 12,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
},
|
||||
labels: {
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
|
||||
strokeDashArray: 4,
|
||||
padding: {
|
||||
top: 20,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const series = processSeriesData();
|
||||
|
||||
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">
|
||||
Nama Beasiswa {selectedJenisBeasiswa}
|
||||
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
192
components/charts/NamaBeasiswaPieChart.tsx
Normal file
192
components/charts/NamaBeasiswaPieChart.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
'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 NamaBeasiswaData {
|
||||
tahun_angkatan: number;
|
||||
nama_beasiswa: string;
|
||||
jumlah_nama_beasiswa: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedJenisBeasiswa: string;
|
||||
}
|
||||
|
||||
export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<NamaBeasiswaData[]>([]);
|
||||
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/nama-beasiswa?tahunAngkatan=${selectedYear}&jenisBeasiswa=${selectedJenisBeasiswa}`;
|
||||
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();
|
||||
}, [selectedYear, selectedJenisBeasiswa]);
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'pie',
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
}
|
||||
},
|
||||
labels: [],
|
||||
colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4'],
|
||||
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 namaBeasiswa = [...new Set(data.map(item => item.nama_beasiswa))].sort();
|
||||
const jumlahData = namaBeasiswa.map(nama => {
|
||||
const item = data.find(d => d.nama_beasiswa === nama);
|
||||
return item ? item.jumlah_nama_beasiswa : 0;
|
||||
});
|
||||
|
||||
return {
|
||||
series: jumlahData,
|
||||
labels: namaBeasiswa
|
||||
};
|
||||
};
|
||||
|
||||
const { series, labels } = processSeriesData();
|
||||
const totalMahasiswa = data.reduce((sum, item) => sum + item.jumlah_nama_beasiswa, 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">
|
||||
Nama Beasiswa {selectedJenisBeasiswa}
|
||||
{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-[350px] w-full max-w-5xl mx-auto">
|
||||
{typeof window !== 'undefined' && (
|
||||
<Chart
|
||||
options={{...chartOptions, labels}}
|
||||
series={series}
|
||||
type="pie"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
326
components/charts/StatistikMahasiswaChart.tsx
Normal file
326
components/charts/StatistikMahasiswaChart.tsx
Normal file
@@ -0,0 +1,326 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { useTheme } from "next-themes";
|
||||
|
||||
// Import ApexCharts secara dinamis untuk menghindari error SSR
|
||||
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
|
||||
|
||||
interface MahasiswaStatistik {
|
||||
tahun_angkatan: number;
|
||||
total_mahasiswa: number;
|
||||
pria: number;
|
||||
wanita: number;
|
||||
}
|
||||
|
||||
export default function StatistikMahasiswaChart() {
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [statistikData, setStatistikData] = useState<MahasiswaStatistik[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [chartOptions, setChartOptions] = useState({
|
||||
chart: {
|
||||
type: 'bar' as const,
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
},
|
||||
},
|
||||
zoom: {
|
||||
enabled: true,
|
||||
type: 'x' as const,
|
||||
autoScaleYaxis: true
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 10,
|
||||
shape: 'circle' as const,
|
||||
strokeWidth: 0,
|
||||
hover: {
|
||||
size: 10
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val: number) {
|
||||
return val.toString()
|
||||
},
|
||||
position: 'top',
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ['#000']
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
show: false,
|
||||
width: [0, 0, 0],
|
||||
colors: ['transparent', 'transparent', 'transparent'],
|
||||
curve: 'straight' as const
|
||||
},
|
||||
xaxis: {
|
||||
categories: [] as number[],
|
||||
title: {
|
||||
text: 'Tahun Angkatan',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: [
|
||||
{
|
||||
title: {
|
||||
text: 'Jumlah Mahasiswa',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: '#000'
|
||||
}
|
||||
},
|
||||
min:0,
|
||||
tickAmount: 5
|
||||
}
|
||||
],
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
legend: {
|
||||
position: 'top' as const,
|
||||
fontSize: '14px',
|
||||
markers: {
|
||||
size: 12,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
},
|
||||
labels: {
|
||||
colors: '#000'
|
||||
}
|
||||
},
|
||||
colors: ['#3B82F6', '#10B981', '#EC4899'],
|
||||
tooltip: {
|
||||
theme: 'light',
|
||||
y: [
|
||||
{
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa"
|
||||
}
|
||||
},
|
||||
{
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa"
|
||||
}
|
||||
},
|
||||
{
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const statistikResponse = await fetch('/api/mahasiswa/statistik', {
|
||||
cache: 'no-store',
|
||||
});
|
||||
|
||||
if (!statistikResponse.ok) {
|
||||
throw new Error('Failed to fetch statistik data');
|
||||
}
|
||||
|
||||
const statistikData = await statistikResponse.json();
|
||||
setStatistikData(statistikData);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
||||
console.error('Error fetching data:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
// Update theme when it changes
|
||||
useEffect(() => {
|
||||
const currentTheme = theme === 'system' ? systemTheme : theme;
|
||||
const textColor = currentTheme === 'dark' ? '#fff' : '#000';
|
||||
const tooltipTheme = currentTheme === 'dark' ? 'dark' : 'light';
|
||||
|
||||
setChartOptions(prev => ({
|
||||
...prev,
|
||||
chart: {
|
||||
...prev.chart,
|
||||
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
dataLabels: {
|
||||
...prev.dataLabels,
|
||||
style: {
|
||||
...prev.dataLabels.style,
|
||||
colors: [textColor]
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
...prev.xaxis,
|
||||
title: {
|
||||
...prev.xaxis.title,
|
||||
style: {
|
||||
...prev.xaxis.title.style,
|
||||
color: textColor
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
...prev.xaxis.labels,
|
||||
style: {
|
||||
...prev.xaxis.labels.style,
|
||||
colors: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: [
|
||||
{
|
||||
...prev.yaxis[0],
|
||||
title: {
|
||||
...prev.yaxis[0].title,
|
||||
style: {
|
||||
...prev.yaxis[0].title.style,
|
||||
color: textColor
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
...prev.yaxis[0].labels,
|
||||
style: {
|
||||
...prev.yaxis[0].labels.style,
|
||||
colors: textColor
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
...prev.legend,
|
||||
labels: {
|
||||
...prev.legend.labels,
|
||||
colors: textColor
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
...prev.tooltip,
|
||||
theme: tooltipTheme
|
||||
}
|
||||
}));
|
||||
}, [theme, systemTheme]);
|
||||
|
||||
// Update categories when data changes
|
||||
useEffect(() => {
|
||||
if (statistikData.length > 0) {
|
||||
|
||||
setChartOptions(prev => ({
|
||||
...prev,
|
||||
xaxis: {
|
||||
...prev.xaxis,
|
||||
categories: statistikData.map(item => item.tahun_angkatan)
|
||||
},
|
||||
yaxis: [
|
||||
{
|
||||
...prev.yaxis[0],
|
||||
}
|
||||
]
|
||||
}));
|
||||
}
|
||||
}, [statistikData]);
|
||||
|
||||
const chartSeries = [
|
||||
{
|
||||
name: 'Laki-laki',
|
||||
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)
|
||||
}
|
||||
];
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
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-[400px] w-full max-w-5xl mx-auto">
|
||||
<Chart
|
||||
options={chartOptions}
|
||||
series={chartSeries}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
238
components/charts/StatistikPerAngkatanChart.tsx
Normal file
238
components/charts/StatistikPerAngkatanChart.tsx
Normal file
@@ -0,0 +1,238 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { useTheme } from "next-themes";
|
||||
|
||||
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
|
||||
|
||||
interface GenderStatistik {
|
||||
tahun_angkatan: number;
|
||||
jk: string;
|
||||
jumlah: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
tahunAngkatan: string;
|
||||
}
|
||||
|
||||
export default function StatistikPerAngkatanChart({ tahunAngkatan }: Props) {
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [statistikData, setStatistikData] = useState<GenderStatistik[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch(`/api/mahasiswa/gender-per-angkatan?tahun=${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('Invalid data format received from server');
|
||||
}
|
||||
|
||||
setStatistikData(result);
|
||||
} catch (err) {
|
||||
console.error('Error in fetchData:', err);
|
||||
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (tahunAngkatan !== "all") {
|
||||
fetchData();
|
||||
}
|
||||
}, [tahunAngkatan]);
|
||||
|
||||
const [chartOptions, setChartOptions] = useState({
|
||||
chart: {
|
||||
type: 'pie' as const,
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
},
|
||||
background: 'transparent',
|
||||
},
|
||||
labels: ['Laki-laki', 'Perempuan'],
|
||||
colors: ['#3B82F6', '#EC4899'],
|
||||
legend: {
|
||||
position: 'bottom' as const,
|
||||
fontSize: '14px',
|
||||
markers: {
|
||||
size: 12,
|
||||
strokeWidth: 0
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10
|
||||
},
|
||||
labels: {
|
||||
colors: '#000',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Inter, sans-serif',
|
||||
fontWeight: '500'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val: number, opts: any) {
|
||||
return val.toString();
|
||||
},
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Inter, sans-serif',
|
||||
fontWeight: '500'
|
||||
},
|
||||
offsetY: 0,
|
||||
dropShadow: {
|
||||
enabled: false
|
||||
},
|
||||
position: 'top'
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa"
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update theme when it changes
|
||||
useEffect(() => {
|
||||
const currentTheme = theme === 'system' ? systemTheme : theme;
|
||||
const textColor = currentTheme === 'dark' ? '#fff' : '#000';
|
||||
const tooltipTheme = currentTheme === 'dark' ? 'dark' : 'light';
|
||||
|
||||
setChartOptions(prev => ({
|
||||
...prev,
|
||||
chart: {
|
||||
...prev.chart,
|
||||
background: currentTheme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
legend: {
|
||||
...prev.legend,
|
||||
labels: {
|
||||
...prev.legend.labels,
|
||||
colors: textColor,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
...prev.dataLabels,
|
||||
style: {
|
||||
...prev.dataLabels.style,
|
||||
color: textColor
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
...prev.tooltip,
|
||||
theme: tooltipTheme
|
||||
}
|
||||
}));
|
||||
}, [theme, systemTheme]);
|
||||
|
||||
// Update dataLabels formatter when data changes
|
||||
useEffect(() => {
|
||||
if (statistikData.length > 0) {
|
||||
setChartOptions(prev => ({
|
||||
...prev,
|
||||
dataLabels: {
|
||||
...prev.dataLabels,
|
||||
formatter: function (val: number, opts: any) {
|
||||
const total = statistikData.reduce((sum, item) => sum + item.jumlah, 0);
|
||||
const percentage = ((statistikData[opts.seriesIndex]?.jumlah / total) * 100) || 0;
|
||||
return `${percentage.toFixed(0)}%`;
|
||||
}
|
||||
}
|
||||
}));
|
||||
}
|
||||
}, [statistikData]);
|
||||
|
||||
const chartSeries = statistikData.map(item => item.jumlah);
|
||||
const totalMahasiswa = statistikData.reduce((sum, item) => sum + item.jumlah, 0);
|
||||
|
||||
if (tahunAngkatan === "all") {
|
||||
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 (statistikData.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">
|
||||
Total Mahasiswa Angkatan {tahunAngkatan}
|
||||
</CardTitle>
|
||||
<div className="text-lg font-semibold text-gray-600 dark:text-gray-300">
|
||||
Total Mahasiswa: {totalMahasiswa}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[350px] w-full max-w-5xl mx-auto">
|
||||
<Chart
|
||||
options={chartOptions}
|
||||
series={chartSeries}
|
||||
type="pie"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
217
components/charts/StatusMahasiswaChart.tsx
Normal file
217
components/charts/StatusMahasiswaChart.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
'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 StatusData {
|
||||
tahun_angkatan: string;
|
||||
status_kuliah: string;
|
||||
jumlah: number;
|
||||
}
|
||||
|
||||
export default function StatusMahasiswaChart() {
|
||||
const { theme, systemTheme } = useTheme();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [data, setData] = useState<StatusData[]>([]);
|
||||
const [series, setSeries] = useState<ApexAxisChartSeries>([]);
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
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: [...new Set(data.map(item => item.tahun_angkatan))].sort(),
|
||||
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', '#EF4444'],
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch('/api/mahasiswa/status');
|
||||
|
||||
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);
|
||||
|
||||
// Process data to create series
|
||||
const tahunAngkatan = [...new Set(result.map(item => item.tahun_angkatan))].sort();
|
||||
const statuses = ['Aktif', 'Lulus', 'Cuti', 'DO'];
|
||||
|
||||
const seriesData = statuses.map(status => ({
|
||||
name: status,
|
||||
data: tahunAngkatan.map(tahun => {
|
||||
const item = result.find(d => d.tahun_angkatan === tahun && d.status_kuliah === status);
|
||||
return item ? item.jumlah : 0;
|
||||
}),
|
||||
}));
|
||||
|
||||
setSeries(seriesData);
|
||||
} catch (err) {
|
||||
console.error('Error in fetchData:', err);
|
||||
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
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">
|
||||
Status Mahasiswa
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
|
||||
{typeof window !== 'undefined' && (
|
||||
<Chart
|
||||
options={chartOptions}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
253
components/charts/StatusMahasiswaFilterChart.tsx
Normal file
253
components/charts/StatusMahasiswaFilterChart.tsx
Normal file
@@ -0,0 +1,253 @@
|
||||
'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 StatusMahasiswaData {
|
||||
tahun_angkatan: number;
|
||||
jk: string;
|
||||
total_mahasiswa: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedStatus: string;
|
||||
}
|
||||
|
||||
export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatus }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<StatusMahasiswaData[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('Fetching data with params:', { selectedYear, selectedStatus });
|
||||
|
||||
const response = await fetch(
|
||||
`/api/mahasiswa/status-mahasiswa?tahun_angkatan=${selectedYear}&status_kuliah=${selectedStatus}`
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
console.log('Received data:', result);
|
||||
|
||||
// Sort data by tahun_angkatan
|
||||
const sortedData = result.sort((a: StatusMahasiswaData, b: StatusMahasiswaData) =>
|
||||
Number(a.tahun_angkatan) - Number(b.tahun_angkatan)
|
||||
);
|
||||
|
||||
setData(sortedData);
|
||||
} catch (err) {
|
||||
console.error('Error in fetchData:', err);
|
||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [selectedYear, selectedStatus]);
|
||||
|
||||
// Log data changes
|
||||
useEffect(() => {
|
||||
console.log('Current data state:', data);
|
||||
}, [data]);
|
||||
|
||||
// Get unique years and sort them
|
||||
const years = [...new Set(data.map(item => item.tahun_angkatan))].sort((a, b) => Number(a) - Number(b));
|
||||
console.log('Sorted years:', years);
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
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,
|
||||
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: ['#3B82F6', '#EC4899'],
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Process data for series
|
||||
const processSeriesData = () => {
|
||||
const maleData = new Array(years.length).fill(0);
|
||||
const femaleData = new Array(years.length).fill(0);
|
||||
|
||||
data.forEach(item => {
|
||||
const yearIndex = years.indexOf(item.tahun_angkatan);
|
||||
if (yearIndex !== -1) {
|
||||
if (item.jk === 'L') {
|
||||
maleData[yearIndex] = item.total_mahasiswa;
|
||||
} else if (item.jk === 'P') {
|
||||
femaleData[yearIndex] = item.total_mahasiswa;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return [
|
||||
{
|
||||
name: 'Laki-laki',
|
||||
data: maleData
|
||||
},
|
||||
{
|
||||
name: 'Perempuan',
|
||||
data: femaleData
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
const series = processSeriesData();
|
||||
console.log('Processed series data:', series);
|
||||
|
||||
|
||||
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">
|
||||
Status Mahasiswa {selectedStatus}
|
||||
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[350px] w-full max-w-5xl mx-auto">
|
||||
{typeof window !== 'undefined' && (
|
||||
<Chart
|
||||
options={chartOptions}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
185
components/charts/StatusMahasiswaFilterPieChart.tsx
Normal file
185
components/charts/StatusMahasiswaFilterPieChart.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
'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 StatusMahasiswaData {
|
||||
tahun_angkatan: number;
|
||||
jk: string;
|
||||
total_mahasiswa: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedStatus: string;
|
||||
}
|
||||
|
||||
export default function StatusMahasiswaFilterPieChart({ selectedYear, selectedStatus }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<StatusMahasiswaData[]>([]);
|
||||
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/status-mahasiswa?tahun_angkatan=${selectedYear}&status_kuliah=${selectedStatus}`
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
setData(result);
|
||||
} catch (err) {
|
||||
console.error('Error in fetchData:', err);
|
||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [selectedYear, selectedStatus]);
|
||||
|
||||
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: ['Laki-laki', 'Perempuan'],
|
||||
colors: ['#3B82F6', '#EC4899'],
|
||||
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 maleData = data.find(item => item.jk === 'L')?.total_mahasiswa || 0;
|
||||
const femaleData = data.find(item => item.jk === 'P')?.total_mahasiswa || 0;
|
||||
return [maleData, femaleData];
|
||||
};
|
||||
|
||||
const series = processSeriesData();
|
||||
const totalMahasiswa = data.reduce((sum, item) => sum + item.total_mahasiswa, 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">
|
||||
Status Mahasiswa {selectedStatus}
|
||||
{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-[350px] w-full max-w-5xl mx-auto">
|
||||
{typeof window !== 'undefined' && (
|
||||
<Chart
|
||||
options={chartOptions}
|
||||
series={series}
|
||||
type="pie"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
264
components/charts/TingkatPrestasiChart.tsx
Normal file
264
components/charts/TingkatPrestasiChart.tsx
Normal file
@@ -0,0 +1,264 @@
|
||||
'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 TingkatPrestasiData {
|
||||
tahun_angkatan: number;
|
||||
tingkat_prestasi: string;
|
||||
tingkat_mahasiswa_prestasi: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedJenisPrestasi: string;
|
||||
}
|
||||
|
||||
export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<TingkatPrestasiData[]>([]);
|
||||
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/tingkat-prestasi?jenisPrestasi=${selectedJenisPrestasi}`;
|
||||
|
||||
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: TingkatPrestasiData, b: TingkatPrestasiData) =>
|
||||
a.tahun_angkatan - b.tahun_angkatan
|
||||
);
|
||||
|
||||
setData(sortedData);
|
||||
} catch (err) {
|
||||
console.error('Error in fetchData:', err);
|
||||
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [selectedJenisPrestasi]);
|
||||
|
||||
// Process data for series
|
||||
const processSeriesData = () => {
|
||||
if (!data.length) return [];
|
||||
|
||||
const years = [...new Set(data.map(item => item.tahun_angkatan))].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_prestasi === tingkat);
|
||||
return item?.tingkat_mahasiswa_prestasi || 0;
|
||||
})
|
||||
}));
|
||||
};
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
borderRadius: 1,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val: number) {
|
||||
return val?.toString() || '0';
|
||||
},
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: [theme === 'dark' ? '#fff' : '#000']
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
xaxis: {
|
||||
categories: [...new Set(data.map(item => item.tahun_angkatan))].sort(),
|
||||
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: 'Jumlah Mahasiswa',
|
||||
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'
|
||||
},
|
||||
tickAmount: 5,
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4'],
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
fontSize: '14px',
|
||||
markers: {
|
||||
size: 12,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
},
|
||||
labels: {
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
|
||||
strokeDashArray: 4,
|
||||
padding: {
|
||||
top: 20,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const series = processSeriesData();
|
||||
|
||||
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">
|
||||
Tingkat Prestasi {selectedJenisPrestasi}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
188
components/charts/TingkatPrestasiPieChart.tsx
Normal file
188
components/charts/TingkatPrestasiPieChart.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
'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 TingkatPrestasiData {
|
||||
tahun_angkatan: number;
|
||||
tingkat_prestasi: string;
|
||||
tingkat_mahasiswa_prestasi: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedJenisPrestasi: string;
|
||||
}
|
||||
|
||||
export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPrestasi }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<TingkatPrestasiData[]>([]);
|
||||
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/tingkat-prestasi?tahunAngkatan=${selectedYear}&jenisPrestasi=${selectedJenisPrestasi}`;
|
||||
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();
|
||||
}, [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',
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
}
|
||||
},
|
||||
labels: labels,
|
||||
colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4'],
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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">
|
||||
Tingkat Prestasi {selectedJenisPrestasi} Angkatan {selectedYear}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[350px] w-full max-w-5xl mx-auto">
|
||||
{typeof window !== 'undefined' && (
|
||||
<Chart
|
||||
options={chartOptions}
|
||||
series={series}
|
||||
type="pie"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
278
components/charts/TotalBeasiswaChart.tsx
Normal file
278
components/charts/TotalBeasiswaChart.tsx
Normal file
@@ -0,0 +1,278 @@
|
||||
'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 TotalBeasiswaData {
|
||||
tahun_angkatan: number;
|
||||
jk: string;
|
||||
jumlah_mahasiswa_beasiswa: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedJenisBeasiswa: string;
|
||||
}
|
||||
|
||||
export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<TotalBeasiswaData[]>([]);
|
||||
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/total-beasiswa?tahunAngkatan=${selectedYear}&jenisBeasiswa=${selectedJenisBeasiswa}`;
|
||||
|
||||
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: TotalBeasiswaData, b: TotalBeasiswaData) =>
|
||||
a.tahun_angkatan - b.tahun_angkatan
|
||||
);
|
||||
|
||||
setData(sortedData);
|
||||
} 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, selectedJenisBeasiswa]);
|
||||
|
||||
// Process data for series
|
||||
const processSeriesData = () => {
|
||||
if (!data.length) return [];
|
||||
|
||||
const years = [...new Set(data.map(item => item.tahun_angkatan))].sort();
|
||||
|
||||
const pria = years.map(year => {
|
||||
const item = data.find(d => d.tahun_angkatan === year && d.jk === 'Pria');
|
||||
return item ? item.jumlah_mahasiswa_beasiswa : 0;
|
||||
});
|
||||
|
||||
const wanita = years.map(year => {
|
||||
const item = data.find(d => d.tahun_angkatan === year && d.jk === 'Wanita');
|
||||
return item ? item.jumlah_mahasiswa_beasiswa : 0;
|
||||
});
|
||||
|
||||
return [
|
||||
{
|
||||
name: 'Laki-laki',
|
||||
data: pria
|
||||
},
|
||||
{
|
||||
name: 'Perempuan',
|
||||
data: wanita
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
borderRadius: 1,
|
||||
},
|
||||
},
|
||||
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: [...new Set(data.map(item => item.tahun_angkatan))].sort(),
|
||||
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: 'Jumlah Mahasiswa',
|
||||
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'
|
||||
},
|
||||
tickAmount: 5,
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
colors: ['#3B82F6', '#EC4899'],
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
fontSize: '14px',
|
||||
markers: {
|
||||
size: 12,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
},
|
||||
labels: {
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
|
||||
strokeDashArray: 4,
|
||||
padding: {
|
||||
top: 20,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const series = processSeriesData();
|
||||
|
||||
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">
|
||||
Total Mahasiswa Beasiswa {selectedJenisBeasiswa}
|
||||
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
188
components/charts/TotalBeasiswaPieChart.tsx
Normal file
188
components/charts/TotalBeasiswaPieChart.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
'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 TotalBeasiswaData {
|
||||
tahun_angkatan: number;
|
||||
jk: string;
|
||||
jumlah_mahasiswa_beasiswa: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedJenisBeasiswa: string;
|
||||
}
|
||||
|
||||
export default function TotalBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<TotalBeasiswaData[]>([]);
|
||||
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/total-beasiswa?tahunAngkatan=${selectedYear}&jenisBeasiswa=${selectedJenisBeasiswa}`;
|
||||
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();
|
||||
}, [selectedYear, selectedJenisBeasiswa]);
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'pie',
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
}
|
||||
},
|
||||
labels: ['Laki-laki', 'Perempuan'],
|
||||
colors: ['#3B82F6', '#EC4899'],
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
fontSize: '14px',
|
||||
markers: {
|
||||
size: 12,
|
||||
strokeWidth: 0
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10
|
||||
},
|
||||
formatter: function(legendName: string, opts: any) {
|
||||
return legendName;
|
||||
},
|
||||
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 maleData = data.find(item => item.jk === 'Pria')?.jumlah_mahasiswa_beasiswa || 0;
|
||||
const femaleData = data.find(item => item.jk === 'Wanita')?.jumlah_mahasiswa_beasiswa || 0;
|
||||
return [maleData, femaleData];
|
||||
};
|
||||
|
||||
const series = processSeriesData();
|
||||
const totalMahasiswa = data.reduce((sum, item) => sum + item.jumlah_mahasiswa_beasiswa, 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">
|
||||
Total Mahasiswa Beasiswa {selectedJenisBeasiswa}
|
||||
{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-[350px] w-full max-w-5xl mx-auto">
|
||||
{typeof window !== 'undefined' && (
|
||||
<Chart
|
||||
options={chartOptions}
|
||||
series={series}
|
||||
type="pie"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
276
components/charts/TotalPrestasiChart.tsx
Normal file
276
components/charts/TotalPrestasiChart.tsx
Normal file
@@ -0,0 +1,276 @@
|
||||
'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 TotalPrestasiData {
|
||||
tahun_angkatan: number;
|
||||
jk: string;
|
||||
jumlah_mahasiswa_prestasi: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedJenisPrestasi: string;
|
||||
}
|
||||
|
||||
export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<TotalPrestasiData[]>([]);
|
||||
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/total-prestasi?jenisPrestasi=${selectedJenisPrestasi}`;
|
||||
|
||||
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: TotalPrestasiData, b: TotalPrestasiData) =>
|
||||
a.tahun_angkatan - b.tahun_angkatan
|
||||
);
|
||||
|
||||
setData(sortedData);
|
||||
} catch (err) {
|
||||
console.error('Error in fetchData:', err);
|
||||
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [selectedJenisPrestasi]);
|
||||
|
||||
// Process data for series
|
||||
const processSeriesData = () => {
|
||||
if (!data.length) return [];
|
||||
|
||||
const years = [...new Set(data.map(item => item.tahun_angkatan))].sort();
|
||||
|
||||
const pria = years.map(year => {
|
||||
const item = data.find(d => d.tahun_angkatan === year && d.jk === 'Pria');
|
||||
return item ? item.jumlah_mahasiswa_prestasi : 0;
|
||||
});
|
||||
|
||||
const wanita = years.map(year => {
|
||||
const item = data.find(d => d.tahun_angkatan === year && d.jk === 'Wanita');
|
||||
return item ? item.jumlah_mahasiswa_prestasi : 0;
|
||||
});
|
||||
|
||||
return [
|
||||
{
|
||||
name: 'Laki-laki',
|
||||
data: pria
|
||||
},
|
||||
{
|
||||
name: 'Perempuan',
|
||||
data: wanita
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
},
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
borderRadius: 1,
|
||||
},
|
||||
},
|
||||
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: [...new Set(data.map(item => item.tahun_angkatan))].sort(),
|
||||
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: 'Jumlah Mahasiswa',
|
||||
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'
|
||||
},
|
||||
tickAmount: 5,
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
colors: ['#3B82F6', '#EC4899'],
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
fontSize: '14px',
|
||||
markers: {
|
||||
size: 12,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
},
|
||||
labels: {
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
|
||||
strokeDashArray: 4,
|
||||
padding: {
|
||||
top: 20,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const series = processSeriesData();
|
||||
|
||||
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">
|
||||
Total Mahasiswa Berprestasi {selectedJenisPrestasi}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
188
components/charts/TotalPrestasiPieChart.tsx
Normal file
188
components/charts/TotalPrestasiPieChart.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
'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 TotalPrestasiData {
|
||||
tahun_angkatan: number;
|
||||
jk: string;
|
||||
jumlah_mahasiswa_prestasi: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedYear: string;
|
||||
selectedJenisPrestasi: string;
|
||||
}
|
||||
|
||||
export default function TotalPrestasiPieChart({ selectedYear, selectedJenisPrestasi }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [data, setData] = useState<TotalPrestasiData[]>([]);
|
||||
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/total-prestasi?tahunAngkatan=${selectedYear}&jenisPrestasi=${selectedJenisPrestasi}`;
|
||||
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();
|
||||
}, [selectedYear, selectedJenisPrestasi]);
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: 'pie',
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true
|
||||
}
|
||||
}
|
||||
},
|
||||
labels: ['Laki-laki', 'Perempuan'],
|
||||
colors: ['#3B82F6', '#EC4899'],
|
||||
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 = () => {
|
||||
// Filter data sesuai tahun angkatan
|
||||
const filtered = data.filter(item => String(item.tahun_angkatan) === String(selectedYear));
|
||||
const pria = filtered.find(item => item.jk === 'Pria')?.jumlah_mahasiswa_prestasi || 0;
|
||||
const wanita = filtered.find(item => item.jk === 'Wanita')?.jumlah_mahasiswa_prestasi || 0;
|
||||
return [pria, wanita];
|
||||
};
|
||||
|
||||
const series = processSeriesData();
|
||||
const totalMahasiswa = data
|
||||
.filter(item => String(item.tahun_angkatan) === String(selectedYear))
|
||||
.reduce((sum, item) => sum + item.jumlah_mahasiswa_prestasi, 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">
|
||||
Total Mahasiswa Berprestasi {selectedJenisPrestasi} 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-[350px] w-full max-w-5xl mx-auto">
|
||||
{typeof window !== 'undefined' && (
|
||||
<Chart
|
||||
options={chartOptions}
|
||||
series={series}
|
||||
type="pie"
|
||||
height="100%"
|
||||
width="90%"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user