From 02f423bcb68632b51699dac1d2738c4e3a59435f Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Fri, 24 Mar 2023 11:06:52 +0530 Subject: [PATCH] fix: workspace dashboard (#522) * chore: completed issues graph * style: issue stats --- .../workspace/completed-issues-graph.tsx | 62 ++++++------ .../components/workspace/issues-pie-chart.tsx | 14 ++- .../app/components/workspace/issues-stats.tsx | 98 ++++++++++--------- apps/app/pages/[workspaceSlug]/index.tsx | 22 +++-- apps/app/services/user.service.ts | 11 ++- apps/app/types/users.d.ts | 4 + 6 files changed, 123 insertions(+), 88 deletions(-) diff --git a/apps/app/components/workspace/completed-issues-graph.tsx b/apps/app/components/workspace/completed-issues-graph.tsx index 2a2b132cc..4eaf7685d 100644 --- a/apps/app/components/workspace/completed-issues-graph.tsx +++ b/apps/app/components/workspace/completed-issues-graph.tsx @@ -1,9 +1,6 @@ -import { useState } from "react"; - // recharts import { CartesianGrid, - Legend, Line, LineChart, ResponsiveContainer, @@ -13,44 +10,46 @@ import { } from "recharts"; // ui import { CustomMenu } from "components/ui"; -// types -import { IIssue } from "types"; // constants import { MONTHS } from "constants/project"; type Props = { - issues: IIssue[] | undefined; + issues: + | { + week_in_month: number; + completed_count: number; + }[] + | undefined; + month: number; + setMonth: React.Dispatch>; }; -export const CompletedIssuesGraph: React.FC = ({ issues }) => { - const [month, setMonth] = useState(new Date().getMonth()); - - const weeks = month === 1 ? 4 : 5; - - const monthIssues = - issues?.filter( - (i) => - new Date(i.created_at).getMonth() === month && - new Date(i.created_at).getFullYear() === new Date().getFullYear() - ) ?? []; +export const CompletedIssuesGraph: React.FC = ({ month, issues, setMonth }) => { + const weeks = month === 2 ? 4 : 5; const data: any[] = []; - for (let j = 1; j <= weeks; j++) { - const weekIssues = monthIssues.filter( - (i) => i.completed_at && Math.ceil(new Date(i.completed_at).getDate() / 7) === j - ); - - data.push({ name: `Week ${j}`, completedIssues: weekIssues.length }); + 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) => ( +
+

{label}

+
Completed issues: {payload[0]?.value}
+
+ ); + return (

Issues closed by you

- {MONTHS[month]}} noBorder> + {MONTHS[month - 1]}} noBorder> {MONTHS.map((month, index) => ( - setMonth(index)}> + setMonth(index + 1)}> {month} ))} @@ -60,19 +59,22 @@ export const CompletedIssuesGraph: React.FC = ({ issues }) => { - - - - + + + } /> +

