From 17d4c6326dd17f782b9177a53fa3290c5c34ca8b Mon Sep 17 00:00:00 2001
From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com>
Date: Sat, 27 Apr 2024 15:14:35 +0900
Subject: [PATCH] Create progress donut chart

---
 .../[projectId]/runs/[runId]/RunEditor.tsx    | 103 +++++++++---------
 .../runs/[runId]/RunPregressDonutChart.tsx    |  39 +++++++
 .../runs/[runId]/RunProgressChart.tsx         |  84 --------------
 3 files changed, 92 insertions(+), 134 deletions(-)
 create mode 100644 frontend/app/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx
 delete mode 100644 frontend/app/projects/[projectId]/runs/[runId]/RunProgressChart.tsx

diff --git a/frontend/app/projects/[projectId]/runs/[runId]/RunEditor.tsx b/frontend/app/projects/[projectId]/runs/[runId]/RunEditor.tsx
index 9438aae..6695172 100644
--- a/frontend/app/projects/[projectId]/runs/[runId]/RunEditor.tsx
+++ b/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,59 +230,62 @@ 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>
-        <Input
-          size="sm"
-          type="text"
-          variant="bordered"
-          label="Name"
-          value={testRun.name}
-          isInvalid={isNameInvalid}
-          errorMessage={isNameInvalid ? "please enter name" : ""}
-          onChange={(e) => {
-            setTestRun({ ...testRun, name: e.target.value });
-          }}
-          className="mt-3"
-        />
+        <div className="flex">
+          <div>
+            <RunProgressDounut />
+          </div>
+          <div className="flex-grow">
+            <Input
+              size="sm"
+              type="text"
+              variant="bordered"
+              label="Name"
+              value={testRun.name}
+              isInvalid={isNameInvalid}
+              errorMessage={isNameInvalid ? "please enter name" : ""}
+              onChange={(e) => {
+                setTestRun({ ...testRun, name: e.target.value });
+              }}
+              className="mt-3"
+            />
 
-        <Textarea
-          size="sm"
-          variant="bordered"
-          label="Description"
-          placeholder="Test run description"
-          value={testRun.description}
-          onValueChange={(changeValue) => {
-            setTestRun({ ...testRun, description: changeValue });
-          }}
-          className="mt-3"
-        />
+            <Textarea
+              size="sm"
+              variant="bordered"
+              label="Description"
+              placeholder="Test run description"
+              value={testRun.description}
+              onValueChange={(changeValue) => {
+                setTestRun({ ...testRun, description: changeValue });
+              }}
+              className="mt-3"
+            />
 
-        <div>
-          <Select
-            size="sm"
-            variant="bordered"
-            selectedKeys={[testRunStatus[testRun.state].uid]}
-            onSelectionChange={(e) => {
-              const selectedUid = e.anchorKey;
-              const index = testRunStatus.findIndex(
-                (template) => template.uid === selectedUid
-              );
-              setTestRun({ ...testRun, state: index });
-            }}
-            label="status"
-            className="mt-3 max-w-xs"
-          >
-            {testRunStatus.map((state, index) => (
-              <SelectItem key={state.uid} value={index}>
-                {state.name}
-              </SelectItem>
-            ))}
-          </Select>
+            <div>
+              <Select
+                size="sm"
+                variant="bordered"
+                selectedKeys={[testRunStatus[testRun.state].uid]}
+                onSelectionChange={(e) => {
+                  const selectedUid = e.anchorKey;
+                  const index = testRunStatus.findIndex(
+                    (template) => template.uid === selectedUid
+                  );
+                  setTestRun({ ...testRun, state: index });
+                }}
+                label="status"
+                className="mt-3 max-w-xs"
+              >
+                {testRunStatus.map((state, index) => (
+                  <SelectItem key={state.uid} value={index}>
+                    {state.name}
+                  </SelectItem>
+                ))}
+              </Select>
+            </div>
+          </div>
         </div>
 
-        <Divider className="my-6" />
-        <RunProgressChart />
-
         <Divider className="my-6" />
         <div className="flex items-center justify-between">
           <h6 className="h-8">Select test cases</h6>
diff --git a/frontend/app/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx b/frontend/app/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx
new file mode 100644
index 0000000..1fb35d4
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/frontend/app/projects/[projectId]/runs/[runId]/RunProgressChart.tsx b/frontend/app/projects/[projectId]/runs/[runId]/RunProgressChart.tsx
deleted file mode 100644
index 0d72b09..0000000
--- a/frontend/app/projects/[projectId]/runs/[runId]/RunProgressChart.tsx
+++ /dev/null
@@ -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>
-  );
-}