fix: workspace dashboard (#522)

* chore: completed issues graph

* style: issue stats

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<React.SetStateAction<number>>;
 };
 
-export const CompletedIssuesGraph: React.FC<Props> = ({ 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<Props> = ({ 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) => (
+    <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]}</span>} noBorder>
+        <CustomMenu label={<span className="text-sm">{MONTHS[month - 1]}</span>} noBorder>
           {MONTHS.map((month, index) => (
-            <CustomMenu.MenuItem key={month} onClick={() => setMonth(index)}>
+            <CustomMenu.MenuItem key={month} onClick={() => setMonth(index + 1)}>
               {month}
             </CustomMenu.MenuItem>
           ))}
@@ -60,19 +59,22 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ issues }) => {
         <ResponsiveContainer width="100%" height={250}>
           <LineChart data={data}>
             <CartesianGrid stroke="#e2e2e2" />
-            <XAxis dataKey="name" />
-            <YAxis dataKey="completedIssues" />
-            <Tooltip />
-            <Legend />
+            <XAxis dataKey="week_in_month" />
+            <YAxis dataKey="completed_count" />
+            <Tooltip content={<CustomTooltip />} />
             <Line
               type="monotone"
-              dataKey="completedIssues"
+              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>
   );

apps/app/components/workspace/issues-pie-chart.tsx

@@ -102,7 +102,19 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => {
                 />
               ))}
             </Pie>
-            <Legend layout="vertical" verticalAlign="middle" align="right" height={36} />
+            <Legend
+              layout="vertical"
+              verticalAlign="middle"
+              align="right"
+              height={36}
+              payload={[
+                { value: "Backlog", type: "square", color: STATE_GROUP_COLORS.backlog },
+                { value: "Unstarted", type: "square", color: STATE_GROUP_COLORS.unstarted },
+                { value: "Started", type: "square", color: STATE_GROUP_COLORS.started },
+                { value: "Completed", type: "square", color: STATE_GROUP_COLORS.completed },
+                { value: "Cancelled", type: "square", color: STATE_GROUP_COLORS.cancelled },
+              ]}
+            />
           </PieChart>
         </ResponsiveContainer>
       </div>

apps/app/components/workspace/issues-stats.tsx

@@ -12,54 +12,58 @@ type Props = {
 
 export const IssuesStats: React.FC<Props> = ({ data }) => (
   <div className="grid grid-cols-1 rounded-[10px] border bg-white lg:grid-cols-3">
-    <div className="grid grid-cols-2 gap-4 border-b p-4 lg:border-r lg:border-b-0">
-      <div className="pb-4">
-        <h4>Issues assigned to you</h4>
-        <h5 className="mt-2 text-2xl font-semibold">
-          {data ? (
-            data.assigned_issues_count
-          ) : (
-            <Loader>
-              <Loader.Item height="25px" width="50%" />
-            </Loader>
-          )}
-        </h5>
+    <div className="grid grid-cols-1 divide-y border-b lg:border-r lg:border-b-0">
+      <div className="flex">
+        <div className="basis-1/2 p-4">
+          <h4 className="text-sm">Issues assigned to you</h4>
+          <h5 className="mt-2 text-2xl font-semibold">
+            {data ? (
+              data.assigned_issues_count
+            ) : (
+              <Loader>
+                <Loader.Item height="25px" width="50%" />
+              </Loader>
+            )}
+          </h5>
+        </div>
+        <div className="basis-1/2 border-l p-4">
+          <h4 className="text-sm">Pending issues</h4>
+          <h5 className="mt-2 text-2xl font-semibold">
+            {data ? (
+              data.pending_issues_count
+            ) : (
+              <Loader>
+                <Loader.Item height="25px" width="50%" />
+              </Loader>
+            )}
+          </h5>
+        </div>
       </div>
-      <div className="pb-4">
-        <h4>Pending issues</h4>
-        <h5 className="mt-2 text-2xl font-semibold">
-          {data ? (
-            data.pending_issues_count
-          ) : (
-            <Loader>
-              <Loader.Item height="25px" width="50%" />
-            </Loader>
-          )}
-        </h5>
-      </div>
-      <div className="pb-4">
-        <h4>Completed issues</h4>
-        <h5 className="mt-2 text-2xl font-semibold">
-          {data ? (
-            data.completed_issues_count
-          ) : (
-            <Loader>
-              <Loader.Item height="25px" width="50%" />
-            </Loader>
-          )}
-        </h5>
-      </div>
-      <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 className="flex">
+        <div className="basis-1/2 p-4">
+          <h4 className="text-sm">Completed issues</h4>
+          <h5 className="mt-2 text-2xl font-semibold">
+            {data ? (
+              data.completed_issues_count
+            ) : (
+              <Loader>
+                <Loader.Item height="25px" width="50%" />
+              </Loader>
+            )}
+          </h5>
+        </div>
+        <div className="basis-1/2 border-l p-4">
+          <h4 className="text-sm">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">

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 (
     <AppLayout noHeader={true}>
       <div className="h-full w-full">
@@ -63,7 +65,11 @@ const WorkspacePage: NextPage = () => {
             <IssuesList issues={workspaceDashboardData?.overdue_issues} type="overdue" />
             <IssuesList issues={workspaceDashboardData?.upcoming_issues} type="upcoming" />
             <IssuesPieChart groupedIssues={workspaceDashboardData?.state_distribution} />
-            <CompletedIssuesGraph issues={myIssues} />
+            <CompletedIssuesGraph
+              issues={workspaceDashboardData?.completed_issues}
+              month={month}
+              setMonth={setMonth}
+            />
           </div>
         </div>
       </div>

apps/app/services/user.service.ts

@@ -58,8 +58,15 @@ class UserService extends APIService {
       });
   }
 
-  async userWorkspaceDashboard(workspaceSlug: string): Promise<IUserWorkspaceDashboard> {
-    return this.get(`/api/users/me/workspaces/${workspaceSlug}/dashboard/`)
+  async userWorkspaceDashboard(
+    workspaceSlug: string,
+    month: number
+  ): Promise<IUserWorkspaceDashboard> {
+    return this.get(`/api/users/me/workspaces/${workspaceSlug}/dashboard/`, {
+      params: {
+        month: month,
+      },
+    })
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;

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[];