Change Bug Charts

components/AsalDaerahChart.tsx

@@ -92,7 +92,6 @@ export default function AsalDaerahChart() {
         },
         maxWidth: 200,
       },
-      tickAmount: undefined,
     },
     fill: {
       opacity: 1,

components/JenisPendaftaranBeasiswaChart.tsx

@@ -162,7 +162,8 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
       axisBorder: {
         show: true,
         color: theme === 'dark' ? '#374151' : '#E5E7EB'
-      }
+      },
+      tickAmount: 5,
     },
     fill: {
       opacity: 1
@@ -203,23 +204,6 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
 
   const series = processSeriesData();
 
-  // Calculate the maximum value from all series for y-axis padding
-  const maxValue = Math.max(
-    ...series.flatMap(s => s.data)
-  );
-  
-  // Add 20% padding to the maximum value
-  const yAxisMax = Math.ceil(maxValue * 1.2);
-
-  // Update chart options with y-axis max
-  const updatedChartOptions: ApexOptions = {
-    ...chartOptions,
-    yaxis: {
-      ...chartOptions.yaxis,
-      max: yAxisMax
-    }
-  };
-
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -268,7 +252,7 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
         <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
-              options={updatedChartOptions}
+              options={chartOptions}
               series={series}
               type="bar"
               height="100%"

components/JenisPendaftaranChart.tsx

@@ -213,20 +213,12 @@ export default function JenisPendaftaranChart() {
 
         setSeries(seriesData);
         
-        // Calculate the maximum value from all series
-        const maxValue = Math.max(
-          ...seriesData.flatMap(series => series.data)
-        );
-        
-        // Add 20% padding to the maximum value
-        const xAxisMax = Math.ceil(maxValue * 1.1);
         
         setOptions(prev => ({
           ...prev,
           xaxis: {
             ...prev.xaxis,
             categories: tahunAngkatan,
-            max: xAxisMax
           },
         }));
       } catch (err) {

components/JenisPendaftaranLulusChart.tsx

@@ -159,7 +159,8 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
       axisBorder: {
         show: true,
         color: theme === 'dark' ? '#374151' : '#E5E7EB'
-      }
+      },
+      tickAmount: 5,
     },
     fill: {
       opacity: 1
@@ -200,23 +201,6 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
 
   const series = processSeriesData();
 
-  // Calculate the maximum value from all series for y-axis padding
-  const maxValue = Math.max(
-    ...series.flatMap(s => s.data)
-  );
-  
-  // Add 20% padding to the maximum value
-  const yAxisMax = Math.ceil(maxValue * 1.2);
-
-  // Update chart options with y-axis max
-  const updatedChartOptions: ApexOptions = {
-    ...chartOptions,
-    yaxis: {
-      ...chartOptions.yaxis,
-      max: yAxisMax
-    }
-  };
-
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -265,7 +249,7 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
         <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
-              options={updatedChartOptions}
+              options={chartOptions}
               series={series}
               type="bar"
               height="100%"

components/JenisPendaftaranPrestasiChart.tsx

@@ -162,9 +162,6 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
         show: true,
         color: theme === 'dark' ? '#374151' : '#E5E7EB'
       },
-      max: function(val) {
-        return Math.ceil(val * 1.2);
-      }
     },
     fill: {
       opacity: 1

components/JenisPendaftaranStatusChart.tsx

@@ -135,7 +135,9 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
           fontSize: '12px',
           colors: theme === 'dark' ? '#fff' : '#000'
         }
