forked from github/plane
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
|
import { FC } from "react";
|
||
|
|
// types
|
||
|
|
import { ICycle } from "@plane/types";
|
||
|
|
// components
|
||
|
|
import ProgressChart from "@/components/core/sidebar/progress-chart";
|
||
|
|
|
||
|
|
export type ActiveCycleProductivityProps = {
|
||
|
|
cycle: ICycle;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = (props) => {
|
||
|
|
const { cycle } = props;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col justify-center min-h-[17rem] gap-5 py-4 px-3.5 border border-custom-border-200 rounded-lg">
|
||
|
|
<div className="flex items-center justify-between gap-4">
|
||
|
|
<h3 className="text-base text-custom-text-300 font-semibold">Issue burndown</h3>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="h-full w-full px-2">
|
||
|
|
<div className="flex items-center justify-between gap-4 py-1 text-xs text-custom-text-300">
|
||
|
|
<div className="flex items-center gap-3 text-custom-text-300">
|
||
|
|
<div className="flex items-center justify-center gap-1">
|
||
|
|
<span className="h-2 w-2 rounded-full bg-[#A9BBD0]" />
|
||
|
|
<span>Ideal</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center justify-center gap-1">
|
||
|
|
<span className="h-2 w-2 rounded-full bg-[#4C8FFF]" />
|
||
|
|
<span>Current</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span>{`Pending issues - ${cycle.backlog_issues + cycle.unstarted_issues + cycle.started_issues}`}</span>
|
||
|
|
</div>
|
||
|
|
<div className="relative h-full">
|
||
|
|
<ProgressChart
|
||
|
|
className="h-full"
|
||
|
|
distribution={cycle.distribution?.completion_chart ?? {}}
|
||
|
|
startDate={cycle.start_date ?? ""}
|
||
|
|
endDate={cycle.end_date ?? ""}
|
||
|
|
totalIssues={cycle.total_issues}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|