again n again

components/chartsDashboard/TingkatPrestasiDashChart.tsx

@@ -91,7 +91,7 @@ export default function TingkatPrestasiDashChart({
   const chartOptions: ApexOptions = {
     chart: {
       type: 'bar',
-      stacked: false,
+      stacked: true,
       toolbar: {
         show: true,
         tools: {
@@ -108,15 +108,27 @@ export default function TingkatPrestasiDashChart({
     },
     plotOptions: {
       bar: {
-        horizontal: false,
-        columnWidth: '55%',
-        borderRadius: 1,
+        horizontal: true,
+        barHeight: '70%',
       },
     },
     dataLabels: {
       enabled: true,
-      formatter: function (val: number) {
-        return val?.toString() || '0';
+      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',
@@ -143,15 +155,7 @@ export default function TingkatPrestasiDashChart({
           fontSize: '12px',
           colors: theme === 'dark' ? '#fff' : '#000'
         }
-      },
-      axisBorder: {
-        show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
-      },
-      axisTicks: {
-        show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
-      },
+      }
     },
     yaxis: {
       title: {
@@ -168,10 +172,7 @@ export default function TingkatPrestasiDashChart({
           colors: theme === 'dark' ? '#fff' : '#000'
         }
       },
-      axisBorder: {
-        show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
-      },
+      min: 0,
       tickAmount: 5
     },
     fill: {
@@ -180,10 +181,68 @@ export default function TingkatPrestasiDashChart({
     colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4'],
     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 tingkatNames = w.config.series.map((s: any) => s.name);
+        const tingkatColors = 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 tingkat prestasi
+        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: ${tingkatColors[index]}; border-radius: 50%; margin-right: 8px;"></div>
+              <span style="font-size: 12px; color: ${isDark ? '#cbd5e1' : '#374151'};">${tingkatNames[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: #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>
+        `;
+        
+        return tooltipContent;
       }
     },
     legend: {