From 061d52727ea0517339fe1520bce709f753d27edf Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 15 May 2024 18:43:07 +0530
Subject: [PATCH] chore: project analytics improvement (#4457)

---
 .../analytics/scope-and-demand/demand.tsx     |  1 -
 .../scope-and-demand/scope-and-demand.tsx     | 10 ++++++-
 .../analytics/scope-and-demand/scope.tsx      | 30 +++++++++++--------
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/web/components/analytics/scope-and-demand/demand.tsx b/web/components/analytics/scope-and-demand/demand.tsx
index 20bc502ce..0100f8630 100644
--- a/web/components/analytics/scope-and-demand/demand.tsx
+++ b/web/components/analytics/scope-and-demand/demand.tsx
@@ -9,7 +9,6 @@ type Props = {
 
 export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
   <div className="space-y-3 rounded-[10px] border border-custom-border-200 p-3">
-    <h5 className="text-xs text-red-500">DEMAND</h5>
     <div>
       <h4 className="text-base font-medium text-custom-text-100">Total open tasks</h4>
       <h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
diff --git a/web/components/analytics/scope-and-demand/scope-and-demand.tsx b/web/components/analytics/scope-and-demand/scope-and-demand.tsx
index 3c5e3f48e..2e9756d67 100644
--- a/web/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/web/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -43,6 +43,11 @@ export const ScopeAndDemand: React.FC<Props> = (props) => {
     workspaceSlug ? () => analyticsService.getDefaultAnalytics(workspaceSlug.toString(), params) : null
   );
 
+  // scope data
+  const pendingIssues = defaultAnalytics?.pending_issue_user ?? [];
+  const pendingUnAssignedIssues = pendingIssues?.filter((issue) => issue.assignees__id === null);
+  const pendingAssignedIssues = pendingIssues?.filter((issue) => issue.assignees__id !== null);
+
   return (
     <>
       {!defaultAnalyticsError ? (
@@ -50,7 +55,10 @@ export const ScopeAndDemand: React.FC<Props> = (props) => {
           <div className="h-full overflow-y-auto p-5 text-sm vertical-scrollbar scrollbar-lg">
             <div className={`grid grid-cols-1 gap-5 ${fullScreen ? "md:grid-cols-2" : ""}`}>
               <AnalyticsDemand defaultAnalytics={defaultAnalytics} />
-              <AnalyticsScope defaultAnalytics={defaultAnalytics} />
+              <AnalyticsScope
+                pendingUnAssignedIssues={pendingUnAssignedIssues}
+                pendingAssignedIssues={pendingAssignedIssues}
+              />
               <AnalyticsLeaderBoard
                 users={defaultAnalytics.most_issue_created_user?.map((user) => ({
                   avatar: user?.created_by__avatar,
diff --git a/web/components/analytics/scope-and-demand/scope.tsx b/web/components/analytics/scope-and-demand/scope.tsx
index 527761e96..2b1796259 100644
--- a/web/components/analytics/scope-and-demand/scope.tsx
+++ b/web/components/analytics/scope-and-demand/scope.tsx
@@ -1,32 +1,36 @@
 // ui
-import { IDefaultAnalyticsResponse } from "@plane/types";
+import { IDefaultAnalyticsUser } from "@plane/types";
 import { BarGraph, ProfileEmptyState } from "@/components/ui";
 // image
 import emptyBarGraph from "public/empty-state/empty_bar_graph.svg";
 // types
 
 type Props = {
-  defaultAnalytics: IDefaultAnalyticsResponse;
+  pendingUnAssignedIssues: IDefaultAnalyticsUser[];
+  pendingAssignedIssues: IDefaultAnalyticsUser[];
 };
 
-export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="rounded-[10px] border border-custom-border-200">
-    <h5 className="p-3 text-xs text-green-500">SCOPE</h5>
+export const AnalyticsScope: React.FC<Props> = ({ pendingUnAssignedIssues, pendingAssignedIssues }) => (
+  <div className="rounded-[10px] border border-custom-border-200 p-3">
     <div className="divide-y divide-custom-border-200">
       <div>
-        <h6 className="px-3 text-base font-medium">Pending issues</h6>
-        {defaultAnalytics.pending_issue_user && defaultAnalytics.pending_issue_user.length > 0 ? (
+        <div className="flex items-center justify-between">
+          <h6 className=" text-base font-medium">Pending issues</h6>
+          <div className="relative flex items-center py-1 px-3 rounded-md gap-2  text-xs text-custom-primary-100  bg-custom-primary-100/10">
+            Unassigned: {pendingUnAssignedIssues.length}
+          </div>
+        </div>
+
+        {pendingAssignedIssues && pendingAssignedIssues.length > 0 ? (
           <BarGraph
-            data={defaultAnalytics.pending_issue_user}
+            data={pendingAssignedIssues}
             indexBy="assignees__id"
             keys={["count"]}
             height="250px"
             colors={() => `#f97316`}
-            customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) => (d.count > 0 ? d.count : 50))}
+            customYAxisTickValues={pendingAssignedIssues.map((d) => (d.count > 0 ? d.count : 50))}
             tooltip={(datum) => {
-              const assignee = defaultAnalytics.pending_issue_user.find(
-                (a) => a.assignees__id === `${datum.indexValue}`
-              );
+              const assignee = pendingAssignedIssues.find((a) => a.assignees__id === `${datum.indexValue}`);
 
               return (
                 <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
@@ -39,7 +43,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
             }}
             axisBottom={{
               renderTick: (datum) => {
-                const assignee = defaultAnalytics.pending_issue_user[datum.tickIndex] ?? "";
+                const assignee = pendingAssignedIssues[datum.tickIndex] ?? "";
 
                 if (assignee && assignee?.assignees__avatar && assignee?.assignees__avatar !== "")
                   return (