update chart color order

src/app/api/teamprojects/actions.ts

@@ -61,3 +61,14 @@ export const fetchAllTeamConsumption = cache(async (teamIdList: number[],tableSo
   }
   
 });
+
+export const fetchAllTeamConsumptionColorOrder = cache(async (teamIdList: number[],tableSorting:string) => {
+  if (teamIdList.length !== 0) {
+    const queryParams = new URLSearchParams();
+    queryParams.append('teamIdList', teamIdList.join(','));
+    return serverFetchJson<ClientSubsidiaryProjectResult[]>(`${BASE_API_URL}/dashboard/searchTeamConsumptionColorOrder?${queryParams.toString()}&tableSorting=${tableSorting}`);
+  } else {
+    return [];
+  }
+  
+});

src/components/ProjectResourceConsumptionRanking/ProjectResourceConsumptionRanking.tsx

@@ -19,7 +19,7 @@ import SearchBox, { Criterion } from "../SearchBox";
 import ProgressByTeamSearch from "@/components/ProgressByTeamSearch";
 import { Suspense } from "react";
 import { useSearchParams } from 'next/navigation';
-import { fetchAllTeamProjects, TeamProjectResult, fetchTeamProjects, fetchAllTeamConsumption} from "@/app/api/teamprojects/actions";
+import { fetchAllTeamProjects, TeamProjectResult, fetchTeamProjects, fetchAllTeamConsumption, fetchAllTeamConsumptionColorOrder} from "@/app/api/teamprojects/actions";
 // const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
 interface Props {
@@ -88,6 +88,7 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
   "#d4feed", "#0ab2ff", "#ff88a2", "#4fda21", "#cefb2f",
   "#d1fef0", "#04afff", "#ff859e", "#4bdd15", "#ccfb2b"];
   const [teamProjectResult, setTeamProjectResult]:any[] = useState([]);
+  const [teamProjectColorOrder, setTeamProjectColorOrder]:any[] = useState([]);
   const [currentPageProjectList, setCurrentPageProjectList]: any[] = React.useState([]);
   const [currentPageProjectNameList, setCurrentPageProjectNameList]: any[] = React.useState([]);
   const [currentPageProjectBudgetedManhourList, setCurrentPageProjectBudgetedManhourList]: any[] = React.useState([]);
@@ -111,8 +112,11 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
       try {
         const clickResult = await fetchAllTeamConsumption(
         selectedTeamIdList,tableSorting)
+        const colorOrder = await fetchAllTeamConsumptionColorOrder(
+          selectedTeamIdList,tableSorting)
         console.log(clickResult)
         setTeamProjectResult(clickResult);
+        setTeamProjectColorOrder(colorOrder);
       } catch (error) {
         console.error('Error fetching team consumption:', error);
       }
@@ -135,28 +139,42 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
     const manhourConsumptionPercentage = []
     const chartColor = []
     const chartTeam = []
+    const colorOrder = []
     let c = 0
+    let d = 0
+    for (let i = 0; i < teamProjectColorOrder.length; i++){
+      if (i === 0) {
+        chartTeam.push('Team '+teamProjectColorOrder[i].team)
+        colorOrder.push({"team":teamProjectColorOrder[i].team,"color":color[d]})
+      } else if (teamProjectColorOrder[i].team !== teamProjectColorOrder[i - 1].team) {
+        d = d + 1
+        chartTeam.push('Team '+teamProjectColorOrder[i].team)
+        colorOrder.push({"team":teamProjectColorOrder[i].team,"color":color[d]})
+      }
+    }
    for (let i = 0; i < teamProjectResult.length; i++){
-    
-    console.log(teamProjectResult[i])
     projectNo.push(teamProjectResult[i].projectCode + "(" + teamProjectResult[i].team + ")")
     projectName.push(teamProjectResult[i].projectName)
     projectBudgetedManHour.push(teamProjectResult[i].budgetedManhour)
     projectSpentManHour.push(teamProjectResult[i].spentManhour)
     manhourConsumptionPercentage.push(teamProjectResult[i].manhourConsumptionPercentage)
-    if (i === 0) {
-      chartColor.push(color[c])
-      chartTeam.push('Team '+teamProjectResult[i].team)
-      teamProjectResult[i].color = color[c]
-    } else if (teamProjectResult[i].team !== teamProjectResult[i - 1].team) {
-      c = c + 1
-      chartColor.push(color[c])
-      chartTeam.push('Team '+teamProjectResult[i].team)
-      teamProjectResult[i].color = color[c]
-    } else if (teamProjectResult[i].team === teamProjectResult[i - 1].team){
-      chartColor.push(color[c])
-      teamProjectResult[i].color = color[c]
+    for (let j = 0; j < colorOrder.length; j++){
+      if (teamProjectResult[i].team === colorOrder[j].team){
+        chartColor.push(colorOrder[j].color)
+        teamProjectResult[i].color = color[j]
+      }
     }
+    // if (i === 0) {
+    //   chartColor.push(color[c])
+    //   teamProjectResult[i].color = color[c]
+    // } else if (teamProjectResult[i].team !== teamProjectResult[i - 1].team) {
+    //   c = c + 1
+    //   chartColor.push(color[c])
+    //   teamProjectResult[i].color = color[c]
+    // } else if (teamProjectResult[i].team === teamProjectResult[i - 1].team){
+    //   chartColor.push(color[c])
+    //   teamProjectResult[i].color = color[c]
+    // }
    }
    setChartProjectColor(chartColor)
    setChartProjectName(projectNo)
@@ -165,7 +183,7 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
    setChartProjectSpentHour(projectSpentManHour)
    setChartManhourConsumptionPercentage(manhourConsumptionPercentage)
    setChartTeam(chartTeam)
-  }, [teamProjectResult]);
+  }, [teamProjectResult, teamProjectColorOrder]);
 
   useEffect(() => {
     fetchTeamData()