forked from github/plane
5a32d10f96
* chore: replaced marimekko graph with a bar graph * chore: add bar onClick handler * chore: custom date filter for widgets * style: priority graph * chore: workspace profile activity pagination * chore: profile activity pagination * chore: user profile activity pagination * chore: workspace user activity csv download * chore: download activity button added * chore: workspace user pagination * chore: collabrator pagination * chore: field change * chore: recent collaborators pagination * chore: changed the collabrators * chore: collabrators list changed * fix: distinct users * chore: search filter in collaborators * fix: import error * chore: update priority graph x-axis values * chore: admin and member request validation * chore: update csv download request method * chore: search implementation for the collaborators widget * refactor: priority distribution card * chore: add enum for duration filters * chore: update inbox types * chore: add todos for refactoring --------- Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
// types
|
|
import { IUserStateDistribution } from "@plane/types";
|
|
// constants
|
|
import { STATE_GROUPS } from "constants/state";
|
|
|
|
type Props = {
|
|
stateDistribution: IUserStateDistribution[];
|
|
};
|
|
|
|
export const ProfileWorkload: React.FC<Props> = ({ stateDistribution }) => (
|
|
<div className="space-y-2">
|
|
<h3 className="text-lg font-medium">Workload</h3>
|
|
<div className="grid grid-cols-1 justify-stretch gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
|
|
{stateDistribution.map((group) => (
|
|
<div key={group.state_group}>
|
|
<a className="flex gap-2 whitespace-nowrap rounded border border-custom-border-100 p-4">
|
|
<div
|
|
className="h-3 w-3 rounded-sm"
|
|
style={{
|
|
backgroundColor: STATE_GROUPS[group.state_group].color,
|
|
}}
|
|
/>
|
|
<div className="-mt-1 space-y-1">
|
|
<p className="text-sm text-custom-text-400">
|
|
{group.state_group === "unstarted"
|
|
? "Not started"
|
|
: group.state_group === "started"
|
|
? "Working on"
|
|
: STATE_GROUPS[group.state_group].label}
|
|
</p>
|
|
<p className="text-xl font-semibold">{group.state_count}</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|