again n again

2025-11-06 18:31:44 +07:00
parent 133ec36510
commit c77321bc8a
36 changed files with 6363 additions and 185 deletions
--- a/components/chartsDashboard/NamaBeasiswaDashChart.tsx
+++ b/components/chartsDashboard/NamaBeasiswaDashChart.tsx
@@ -36,6 +36,7 @@ export default function NamaBeasiswaDashChart({
  const [data, setData] = useState<NamaBeasiswaData[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
+  const [chartOptions, setChartOptions] = useState<ApexOptions>({});

  useEffect(() => {
    const fetchData = async () => {
@@ -63,6 +64,10 @@ export default function NamaBeasiswaDashChart({
        );
        
        setData(sortedData);
+        
+        // Update chart options dengan categories yang benar
+        const years = [...new Set(sortedData.map(item => item.tahun_angkatan))].sort();
+        updateChartOptions(years);
      } catch (err) {
        console.error('Error in fetchData:', err);
        setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
@@ -72,7 +77,198 @@ export default function NamaBeasiswaDashChart({
    };

    fetchData();
-  }, [selectedYear]);
+  }, [selectedYear, theme]);
+
+  // Initialize chart options on mount
+  useEffect(() => {
+    updateChartOptions([]);
+  }, []);
+
+  // Function to update chart options
+  const updateChartOptions = (years: number[]) => {
+    console.log('Updating chart options with years:', years);
+    setChartOptions({
+      chart: {
+        type: 'bar',
+        stacked: true,
+        toolbar: {
+          show: true,
+          tools: {
+            download: true,
+            selection: true,
+            zoom: true,
+            zoomin: true,
+            zoomout: true,
+            pan: true,
+            reset: true
+          }
+        },
+        background: theme === 'dark' ? '#0F172B' : '#fff',
+      },
+      plotOptions: {
+        bar: {
+          horizontal: true,
+          barHeight: '70%',
+        },
+      },
+      dataLabels: {
+        enabled: true,
+        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',
+          colors: [theme === 'dark' ? '#fff' : '#000']
+        }
+      },
+      stroke: {
+        show: true,
+        width: 2,
+        colors: ['transparent']
+      },
+      xaxis: {
+        categories: years.map(y => y.toString()),
+        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: {
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: theme === 'dark' ? '#fff' : '#000'
+          }
+        },
+        labels: {
+          style: {
+            fontSize: '12px',
+            colors: theme === 'dark' ? '#fff' : '#000'
+          }
+        },
+        min: 0,
+        tickAmount: 5
+      },
+      fill: {
+        opacity: 1
+      },
+      colors: ['#3B82F6', '#EC4899', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#06B6D4'],
+      tooltip: {
+        theme: theme === 'dark' ? 'dark' : 'light',
+        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 beasiswaNames = w.config.series.map((s: any) => s.name);
+          const beasiswaColors = 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 beasiswa
+          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: ${beasiswaColors[index]}; border-radius: 50%; margin-right: 8px;"></div>
+                <span style="font-size: 12px; color: ${isDark ? '#cbd5e1' : '#374151'};">${beasiswaNames[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: {
+        position: 'top',
+        fontSize: '14px',
+        markers: {
+          size: 12,
+        },
+        itemMargin: {
+          horizontal: 10,
+        },
+        labels: {
+          colors: theme === 'dark' ? '#fff' : '#000'
+        }
+      },
+      grid: {
+        borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
+        strokeDashArray: 4,
+        padding: {
+          top: 20,
+          right: 0,
+          bottom: 0,
+          left: 0
+        }
+      }
+    });
+  };

  // Process data for series
  const processSeriesData = () => {
@@ -90,129 +286,6 @@ export default function NamaBeasiswaDashChart({
    }));
  };

-  const chartOptions: ApexOptions = {
-    chart: {
-      type: 'bar',
-      stacked: false,
-      toolbar: {
-        show: true,
-        tools: {
-          download: true,
-          selection: true,
-          zoom: true,
-          zoomin: true,
-          zoomout: true,
-          pan: true,
-          reset: true
-        }
-      },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
-    },
-    plotOptions: {
-      bar: {
-        horizontal: false,
-        columnWidth: '55%',
-        borderRadius: 1,
-      },
-    },
-    dataLabels: {
-      enabled: true,
-      formatter: function (val: number) {
-        return val.toString();
-      },
-      style: {
-        fontSize: '12px',
-        colors: [theme === 'dark' ? '#fff' : '#000']
-      }
-    },
-    stroke: {
-      show: true,
-      width: 2,
-      colors: ['transparent']
-    },
-    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'
-        }
-      },
-      axisBorder: {
-        show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
-      },
-      axisTicks: {
-        show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
-      },
-      tickAmount: 5,
-    },
-    yaxis: {
-      title: {
-        text: 'Jumlah Mahasiswa',
-        style: {
-          fontSize: '14px',
-          fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
-        }
-      },
-      labels: {
-        style: {
-          fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
-        }
-      },
-      axisBorder: {
-        show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
-      }
-    },
-    fill: {
-      opacity: 1
-    },
-    colors: ['#3B82F6', '#EC4899', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#06B6D4'],
-    tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
-      y: {
-        formatter: function (val: number) {
-          return val + " mahasiswa";
-        }
-      }
-    },
-    legend: {
-      position: 'top',
-      fontSize: '14px',
-      markers: {
-        size: 12,
-      },
-      itemMargin: {
-        horizontal: 10,
-      },
-      labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
-      }
-    },
-    grid: {
-      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
-      strokeDashArray: 4,
-      padding: {
-        top: 20,
-        right: 0,
-        bottom: 0,
-        left: 0
-      }
-    }
-  };
-
  const series = processSeriesData();

  if (loading) {
@@ -271,7 +344,7 @@ export default function NamaBeasiswaDashChart({
      </CardHeader>
      <CardContent>
        <div className={`${height} w-full max-w-5xl mx-auto`}>
-          {typeof window !== 'undefined' && series.length > 0 && (
+          {typeof window !== 'undefined' && series.length > 0 && Object.keys(chartOptions).length > 0 && (
            <Chart
              options={chartOptions}
              series={series}
--- a/components/chartsDashboard/TingkatPrestasiDashChart.tsx
+++ b/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: {
--- a/components/chartsDashboard/kkdashboardchart.tsx
+++ b/components/chartsDashboard/kkdashboardchart.tsx
@@ -98,8 +98,21 @@ export default function KelompokKeahlianStatusChart({
    },
    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',
@@ -163,10 +176,70 @@ export default function KelompokKeahlianStatusChart({
    colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#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];
+        
+        // Hitung total untuk tahun ini
+        let total = 0;
+        series.forEach((seriesData: number[]) => {
+          total += seriesData[dataPointIndex] || 0;
+        });
+        
+        const isDark = theme === 'dark';
+        
+        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: 200px;
+          ">
+            <div style="
+              font-size: 13px; 
+              font-weight: 600; 
+              color: ${isDark ? '#f1f5f9' : '#1f2937'}; 
+              margin-bottom: 8px;
+              text-align: center;
+            ">Angkatan ${tahun}</div>
+        `;
+        
+        // Tampilkan setiap kelompok keahlian
+        w.config.series.forEach((seriesItem: any, index: number) => {
+          const value = series[index][dataPointIndex] || 0;
+          const color = w.config.colors[index];
+          
+          tooltipContent += `
+            <div style="display: flex; align-items: center; margin-bottom: 4px;">
+              <div style="width: 8px; height: 8px; background: ${color}; border-radius: 50%; margin-right: 8px;"></div>
+              <span style="font-size: 12px; color: ${isDark ? '#cbd5e1' : '#374151'}; flex: 1;">${seriesItem.name}</span>
+              <span style="font-size: 12px; font-weight: 600; color: ${isDark ? '#f1f5f9' : '#1f2937'}; margin-left: auto;">${value}</span>
+            </div>
+          `;
+        });
+        
+        // Tampilkan 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;
      }
    }
  };