tes lagi

components/charts/StatusMahasiswaChart.tsx

@@ -36,7 +36,7 @@ export default function StatusMahasiswaChart({
   const chartOptions: ApexOptions = {
     chart: {
       type: 'bar',
-      stacked: false,
+      stacked: true,
       toolbar: {
         show: true,
         tools: {
@@ -53,14 +53,27 @@ export default function StatusMahasiswaChart({
     },
     plotOptions: {
       bar: {
-        horizontal: false,
-        columnWidth: '65%',
+        horizontal: true,
+        barHeight: '70%',
       },
     },
     dataLabels: {
       enabled: true,
-      formatter: function (val: number) {
-        return val.toString();
+      formatter: function (val: number, opts: any) {
+        const seriesIndex = opts.seriesIndex;
+        const dataPointIndex = opts.dataPointIndex;
+        
+        // Hitung total untuk tahun angkatan ini
+        const allSeries = opts.w.config.series;
+        let totalForYear = 0;
+        allSeries.forEach((series: any) => {
+          totalForYear += series.data[dataPointIndex] || 0;
+        });
+        
+        if (totalForYear === 0 || val === 0) return '0%';
+        
+        const percentage = ((val / totalForYear) * 100).toFixed(0);
+        return percentage + '%';
       },
       style: {
         fontSize: '12px',
@@ -74,22 +87,6 @@ export default function StatusMahasiswaChart({
     },
     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: {
@@ -104,9 +101,25 @@ export default function StatusMahasiswaChart({
           colors: theme === 'dark' ? '#fff' : '#000'
         }
       },
-      min:0,
+      min: 0,
       tickAmount: 5
     },
+    yaxis: {
+      title: {
+        text: 'Tahun Angkatan',
+        style: {
+          fontSize: '14px',
+          fontWeight: 'bold',
+          color: theme === 'dark' ? '#fff' : '#000'
+        }
+      },
+      labels: {
+        style: {
+          fontSize: '12px',
+          colors: theme === 'dark' ? '#fff' : '#000'
+        }
+      }
+    },
     fill: {
       opacity: 1,
     },
@@ -126,10 +139,68 @@ export default function StatusMahasiswaChart({
     colors: ['#008FFB', '#00E396', '#FEB019', '#EF4444'],
     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 tahun = w.globals.labels[dataPointIndex];
+        const isDark = theme === 'dark';
+        
+        // Hitung total untuk tahun ini
+        let total = 0;
+        series.forEach((seriesData: number[]) => {
+          total += seriesData[dataPointIndex] || 0;
+        });
+        
+        const statusNames = ['Aktif', 'Lulus', 'Cuti', 'Non Aktif'];
+        const statusColors = ['#008FFB', '#00E396', '#FEB019', '#EF4444'];
+        
+        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;
+            ">Angkatan ${tahun}</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;
       }
     }
   };