plane/apps/app/components/workspace/completed-issues-graph.tsx

82 lines
2.3 KiB
TypeScript
Raw Normal View History

// recharts
import {
CartesianGrid,
Line,
LineChart,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from "recharts";
// ui
import { CustomMenu } from "components/ui";
// constants
import { MONTHS } from "constants/project";
type Props = {
issues:
| {
week_in_month: number;
completed_count: number;
}[]
| undefined;
month: number;
setMonth: React.Dispatch<React.SetStateAction<number>>;
};
export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth }) => {
const weeks = month === 2 ? 4 : 5;
const data: any[] = [];
for (let i = 1; i <= weeks; i++) {
data.push({
week_in_month: i,
completed_count: issues?.find((item) => item.week_in_month === i)?.completed_count ?? 0,
});
}
const CustomTooltip = ({ payload, label }: any) => (
<div className="space-y-1 rounded bg-white p-3 text-sm shadow-md">
<h4 className="text-gray-500">{label}</h4>
<h5>Completed issues: {payload[0]?.value}</h5>
</div>
);
return (
<div>
<div className="mb-0.5 flex justify-between">
<h3 className="font-semibold">Issues closed by you</h3>
<CustomMenu label={<span className="text-sm">{MONTHS[month - 1]}</span>} noBorder>
{MONTHS.map((month, index) => (
<CustomMenu.MenuItem key={month} onClick={() => setMonth(index + 1)}>
{month}
</CustomMenu.MenuItem>
))}
</CustomMenu>
</div>
<div className="rounded-[10px] border bg-white p-8 pl-4">
<ResponsiveContainer width="100%" height={250}>
<LineChart data={data}>
<CartesianGrid stroke="#e2e2e2" />
<XAxis dataKey="week_in_month" />
<YAxis dataKey="completed_count" allowDecimals={false} />
<Tooltip content={<CustomTooltip />} />
<Line
type="monotone"
dataKey="completed_count"
stroke="#d687ff"
strokeWidth={3}
fill="#8e2de2"
/>
</LineChart>
</ResponsiveContainer>
<h4 className="mt-4 flex items-center justify-center gap-2 text-[#d687ff]">
<span className="h-2 w-2 bg-[#d687ff]" />
Completed Issues
</h4>
</div>
</div>
);
};