Create progress stacked bar chart

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

@@ -26,6 +26,7 @@ import {
   CopyPlus,
   CopyMinus,
 } from "lucide-react";
+import RunProgressChart from "./RunProgressChart";
 import TestCaseSelector from "./TestCaseSelector";
 import { testRunStatus } from "@/config/selection";
 import { RunType, RunCaseType, RunCaseInfoType } from "@/types/run";
@@ -279,6 +280,9 @@ export default function RunEditor({ projectId, runId }: Props) {
           </Select>
         </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>

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

@@ -0,0 +1,79 @@
+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,
+        },
+      },
+    },
+  });
+  return (
+    <div>
+      <h1>Progress</h1>
+      <Chart
+        options={chartData.options}
+        series={chartData.series}
+        type="bar"
+        width={500}
+        height={100}
+      />
+    </div>
+  );
+}

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

@@ -78,7 +78,7 @@ export default function TestCaseSelector({
     } else if (uid === "failed") {
       return <CircleX size={16} color="#f31260" />;
     } else if (uid === "skipped") {
-      return <CircleSlash2 size={16} color="#d4d4d8" />;
+      return <CircleSlash2 size={16} color="#52525b" />;
     }
   };