From 55fd8ae9bc4b3c8fa37531b9c996206d10c10fe1 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 7 Oct 2024 14:20:51 +0530
Subject: [PATCH] chore: cycle sidebar refactor

---
 .../analytics-sidebar/issue-progress.tsx      | 11 +++-
 .../analytics-sidebar/sidebar-chart.tsx       | 58 +++++++++++++++++++
 .../analytics-sidebar/sidebar-details.tsx     |  4 +-
 .../analytics-sidebar/sidebar-header.tsx      |  2 +-
 4 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx

diff --git a/web/core/components/cycles/analytics-sidebar/issue-progress.tsx b/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
index 2f9b4b79e9d..be49f3e742d 100644
--- a/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
+++ b/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
@@ -17,9 +17,8 @@ import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { getDate } from "@/helpers/date-time.helper";
 // hooks
 import { useIssues, useCycle, useProjectEstimates } from "@/hooks/store";
-// plane web constants
-import { SidebarBaseChart } from "@/plane-web/components/cycles/analytics-sidebar";
 import { EEstimateSystem } from "@/plane-web/constants/estimates";
+import SidebarChart from "./sidebar-chart";
 
 type TCycleAnalyticsProgress = {
   workspaceSlug: string;
@@ -218,9 +217,15 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
                       </CustomSelect.Option>
                     ))}
                   </CustomSelect>
+                  <div className="flex items-center justify-center gap-2">
+                    <div className="flex items-center gap-1 text-xs">
+                      <span className="text-custom-text-300">Done</span>
+                      <span className="font-semibold text-custom-text-400">{progressHeaderPercentage}%</span>
+                    </div>
+                  </div>
                 </div>
                 <div className="py-4">
-                  <SidebarBaseChart
+                  <SidebarChart
                     chartDistributionData={chartDistributionData}
                     cycleStartDate={cycleStartDate}
                     cycleEndDate={cycleEndDate}
diff --git a/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx b/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx
new file mode 100644
index 00000000000..7e0a0ebfdcd
--- /dev/null
+++ b/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx
@@ -0,0 +1,58 @@
+import { Fragment } from "react";
+import { TCycleDistribution, TCycleEstimateDistribution } from "@plane/types";
+import { Loader } from "@plane/ui";
+import ProgressChart from "@/components/core/sidebar/progress-chart";
+
+type ProgressChartProps = {
+  chartDistributionData: TCycleEstimateDistribution | TCycleDistribution | undefined;
+  cycleStartDate: Date | undefined;
+  cycleEndDate: Date | undefined;
+  totalEstimatePoints: number;
+  totalIssues: number;
+  plotType: string;
+};
+const SidebarChart = (props: ProgressChartProps) => {
+  const { chartDistributionData, cycleStartDate, cycleEndDate, totalEstimatePoints, totalIssues, plotType } = props;
+  const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;
+
+  return (
+    <div>
+      <div className="relative flex items-center gap-2">
+        <div className="flex items-center justify-center gap-1 text-xs">
+          <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+          <span>Ideal</span>
+        </div>
+        <div className="flex items-center justify-center gap-1 text-xs">
+          <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+          <span>Current</span>
+        </div>
+      </div>
+      {cycleStartDate && cycleEndDate && completionChartDistributionData ? (
+        <Fragment>
+          {plotType === "points" ? (
+            <ProgressChart
+              distribution={completionChartDistributionData}
+              startDate={cycleStartDate}
+              endDate={cycleEndDate}
+              totalIssues={totalEstimatePoints}
+              plotTitle={"points"}
+            />
+          ) : (
+            <ProgressChart
+              distribution={completionChartDistributionData}
+              startDate={cycleStartDate}
+              endDate={cycleEndDate}
+              totalIssues={totalIssues}
+              plotTitle={"issues"}
+            />
+          )}
+        </Fragment>
+      ) : (
+        <Loader className="w-full h-[160px] mt-4">
+          <Loader.Item width="100%" height="100%" />
+        </Loader>
+      )}
+    </div>
+  );
+};
+export default SidebarChart;
diff --git a/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx b/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
index 0c6ad1fd81f..708b9c217b3 100644
--- a/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
+++ b/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
@@ -3,10 +3,10 @@ import React, { FC } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
 import { LayersIcon, SquareUser, Users } from "lucide-react";
-// ui
+// types
 import { ICycle } from "@plane/types";
+// ui
 import { Avatar, AvatarGroup, TextArea } from "@plane/ui";
-// types
 // hooks
 import { useMember, useProjectEstimates } from "@/hooks/store";
 // plane web
diff --git a/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx b/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
index 6a654e0535a..c9bd3a7c2c8 100644
--- a/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
+++ b/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
@@ -156,7 +156,7 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
       end_date: renderFormattedPayloadDate(endDate),
     };
 
-    if (cycleDetails?.start_date && cycleDetails.end_date)
+    if (cycleDetails && cycleDetails.start_date && cycleDetails.end_date)
       isDateValid = await dateChecker({
         ...payload,
         cycle_id: cycleDetails.id,