again n again

components/charts/AsalDaerahChart.tsx

@@ -56,8 +56,15 @@ export default function AsalDaerahChart({
     },
     dataLabels: {
       enabled: true,
-      formatter: function (val: number) {
-        return val.toString();
+      formatter: function (val: number, opts: any) {
+        // Hitung total dari semua data
+        const allData = opts.w.config.series[0].data;
+        const total = allData.reduce((sum: number, value: number) => sum + value, 0);
+        
+        if (total === 0 || val === 0) return '0%';
+        
+        const percentage = ((val / total) * 100).toFixed(1);
+        return percentage + '%';
       },
       style: {
         fontSize: '12px',
@@ -127,6 +134,16 @@ export default function AsalDaerahChart({
       },
       dataLabels: {
         ...prev.dataLabels,
+        formatter: function (val: number, opts: any) {
+          // Hitung total dari semua data
+          const allData = opts.w.config.series[0].data;
+          const total = allData.reduce((sum: number, value: number) => sum + value, 0);
+          
+          if (total === 0 || val === 0) return '0%';
+          
+          const percentage = ((val / total) * 100).toFixed(0);
+          return percentage + '%';
+        },
         style: {
           ...prev.dataLabels?.style,
           colors: [theme === 'dark' ? '#fff' : '#000']
@@ -197,9 +214,15 @@ export default function AsalDaerahChart({
         
         setData(result);
 
+        // Sort data dari terbesar ke terkecil
+        const sortedData = result.sort((a, b) => b.jumlah - a.jumlah);
+        
+        // Hitung total untuk persentase
+        const totalMahasiswa = sortedData.reduce((sum, item) => sum + item.jumlah, 0);
+        
         // Proses data untuk chart
-        const kabupaten = result.map(item => item.kabupaten);
-        const jumlah = result.map(item => item.jumlah);
+        const kabupaten = sortedData.map(item => item.kabupaten);
+        const jumlah = sortedData.map(item => item.jumlah);
 
         setSeries([{
           name: 'Jumlah Mahasiswa',

components/charts/BimbinganDosenChart.tsx

@@ -132,10 +132,68 @@ export default function BimbinganDosenChart({
     colors: ['#10B981', '#F59E0B'], // Hijau untuk Selesai, Kuning untuk Belum Selesai
     tooltip: {
       theme: theme === 'dark' ? 'dark' : 'light',
-      y: {
-        formatter: function (val: number) {
-          return val + " mahasiswa";
-        }
+      shared: true,
+      intersect: false,
+      custom: function({ series, seriesIndex, dataPointIndex, w }: any) {
+        const dosen = w.globals.labels[dataPointIndex];
+        const isDark = theme === 'dark';
+        
+        // Hitung total untuk dosen ini
+        let total = 0;
+        series.forEach((seriesData: number[]) => {
+          total += seriesData[dataPointIndex] || 0;
+        });
+        
+        const statusNames = ['Selesai', 'Belum Selesai'];
+        const statusColors = ['#10B981', '#F59E0B'];
+        
+        let tooltipContent = `
+          <div style="
+            padding: 12px 16px; 
+            background: ${isDark ? 'rgba(30, 41, 59, 0.95)' : 'rgba(255, 255, 255, 0.95)'}; 
+            backdrop-filter: blur(10px);
+            border: none; 
+            border-radius: 12px; 
+            box-shadow: 0 8px 32px ${isDark ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.1)'};
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            min-width: 180px;
+          ">
+            <div style="
+              font-size: 13px; 
+              font-weight: 600; 
+              color: ${isDark ? '#f1f5f9' : '#1f2937'}; 
+              margin-bottom: 8px;
+              text-align: center;
+            ">${dosen}</div>`;
+        
+        // Tambahkan setiap status
+        series.forEach((seriesData: number[], index: number) => {
+          const value = seriesData[dataPointIndex] || 0;
+          tooltipContent += `
+            <div style="display: flex; align-items: center; margin-bottom: 4px;">
+              <div style="width: 8px; height: 8px; background: ${statusColors[index]}; border-radius: 50%; margin-right: 8px;"></div>
+              <span style="font-size: 12px; color: ${isDark ? '#cbd5e1' : '#374151'};">${statusNames[index]}</span>
+              <span style="font-size: 12px; font-weight: 600; color: ${isDark ? '#f1f5f9' : '#1f2937'}; margin-left: auto;">${value}</span>
+            </div>`;
+        });
+        
+        // Tambahkan total
+        tooltipContent += `
+            <div style="
+              border-top: 1px solid ${isDark ? '#475569' : '#e5e7eb'}; 
+              margin-top: 8px; 
+              padding-top: 8px;
+              display: flex; 
+              align-items: center;
+            ">
+              <div style="width: 8px; height: 8px; background: #6366f1; border-radius: 50%; margin-right: 8px;"></div>
+              <span style="font-size: 12px; font-weight: 600; color: ${isDark ? '#f1f5f9' : '#1f2937'};">Total</span>
+              <span style="font-size: 13px; font-weight: 700; color: #6366f1; margin-left: auto;">${total}</span>
+            </div>
+          </div>
+        `;
+        
+        return tooltipContent;
       }
     }
   });
@@ -225,8 +283,8 @@ export default function BimbinganDosenChart({
           throw new Error('Format data tidak valid diterima dari server');
         }
         
-        // Urutkan data berdasarkan nama dosen A-Z
-        const sortedResult = result.sort((a, b) => a.nama_dosen.localeCompare(b.nama_dosen));
+        // Urutkan data berdasarkan kategori "Belum Selesai" dari terbanyak ke terkecil
+        const sortedResult = result.sort((a, b) => b.belum_selesai - a.belum_selesai);
         setData(sortedResult);
 
         // Proses data untuk chart

components/charts/BimbinganDosenPerAngkatanChart.tsx

@@ -151,10 +151,68 @@ export default function BimbinganDosenPerAngkatanChart({ tahunAngkatan }: Props)
     colors: ['#10B981', '#F59E0B'], // Hijau untuk Selesai, Kuning untuk Belum Selesai
     tooltip: {
       theme: theme === 'dark' ? 'dark' : 'light',
-      y: {
-        formatter: function (val: number) {
-          return val + " mahasiswa";
-        }
+      shared: true,
+      intersect: false,
+      custom: function({ series, seriesIndex, dataPointIndex, w }: any) {
+        const dosen = w.globals.labels[dataPointIndex];
+        const isDark = theme === 'dark';
+        
+        // Hitung total untuk dosen ini
+        let total = 0;
+        series.forEach((seriesData: number[]) => {
+          total += seriesData[dataPointIndex] || 0;
+        });
+        
+        const statusNames = ['Selesai', 'Belum Selesai'];
+        const statusColors = ['#10B981', '#F59E0B'];
+        
+        let tooltipContent = `
+          <div style="
+            padding: 12px 16px; 
+            background: ${isDark ? 'rgba(30, 41, 59, 0.95)' : 'rgba(255, 255, 255, 0.95)'}; 
+            backdrop-filter: blur(10px);
+            border: none; 
+            border-radius: 12px; 
+            box-shadow: 0 8px 32px ${isDark ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.1)'};
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            min-width: 180px;
+          ">
+            <div style="
+              font-size: 13px; 
+              font-weight: 600; 
+              color: ${isDark ? '#f1f5f9' : '#1f2937'}; 
+              margin-bottom: 8px;
+              text-align: center;
+            ">${dosen}</div>`;
+        
+        // Tambahkan setiap status
+        series.forEach((seriesData: number[], index: number) => {
+          const value = seriesData[dataPointIndex] || 0;
+          tooltipContent += `
+            <div style="display: flex; align-items: center; margin-bottom: 4px;">
+              <div style="width: 8px; height: 8px; background: ${statusColors[index]}; border-radius: 50%; margin-right: 8px;"></div>
+              <span style="font-size: 12px; color: ${isDark ? '#cbd5e1' : '#374151'};">${statusNames[index]}</span>
+              <span style="font-size: 12px; font-weight: 600; color: ${isDark ? '#f1f5f9' : '#1f2937'}; margin-left: auto;">${value}</span>
+            </div>`;
+        });
+        
+        // Tambahkan total
+        tooltipContent += `
+            <div style="
+              border-top: 1px solid ${isDark ? '#475569' : '#e5e7eb'}; 
+              margin-top: 8px; 
+              padding-top: 8px;
+              display: flex; 
+              align-items: center;
+            ">
+              <div style="width: 8px; height: 8px; background: #6366f1; border-radius: 50%; margin-right: 8px;"></div>
+              <span style="font-size: 12px; font-weight: 600; color: ${isDark ? '#f1f5f9' : '#1f2937'};">Total</span>
+              <span style="font-size: 13px; font-weight: 700; color: #6366f1; margin-left: auto;">${total}</span>
+            </div>
+          </div>
+        `;
+        
+        return tooltipContent;
       }
     }
   });
@@ -244,8 +302,8 @@ export default function BimbinganDosenPerAngkatanChart({ tahunAngkatan }: Props)
           throw new Error('Format data tidak valid diterima dari server');
         }
         
-        // Urutkan data berdasarkan nama dosen A-Z
-        const sortedResult = result.sort((a, b) => a.nama_dosen.localeCompare(b.nama_dosen));
+        // Urutkan data berdasarkan kategori "Belum Selesai" dari terbanyak ke terkecil
+        const sortedResult = result.sort((a, b) => b.belum_selesai - a.belum_selesai);
         setData(sortedResult);
 
         // Proses data untuk chart