-      }
+      },
+      min:0,
+      tickAmount: 5
     },
     fill: {
       opacity: 1,
@@ -188,23 +190,6 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
   const series = processSeriesData();
   console.log('Processed series data:', series);
 
-  // Calculate the maximum value from all series for y-axis padding
-  const maxValue = Math.max(
-    ...series.flatMap(s => s.data)
-  );
-  
-  // Add 20% padding to the maximum value
-  const yAxisMax = Math.ceil(maxValue * 1.2);
-
-  // Update chart options with y-axis max
-  const updatedChartOptions: ApexOptions = {
-    ...chartOptions,
-    yaxis: {
-      ...chartOptions.yaxis,
-      max: yAxisMax
-    }
-  };
-
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -253,7 +238,7 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
         <div className="h-[350px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
-              options={updatedChartOptions}
+              options={chartOptions}
               series={series}
               type="bar"
               height="100%"

components/LulusTepatWaktuChart.tsx

@@ -177,7 +177,8 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
       axisBorder: {
         show: true,
         color: theme === 'dark' ? '#374151' : '#E5E7EB'
-      }
+      },
+      tickAmount: 5,
     },
     fill: {
       opacity: 1
@@ -218,23 +219,6 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
 
   const series = processSeriesData();
 
-  // Calculate the maximum value from all series for y-axis padding
-  const maxValue = Math.max(
-    ...series.flatMap(s => s.data)
-  );
-  
-  // Add 20% padding to the maximum value
-  const yAxisMax = Math.ceil(maxValue * 1.2);
-
-  // Update chart options with y-axis max
-  const updatedChartOptions: ApexOptions = {
-    ...chartOptions,
-    yaxis: {
-      ...chartOptions.yaxis,
-      max: yAxisMax
-    }
-  };
-
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -283,7 +267,7 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
         <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
-              options={updatedChartOptions}
+              options={chartOptions}
               series={series}
               type="bar"
               height="100%"

components/NamaBeasiswaChart.tsx

@@ -142,7 +142,8 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
       axisTicks: {
         show: true,
         color: theme === 'dark' ? '#374151' : '#E5E7EB'
-      }
+      },
+      tickAmount: 5,
     },
     yaxis: {
       title: {
@@ -203,23 +204,6 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
 
   const series = processSeriesData();
 
-  // Calculate the maximum value from all series for y-axis padding
-  const maxValue = Math.max(
-    ...series.flatMap(s => s.data)
-  );
-  
-  // Add 20% padding to the maximum value
-  const yAxisMax = Math.ceil(maxValue * 1.2);
-
-  // Update chart options with y-axis max
-  const updatedChartOptions: ApexOptions = {
-    ...chartOptions,
-    yaxis: {
-      ...chartOptions.yaxis,
-      max: yAxisMax
-    }
-  };
-
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -268,7 +252,7 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
         <div className="h-[400px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
-              options={updatedChartOptions}
+              options={chartOptions}
               series={series}
               type="bar"
               height="100%"

components/StatistikMahasiswaChart.tsx

@@ -105,7 +105,9 @@ export default function StatistikMahasiswaChart() {
             fontSize: '12px',
             colors: '#000'
           }
-        }
+        },
+        min:0,
+        tickAmount: 5
       }
     ],
     fill: {
@@ -243,15 +245,6 @@ export default function StatistikMahasiswaChart() {
   // Update categories when data changes
   useEffect(() => {
     if (statistikData.length > 0) {
-      // Calculate the maximum value from all series
-      const maxValue = Math.max(
-        ...statistikData.map(item => item.total_mahasiswa),
-        ...statistikData.map(item => item.pria),
-        ...statistikData.map(item => item.wanita)
-      );
-      
-      // Add 50% padding to the maximum value
-      const yAxisMax = Math.ceil(maxValue * 1.2);
       
       setChartOptions(prev => ({
         ...prev,
@@ -262,7 +255,6 @@ export default function StatistikMahasiswaChart() {
         yaxis: [
           {
             ...prev.yaxis[0],
-            max: yAxisMax
           }
         ]
       }));

components/StatusMahasiswaChart.tsx

@@ -21,13 +21,15 @@ export default function StatusMahasiswaChart() {
   const [error, setError] = useState<string | null>(null);
   const [data, setData] = useState<StatusData[]>([]);
   const [series, setSeries] = useState<ApexAxisChartSeries>([]);
-  const [options, setOptions] = useState<ApexOptions>({
+
+  const chartOptions: ApexOptions = {
     chart: {
       type: 'bar',
       stacked: false,
       toolbar: {
         show: true,
       },
+      background: theme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -42,7 +44,7 @@ export default function StatusMahasiswaChart() {
       },
       style: {
         fontSize: '12px',
-        colors: ['#000']
+        colors: [theme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -51,19 +53,19 @@ export default function StatusMahasiswaChart() {
       colors: ['transparent'],
     },
     xaxis: {
-      categories: [],
+      categories: [...new Set(data.map(item => item.tahun_angkatan))].sort(),
       title: {
         text: 'Tahun Angkatan',
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: '#000'
+          color: theme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: '#000'
+          colors: theme === 'dark' ? '#fff' : '#000'
         }
       }
     },
@@ -73,15 +75,15 @@ export default function StatusMahasiswaChart() {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: '#000'
+          color: theme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: '#000'
+          colors: theme === 'dark' ? '#fff' : '#000'
         }
-      }
+      },
     },
     fill: {
       opacity: 1,
@@ -96,19 +98,19 @@ export default function StatusMahasiswaChart() {
         horizontal: 10,
       },
       labels: {
-        colors: '#000'
+        colors: theme === 'dark' ? '#fff' : '#000'
       }
     },
     colors: ['#008FFB', '#00E396', '#FEB019', '#EF4444'],
     tooltip: {
-      theme: 'light',
+      theme: theme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
         }
       }
     }
-  });
+  };
 
   useEffect(() => {
     const fetchData = async () => {
@@ -143,26 +145,6 @@ export default function StatusMahasiswaChart() {
         }));
 
         setSeries(seriesData);
-        
-        // Calculate the maximum value from all series
-        const maxValue = Math.max(
-          ...seriesData.flatMap(series => series.data)
-        );
-        
-        // Add 20% padding to the maximum value
-        const yAxisMax = Math.ceil(maxValue * 1.2);
-        
-        setOptions(prev => ({
-          ...prev,
-          xaxis: {
-            ...prev.xaxis,
-            categories: tahunAngkatan,
-          },
-          yaxis: {
-            ...prev.yaxis,
-            max: yAxisMax
-          }
-        }));
       } catch (err) {
         console.error('Error in fetchData:', err);
         setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
@@ -174,73 +156,6 @@ export default function StatusMahasiswaChart() {
     fetchData();
   }, []);
 
-  // Update theme when it changes
-  useEffect(() => {
-    const currentTheme = theme === 'system' ? systemTheme : theme;
-    const textColor = currentTheme === 'dark' ? '#fff' : '#000';
-    const tooltipTheme = currentTheme === 'dark' ? 'dark' : 'light';
-
-    setOptions(prev => ({
-      ...prev,
-      chart: {
-        ...prev.chart,
-        background: currentTheme === 'dark' ? '#0F172B' : '#fff',
-      },
-      dataLabels: {
-        ...prev.dataLabels,
-        style: {
-          ...prev.dataLabels?.style,
-          colors: [textColor]
-        }
-      },
-      xaxis: {
-        ...prev.xaxis,
-        title: {
-          ...prev.xaxis?.title,
-          style: {
-            ...prev.xaxis?.title?.style,
-            color: textColor
-          }
-        },
-        labels: {
-          ...prev.xaxis?.labels,
-          style: {
-            ...prev.xaxis?.labels?.style,
-            colors: textColor
-          }
-        }
-      },
-      yaxis: {
-        ...(prev.yaxis as ApexYAxis),
-        title: {
-          ...(prev.yaxis as ApexYAxis)?.title,
-          style: {
-            ...(prev.yaxis as ApexYAxis)?.title?.style,
-            color: textColor
-          }
-        },
-        labels: {
-          ...(prev.yaxis as ApexYAxis)?.labels,
-          style: {
-            ...(prev.yaxis as ApexYAxis)?.labels?.style,
-            colors: textColor
-          }
-        }
-      },
-      legend: {
-        ...prev.legend,
-        labels: {
-          ...prev.legend?.labels,
-          colors: textColor
-        }
-      },
-      tooltip: {
-        ...prev.tooltip,
-        theme: tooltipTheme
-      }
-    }));
-  }, [theme, systemTheme]);
-
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -285,10 +200,10 @@ export default function StatusMahasiswaChart() {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
-              options={options}
+              options={chartOptions}
               series={series}
               type="bar"
               height="100%"

components/StatusMahasiswaFilterChart.tsx

@@ -190,22 +190,6 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
   const series = processSeriesData();
   console.log('Processed series data:', series);
 
-  // Calculate the maximum value from all series for y-axis padding
-  const maxValue = Math.max(
-    ...series.flatMap(s => s.data)
-  );
-  
-  // Add 20% padding to the maximum value
-  const yAxisMax = Math.ceil(maxValue * 1.2);
-
-  // Update chart options with y-axis max
-  const updatedChartOptions: ApexOptions = {
-    ...chartOptions,
-    yaxis: {
-      ...chartOptions.yaxis,
-      max: yAxisMax
-    }
-  };
 
   if (loading) {
     return (
@@ -255,7 +239,7 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
         <div className="h-[350px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
-              options={updatedChartOptions}
+              options={chartOptions}
               series={series}
               type="bar"
               height="100%"

components/TingkatPrestasiChart.tsx

@@ -141,7 +141,7 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
       axisTicks: {
         show: true,
         color: theme === 'dark' ? '#374151' : '#E5E7EB'
-      }
+      },
     },
     yaxis: {
       title: {
@@ -161,7 +161,8 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
       axisBorder: {
         show: true,
         color: theme === 'dark' ? '#374151' : '#E5E7EB'
-      }
+      },
+      tickAmount: 5,
     },
     fill: {
       opacity: 1
@@ -202,23 +203,6 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
 
   const series = processSeriesData();
 
-  // Calculate the maximum value from all series for y-axis padding
-  const maxValue = Math.max(
-    ...series.flatMap(s => s.data)
-  );
-  
-  // Add 20% padding to the maximum value
-  const yAxisMax = Math.ceil(maxValue * 1.2);
-
-  // Update chart options with y-axis max
-  const updatedChartOptions: ApexOptions = {
-    ...chartOptions,
-    yaxis: {
-      ...chartOptions.yaxis,
-      max: yAxisMax
-    }
-  };
-
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -266,7 +250,7 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
         <div className="h-[400px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
-              options={updatedChartOptions}
+              options={chartOptions}
               series={series}
               type="bar"
               height="100%"

components/TotalBeasiswaChart.tsx

@@ -174,7 +174,8 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
       axisBorder: {
         show: true,
         color: theme === 'dark' ? '#374151' : '#E5E7EB'
-      }
+      },
+      tickAmount: 5,
     },
     fill: {
       opacity: 1
@@ -215,23 +216,6 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
 
   const series = processSeriesData();
 
-  // Calculate the maximum value from all series for y-axis padding
-  const maxValue = Math.max(
-    ...series.flatMap(s => s.data)
-  );
-  
-  // Add 20% padding to the maximum value
-  const yAxisMax = Math.ceil(maxValue * 1.2);
-
-  // Update chart options with y-axis max
-  const updatedChartOptions: ApexOptions = {
-    ...chartOptions,
-    yaxis: {
-      ...chartOptions.yaxis,
-      max: yAxisMax
-    }
-  };
-
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -280,7 +264,7 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
         <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
-              options={updatedChartOptions}
+              options={chartOptions}
               series={series}
               type="bar"
               height="100%"

components/TotalPrestasiChart.tsx

@@ -173,7 +173,8 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
       axisBorder: {
         show: true,
         color: theme === 'dark' ? '#374151' : '#E5E7EB'
-      }
+      },
+      tickAmount: 5,
     },
     fill: {
       opacity: 1
@@ -214,23 +215,6 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
 
   const series = processSeriesData();
 
-  // Calculate the maximum value from all series for y-axis padding
-  const maxValue = Math.max(
-    ...series.flatMap(s => s.data)
-  );
-  
-  // Add 20% padding to the maximum value
-  const yAxisMax = Math.ceil(maxValue * 1.2);
-
-  // Update chart options with y-axis max
-  const updatedChartOptions: ApexOptions = {
-    ...chartOptions,
-    yaxis: {
-      ...chartOptions.yaxis,
-      max: yAxisMax
-    }
-  };
-
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -278,7 +262,7 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
         <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
-              options={updatedChartOptions}
+              options={chartOptions}
               series={series}
               type="bar"
               height="100%"