[WEB-3811] fix: cycle charts issues (#6901)

web/ce/components/cycles/analytics-sidebar/base.tsx

@@ -59,7 +59,7 @@ export const SidebarChart: FC<ProgressChartProps> = observer((props) => {
     }
   };
   return (
-    <>
+    <div>
       <div className="relative flex items-center justify-between gap-2 pt-4">
         <EstimateTypeDropdown value={estimateType} onChange={onChange} cycleId={cycleId} projectId={projectId} />
       </div>
@@ -92,6 +92,6 @@ export const SidebarChart: FC<ProgressChartProps> = observer((props) => {
           )}
         </div>
       </div>
-    </>
+    </div>
   );
 });

web/core/components/cycles/active-cycle/use-cycles-details.ts

@@ -30,13 +30,13 @@ const useCyclesDetails = (props: IActiveCycleDetails) => {
 
   // fetch cycle details
   useSWR(
-    workspaceSlug && projectId && cycle?.id ? `PROJECT_ACTIVE_CYCLE_${projectId}_PROGRESS` : null,
+    workspaceSlug && projectId && cycle?.id ? `PROJECT_ACTIVE_CYCLE_${projectId}_PROGRESS_${cycle.id}` : null,
     workspaceSlug && projectId && cycle?.id ? () => fetchActiveCycleProgress(workspaceSlug, projectId, cycle.id) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   useSWR(
     workspaceSlug && projectId && cycle?.id && !cycle?.distribution
-      ? `PROJECT_ACTIVE_CYCLE_${projectId}_DURATION`
+      ? `PROJECT_ACTIVE_CYCLE_${projectId}_DURATION_${cycle.id}`
       : null,
     workspaceSlug && projectId && cycle?.id && !cycle?.distribution
       ? () => fetchActiveCycleAnalytics(workspaceSlug, projectId, cycle.id, "issues")
@@ -44,7 +44,7 @@ const useCyclesDetails = (props: IActiveCycleDetails) => {
   );
   useSWR(
     workspaceSlug && projectId && cycle?.id && !cycle?.estimate_distribution
-      ? `PROJECT_ACTIVE_CYCLE_${projectId}_ESTIMATE_DURATION`
+      ? `PROJECT_ACTIVE_CYCLE_${projectId}_ESTIMATE_DURATION_${cycle.id}`
       : null,
     workspaceSlug && projectId && cycle?.id && !cycle?.estimate_distribution
       ? () => fetchActiveCycleAnalytics(workspaceSlug, projectId, cycle.id, "points")

web/core/components/cycles/analytics-sidebar/issue-progress.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, Fragment, useCallback, useMemo } from "react";
+import { FC, useCallback, useMemo } from "react";
 import isEmpty from "lodash/isEmpty";
 import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react";
@@ -133,7 +133,7 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
   if (!cycleDetails) return <></>;
   return (
     <div className="border-t border-custom-border-200 space-y-4 py-5">
-      <Disclosure defaultOpen={isCycleDateValid ? true : false}>
+      <Disclosure defaultOpen>
         {({ open }) => (
           <div className="flex flex-col">
             {/* progress bar header */}
@@ -161,24 +161,34 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
             )}
 
             <Transition show={open}>
-              <Disclosure.Panel className="flex flex-col">
-                <SidebarChartRoot workspaceSlug={workspaceSlug} projectId={projectId} cycleId={cycleId} />
-                {/* progress detailed view */}
-                {chartDistributionData && (
-                  <div className="w-full border-t border-custom-border-200 py-4">
-                    <CycleProgressStats
-                      cycleId={cycleId}
-                      plotType={plotType}
-                      distribution={chartDistributionData}
-                      groupedIssues={groupedIssues}
-                      totalIssuesCount={estimateType === "points" ? totalEstimatePoints || 0 : totalIssues || 0}
-                      isEditable={Boolean(!peekCycle)}
-                      size="xs"
-                      roundedTab={false}
-                      noBackground={false}
-                      filters={issueFilters}
-                      handleFiltersUpdate={handleFiltersUpdate}
-                    />
+              <Disclosure.Panel className="flex flex-col divide-y divide-custom-border-200">
+                {cycleStartDate && cycleEndDate ? (
+                  <>
+                    {isCycleDateValid && (
+                      <SidebarChartRoot workspaceSlug={workspaceSlug} projectId={projectId} cycleId={cycleId} />
+                    )}
+                    {/* progress detailed view */}
+                    {chartDistributionData && (
+                      <div className="w-full py-4">
+                        <CycleProgressStats
+                          cycleId={cycleId}
+                          plotType={plotType}
+                          distribution={chartDistributionData}
+                          groupedIssues={groupedIssues}
+                          totalIssuesCount={estimateType === "points" ? totalEstimatePoints || 0 : totalIssues || 0}
+                          isEditable={Boolean(!peekCycle)}
+                          size="xs"
+                          roundedTab={false}
+                          noBackground={false}
+                          filters={issueFilters}
+                          handleFiltersUpdate={handleFiltersUpdate}
+                        />
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <div className="my-2 py-2 text-sm text-custom-text-350  bg-custom-background-90 rounded-md px-2 w-full">
+                    {t("no_data_yet")}
                   </div>
                 )}
               </Disclosure.Panel>

web/core/components/cycles/analytics-sidebar/sidebar-details.tsx

@@ -125,7 +125,7 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
         {/**
          * NOTE: Render this section when estimate points of he projects is enabled and the estimate system is points
          */}
-        {isEstimatePointValid && (
+        {isEstimatePointValid && !isCompleted && (
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
               <LayersIcon className="h-4 w-4" />