56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import { useState } from "react";
|
|
import dynamic from "next/dynamic";
|
|
import { Button, Tooltip } from "@nextui-org/react";
|
|
import { RotateCw } from "lucide-react";
|
|
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" },
|
|
];
|
|
|
|
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 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>
|
|
);
|
|
}
|