fix: implemented module analytics issue burndown chart

web/components/modules/analytics-sidebar/index.ts

@@ -0,0 +1,2 @@
+export * from "./root";
+export * from "./issue-burndown-chart";

web/components/modules/analytics-sidebar/issue-burndown-chart.tsx

@@ -0,0 +1,93 @@
+import { FC, useState } from "react";
+import { CustomSelect } from "@plane/ui";
+// components
+import ProgressChart from "@/components/core/sidebar/progress-chart";
+// constants
+import { EEstimateSystem } from "@/constants/estimates";
+// hooks
+import { useAppRouter, useModule, useProjectEstimates } from "@/hooks/store";
+
+type TModuleIssuesBurnDownChart = {
+  moduleId: string;
+};
+
+const moduleBurnDownChartOptions = [
+  { value: "issue_count", label: "Issues" },
+  { value: "estimate", label: "Points" },
+];
+
+export const ModuleIssuesBurnDownChart: FC<TModuleIssuesBurnDownChart> = (props) => {
+  const { moduleId } = props;
+  // hooks
+  const { getModuleById } = useModule();
+  // state
+  const [value, setValue] = useState<string>("issue_count");
+  // handlers
+  const onChange = (value: string) => {
+    setValue(value);
+    // refetch the module details
+  };
+
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+  const { projectId } = useAppRouter();
+  const { currentActiveEstimateId, areEstimateEnabledByProjectId, estimateById } = useProjectEstimates();
+
+  const isEstimateEnabled = (analyticsOption: string) => {
+    if (analyticsOption === "estimate") {
+      if (
+        projectId &&
+        currentActiveEstimateId &&
+        areEstimateEnabledByProjectId(projectId) &&
+        estimateById(currentActiveEstimateId)?.type === EEstimateSystem.POINTS
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  if (!moduleDetails || !moduleDetails.start_date || !moduleDetails.target_date) return <></>;
+  return (
+    <div className=" h-full w-full pt-4">
+      <div className="relative py-2 flex items-center gap-3 text-custom-text-100">
+        <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 className="text-sm ml-auto">
+          <CustomSelect
+            value={value}
+            label={<span>{moduleBurnDownChartOptions.find((v) => v.value === value)?.label ?? "None"}</span>}
+            onChange={onChange}
+            maxHeight="lg"
+          >
+            {moduleBurnDownChartOptions.map(
+              (item) =>
+                isEstimateEnabled(item.value) && (
+                  <CustomSelect.Option key={item.value} value={item.value}>
+                    {item.label}
+                  </CustomSelect.Option>
+                )
+            )}
+          </CustomSelect>
+        </div>
+      </div>
+
+      <div className="relative h-40 w-full max-w-80">
+        <ProgressChart
+          distribution={moduleDetails.distribution?.completion_chart ?? {}}
+          startDate={moduleDetails.start_date}
+          endDate={moduleDetails.target_date}
+          totalIssues={moduleDetails.total_issues}
+        />
+      </div>
+    </div>
+  );
+};

web/components/modules/analytics-sidebar/root.tsx

@@ -32,9 +32,10 @@ import {
 } from "@plane/ui";
 // components
 import { LinkModal, LinksList, SidebarProgressStats } from "@/components/core";
-import ProgressChart from "@/components/core/sidebar/progress-chart";
+
 import { DateRangeDropdown, MemberDropdown } from "@/components/dropdowns";
 import { ArchiveModuleModal, DeleteModuleModal } from "@/components/modules";
+import { ModuleIssuesBurnDownChart } from "@/components/modules/analytics-sidebar";
 // constant
 import {
   MODULE_LINK_CREATED,
@@ -315,6 +316,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
   const issueCount =
     moduleDetails.total_issues === 0 ? "0 Issue" : `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
 
+  const issueEstimatePointCount =
+    moduleDetails.total_estimate_points === 0
+      ? "0 Issue"
+      : `${moduleDetails.completed_estimate_points}/${moduleDetails.total_estimate_points}`;
+
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
   return (
@@ -555,6 +561,16 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
               <span className="px-1.5 text-sm text-custom-text-300">{issueCount}</span>
             </div>
           </div>
+
+          <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" />
+              <span className="text-base">Points</span>
+            </div>
+            <div className="flex h-7 w-3/5 items-center">
+              <span className="px-1.5 text-sm text-custom-text-300">{issueEstimatePointCount}</span>
+            </div>
+          </div>
         </div>
 
         <div className="flex flex-col">
@@ -595,29 +611,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <Transition show={open}>
                     <Disclosure.Panel>
                       <div className="flex flex-col gap-3">
-                        {moduleDetails.start_date && moduleDetails.target_date ? (
+                        {moduleDetails.start_date && moduleDetails.target_date && moduleDetails?.id ? (
-                          <div className=" h-full w-full pt-4">
+                          <ModuleIssuesBurnDownChart moduleId={moduleDetails.id} />
-                            <div className="flex  items-start  gap-4 py-2 text-xs">
-                              <div className="flex items-center gap-3 text-custom-text-100">
-                                <div className="flex items-center justify-center gap-1">
-                                  <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">
-                                  <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
-                                  <span>Current</span>
-                                </div>
-                              </div>
-                            </div>
-                            <div className="relative h-40 w-full max-w-80">
-                              <ProgressChart
-                                distribution={moduleDetails.distribution?.completion_chart ?? {}}
-                                startDate={moduleDetails.start_date}
-                                endDate={moduleDetails.target_date}
-                                totalIssues={moduleDetails.total_issues}
-                              />
-                            </div>
-                          </div>
                         ) : (
                           ""
                         )}

web/components/modules/index.ts

@@ -7,7 +7,6 @@ export * from "./form";
 export * from "./gantt-chart";
 export * from "./modal";
 export * from "./modules-list-view";
-export * from "./sidebar";
 export * from "./module-card-item";
 export * from "./module-list-item";
 export * from "./module-peek-overview";
@@ -15,5 +14,6 @@ export * from "./quick-actions";
 export * from "./module-list-item-action";
 export * from "./module-view-header";
 
+export * from "./analytics-sidebar";
 // archived modules
 export * from "./archived-modules";

web/components/modules/module-peek-overview.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 // hooks
 import { useModule } from "@/hooks/store";
 // components
-import { ModuleDetailsSidebar } from "./sidebar";
+import { ModuleDetailsSidebar } from "./";
 
 type Props = {
   projectId: string;