mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
4c2cb2368a
* chore: store various shades of accent color * refactor: custom theme selector * refactor: custom theme selector * chore: update custom theme input labels * fix: color generator function logic * fix: accent color preloaded data * chore: new theming structure * chore: update shades calculation logic * refactor: variable names * chore: update color scheming * chore: new color scheming * refactor: themes folder structure * chore: update classnames to the new ones * chore: update static colors * chore: sidebar link colors * chore: placeholder color * chore: update border classnames
85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
// ui
|
|
import { CustomMenu, LineGraph } 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: `Week ${i}`,
|
|
completed_count: issues?.find((item) => item.week_in_month === i)?.completed_count ?? 0,
|
|
});
|
|
}
|
|
|
|
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 border-custom-border-100 bg-custom-background-100 p-8 pl-4">
|
|
{data.every((item) => item.completed_count === 0) ? (
|
|
<div className="flex items-center justify-center h-72">
|
|
<h4 className="text-[#d687ff]">No issues closed this month</h4>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<LineGraph
|
|
height="250px"
|
|
data={[
|
|
{
|
|
id: "completed_issues",
|
|
color: "#d687ff",
|
|
data: data.map((item) => ({
|
|
x: item.week_in_month,
|
|
y: item.completed_count,
|
|
})),
|
|
},
|
|
]}
|
|
margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
|
|
customYAxisTickValues={data.map((item) => item.completed_count)}
|
|
colors={(datum) => datum.color}
|
|
enableSlices="x"
|
|
sliceTooltip={(datum) => (
|
|
<div className="rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
|
|
{datum.slice.points[0].data.yFormatted}
|
|
<span className="text-custom-text-200"> issues closed in </span>
|
|
{datum.slice.points[0].data.xFormatted}
|
|
</div>
|
|
)}
|
|
theme={{
|
|
background: "rgb(var(--color-background-100))",
|
|
}}
|
|
/>
|
|
<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>
|
|
);
|
|
};
|