diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx index d4a48e3..5c00552 100644 --- a/app/dashboard/page.tsx +++ b/app/dashboard/page.tsx @@ -14,7 +14,6 @@ import KelompokKeahlianStatusChart from "@/components/chartsDashboard/kkdashboar import KelompokKeahlianLulusTepatPieChart from "@/components/chartsDashboard/kkdashboardtepatpiechart"; import KelompokKeahlianPieChartPerAngkatan from "@/components/chartsDashboard/kkdashboardpiechartperangkatan"; import StatusMahasiswaPieChartPerangkatan from "@/components/chartsDashboard/StatusMahasiswaPieChartPerangkatan"; -import MasaStudiAktifChart from "@/components/chartsDashboard/masastudiaktifchart"; import MasaStudiLulusChart from "@/components/chartsDashboard/masastudiluluschart"; import NamaBeasiswaChart from "@/components/chartsDashboard/NamaBeasiswaDashChart"; import NamaBeasiswaDashPieChartPerangkatan from "@/components/chartsDashboard/NamaBeasiswaDashPieChartPerangkatan"; @@ -72,7 +71,7 @@ export default function TotalMahasiswaPage() { inline: 'nearest' }); } - }, 100); + }, 200); }); }; @@ -199,7 +198,7 @@ export default function TotalMahasiswaPage() { {/* Demographics Section */} -
+
diff --git a/app/detail/asal-daerah/page.tsx b/app/detail/asal-daerah/page.tsx new file mode 100644 index 0000000..4046958 --- /dev/null +++ b/app/detail/asal-daerah/page.tsx @@ -0,0 +1,72 @@ +'use client'; + +import { useState } from "react"; +import AsalDaerahChart from "@/components/charts/AsalDaerahChart"; +import AsalDaerahPerAngkatanChart from "@/components/charts/AsalDaerahPerAngkatanChart"; +import FilterTahunAngkatan from "@/components/FilterTahunAngkatan"; + +export default function AsalDaerahDetailPage() { + const [selectedYear, setSelectedYear] = useState("all"); + + return ( +
+
+ {/* Filter Section */} + + + {/* Chart Section - Enhanced Size */} +
+ {/* Chart untuk semua data atau dual chart ketika tahun tertentu dipilih */} + {selectedYear === "all" ? ( +
+ +
+ ) : ( + <> + + + )} +
+ + {/* Information Section */} +
+

+ Informasi Visualisasi +

+
+
+

+ Grafik Utama (Asal Daerah) +

+
    +
  • • Menampilkan distribusi mahasiswa berdasarkan asal kabupaten/kota
    • +
  • • Data geografis menunjukkan sebaran mahasiswa dari berbagai daerah
    • +
  • • Grafik horizontal bar chart untuk kemudahan membaca nama daerah
    • +
+
+ {selectedYear !== "all" && ( +
+

+ Grafik Per Angkatan ({selectedYear}) +

+
    +
  • • Menampilkan distribusi asal daerah untuk angkatan {selectedYear}
    • +
  • • Data spesifik untuk tahun angkatan yang dipilih
    • +
  • • Insight detail sebaran geografis per angkatan
    • +
+
+ )} +
+
+
+
+ ); +} diff --git a/app/detail/asal-provinsi/page.tsx b/app/detail/asal-provinsi/page.tsx new file mode 100644 index 0000000..7029217 --- /dev/null +++ b/app/detail/asal-provinsi/page.tsx @@ -0,0 +1,40 @@ +'use client'; + +import ProvinsiMahasiswaPieChart from "@/components/chartsDashboard/ProvinsiMahasiswaPieChart"; + +export default function AsalProvinsiDetailPage() { + return ( +
+
+ {/* Chart Section - Enhanced Size */} +
+ {/* Asal Provinsi Chart dengan ukuran lebih besar */} +
+ +
+
+ + {/* Information Section */} +
+

+ Informasi Visualisasi +

+
+
+

+ Grafik Asal Provinsi Mahasiswa +

+
    +
  • • Menampilkan proporsi mahasiswa berdasarkan provinsi kalimantan barat dengan luar kalimantan barat
    • +
+
+
+ +
+
+
+ ); +} diff --git a/app/detail/jenis-pendaftaran/page.tsx b/app/detail/jenis-pendaftaran/page.tsx new file mode 100644 index 0000000..f7328e9 --- /dev/null +++ b/app/detail/jenis-pendaftaran/page.tsx @@ -0,0 +1,74 @@ +'use client'; + +import { useState } from "react"; +import JenisPendaftaranChart from "@/components/charts/JenisPendaftaranChart"; +import JenisPendaftaranPerAngkatanChart from "@/components/charts/JenisPendaftaranPerAngkatanChart"; +import FilterTahunAngkatan from "@/components/FilterTahunAngkatan"; + +export default function JenisPendaftaranDetailPage() { + const [selectedYear, setSelectedYear] = useState("all"); + + return ( +
+
+ {/* Filter Section */} + + + {/* Chart Section - Enhanced Size */} +
+ {/* Chart untuk semua data atau dual chart ketika tahun tertentu dipilih */} + {selectedYear === "all" ? ( +
+ +
+ ) : ( + <> + + + )} +
+ + {/* Information Section */} +
+

+ Informasi Visualisasi +

+
+
+

+ Grafik Utama (Semua Angkatan) +

+
    +
  • • Menampilkan distribusi jenis pendaftaran mahasiswa per tahun angkatan
    • +
  • • Data dikategorikan berdasarkan jalur masuk mahasiswa
    • +
  • • Grafik batang yang menunjukkan jumlah mahasiswa per jenis pendaftaran
    • +
  • • Data mencakup seluruh mahasiswa dari semua angkatan
    • +
+
+ {selectedYear !== "all" && ( +
+

+ Grafik Per Angkatan ({selectedYear}) +

+
    +
  • • Menampilkan distribusi jenis pendaftaran untuk angkatan {selectedYear}
    • +
  • • Grafik pie chart dengan persentase per jenis pendaftaran
    • +
  • • Data spesifik untuk tahun angkatan yang dipilih
    • +
  • • Memberikan insight detail jalur masuk per angkatan
    • +
+
+ )} +
+
+
+
+ ); +} diff --git a/app/detail/jumlah-mahasiswa/page.tsx b/app/detail/jumlah-mahasiswa/page.tsx index 7632a7e..0ab8bbd 100644 --- a/app/detail/jumlah-mahasiswa/page.tsx +++ b/app/detail/jumlah-mahasiswa/page.tsx @@ -41,7 +41,7 @@ export default function JumlahMahasiswaDetailPage() { {/* Information Section */} -
+

Informasi Visualisasi

@@ -54,7 +54,7 @@ export default function JumlahMahasiswaDetailPage() {
  • • Menampilkan jumlah mahasiswa per tahun angkatan
  • • Data dibagi berdasarkan jenis kelamin (Laki-laki & Perempuan)
  • • Grafik batang dengan tiga kategori: Laki-laki, Total, dan Perempuan
    • -
  • • Data dapat ditampilkan berdasarkan kategori dan di-download
    • +
  • • Data dapat di-download, dan dianalisis per kategori
    • {selectedYear !== "all" && ( diff --git a/app/detail/kelompok-keahlian-lulus-tepat/page.tsx b/app/detail/kelompok-keahlian-lulus-tepat/page.tsx new file mode 100644 index 0000000..1f3fc96 --- /dev/null +++ b/app/detail/kelompok-keahlian-lulus-tepat/page.tsx @@ -0,0 +1,42 @@ +'use client'; + +import KelompokKeahlianLulusTepatPieChart from "@/components/chartsDashboard/kkdashboardtepatpiechart"; + +export default function KelompokKeahlianLulusTepatDetailPage() { + return ( +
    +
    + {/* Chart Section - Enhanced Size */} +
    + {/* Kelompok Keahlian Lulus Tepat Chart dengan ukuran lebih besar */} +
    + +
    +
    + + {/* Information Section */} +
    +

    + Informasi Visualisasi +

    +
    +
    +

    + Grafik Kelompok Keahlian Lulus Tepat Waktu +

    +
      +
    • • Menampilkan distribusi lulusan tepat waktu berdasarkan kelompok keahlian
      • +
    • • Data menunjukkan jumlah mahasiswa yang lulus sesuai durasi standar per bidang studi
      • +
    • • Grafik pie chart untuk visualisasi proporsi keberhasilan per kelompok keahlian
      • +
    +
    +
    + +
    +
    +
    + ); +} diff --git a/app/detail/kelompok-keahlian/page.tsx b/app/detail/kelompok-keahlian/page.tsx new file mode 100644 index 0000000..f4e962a --- /dev/null +++ b/app/detail/kelompok-keahlian/page.tsx @@ -0,0 +1,76 @@ +'use client'; + +import { useState } from "react"; +import KelompokKeahlianStatusChart from "@/components/chartsDashboard/kkdashboardchart"; +import KelompokKeahlianPieChartPerAngkatan from "@/components/chartsDashboard/kkdashboardpiechartperangkatan"; +import FilterTahunAngkatan from "@/components/FilterTahunAngkatan"; + +export default function KelompokKeahlianDetailPage() { + const [selectedYear, setSelectedYear] = useState("all"); + + return ( +
    +
    + {/* Filter Section */} + + + {/* Chart Section - Enhanced Size */} +
    + {/* Chart untuk semua data atau dual chart ketika tahun tertentu dipilih */} + {selectedYear === "all" ? ( +
    + +
    + ) : ( + <> + + + )} +
    + + {/* Information Section */} +
    +

    + Informasi Visualisasi +

    +
    +
    +

    + Grafik Utama (Kelompok Keahlian) +

    +
      +
    • • Menampilkan distribusi mahasiswa berdasarkan kelompok keahlian per tahun angkatan
      • +
    • • Data dikategorikan berdasarkan bidang studi/konsentrasi mahasiswa
      • +
    • • Grafik horizontal bar chart dengan stacked data per angkatan
      • +
    • • Visualisasi pola distribusi mahasiswa di setiap kelompok keahlian
      • +
    +
    + {selectedYear !== "all" && ( +
    +

    + Grafik Per Angkatan ({selectedYear}) +

    +
      +
    • • Menampilkan proporsi mahasiswa per kelompok keahlian untuk angkatan {selectedYear}
      • +
    • • Grafik pie chart dengan persentase per kelompok keahlian
      • +
    • • Data spesifik untuk tahun angkatan yang dipilih
      • +
    • • Memberikan insight detail distribusi per bidang studi
      • +
    +
    + )} +
    + +
    +
    +
    + ); +} diff --git a/app/detail/lulus-tepat-waktu/page.tsx b/app/detail/lulus-tepat-waktu/page.tsx new file mode 100644 index 0000000..123b252 --- /dev/null +++ b/app/detail/lulus-tepat-waktu/page.tsx @@ -0,0 +1,42 @@ +'use client'; + +import LulusTepatWaktuChart from "@/components/charts/LulusTepatWaktuChart"; + +export default function LulusTepatWaktuDetailPage() { + return ( +
    +
    + {/* Chart Section - Enhanced Size */} +
    + {/* Lulus Tepat Waktu Chart dengan ukuran lebih besar */} +
    + +
    +
    + + {/* Information Section */} +
    +

    + Informasi Visualisasi +

    +
    +
    +

    + Tentang Grafik Lulus Tepat Waktu +

    +
      +
    • • Menampilkan jumlah mahasiswa yang lulus tepat waktu per tahun angkatan
      • +
    • • Data mencakup mahasiswa yang menyelesaikan studi sesuai durasi standar
      • +
    • • Grafik batang yang menunjukkan tren kelulusan tepat waktu
      • +
    +
    +
    +
    +
    +
    + ); +} diff --git a/app/detail/masa-studi-lulus/page.tsx b/app/detail/masa-studi-lulus/page.tsx new file mode 100644 index 0000000..901621a --- /dev/null +++ b/app/detail/masa-studi-lulus/page.tsx @@ -0,0 +1,43 @@ +'use client'; + +import MasaStudiLulusChart from "@/components/chartsDashboard/masastudiluluschart"; + +export default function MasaStudiLulusDetailPage() { + return ( +
    +
    + {/* Chart Section - Enhanced Size */} +
    + {/* Masa Studi Lulus Chart dengan ukuran lebih besar */} +
    + +
    +
    + + {/* Information Section */} +
    +

    + Informasi Visualisasi +

    +
    +
    +

    + Tentang Grafik Masa Studi Lulus +

    +
      +
    • • Menampilkan rata-rata masa studi mahasiswa yang telah lulus per tahun angkatan
      • +
    • • Data menunjukkan durasi waktu yang dibutuhkan mahasiswa untuk menyelesaikan studi
      • +
    • • Grafik line chart untuk melihat tren perubahan masa studi dari waktu ke waktu
      • +
    • • Indikator efisiensi waktu penyelesaian studi mahasiswa
      • +
    +
    +
    +
    +
    +
    + ); +} diff --git a/app/detail/nama-beasiswa/page.tsx b/app/detail/nama-beasiswa/page.tsx new file mode 100644 index 0000000..6f50547 --- /dev/null +++ b/app/detail/nama-beasiswa/page.tsx @@ -0,0 +1,75 @@ +'use client'; + +import { useState } from "react"; +import NamaBeasiswaDashChart from "@/components/chartsDashboard/NamaBeasiswaDashChart"; +import NamaBeasiswaDashPieChartPerangkatan from "@/components/chartsDashboard/NamaBeasiswaDashPieChartPerangkatan"; +import FilterTahunAngkatan from "@/components/FilterTahunAngkatan"; + +export default function NamaBeasiswaDetailPage() { + const [selectedYear, setSelectedYear] = useState("all"); + + return ( +
    +
    + {/* Filter Section */} + + + {/* Chart Section - Enhanced Size */} +
    + {/* Chart untuk semua data atau dual chart ketika tahun tertentu dipilih */} + {selectedYear === "all" ? ( +
    + +
    + ) : ( + <> + + + )} +
    + + {/* Information Section */} +
    +

    + Informasi Visualisasi +

    +
    +
    +

    + Grafik Utama (Nama Beasiswa) +

    +
      +
    • • Menampilkan distribusi mahasiswa berdasarkan jenis beasiswa per tahun angkatan
      • +
    • • Data dikategorikan berdasarkan nama program beasiswa yang diterima
      • +
    • • Grafik bar chart yang menunjukkan jumlah penerima per jenis beasiswa
      • +
    • • Visualisasi tren penerimaan beasiswa dari waktu ke waktu
      • +
    +
    + {selectedYear !== "all" && ( +
    +

    + Grafik Per Angkatan ({selectedYear}) +

    +
      +
    • • Menampilkan proporsi penerima beasiswa per jenis untuk angkatan {selectedYear}
      • +
    • • Grafik pie chart dengan persentase per nama beasiswa
      • +
    • • Data spesifik untuk tahun angkatan yang dipilih
      • +
    • • Memberikan insight detail distribusi beasiswa per angkatan
      • +
    +
    + )} +
    +
    +
    +
    + ); +} diff --git a/app/detail/rata-rata-ipk/page.tsx b/app/detail/rata-rata-ipk/page.tsx new file mode 100644 index 0000000..a85f683 --- /dev/null +++ b/app/detail/rata-rata-ipk/page.tsx @@ -0,0 +1,43 @@ +'use client'; + +import IPKChart from "@/components/charts/IPKChart"; + +export default function RataRataIPKDetailPage() { + return ( +
    +
    + {/* Chart Section - Enhanced Size */} +
    + {/* IPK Chart dengan ukuran lebih besar */} +
    + +
    +
    + + {/* Information Section */} +
    +

    + Informasi Visualisasi +

    +
    +
    +

    + Tentang Grafik Rata-rata IPK +

    +
      +
    • • Menampilkan tren rata-rata IPK mahasiswa per tahun angkatan
      • +
    • • Grafik garis yang menunjukkan perkembangan IPK dari waktu ke waktu
      • +
    • • Data mencakup seluruh mahasiswa dari semua angkatan
      • +
    • • Skala IPK dari 0.00 hingga 4.00
      • +
    +
    +
    + +
    +
    +
    + ); +} diff --git a/app/detail/status-mahasiswa/page.tsx b/app/detail/status-mahasiswa/page.tsx new file mode 100644 index 0000000..eb496fe --- /dev/null +++ b/app/detail/status-mahasiswa/page.tsx @@ -0,0 +1,76 @@ +'use client'; + +import { useState } from "react"; +import StatusMahasiswaChart from "@/components/charts/StatusMahasiswaChart"; +import StatusMahasiswaPieChartPerangkatan from "@/components/chartsDashboard/StatusMahasiswaPieChartPerangkatan"; +import FilterTahunAngkatan from "@/components/FilterTahunAngkatan"; + +export default function StatusMahasiswaDetailPage() { + const [selectedYear, setSelectedYear] = useState("all"); + + return ( +
    +
    + {/* Header Section */} + + {/* Filter Section */} + + + {/* Chart Section - Enhanced Size */} +
    + {/* Chart untuk semua data atau dual chart ketika tahun tertentu dipilih */} + {selectedYear === "all" ? ( +
    + +
    + ) : ( + <> + + + )} +
    + + {/* Information Section */} +
    +

    + Informasi Visualisasi +

    +
    +
    +

    + Grafik Utama (Semua Angkatan) +

    +
      +
    • • Menampilkan distribusi status kuliah mahasiswa per tahun angkatan
      • +
    • • Data dikategorikan berdasarkan status: Aktif, Lulus, Cuti, Non Aktif
      • +
    • • Grafik batang yang menunjukkan jumlah mahasiswa per status
      • +
    • • Data dapat di-download dan dianalisis per kategori
      • +
    +
    + {selectedYear !== "all" && ( +
    +

    + Grafik Per Angkatan ({selectedYear}) +

    +
      +
    • • Menampilkan distribusi status untuk angkatan {selectedYear}
      • +
    • • Grafik pie chart dengan persentase per status
      • +
    • • Data spesifik untuk tahun angkatan yang dipilih
      • +
    • • Memberikan insight detail status mahasiswa per angkatan
      • +
    +
    + )} +
    +
    +
    +
    + ); +} diff --git a/app/detail/tingkat-prestasi/page.tsx b/app/detail/tingkat-prestasi/page.tsx new file mode 100644 index 0000000..6fa6655 --- /dev/null +++ b/app/detail/tingkat-prestasi/page.tsx @@ -0,0 +1,76 @@ +'use client'; + +import { useState } from "react"; +import TingkatPrestasiDashChart from "@/components/chartsDashboard/TingkatPrestasiDashChart"; +import TingkatPrestasiPieChart from "@/components/chartsDashboard/TingkatPrestasiPieChartDash"; +import FilterTahunAngkatan from "@/components/FilterTahunAngkatan"; + +export default function TingkatPrestasiDetailPage() { + const [selectedYear, setSelectedYear] = useState("all"); + + return ( +
    +
    + {/* Filter Section */} + + + {/* Chart Section - Enhanced Size */} +
    + {/* Chart untuk semua data atau dual chart ketika tahun tertentu dipilih */} + {selectedYear === "all" ? ( +
    + +
    + ) : ( + <> + + + )} +
    + + {/* Information Section */} +
    +

    + Informasi Visualisasi +

    +
    +
    +

    + Grafik Utama (Tingkat Prestasi) +

    +
      +
    • • Menampilkan distribusi mahasiswa berprestasi berdasarkan tingkat prestasi per tahun angkatan
      • +
    • • Data dikategorikan berdasarkan tingkat/level prestasi yang diraih mahasiswa
      • +
    • • Grafik bar chart yang menunjukkan jumlah mahasiswa per tingkat prestasi
      • +
    • • Visualisasi tren pencapaian prestasi dari waktu ke waktu
      • +
    +
    + {selectedYear !== "all" && ( +
    +

    + Grafik Per Angkatan ({selectedYear}) +

    +
      +
    • • Menampilkan proporsi mahasiswa per tingkat prestasi untuk angkatan {selectedYear}
      • +
    • • Grafik pie chart dengan persentase per tingkat prestasi
      • +
    • • Data spesifik untuk tahun angkatan yang dipilih
      • +
    • • Memberikan insight detail distribusi prestasi per angkatan
      • +
    +
    + )} +
    + +
    +
    +
    + ); +} diff --git a/components/charts/AsalDaerahChart.tsx b/components/charts/AsalDaerahChart.tsx index 7b17119..14aff3d 100644 --- a/components/charts/AsalDaerahChart.tsx +++ b/components/charts/AsalDaerahChart.tsx @@ -5,6 +5,9 @@ import dynamic from 'next/dynamic'; import { ApexOptions } from 'apexcharts'; import { useTheme } from 'next-themes'; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { ExternalLink } from "lucide-react"; +import Link from "next/link"; // Dynamically import ApexCharts to avoid SSR issues const Chart = dynamic(() => import('react-apexcharts'), { ssr: false }); @@ -14,7 +17,15 @@ interface AsalDaerahData { jumlah: number; } -export default function AsalDaerahChart() { +interface AsalDaerahChartProps { + height?: string; + showDetailButton?: boolean; +} + +export default function AsalDaerahChart({ + height = "h-[400px] sm:h-[450px] md:h-[500px] lg:h-[600px]", + showDetailButton = true +}: AsalDaerahChartProps = {}) { const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [loading, setLoading] = useState(true); @@ -265,13 +276,23 @@ export default function AsalDaerahChart() { return ( - - Asal Kabupaten Mahasiswa - +
    + + Asal Kabupaten Mahasiswa + + {showDetailButton && ( + + + + )} +
    { - const minHeight = 200; - const barHeight = 25; // Height per bar in pixels - const padding = 100; // Extra space for title, legend, etc. + const minHeight = 100; + const barHeight = 15; // Height per bar in pixels + const padding = 50; // Extra space for title, legend, etc. const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding); return `${dynamicHeight}px`; }; @@ -317,7 +317,7 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
    import('react-apexcharts'), { ssr: false }); @@ -14,7 +17,15 @@ interface IPKData { rata_rata_ipk: number; } -export default function IPKChart() { +interface IPKChartProps { + height?: string; + showDetailButton?: boolean; +} + +export default function IPKChart({ + height = "h-[300px] sm:h-[350px] md:h-[300px]", + showDetailButton = true +}: IPKChartProps) { const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [loading, setLoading] = useState(true); @@ -47,7 +58,7 @@ export default function IPKChart() { } }, stroke: { - curve: 'smooth', + curve: 'straight', width: 3, lineCap: 'round' }, @@ -319,12 +330,22 @@ export default function IPKChart() { return ( - - Rata-rata IPK Mahasiswa - +
    + + Rata-rata IPK Mahasiswa + + {showDetailButton && ( + + + + )} +
    -
    +
    import('react-apexcharts'), { ssr: false }); @@ -14,7 +17,15 @@ interface JenisPendaftaranData { jumlah: number; } -export default function JenisPendaftaranChart() { +interface JenisPendaftaranChartProps { + height?: string; + showDetailButton?: boolean; +} + +export default function JenisPendaftaranChart({ + height = "h-[300px] sm:h-[350px] md:h-[300px]", + showDetailButton = true +}: JenisPendaftaranChartProps) { const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [loading, setLoading] = useState(true); @@ -276,12 +287,22 @@ export default function JenisPendaftaranChart() { return ( - - Jenis Pendaftaran Mahasiswa - +
    + + Jenis Pendaftaran Mahasiswa + + {showDetailButton && ( + + + + )} +
    -
    +
    import('react-apexcharts'), { ssr: false }); @@ -19,7 +22,16 @@ interface Props { selectedYear: string; } -export default function LulusTepatWaktuChart({ selectedYear }: Props) { +interface LulusTepatWaktuChartProps extends Props { + height?: string; + showDetailButton?: boolean; +} + +export default function LulusTepatWaktuChart({ + selectedYear, + height = "h-[300px] sm:h-[300px] md:h-[300px]", + showDetailButton = true +}: LulusTepatWaktuChartProps) { const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); @@ -240,13 +252,23 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) { return ( - - Mahasiswa Lulus Tepat Waktu - {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''} - +
    + + Mahasiswa Lulus Tepat Waktu + {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''} + + {showDetailButton && ( + + + + )} +
    -
    +
    {typeof window !== 'undefined' && series.length > 0 && ( import('react-apexcharts'), { ssr: false }); @@ -15,7 +18,15 @@ interface StatusData { jumlah: number; } -export default function StatusMahasiswaChart() { +interface StatusMahasiswaChartProps { + height?: string; + showDetailButton?: boolean; +} + +export default function StatusMahasiswaChart({ + height = "h-[300px] sm:h-[300px] md:h-[300px]", + showDetailButton = true +}: StatusMahasiswaChartProps) { const { theme } = useTheme(); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -206,12 +217,22 @@ export default function StatusMahasiswaChart() { return ( - - Status Mahasiswa - +
    + + Status Mahasiswa + + {showDetailButton && ( + + + + )} +
    -
    +
    {typeof window !== 'undefined' && ( import('react-apexcharts'), { ssr: false }); @@ -19,7 +22,16 @@ interface Props { selectedYear: string; } -export default function NamaBeasiswaDashChart({ selectedYear }: Props) { +interface NamaBeasiswaDashChartProps extends Props { + height?: string; + showDetailButton?: boolean; +} + +export default function NamaBeasiswaDashChart({ + selectedYear, + height = "h-[300px] sm:h-[300px] md:h-[300px]", + showDetailButton = true +}: NamaBeasiswaDashChartProps) { const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); @@ -242,13 +254,23 @@ export default function NamaBeasiswaDashChart({ selectedYear }: Props) { return ( - - Nama Beasiswa Mahasiswa - {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''} - +
    + + Nama Beasiswa Mahasiswa + {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''} + + {showDetailButton && ( + + + + )} +
    -
    +
    {typeof window !== 'undefined' && series.length > 0 && ( import('react-apexcharts'), { ssr: false }); @@ -14,7 +17,15 @@ interface ProvinsiMahasiswaData { jumlah_mahasiswa: number; } -export default function ProvinsiMahasiswaPieChart() { +interface ProvinsiMahasiswaPieChartProps { + height?: string; + showDetailButton?: boolean; +} + +export default function ProvinsiMahasiswaPieChart({ + height = "h-[300px] sm:h-[300px] md:h-[300px]", + showDetailButton = true +}: ProvinsiMahasiswaPieChartProps = {}) { const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); @@ -158,12 +169,22 @@ export default function ProvinsiMahasiswaPieChart() { return ( - - Asal Provinsi Mahasiswa - +
    + + Asal Provinsi Mahasiswa + + {showDetailButton && ( + + + + )} +
    -
    +
    {typeof window !== 'undefined' && series.length > 0 && ( import('react-apexcharts'), { ssr: false }); @@ -19,7 +22,16 @@ interface Props { selectedYear: string; } -export default function TingkatPrestasiDashChart({ selectedYear }: Props) { +interface TingkatPrestasiDashChartProps extends Props { + height?: string; + showDetailButton?: boolean; +} + +export default function TingkatPrestasiDashChart({ + selectedYear, + height = "h-[300px] sm:h-[300px] md:h-[300px]", + showDetailButton = true +}: TingkatPrestasiDashChartProps) { const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); @@ -241,13 +253,23 @@ export default function TingkatPrestasiDashChart({ selectedYear }: Props) { return ( - - Tingkat Prestasi Mahasiswa - {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''} - +
    + + Tingkat Prestasi Mahasiswa + {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''} + + {showDetailButton && ( + + + + )} +
    -
    +
    {typeof window !== 'undefined' && series.length > 0 ? ( import('react-apexcharts'), { ssr: false }); @@ -18,7 +21,16 @@ interface Props { selectedYear: string; } -export default function KelompokKeahlianStatusChart({ selectedYear }: Props) { +interface KelompokKeahlianStatusChartProps extends Props { + height?: string; + showDetailButton?: boolean; +} + +export default function KelompokKeahlianStatusChart({ + selectedYear, + height = "h-[300px] sm:h-[300px] md:h-[300px]", + showDetailButton = true +}: KelompokKeahlianStatusChartProps) { const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); @@ -198,13 +210,23 @@ export default function KelompokKeahlianStatusChart({ selectedYear }: Props) { return ( - - Kelompok Keahlian Mahasiswa - {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''} - +
    + + Kelompok Keahlian Mahasiswa + {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''} + + {showDetailButton && ( + + + + )} +
    -
    +
    {typeof window !== 'undefined' && ( import('react-apexcharts'), { ssr: false }); @@ -14,7 +17,15 @@ interface KelompokKeahlianLulusTepatData { jumlah_lulusan_tercepat: number; } -export default function KelompokKeahlianLulusTepatPieChart() { +interface KelompokKeahlianLulusTepatPieChartProps { + height?: string; + showDetailButton?: boolean; +} + +export default function KelompokKeahlianLulusTepatPieChart({ + height = "h-[300px]", + showDetailButton = true +}: KelompokKeahlianLulusTepatPieChartProps = {}) { const { theme } = useTheme(); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); @@ -157,12 +168,22 @@ export default function KelompokKeahlianLulusTepatPieChart() { return ( - - Kelompok Keahlian Lulusan Tepat Waktu - +
    + + Kelompok Keahlian Lulusan Tepat Waktu + + {showDetailButton && ( + + + + )} +
    -
    +
    {typeof window !== 'undefined' && ( import('react-apexcharts'), { ssr: false }); @@ -18,7 +21,16 @@ interface Props { selectedYear: string; } -export default function MasaStudiLulusChart({ selectedYear }: Props) { +interface MasaStudiLulusChartProps extends Props { + height?: string; + showDetailButton?: boolean; +} + +export default function MasaStudiLulusChart({ + selectedYear, + height = "h-[300px] sm:h-[350px] md:h-[300px]", + showDetailButton = true +}: MasaStudiLulusChartProps) { const { theme } = useTheme(); const [mounted, setMounted] = useState(false); const [data, setData] = useState([]); @@ -247,13 +259,23 @@ export default function MasaStudiLulusChart({ selectedYear }: Props) { return ( - - Rata-rata Masa Studi Mahasiswa Lulus - {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''} - +
    + + Rata-rata Masa Studi Mahasiswa Lulus + {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''} + + {showDetailButton && ( + + + + )} +
    -
    +
    {typeof window !== 'undefined' && (