+ + Completed Issues +

); diff --git a/apps/app/components/workspace/issues-pie-chart.tsx b/apps/app/components/workspace/issues-pie-chart.tsx index fa2935990..951e5a350 100644 --- a/apps/app/components/workspace/issues-pie-chart.tsx +++ b/apps/app/components/workspace/issues-pie-chart.tsx @@ -102,7 +102,19 @@ export const IssuesPieChart: React.FC = ({ groupedIssues }) => { /> ))} - + diff --git a/apps/app/components/workspace/issues-stats.tsx b/apps/app/components/workspace/issues-stats.tsx index 759f4c550..18b9b808b 100644 --- a/apps/app/components/workspace/issues-stats.tsx +++ b/apps/app/components/workspace/issues-stats.tsx @@ -12,54 +12,58 @@ type Props = { export const IssuesStats: React.FC = ({ data }) => (
-
-
-

Issues assigned to you

-
- {data ? ( - data.assigned_issues_count - ) : ( - - - - )} -
+
+
+
+

Issues assigned to you

+
+ {data ? ( + data.assigned_issues_count + ) : ( + + + + )} +
+
+
+

Pending issues

+
+ {data ? ( + data.pending_issues_count + ) : ( + + + + )} +
+
-
-

Pending issues

-
- {data ? ( - data.pending_issues_count - ) : ( - - - - )} -
-
-
-

Completed issues

-
- {data ? ( - data.completed_issues_count - ) : ( - - - - )} -
-
-
-

Issues due by this week

-
- {data ? ( - data.issues_due_week_count - ) : ( - - - - )} -
+
+
+

Completed issues

+
+ {data ? ( + data.completed_issues_count + ) : ( + + + + )} +
+
+
+

Issues due by this week

+
+ {data ? ( + data.issues_due_week_count + ) : ( + + + + )} +
+
diff --git a/apps/app/pages/[workspaceSlug]/index.tsx b/apps/app/pages/[workspaceSlug]/index.tsx index 6d600ef8f..3a5006219 100644 --- a/apps/app/pages/[workspaceSlug]/index.tsx +++ b/apps/app/pages/[workspaceSlug]/index.tsx @@ -1,8 +1,8 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; -import useSWR from "swr"; +import useSWR, { mutate } from "swr"; // lib import { requiredAuth } from "lib/auth"; @@ -10,8 +10,6 @@ import { requiredAuth } from "lib/auth"; import AppLayout from "layouts/app-layout"; // services import userService from "services/user.service"; -// hooks -import useIssues from "hooks/use-issues"; // components import { CompletedIssuesGraph, @@ -25,16 +23,20 @@ import type { NextPage, GetServerSidePropsContext } from "next"; import { USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys"; const WorkspacePage: NextPage = () => { + const [month, setMonth] = useState(new Date().getMonth() + 1); + const router = useRouter(); const { workspaceSlug } = router.query; - const { myIssues } = useIssues(workspaceSlug as string); - const { data: workspaceDashboardData } = useSWR( workspaceSlug ? USER_WORKSPACE_DASHBOARD(workspaceSlug as string) : null, - workspaceSlug ? () => userService.userWorkspaceDashboard(workspaceSlug as string) : null + workspaceSlug ? () => userService.userWorkspaceDashboard(workspaceSlug as string, month) : null ); + useEffect(() => { + mutate(USER_WORKSPACE_DASHBOARD(workspaceSlug as string)); + }, [month, workspaceSlug]); + return (
@@ -63,7 +65,11 @@ const WorkspacePage: NextPage = () => { - +
diff --git a/apps/app/services/user.service.ts b/apps/app/services/user.service.ts index 4e92e42e7..d958d8671 100644 --- a/apps/app/services/user.service.ts +++ b/apps/app/services/user.service.ts @@ -58,8 +58,15 @@ class UserService extends APIService { }); } - async userWorkspaceDashboard(workspaceSlug: string): Promise { - return this.get(`/api/users/me/workspaces/${workspaceSlug}/dashboard/`) + async userWorkspaceDashboard( + workspaceSlug: string, + month: number + ): Promise { + return this.get(`/api/users/me/workspaces/${workspaceSlug}/dashboard/`, { + params: { + month: month, + }, + }) .then((response) => response?.data) .catch((error) => { throw error?.response?.data; diff --git a/apps/app/types/users.d.ts b/apps/app/types/users.d.ts index 61859c369..1758a9ce2 100644 --- a/apps/app/types/users.d.ts +++ b/apps/app/types/users.d.ts @@ -52,6 +52,10 @@ export interface IUserWorkspaceDashboard { issue_activities: IUserActivity[]; issues_due_week_count: number; overdue_issues: IIssueLite[]; + completed_issues: { + week_in_month: number; + completed_count: number; + }[]; pending_issues_count: number; state_distribution: IUserStateDistribution[]; upcoming_issues: IIssueLite[];