Display information of project on home tab

frontend/src/app/[locale]/projects/[projectId]/home/home.tsx

@@ -4,10 +4,15 @@ import { Divider } from "@nextui-org/react";
 import { title } from "@/components/primitives";
 import { Card, CardBody, Chip } from "@nextui-org/react";
 import { Folder, Clipboard, FlaskConical } from "lucide-react";
-import { CaseTypeCountType } from "@/types/case";
+import { CaseTypeCountType, CasePriorityCountType } from "@/types/case";
 import { HomeMessages } from "./page";
-import { testTypes } from "@/config/selection";
+import {
+  aggregateBasicInfo,
+  aggregateTestPriority,
+  aggregateTestType,
+} from "./aggregate";
 import TestTypesChart from "./TestTypesDonutChart";
+import TestPriorityChart from "./TestPriorityDonutChart";
 import Config from "@/config/config";
 const apiServer = Config.apiServer;
 
@@ -47,6 +52,8 @@ export function Home({ projectId, messages }: Props) {
   const [caseNum, setCaseNum] = useState(0);
   const [runNum, setRunNum] = useState(0);
   const [typesCounts, setTypesCounts] = useState<CaseTypeCountType[]>();
+  const [priorityCounts, setPriorityCounts] =
+    useState<CasePriorityCountType[]>();
   const url = `${apiServer}/home/${projectId}`;
 
   useEffect(() => {
@@ -65,42 +72,21 @@ export function Home({ projectId, messages }: Props) {
 
   useEffect(() => {
     async function aggregate() {
-      aggregateBasicInfo();
-      aggregateTestType();
+      const { folderNum, runNum, caseNum } = aggregateBasicInfo(project);
+      setFolderNum(folderNum);
+      setRunNum(runNum);
+      setCaseNum(caseNum);
+
+      const typeRet = aggregateTestType(project);
+      setTypesCounts([...typeRet]);
+
+      const priorityRet = aggregateTestPriority(project);
+      setPriorityCounts([...priorityRet]);
     }
 
     aggregate();
   }, [project]);
 
-  // aggregate folder, case, run mum
-  function aggregateBasicInfo() {
-    let num = 0;
-    setFolderNum(project.Folders.length);
-    setRunNum(project.Runs.length);
-    project.Folders.forEach((folder) => {
-      num += folder.Cases.length;
-    });
-    setCaseNum(num);
-  }
-
-  // aggregate test types of each case
-  function aggregateTestType() {
-    const tempTypesCounts = {};
-    project.Folders.forEach((folder) => {
-      folder.Cases.forEach((testcase) => {
-        const type = testcase.type;
-        tempTypesCounts[type] = (tempTypesCounts[type] || 0) + 1;
-      });
-    });
-
-    const result = [];
-    for (let type = 0; type <= testTypes.length; type++) {
-      result.push({ type: type, count: tempTypesCounts[type] || 0 });
-    }
-
-    setTypesCounts([...result]);
-  }
-
   return (
     <div className="container mx-auto max-w-5xl pt-6 px-6 flex-grow">
       <h1 className={title({ size: "sm" })}>{project.name}</h1>
@@ -133,17 +119,21 @@ export function Home({ projectId, messages }: Props) {
       </Card>
 
       <Divider className="my-6" />
-
       <div className="flex">
-        <div style={{ width: "32rem", height: "32rem" }}>
+        <div style={{ width: "32rem", height: "18rem" }}>
           <h3>{messages.testTypes}</h3>
           <TestTypesChart typesCounts={typesCounts} messages={messages} />
         </div>
-        <div style={{ width: "32rem", height: "32rem" }}>
-          <h3>{messages.testTypes}</h3>
-          <TestTypesChart typesCounts={typesCounts} messages={messages} />
+        <div style={{ width: "30rem", height: "18rem" }}>
+          <h3>{messages.priority}</h3>
+          <TestPriorityChart
+            priorityCounts={priorityCounts}
+            messages={messages}
+          />
         </div>
       </div>
+
+      <Divider className="my-6" />
     </div>
   );
 }