Change Bug Charts

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%"