thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: new workspace endpoint (#504)

Browse Source 
* chore: new workspace dashboard endpoint

* chore: overdue and upcoming issues
This commit is contained in:
Aaryan Khandelwal 2023-03-23 15:54:59 +05:30 committed by GitHub
parent ad2fa91a2b
commit c755907d99
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 134 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/app/components/workspace/activity-graph.tsx
View File

@ -1,33 +1,23 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import userService from "services/user.service";
// ui // ui
import { Tooltip } from "components/ui"; import { Tooltip } from "components/ui";
// helpers // helpers
import { renderDateFormat, renderShortNumericDateFormat } from "helpers/date-time.helper"; import { renderDateFormat, renderShortNumericDateFormat } from "helpers/date-time.helper";
// fetch-keys // types
import { USER_ACTIVITY } from "constants/fetch-keys"; import { IUserActivity } from "types";
// constants // constants
import { DAYS, MONTHS } from "constants/project"; import { DAYS, MONTHS } from "constants/project";
export const ActivityGraph = () => { type Props = {
activities: IUserActivity[] | undefined;
};
export const ActivityGraph: React.FC<Props> = ({ activities }) => {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const [width, setWidth] = useState(0); const [width, setWidth] = useState(0);
const router = useRouter();
const { workspaceSlug } = router.query;
const { data: userActivity } = useSWR(
workspaceSlug ? USER_ACTIVITY(workspaceSlug as string) : null,
workspaceSlug ? () => userService.userActivity(workspaceSlug as string) : null
);
const today = new Date(); const today = new Date();
const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1); const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
const twoMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 2, 1); const twoMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 2, 1);
@ -112,7 +102,7 @@ export const ActivityGraph = () => {
ref={ref} ref={ref}
> >
{recentDates.map((date) => { {recentDates.map((date) => {
const isActive = userActivity?.find((a) => a.created_date === date); const isActive = activities?.find((a) => a.created_date === date);
return ( return (
<Tooltip <Tooltip

6
apps/app/components/workspace/issues-list.tsx
View File

@ -7,12 +7,12 @@ import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
import { truncateText } from "helpers/string.helper"; import { truncateText } from "helpers/string.helper";
// types // types
import { IIssue } from "types"; import { IIssueLite } from "types";
import { Loader } from "components/ui"; import { Loader } from "components/ui";
import { LayerDiagonalIcon } from "components/icons"; import { LayerDiagonalIcon } from "components/icons";
type Props = { type Props = {
issues: IIssue[] | undefined; issues: IIssueLite[] | undefined;
type: "overdue" | "upcoming"; type: "overdue" | "upcoming";
}; };
@ -53,7 +53,7 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
return ( return (
<Link <Link
href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`} href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
key={issue.id} key={issue.id}
> >
<a> <a>

57
apps/app/components/workspace/issues-pie-chart.tsx
View File

@ -2,52 +2,18 @@ import { useCallback, useState } from "react";
// recharts // recharts
import { Cell, Legend, Pie, PieChart, ResponsiveContainer, Sector } from "recharts"; import { Cell, Legend, Pie, PieChart, ResponsiveContainer, Sector } from "recharts";
// helpers
import { groupBy } from "helpers/array.helper";
// types // types
import { IIssue } from "types"; import { IUserStateDistribution } from "types";
// constants // constants
import { STATE_GROUP_COLORS } from "constants/state"; import { STATE_GROUP_COLORS } from "constants/state";
type Props = { type Props = {
issues: IIssue[] | undefined; groupedIssues: IUserStateDistribution[] | undefined;
}; };
export const IssuesPieChart: React.FC<Props> = ({ issues }) => { export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => {
const [activeIndex, setActiveIndex] = useState(0); const [activeIndex, setActiveIndex] = useState(0);
const groupedIssues = {
backlog: [],
unstarted: [],
started: [],
cancelled: [],
completed: [],
...groupBy(issues ?? [], "state_detail.group"),
};
const data = [
{
name: "Backlog",
value: groupedIssues.backlog.length,
},
{
name: "Unstarted",
value: groupedIssues.unstarted.length,
},
{
name: "Started",
value: groupedIssues.started.length,
},
{
name: "Cancelled",
value: groupedIssues.cancelled.length,
},
{
name: "Completed",
value: groupedIssues.completed.length,
},
];
const onPieEnter = useCallback( const onPieEnter = useCallback(
(_: any, index: number) => { (_: any, index: number) => {
setActiveIndex(index); setActiveIndex(index);
@ -80,8 +46,8 @@ export const IssuesPieChart: React.FC<Props> = ({ issues }) => {
return ( return (
<g> <g>
<text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}> <text x={cx} y={cy} dy={8} className="capitalize" textAnchor="middle" fill={fill}>
{payload.name} {payload.state_group}
</text> </text>
<Sector <Sector
cx={cx} cx={cx}
@ -117,9 +83,9 @@ export const IssuesPieChart: React.FC<Props> = ({ issues }) => {
<ResponsiveContainer width="100%" height={250}> <ResponsiveContainer width="100%" height={250}>
<PieChart> <PieChart>
<Pie <Pie
data={data} data={groupedIssues}
dataKey="value" dataKey="state_count"
nameKey="name" nameKey="state_group"
cx="50%" cx="50%"
cy="50%" cy="50%"
fill="#8884d8" fill="#8884d8"
@ -129,8 +95,11 @@ export const IssuesPieChart: React.FC<Props> = ({ issues }) => {
activeShape={renderActiveShape} activeShape={renderActiveShape}
onMouseEnter={onPieEnter} onMouseEnter={onPieEnter}
> >
{data.map((cell: any) => ( {groupedIssues?.map((cell) => (
<Cell key={cell.name} fill={STATE_GROUP_COLORS[cell.name.toLowerCase()]} /> <Cell
key={cell.state_group}
fill={STATE_GROUP_COLORS[cell.state_group.toLowerCase()]}
/>
))} ))}
</Pie> </Pie>
<Legend layout="vertical" verticalAlign="middle" align="right" height={36} /> <Legend layout="vertical" verticalAlign="middle" align="right" height={36} />

104
apps/app/components/workspace/issues-stats.tsx
View File

@ -1,54 +1,70 @@
// components // components
import { Loader } from "components/ui";
import { ActivityGraph } from "components/workspace"; import { ActivityGraph } from "components/workspace";
// helpers // helpers
import { groupBy } from "helpers/array.helper"; import { groupBy } from "helpers/array.helper";
// types // types
import { IIssue } from "types"; import { IUserWorkspaceDashboard } from "types";
type Props = { type Props = {
issues: IIssue[] | undefined; data: IUserWorkspaceDashboard | undefined;
}; };
export const IssuesStats: React.FC<Props> = ({ issues }) => { export const IssuesStats: React.FC<Props> = ({ data }) => (
const groupedIssues = { <div className="grid grid-cols-1 rounded-[10px] border bg-white lg:grid-cols-3">
backlog: [], <div className="grid grid-cols-2 gap-4 border-b p-4 lg:border-r lg:border-b-0">
unstarted: [], <div className="pb-4">
started: [], <h4>Issues assigned to you</h4>
cancelled: [], <h5 className="mt-2 text-2xl font-semibold">
completed: [], {data ? (
...groupBy(issues ?? [], "state_detail.group"), data.assigned_issues_count
}; ) : (
<Loader>
return ( <Loader.Item height="25px" width="50%" />
<div className="grid grid-cols-1 rounded-[10px] border bg-white lg:grid-cols-3"> </Loader>
{issues ? ( )}
<> </h5>
<div className="grid grid-cols-2 gap-4 border-b p-4 lg:border-r lg:border-b-0"> </div>
<div className="pb-4"> <div className="pb-4">
<h4>Issues assigned to you</h4> <h4>Pending issues</h4>
<h5 className="mt-2 text-2xl font-semibold">{issues.length}</h5> <h5 className="mt-2 text-2xl font-semibold">
</div> {data ? (
<div className="pb-4"> data.pending_issues_count
<h4>Pending issues</h4> ) : (
<h5 className="mt-2 text-2xl font-semibold"> <Loader>
{issues.length - groupedIssues.completed.length} <Loader.Item height="25px" width="50%" />
</h5> </Loader>
</div> )}
<div className="pb-4"> </h5>
<h4>Completed issues</h4> </div>
<h5 className="mt-2 text-2xl font-semibold">{groupedIssues.completed.length}</h5> <div className="pb-4">
</div> <h4>Completed issues</h4>
<div className="pb-4"> <h5 className="mt-2 text-2xl font-semibold">
<h4>Issues due by this week</h4> {data ? (
<h5 className="mt-2 text-2xl font-semibold">24</h5> data.completed_issues_count
</div> ) : (
</div> <Loader>
<div className="p-4 lg:col-span-2"> <Loader.Item height="25px" width="50%" />
<h3 className="mb-2 font-semibold capitalize">Activity Graph</h3> </Loader>
<ActivityGraph /> )}
</div> </h5>
</> </div>
) : null} <div className="pb-4">
<h4>Issues due by this week</h4>
<h5 className="mt-2 text-2xl font-semibold">
{data ? (
data.issues_due_week_count
) : (
<Loader>
<Loader.Item height="25px" width="50%" />
</Loader>
)}
</h5>
</div>
</div> </div>
); <div className="p-4 lg:col-span-2">
}; <h3 className="mb-2 font-semibold capitalize">Activity Graph</h3>
<ActivityGraph activities={data?.issue_activities} />
</div>
</div>
);

2
apps/app/constants/fetch-keys.ts
View File

@ -79,6 +79,8 @@ export const STATE_DETAIL = "STATE_DETAILS";
export const USER_ISSUE = (workspaceSlug: string) => `USER_ISSUE_${workspaceSlug}`; export const USER_ISSUE = (workspaceSlug: string) => `USER_ISSUE_${workspaceSlug}`;
export const USER_ACTIVITY = (workspaceSlug: string) => `USER_ACTIVITY_${workspaceSlug}`; export const USER_ACTIVITY = (workspaceSlug: string) => `USER_ACTIVITY_${workspaceSlug}`;
export const USER_WORKSPACE_DASHBOARD = (workspaceSlug: string) =>
`USER_WORKSPACE_DASHBOARD_${workspaceSlug}`;
export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${projectId}`; export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${projectId}`;
export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId}`; export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId}`;

36
apps/app/pages/[workspaceSlug]/index.tsx
View File

@ -2,10 +2,14 @@ import React from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR from "swr";
// lib // lib
import { requiredAuth } from "lib/auth"; import { requiredAuth } from "lib/auth";
// layouts // layouts
import AppLayout from "layouts/app-layout"; import AppLayout from "layouts/app-layout";
// services
import userService from "services/user.service";
// hooks // hooks
import useIssues from "hooks/use-issues"; import useIssues from "hooks/use-issues";
// components // components
@ -15,10 +19,10 @@ import {
IssuesPieChart, IssuesPieChart,
IssuesStats, IssuesStats,
} from "components/workspace"; } from "components/workspace";
// helpers
import { orderArrayBy } from "helpers/array.helper";
// types // types
import type { NextPage, GetServerSidePropsContext } from "next"; import type { NextPage, GetServerSidePropsContext } from "next";
// fetch-keys
import { USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys";
const WorkspacePage: NextPage = () => { const WorkspacePage: NextPage = () => {
const router = useRouter(); const router = useRouter();
@ -26,23 +30,9 @@ const WorkspacePage: NextPage = () => {
const { myIssues } = useIssues(workspaceSlug as string); const { myIssues } = useIssues(workspaceSlug as string);
const overdueIssues = orderArrayBy( const { data: workspaceDashboardData } = useSWR(
myIssues?.filter( workspaceSlug ? USER_WORKSPACE_DASHBOARD(workspaceSlug as string) : null,
(i) => workspaceSlug ? () => userService.userWorkspaceDashboard(workspaceSlug as string) : null
i.target_date &&
i.target_date !== "" &&
!i.completed_at &&
new Date(i.target_date) < new Date()
) ?? [],
"target_date",
"descending"
);
const incomingIssues = orderArrayBy(
myIssues?.filter(
(i) => i.target_date && i.target_date !== "" && new Date(i.target_date) > new Date()
) ?? [],
"target_date"
); );
return ( return (
@ -68,11 +58,11 @@ const WorkspacePage: NextPage = () => {
</a> </a>
</div> </div>
</div> </div>
<IssuesStats issues={myIssues} /> <IssuesStats data={workspaceDashboardData} />
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2"> <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
<IssuesList issues={overdueIssues} type="overdue" /> <IssuesList issues={workspaceDashboardData?.overdue_issues} type="overdue" />
<IssuesList issues={incomingIssues} type="upcoming" /> <IssuesList issues={workspaceDashboardData?.upcoming_issues} type="upcoming" />
<IssuesPieChart issues={myIssues} /> <IssuesPieChart groupedIssues={workspaceDashboardData?.state_distribution} />
<CompletedIssuesGraph issues={myIssues} /> <CompletedIssuesGraph issues={myIssues} />
</div> </div>
</div> </div>

10
apps/app/services/user.service.ts
View File

@ -1,6 +1,6 @@
// services // services
import APIService from "services/api.service"; import APIService from "services/api.service";
import type { IUser, IUserActivity } from "types"; import type { IUser, IUserActivity, IUserWorkspaceDashboard } from "types";
const { NEXT_PUBLIC_API_BASE_URL } = process.env; const { NEXT_PUBLIC_API_BASE_URL } = process.env;
@ -57,6 +57,14 @@ class UserService extends APIService {
throw error?.response?.data; throw error?.response?.data;
}); });
} }
async userWorkspaceDashboard(workspaceSlug: string): Promise<IUserWorkspaceDashboard> {
return this.get(`/api/users/me/workspaces/${workspaceSlug}/dashboard/`)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
} }
export default new UserService(); export default new UserService();

9
apps/app/types/issues.d.ts vendored
View File

@ -150,6 +150,7 @@ export interface IIssueComment {
workspace: string; workspace: string;
issue: string; issue: string;
} }
export type IssuePriorities = { export type IssuePriorities = {
id: string; id: string;
created_at: Date; created_at: Date;
@ -207,6 +208,14 @@ export interface IIssueActivity {
actor: string; actor: string;
} }
export interface IIssueLite {
id: string;
name: string;
project_id: string;
target_date: string;
workspace__slug: string;
}
export interface IIssueFilterOptions { export interface IIssueFilterOptions {
type: "active" | "backlog" | null; type: "active" | "backlog" | null;
assignees: string[] | null; assignees: string[] | null;

18
apps/app/types/users.d.ts vendored
View File

@ -1,4 +1,4 @@
import { IIssue, IWorkspace, NestedKeyOf, Properties } from "./"; import { IIssue, IIssueLite, IWorkspace, NestedKeyOf, Properties } from "./";
export interface IUser { export interface IUser {
id: readonly string; id: readonly string;
@ -41,6 +41,22 @@ export interface IUserActivity {
activity_count: number; activity_count: number;
} }
export interface IUserStateDistribution {
state_group: string;
state_count: number;
}
export interface IUserWorkspaceDashboard {
assigned_issues_count: number;
completed_issues_count: number;
issue_activities: IUserActivity[];
issues_due_week_count: number;
overdue_issues: IIssueLite[];
pending_issues_count: number;
state_distribution: IUserStateDistribution[];
upcoming_issues: IIssueLite[];
}
export type UserAuth = { export type UserAuth = {
isMember: boolean; isMember: boolean;
isOwner: boolean; isOwner: boolean;