Apply test run status to progress donut chart

frontend/app/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx

@@ -1,55 +1,51 @@
 import React from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import dynamic from "next/dynamic";
-import { Button, Tooltip } from "@nextui-org/react";
-import { RotateCw } from "lucide-react";
+import { testRunCaseStatus } from "@/config/selection";
+import { RunStatusCountType } from "@/types/run";
 const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
-const testCases = [
-  { name: "Passed", value: 12, color: "#059669" },
-  { name: "Failed", value: 3, color: "#f87171" },
-  { name: "Retest", value: 4, color: "#fbbf24" },
-  { name: "Skipped", value: 14, color: "#4b5563" },
-  { name: "Untested", value: 32, color: "#e5e7eb" },
-];
+type Props = {
+  statusCounts: RunStatusCountType[];
+};
 
-export default function RunProgressDounut() {
+export default function RunProgressDounut({ statusCounts }: Props) {
   const [chartData, setChartData] = useState({
-    series: testCases.map((entry) => {
-      return entry.value;
-    }),
+    series: [],
     options: {
-      labels: testCases.map((entry) => {
-        return entry.name;
-      }),
-      colors: testCases.map((entry) => {
-        return entry.color;
-      }),
+      labels: [],
+      colors: [],
     },
   });
-  return (
-    <div className="w-96 h-72">
-      <div className="flex items-center">
-        <h4 className="font-bold">Progress</h4>
-        <Tooltip content="Refresh">
-          <Button
-            isIconOnly
-            size="sm"
-            className="rounded-full bg-transparent ms-1"
-            onPress={() => console.log("refresh")}
-          >
-            <RotateCw size={16} />
-          </Button>
-        </Tooltip>
-      </div>
 
-      <Chart
-        options={chartData.options}
-        series={chartData.series}
-        type="donut"
-        width={"100%"}
-        height={"100%"}
-      />
-    </div>
+  useEffect(() => {
+    const updateChartDate = () => {
+      if (statusCounts) {
+        const series = testRunCaseStatus.map((entry, index) => {
+          const found = statusCounts.find((itr) => itr.status === index);
+          return found ? found.count : 0;
+        });
+
+        const labels = testRunCaseStatus.map((entry) => entry.name);
+        const colors = testRunCaseStatus.map((entry) => entry.chartColor);
+
+        setChartData({
+          series,
+          options: { labels, colors },
+        });
+      }
+    };
+
+    updateChartDate();
+  }, [statusCounts]);
+
+  return (
+    <Chart
+      options={chartData.options}
+      series={chartData.series}
+      type="donut"
+      width={"100%"}
+      height={"100%"}
+    />
   );
 }