forked from github/plane
124 lines
3.7 KiB
TypeScript
124 lines
3.7 KiB
TypeScript
import { useCallback, useState } from "react";
|
|
|
|
// recharts
|
|
import { Cell, Legend, Pie, PieChart, ResponsiveContainer, Sector } from "recharts";
|
|
// types
|
|
import { IUserStateDistribution } from "types";
|
|
// constants
|
|
import { STATE_GROUP_COLORS } from "constants/state";
|
|
|
|
type Props = {
|
|
groupedIssues: IUserStateDistribution[] | undefined;
|
|
};
|
|
|
|
export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => {
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
|
|
const onPieEnter = useCallback(
|
|
(_: any, index: number) => {
|
|
setActiveIndex(index);
|
|
},
|
|
[setActiveIndex]
|
|
);
|
|
|
|
const renderActiveShape = ({
|
|
cx,
|
|
cy,
|
|
midAngle,
|
|
innerRadius,
|
|
outerRadius,
|
|
startAngle,
|
|
endAngle,
|
|
fill,
|
|
payload,
|
|
value,
|
|
}: any) => {
|
|
const RADIAN = Math.PI / 180;
|
|
const sin = Math.sin(-RADIAN * midAngle);
|
|
const cos = Math.cos(-RADIAN * midAngle);
|
|
const sx = cx + (outerRadius + 10) * cos;
|
|
const sy = cy + (outerRadius + 10) * sin;
|
|
const mx = cx + (outerRadius + 30) * cos;
|
|
const my = cy + (outerRadius + 30) * sin;
|
|
const ex = mx + (cos >= 0 ? 1 : -1) * 22;
|
|
const ey = my;
|
|
const textAnchor = cos >= 0 ? "start" : "end";
|
|
|
|
return (
|
|
<g>
|
|
<text x={cx} y={cy} dy={8} className="capitalize" textAnchor="middle" fill={fill}>
|
|
{payload.state_group}
|
|
</text>
|
|
<Sector
|
|
cx={cx}
|
|
cy={cy}
|
|
innerRadius={innerRadius}
|
|
outerRadius={outerRadius}
|
|
startAngle={startAngle}
|
|
endAngle={endAngle}
|
|
fill={fill}
|
|
/>
|
|
<Sector
|
|
cx={cx}
|
|
cy={cy}
|
|
startAngle={startAngle}
|
|
endAngle={endAngle}
|
|
innerRadius={outerRadius + 6}
|
|
outerRadius={outerRadius + 10}
|
|
fill={fill}
|
|
/>
|
|
<path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
|
|
<circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
|
|
<text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#858e96">
|
|
{value} issues
|
|
</text>
|
|
</g>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<h3 className="mb-2 font-semibold">Issues by States</h3>
|
|
<div className="rounded-[10px] border border-brand-base bg-brand-base p-4">
|
|
<ResponsiveContainer width="100%" height={320}>
|
|
<PieChart>
|
|
<Pie
|
|
data={groupedIssues}
|
|
dataKey="state_count"
|
|
nameKey="state_group"
|
|
cx="50%"
|
|
cy="50%"
|
|
fill="#8884d8"
|
|
innerRadius={70}
|
|
outerRadius={90}
|
|
activeIndex={activeIndex}
|
|
activeShape={renderActiveShape}
|
|
onMouseEnter={onPieEnter}
|
|
>
|
|
{groupedIssues?.map((cell) => (
|
|
<Cell
|
|
key={cell.state_group}
|
|
fill={STATE_GROUP_COLORS[cell.state_group.toLowerCase()]}
|
|
/>
|
|
))}
|
|
</Pie>
|
|
<Legend
|
|
layout="vertical"
|
|
verticalAlign="middle"
|
|
align="right"
|
|
height={36}
|
|
payload={[
|
|
{ value: "Backlog", type: "square", color: STATE_GROUP_COLORS.backlog },
|
|
{ value: "Unstarted", type: "square", color: STATE_GROUP_COLORS.unstarted },
|
|
{ value: "Started", type: "square", color: STATE_GROUP_COLORS.started },
|
|
{ value: "Completed", type: "square", color: STATE_GROUP_COLORS.completed },
|
|
{ value: "Cancelled", type: "square", color: STATE_GROUP_COLORS.cancelled },
|
|
]}
|
|
/>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|