tes lagi

components/charts/JenisPendaftaranChart.tsx

@@ -35,7 +35,7 @@ export default function JenisPendaftaranChart({
   const [options, setOptions] = useState<ApexOptions>({
     chart: {
       type: 'bar',
-      stacked: false,
+      stacked: true,
       toolbar: {
         show: true,
       },
@@ -43,14 +43,27 @@ export default function JenisPendaftaranChart({
     },
     plotOptions: {
       bar: {
-        horizontal: false,
-        columnWidth: '55%',
+        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',
@@ -64,22 +77,6 @@ export default function JenisPendaftaranChart({
     },
     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'
-        }
-      },
-    },
-    yaxis: {
       title: {
         text: 'Jumlah Mahasiswa',
         style: {
@@ -94,9 +91,25 @@ export default function JenisPendaftaranChart({
           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,
     },
@@ -116,10 +129,68 @@ export default function JenisPendaftaranChart({
     colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
     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 jenisPendaftaranNames = w.config.series.map((s: any) => s.name);
+        const jenisPendaftaranColors = w.config.colors;
+        
+        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 jenis pendaftaran
+        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: ${jenisPendaftaranColors[index]}; border-radius: 50%; margin-right: 8px;"></div>
+              <span style="font-size: 12px; color: ${isDark ? '#cbd5e1' : '#374151'};">${jenisPendaftaranNames[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;
       }
     }
   });
@@ -135,6 +206,22 @@ export default function JenisPendaftaranChart({
       },
       dataLabels: {
         ...prev.dataLabels,
+        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: {
           ...prev.dataLabels?.style,
           colors: [currentTheme === 'dark' ? '#fff' : '#000']
@@ -183,7 +270,68 @@ export default function JenisPendaftaranChart({
       },
       tooltip: {
         ...prev.tooltip,
-        theme: currentTheme === 'dark' ? 'dark' : 'light'
+        theme: currentTheme === 'dark' ? 'dark' : 'light',
+        custom: function({ series, seriesIndex, dataPointIndex, w }: any) {
+          const tahun = w.globals.labels[dataPointIndex];
+          const isDark = currentTheme === 'dark';
+          
+          // Hitung total untuk tahun ini
+          let total = 0;
+          series.forEach((seriesData: number[]) => {
+            total += seriesData[dataPointIndex] || 0;
+          });
+          
+          const jenisPendaftaranNames = w.config.series.map((s: any) => s.name);
+          const jenisPendaftaranColors = w.config.colors;
+          
+          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 jenis pendaftaran
+          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: ${jenisPendaftaranColors[index]}; border-radius: 50%; margin-right: 8px;"></div>
+                <span style="font-size: 12px; color: ${isDark ? '#cbd5e1' : '#374151'};">${jenisPendaftaranNames[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;
+        }
       }
     }));
   }, [theme]);

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;
       }
     }
   };