SaiSandeep - Fix "No comparison" filter options failing in Total Org Summary Dashboard

src/components/TotalOrgSummary/BlueSquareStats/BlueSquareStats.jsx

@@ -49,7 +49,7 @@ function BlueSquareStats({ isLoading, blueSquareStats, comparisonType, darkMode
         <DonutChart
           title="TOTAL BLUE SQUARES"
           totalCount={totalBlueSquares.count}
-          percentageChange={pctChange}
+          percentageChange={Number(pctChange)}
           data={data}
           colors={BLUE_SQUARE_STATS_COLORS}
           comparisonType={comparisonType}

src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx

@@ -28,6 +28,18 @@ const ROLE_COLOR_MAP = {
 import CustomTooltip from '../../CustomTooltip';
 
 const RoleDistributionPieChart = ({ roleDistributionStats = [], isLoading, darkMode }) => {
+  // Reusable function to sort data and assign colors.
+  const sortDataAndAssignColors = statsData => {
+    statsData?.sort((a, b) => b.count - a.count);
+    const mappedData = statsData?.map((item, index) => ({
+      name: item._id,
+      value: item.count,
+      // Use a stable role mapping first, otherwise fallback by index.
+      color: ROLE_COLOR_MAP[item._id] || COLORS[index % COLORS.length],
+    }));
+    return mappedData;
+  };
+
   if (isLoading) {
     return (
       <div className="d-flex justify-content-center align-items-center">
@@ -38,13 +50,16 @@ const RoleDistributionPieChart = ({ roleDistributionStats = [], isLoading, darkM
     );
   }
 
-  roleDistributionStats.sort((a, b) => b.count - a.count);
-  const data = roleDistributionStats.map((item, index) => ({
-    name: item._id,
-    value: item.count,
-    // Use a stable role mapping first, otherwise fallback by index.
-    color: ROLE_COLOR_MAP[item._id] || COLORS[index % COLORS.length],
-  }));
+  let data = [];
+  // This is to handle the case when we are comparing the data with other time periods. In that case, the data structure is different and we need to access the comparison data.
+  if (roleDistributionStats?.comparison) {
+    data = sortDataAndAssignColors(roleDistributionStats?.comparison);
+  }
+  // Fallback to the original data structure when we are not comparing the data with other time periods.
+  else {
+    data = sortDataAndAssignColors(roleDistributionStats);
+  }
+
   const totalValue = data.reduce((sum, entry) => sum + entry.value, 0);
 
   const RADIAN = Math.PI / 180;