ayo coba

components/chartsDashboard/NamaBeasiswaDashPieChartPerangkatan.tsx

@@ -20,6 +20,7 @@ interface Props {
 export default function NamaBeasiswaDashPieChartPerangkatan({ selectedYear }: Props) {
   const { theme } = useTheme();
   const [data, setData] = useState<NamaBeasiswaPerAngkatanData[]>([]);
+  const [chartColors, setChartColors] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -43,6 +44,11 @@ export default function NamaBeasiswaDashPieChartPerangkatan({ selectedYear }: Pr
           throw new Error('Invalid data format received from server');
         }
         
+        // Build global alphabetical list from all data (same order as bar chart)
+        const colorPalette = ['#3B82F6', '#EC4899', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#06B6D4'];
+        const allBeasiswa: string[] = [...new Set((result as any[]).map((item: any) => item.nama_beasiswa as string))]
+          .sort();
+
         // Filter data for selected year and group by nama_beasiswa
         const yearData = result.filter((item: any) => 
           item.tahun_angkatan.toString() === selectedYear
@@ -55,14 +61,20 @@ export default function NamaBeasiswaDashPieChartPerangkatan({ selectedYear }: Pr
           return acc;
         }, {});
 
-        // Convert to array format
+        // Convert to array format and sort by count descending (display order)
         const chartData = Object.entries(groupedData).map(([nama_beasiswa, jumlah_nama_beasiswa]) => ({
           nama_beasiswa,
           jumlah_nama_beasiswa: jumlah_nama_beasiswa as number
         }));
-
-        // Sort by jumlah_nama_beasiswa descending
         const sortedData = chartData.sort((a, b) => (b.jumlah_nama_beasiswa as number) - (a.jumlah_nama_beasiswa as number));
+
+        // Assign colors based on global alphabetical position to match bar chart
+        const computedColors = sortedData.map(item => {
+          const idx = allBeasiswa.indexOf(item.nama_beasiswa);
+          return idx >= 0 ? colorPalette[idx % colorPalette.length] : '#999999';
+        });
+
+        setChartColors(computedColors);
         setData(sortedData);
       } catch (err) {
         console.error('Error in fetchData:', err);
@@ -122,7 +134,7 @@ export default function NamaBeasiswaDashPieChartPerangkatan({ selectedYear }: Pr
         colors: theme === 'dark' ? '#fff' : '#000'
       }
     },
-    colors: [
+    colors: chartColors.length > 0 ? chartColors : [
       '#3B82F6', // Blue
       '#EC4899', // Pink
       '#10B981', // Green