revisi nih boz

components/charts/StatistikMahasiswaChart.tsx

@@ -34,7 +34,7 @@ export default function StatistikMahasiswaChart({
   const [chartOptions, setChartOptions] = useState({
     chart: {
       type: 'bar' as const,
-      stacked: false,
+      stacked: true,
       toolbar: {
         show: true,
         tools: {
@@ -69,8 +69,24 @@ export default function StatistikMahasiswaChart({
     },
     dataLabels: {
       enabled: true,
-      formatter: function (val: number) {
-        return val.toString()
+      formatter: function (val: number, opts: any) {
+        const seriesIndex = opts.seriesIndex;
+        const dataPointIndex = opts.dataPointIndex;
+        
+        // Jika series Total (index 2), tampilkan angka
+        if (seriesIndex === 2) {
+          return val.toString();
+        }
+        
+        // Untuk Laki-laki (index 0) dan Perempuan (index 1), hitung persentase
+        // Ambil data total dari series Total (index 2)
+        const totalSeriesData = opts.w.config.series[2]?.data || [];
+        const totalValue = totalSeriesData[dataPointIndex] || 0;
+        
+        if (totalValue === 0 || val === 0) return '0%';
+        
+        const percentage = ((val / totalValue) * 100).toFixed(1);
+        return percentage + '%';
       },
       position: 'top',
       style: {
@@ -137,26 +153,59 @@ export default function StatistikMahasiswaChart({
         colors: '#000'
       }
     },
-    colors: ['#3B82F6', '#10B981', '#EC4899'],
+    colors: ['#3B82F6', '#EC4899', '#10B981'],
     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"
-          }
-        }
-      ]
+      shared: true,
+      intersect: false,
+      custom: function({ series, seriesIndex, dataPointIndex, w }: any) {
+        const lakiLaki = series[0][dataPointIndex];
+        const perempuan = series[1][dataPointIndex];
+        const total = series[2][dataPointIndex];
+        const tahun = w.globals.labels[dataPointIndex];
+        
+        return `
+          <div style="
+            padding: 12px 16px; 
+            background: rgba(255, 255, 255, 0.95); 
+            backdrop-filter: blur(10px);
+            border: none; 
+            border-radius: 12px; 
+            box-shadow: 0 8px 32px 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: #1f2937; 
+              margin-bottom: 8px;
+              text-align: center;
+            ">Angkatan ${tahun}</div>
+            <div style="display: flex; align-items: center; margin-bottom: 4px;">
+              <div style="width: 8px; height: 8px; background: #3B82F6; border-radius: 50%; margin-right: 8px;"></div>
+              <span style="font-size: 12px; color: #374151;">Laki-laki</span>
+              <span style="font-size: 12px; font-weight: 600; color: #1f2937; margin-left: auto;">${lakiLaki}</span>
+            </div>
+            <div style="display: flex; align-items: center; margin-bottom: 4px;">
+              <div style="width: 8px; height: 8px; background: #EC4899; border-radius: 50%; margin-right: 8px;"></div>
+              <span style="font-size: 12px; color: #374151;">Perempuan</span>
+              <span style="font-size: 12px; font-weight: 600; color: #1f2937; margin-left: auto;">${perempuan}</span>
+            </div>
+            <div style="
+              border-top: 1px solid #e5e7eb; 
+              margin-top: 8px; 
+              padding-top: 8px;
+              display: flex; 
+              align-items: center;
+            ">
+              <div style="width: 8px; height: 8px; background: #10B981; border-radius: 50%; margin-right: 8px;"></div>
+              <span style="font-size: 12px; font-weight: 600; color: #1f2937;">Total</span>
+              <span style="font-size: 13px; font-weight: 700; color: #10B981; margin-left: auto;">${total}</span>
+            </div>
+          </div>
+        `;
+      }
     }
   });
 
@@ -198,6 +247,25 @@ export default function StatistikMahasiswaChart({
       },
       dataLabels: {
         ...prev.dataLabels,
+        formatter: function (val: number, opts: any) {
+          const seriesIndex = opts.seriesIndex;
+          const dataPointIndex = opts.dataPointIndex;
+          
+          // Jika series Total (index 2), tampilkan angka
+          if (seriesIndex === 2) {
+            return val.toString();
+          }
+          
+          // Untuk Laki-laki (index 0) dan Perempuan (index 1), hitung persentase
+          // Ambil data total dari series Total (index 2)
+          const totalSeriesData = opts.w.config.series[2]?.data || [];
+          const totalValue = totalSeriesData[dataPointIndex] || 0;
+          
+          if (totalValue === 0 || val === 0) return '0%';
+          
+          const percentage = ((val / totalValue) * 100).toFixed(0);
+          return percentage + '%';
+        },
         style: {
           ...prev.dataLabels.style,
           colors: [textColor]
@@ -248,7 +316,61 @@ export default function StatistikMahasiswaChart({
       },
       tooltip: {
         ...prev.tooltip,
-        theme: tooltipTheme
+        theme: tooltipTheme,
+        custom: function({ series, seriesIndex, dataPointIndex, w }: any) {
+          const lakiLaki = series[0][dataPointIndex];
+          const perempuan = series[1][dataPointIndex];
+          const total = series[2][dataPointIndex];
+          const tahun = w.globals.labels[dataPointIndex];
+          
+          const bgColor = currentTheme === 'dark' ? '#1e293b' : 'white';
+          const textColor = currentTheme === 'dark' ? '#fff' : '#000';
+          const borderColor = currentTheme === 'dark' ? '#475569' : '#ccc';
+          
+          const isDark = currentTheme === 'dark';
+          
+          return `
+            <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>
+              <div style="display: flex; align-items: center; margin-bottom: 4px;">
+                <div style="width: 8px; height: 8px; background: #3B82F6; border-radius: 50%; margin-right: 8px;"></div>
+                <span style="font-size: 12px; color: ${isDark ? '#cbd5e1' : '#374151'};">Laki-laki</span>
+                <span style="font-size: 12px; font-weight: 600; color: ${isDark ? '#f1f5f9' : '#1f2937'}; margin-left: auto;">${lakiLaki}</span>
+              </div>
+              <div style="display: flex; align-items: center; margin-bottom: 4px;">
+                <div style="width: 8px; height: 8px; background: #EC4899; border-radius: 50%; margin-right: 8px;"></div>
+                <span style="font-size: 12px; color: ${isDark ? '#cbd5e1' : '#374151'};">Perempuan</span>
+                <span style="font-size: 12px; font-weight: 600; color: ${isDark ? '#f1f5f9' : '#1f2937'}; margin-left: auto;">${perempuan}</span>
+              </div>
+              <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: #10B981; 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: #10B981; margin-left: auto;">${total}</span>
+              </div>
+            </div>
+          `;
+        }
       }
     }));
   }, [theme]);
@@ -278,15 +400,15 @@ export default function StatistikMahasiswaChart({
       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)
+    },
+    {
+      name: 'Total',
+      type: 'bar' as const,
+      data: statistikData.map(item => item.total_mahasiswa)
     }
   ];