From 1ffc65d4ce4ff5286bee5ab72e174c091006b4ad Mon Sep 17 00:00:00 2001
From: Akshita Goyal <36129505+gakshita@users.noreply.github.com>
Date: Mon, 12 May 2025 19:33:30 +0530
Subject: [PATCH] [WEB-4073] chore: Added done and pending values in cycle
 progress charts #3171

---
 .../active-cycle/cycle-chart/tooltip.tsx      | 19 ++++++++++++++++---
 .../cycles/active-cycle/summary.tsx           | 12 ++++++++++--
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/web/ee/components/cycles/active-cycle/cycle-chart/tooltip.tsx b/web/ee/components/cycles/active-cycle/cycle-chart/tooltip.tsx
index 9b46c977bf..15b2e0ff7b 100644
--- a/web/ee/components/cycles/active-cycle/cycle-chart/tooltip.tsx
+++ b/web/ee/components/cycles/active-cycle/cycle-chart/tooltip.tsx
@@ -28,11 +28,11 @@ const CustomTooltip = ({ active, payload, label, plotType, endDate }: Props) =>
             </svg>
           )}
         </p>
-        <div className="flex flex-col space-y-2">
+        <div className="flex flex-col space-y-2 pb-2 border-b">
           <span className="flex text-xs text-custom-text-300 gap-1">
             <PlannedState className="my-auto" width="14" height="14" />
-            <span className="font-semibold">{Math.round(payload.ideal) || 0}</span>
-            <span> planned</span>
+            <span className="font-semibold">{Math.round(payload.scope) || 0}</span>
+            <span>scope</span>
           </span>
           <span className="flex text-xs text-custom-text-300 gap-1 items-center">
             <InProgressState className="my-auto items-center" width="14" height="14" />
@@ -51,6 +51,19 @@ const CustomTooltip = ({ active, payload, label, plotType, endDate }: Props) =>
             <span> {plotType === "burndown" ? "pending" : "done"}</span>
           </span>
         </div>
+        <div className="flex flex-col space-y-2">
+          <span className="flex text-xs text-custom-text-300 gap-1 items-center ml-0.5">
+            {plotType !== "burndown" ? (
+              <PendingState className="my-auto" width="12" height="12" />
+            ) : (
+              <DoneState className="my-auto" width="12" height="12" />
+            )}
+            <span className="font-semibold">
+              {plotType !== "burndown" ? payload.scope - payload.completed || 0 : payload.completed || 0}
+            </span>
+            <span> {plotType !== "burndown" ? "pending" : "done"}</span>
+          </span>
+        </div>
       </Card>
     );
   }
diff --git a/web/ee/components/cycles/active-cycle/summary.tsx b/web/ee/components/cycles/active-cycle/summary.tsx
index b2442ace37..a80a556c7d 100644
--- a/web/ee/components/cycles/active-cycle/summary.tsx
+++ b/web/ee/components/cycles/active-cycle/summary.tsx
@@ -78,6 +78,11 @@ const Summary = observer((props: Props) => {
       },
     ],
     secondaryStates: [
+      {
+        group: plotType !== "burndown" ? "Pending" : "Done",
+        key: plotType !== "burndown" ? "pending" : "completed",
+        states: plotType !== "burndown" ? ["started", "unstarted", "backlog", "cancelled"] : ["completed"],
+      },
       { group: "Unstarted", key: "unstarted", states: ["unstarted"] },
       { group: "Backlog", key: "backlog", states: ["backlog"] },
     ],
@@ -102,7 +107,7 @@ const Summary = observer((props: Props) => {
             {isBehind ? <TrendingDown className=" mr-2" /> : <TrendingUp className=" mr-2" />}
             <div className="text-md font-medium  flex-1">
               {isBehind ? "Trailing" : "Leading"} by{" "}
-              {Math.round(Math.abs((dataToday?.ideal ?? 0) - (dataToday?.actual ?? 0)))}{" "}
+              {Math.round(Math.abs((dataToday?.ideal || 0) - (dataToday?.actual || 0)))}{" "}
               {Math.abs((dataToday?.ideal ?? 0) - (dataToday?.actual ?? 0)) > 1
                 ? `${ESTIMATE_TYPE[estimateType]}s`
                 : ESTIMATE_TYPE[estimateType]}
@@ -171,7 +176,10 @@ const Summary = observer((props: Props) => {
             key={index}
             onClick={() => {
               if (groupedProjectStates) {
-                const states = groupedProjectStates[group.key].map((state) => state.id);
+                const states = group.states?.reduce(
+                  (acc, state) => acc.concat(groupedProjectStates[state].map((state) => state.id)),
+                  [] as string[]
+                );
                 handleFiltersUpdate("state", states, true);
               }
             }}