Create progress donut chart

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

@@ -26,7 +26,7 @@ import {
   CopyPlus,
   CopyMinus,
 } from "lucide-react";
-import RunProgressChart from "./RunProgressChart";
+import RunProgressDounut from "./RunPregressDonutChart";
 import TestCaseSelector from "./TestCaseSelector";
 import { testRunStatus } from "@/config/selection";
 import { RunType, RunCaseType, RunCaseInfoType } from "@/types/run";
@@ -230,7 +230,11 @@ export default function RunEditor({ projectId, runId }: Props) {
       </div>
 
       <div className="container mx-auto max-w-5xl pt-6 px-6 flex-grow">
-        <h6>Basic</h6>
+        <div className="flex">
+          <div>
+            <RunProgressDounut />
+          </div>
+          <div className="flex-grow">
             <Input
               size="sm"
               type="text"
@@ -279,9 +283,8 @@ export default function RunEditor({ projectId, runId }: Props) {
                 ))}
               </Select>
             </div>
-
+          </div>
-        <Divider className="my-6" />
+        </div>
-        <RunProgressChart />
 
         <Divider className="my-6" />
         <div className="flex items-center justify-between">

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { useState } from "react";
+import dynamic from "next/dynamic";
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
+const testCases = [
+  { name: "Passed", value: 12, color: "#17c964" },
+  { name: "Failed", value: 3, color: "#f31260" },
+  { name: "Skipped", value: 14, color: "#71717a" },
+  { name: "Untested", value: 32, color: "#d4d4d8" },
+];
+
+export default function RunProgressDounut() {
+  const [chartData, setChartData] = useState({
+    series: testCases.map((entry) => {
+      return entry.value;
+    }),
+    options: {
+      labels: testCases.map((entry) => {
+        return entry.name;
+      }),
+      colors: testCases.map((entry) => {
+        return entry.color;
+      }),
+    },
+  });
+  return (
+    <div>
+      <h1>Progress</h1>
+      <Chart
+        options={chartData.options}
+        series={chartData.series}
+        type="donut"
+        width={400}
+        height={400}
+      />
+    </div>
+  );
+}

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

@@ -1,84 +0,0 @@
-import React from "react";
-import { useState } from "react";
-import Chart from "react-apexcharts";
-
-// type Props = {
-//   projectId: string;
-// };
-
-const testCases = [
-  { name: "Passed", value: 12, color: "#17c964" },
-  { name: "Failed", value: 3, color: "#f31260" },
-  { name: "Skipped", value: 14, color: "#71717a" },
-  { name: "Untested", value: 32, color: "#d4d4d8" },
-];
-
-// export default function RunProgressChart({ projectId }: Props) {
-export default function RunProgressChart() {
-  const [chartData, setChartData] = useState({
-    series: testCases.map((entry) => {
-      return {
-        name: entry.name,
-        data: [entry.value],
-      };
-    }),
-    options: {
-      chart: {
-        type: "bar",
-        height: 100,
-        stacked: true,
-        stackType: "100%",
-        toolbar: {
-          show: false,
-        },
-      },
-      plotOptions: {
-        bar: {
-          horizontal: true,
-        },
-      },
-      colors: testCases.map((entry) => {
-        return entry.color;
-      }),
-      legend: {
-        show: false,
-      },
-      yaxis: {
-        show: false,
-      },
-      xaxis: {
-        labels: {
-          show: false,
-        },
-        axisTicks: {
-          show: false,
-        },
-      },
-      grid: {
-        show: false,
-        padding: {
-          top: -20,
-          bottom: -20,
-          left: -20,
-        },
-      },
-      tooltip: {
-        x: {
-          show: false,
-        },
-      },
-    },
-  });
-  return (
-    <div>
-      <h1>Progress</h1>
-      <Chart
-        options={chartData.options}
-        series={chartData.series}
-        type="bar"
-        width={500}
-        height={80}
-      />
-    </div>
-  );
-}