ayo coba

components/chartsDashboard/kkdashboardpiechartperangkatan.tsx

@@ -20,6 +20,7 @@ interface Props {
 export default function KelompokKeahlianPieChartPerAngkatan({ selectedYear }: Props) {
   const { theme } = useTheme();
   const [data, setData] = useState<KelompokKeahlianPerAngkatanData[]>([]);
+  const [chartColors, setChartColors] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -27,14 +28,23 @@ export default function KelompokKeahlianPieChartPerAngkatan({ selectedYear }: Pr
     const fetchData = async () => {
       try {
         setLoading(true);
-        const response = await fetch(
-          `/api/mahasiswa/kk-dashboard?tahun_angkatan=${selectedYear}`
-        );
+
+        // Fetch year-filtered data and global data in parallel
+        const [response, allResponse] = await Promise.all([
+          fetch(`/api/mahasiswa/kk-dashboard?tahun_angkatan=${selectedYear}`),
+          fetch('/api/mahasiswa/kk-dashboard'),
+        ]);
         if (!response.ok) {
           throw new Error('Failed to fetch data');
         }
         const result = await response.json();
-        
+        const allResult = allResponse.ok ? await allResponse.json() : result;
+
+        // Build global alphabetical list of kelompok (same order as bar chart)
+        const colorPalette = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'];
+        const allKelompok: string[] = [...new Set((allResult as any[]).map((item: any) => item.nama_kelompok as string))]
+          .sort((a, b) => a.localeCompare(b));
+
         // Group by nama_kelompok and sum jumlah_mahasiswa
         const groupedData = result.reduce((acc: { [key: string]: number }, item: any) => {
           const namaKelompok = item.nama_kelompok || 'Tidak Diketahui';
@@ -42,14 +52,20 @@ export default function KelompokKeahlianPieChartPerAngkatan({ selectedYear }: Pr
           return acc;
         }, {});
 
-        // Convert to array format
+        // Convert to array format and sort by jumlah_mahasiswa descending (display order)
         const chartData = Object.entries(groupedData).map(([nama_kelompok, jumlah_mahasiswa]) => ({
           nama_kelompok,
           jumlah_mahasiswa: jumlah_mahasiswa as number
         }));
-
-        // Sort by jumlah_mahasiswa descending
         const sortedData = chartData.sort((a, b) => (b.jumlah_mahasiswa as number) - (a.jumlah_mahasiswa as number));
+
+        // Assign colors based on global alphabetical position to match bar chart
+        const computedColors = sortedData.map(item => {
+          const idx = allKelompok.indexOf(item.nama_kelompok);
+          return idx >= 0 ? colorPalette[idx % colorPalette.length] : '#999999';
+        });
+
+        setChartColors(computedColors);
         setData(sortedData);
       } catch (err) {
         setError(err instanceof Error ? err.message : 'An error occurred');
@@ -98,9 +114,7 @@ export default function KelompokKeahlianPieChartPerAngkatan({ selectedYear }: Pr
         colors: theme === 'dark' ? '#fff' : '#000'
       }
     },
-    colors: [
-      '#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'
-    ],
+    colors: chartColors,
     tooltip: {
       theme: theme === 'dark' ? 'dark' : 'light',
       y: {