yellowadmin/pp-tcms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create progress donut chart

Browse Source
This commit is contained in:
Takeshi Kimata
2024-04-27 15:14:35 +09:00
parent 5f9a7c0dc2
commit 17d4c6326d
3 changed files with 92 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

39
frontend/app/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx Normal file
View File

@@ -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>
);
}

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

@@ -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>
);
}