From be8407ab41d7bc8c33427c5651ca2518bbbb7dde Mon Sep 17 00:00:00 2001
From: Akshita Goyal <36129505+gakshita@users.noreply.github.com>
Date: Fri, 11 Oct 2024 16:17:26 +0530
Subject: [PATCH] fix: tooltip + onClick for states (#1449)

---
 .../cycles/active-cycle/cycle-chart/chart.tsx |  2 +-
 .../active-cycle/cycle-chart/tooltip.tsx      |  4 ++-
 .../cycles/active-cycle/summary.tsx           | 30 ++++++++++++-------
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/web/ee/components/cycles/active-cycle/cycle-chart/chart.tsx b/web/ee/components/cycles/active-cycle/cycle-chart/chart.tsx
index 6d6db5cf32..70b6bee032 100644
--- a/web/ee/components/cycles/active-cycle/cycle-chart/chart.tsx
+++ b/web/ee/components/cycles/active-cycle/cycle-chart/chart.tsx
@@ -110,7 +110,7 @@ export const ActiveCycleChart = observer((props: Props) => {
         </defs>
         <Tooltip
           isAnimationActive={false}
-          content={<CustomTooltip active payload={[]} label={""} plotType={plotType} />}
+          content={<CustomTooltip active payload={[]} label={""} plotType={plotType} endDate={endDate}/>}
         />
         {/* Cartesian axis */}
         <XAxis
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 1fb887e946..db3bc33bbc 100644
--- a/web/ee/components/cycles/active-cycle/cycle-chart/tooltip.tsx
+++ b/web/ee/components/cycles/active-cycle/cycle-chart/tooltip.tsx
@@ -5,12 +5,14 @@ type Props = {
   payload: any; // TODO: fix type
   label: string;
   plotType: string;
+  endDate: string;
 };
-const CustomTooltip = ({ active, payload, label, plotType }: Props) => {
+const CustomTooltip = ({ active, payload, label, plotType, endDate }: Props) => {
   if (active && payload && payload.length) {
     payload = payload[0]?.payload;
     const [year, month, day] = label?.split("-");
     const monthName = new Date(label).toLocaleString("default", { month: "short" });
+    if (payload.date > endDate) return null;
     return (
       <Card className="flex flex-col" spacing={ECardSpacing.SM}>
         <p className="text-xs text-custom-text-400 border-b pb-2">{`${day} ${monthName}'${parseInt(year) % 100}`}</p>
diff --git a/web/ee/components/cycles/active-cycle/summary.tsx b/web/ee/components/cycles/active-cycle/summary.tsx
index 195af1fce0..4801ce5a5b 100644
--- a/web/ee/components/cycles/active-cycle/summary.tsx
+++ b/web/ee/components/cycles/active-cycle/summary.tsx
@@ -18,10 +18,9 @@ type Props = {
   handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string[], redirect?: boolean) => void;
   parentWidth?: number;
 };
-const states = ["completed", "started", "unstarted", "backlog"];
 
 const Summary = observer((props: Props) => {
-  const { setAreaToHighlight, data, plotType, estimateType, progressLoader, handleFiltersUpdate, parentWidth } = props;
+  const { setAreaToHighlight, data, plotType, estimateType, handleFiltersUpdate, parentWidth } = props;
 
   // store hooks
   const { groupedProjectStates } = useProjectState();
@@ -61,18 +60,26 @@ const Summary = observer((props: Props) => {
         key: "actual",
         showBg: true,
         color: colors.actual,
+        states: plotType === "burndown" ? ["started", "unstarted", "backlog", "cancelled"] : ["completed"],
       },
       {
         group: "Started",
         key: "started",
         showBg: true,
         color: colors.startedStroke,
+        states: ["started"],
+      },
+      {
+        group: "Scope",
+        key: "scope",
+        showBg: false,
+        color: colors.scopeStroke,
+        states: ["started", "unstarted", "backlog", "completed"],
       },
-      { group: "Scope", key: "scope", showBg: false, color: colors.scopeStroke },
     ],
     secondaryStates: [
-      { group: "Unstarted", key: "unstarted" },
-      { group: "Backlog", key: "backlog" },
+      { group: "Unstarted", key: "unstarted", states: ["unstarted"] },
+      { group: "Backlog", key: "backlog", states: ["backlog"] },
     ],
   };
 
@@ -120,9 +127,12 @@ const Summary = observer((props: Props) => {
             onMouseEnter={() => setAreaToHighlight(group.key)}
             onMouseLeave={() => setAreaToHighlight("")}
             onClick={() => {
-              if (groupedProjectStates && states.includes(group.key)) {
-                const states = groupedProjectStates[group.key].map((state) => state.id);
-                handleFiltersUpdate("state", states, true);
+              if (groupedProjectStates) {
+                const states = group.states?.reduce(
+                  (acc, state) => acc.concat(groupedProjectStates[state].map((state) => state.id)),
+                  [] as string[]
+                );
+                handleFiltersUpdate("state", states || [], true);
               }
             }}
           >
@@ -157,10 +167,10 @@ const Summary = observer((props: Props) => {
         </div>
         {stateGroups.secondaryStates.map((group, index) => (
           <div
-            className="flex text-sm cursor-pointer p-2"
+            className="flex text-sm cursor-pointer p-2 rounded hover:bg-custom-background-90"
             key={index}
             onClick={() => {
-              if (groupedProjectStates && states.includes(group.key)) {
+              if (groupedProjectStates) {
                 const states = groupedProjectStates[group.key].map((state) => state.id);
                 handleFiltersUpdate("state", states, true);
               }