{datum.slice.points[0].data.yFormatted}
- issues pending on
+ {plotTitle} pending on
{datum.slice.points[0].data.xFormatted}
)}
diff --git a/web/core/components/core/sidebar/sidebar-progress-stats.tsx b/web/core/components/core/sidebar/sidebar-progress-stats.tsx
deleted file mode 100644
index 20d791a8a..000000000
--- a/web/core/components/core/sidebar/sidebar-progress-stats.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-"use client";
-import React from "react";
-import { observer } from "mobx-react";
-import Image from "next/image";
-// headless ui
-import { Tab } from "@headlessui/react";
-import {
- IIssueFilterOptions,
- IIssueFilters,
- IModule,
- TAssigneesDistribution,
- TCompletionChartDistribution,
- TLabelsDistribution,
- TStateGroups,
-} from "@plane/types";
-// hooks
-import { Avatar, StateGroupIcon } from "@plane/ui";
-import { SingleProgressStats } from "@/components/core";
-import { useProjectState } from "@/hooks/store";
-import useLocalStorage from "@/hooks/use-local-storage";
-// images
-import emptyLabel from "@/public/empty-state/empty_label.svg";
-import emptyMembers from "@/public/empty-state/empty_members.svg";
-// components
-// ui
-// types
-
-type Props = {
- distribution:
- | {
- assignees: TAssigneesDistribution[];
- completion_chart: TCompletionChartDistribution;
- labels: TLabelsDistribution[];
- }
- | undefined;
- groupedIssues: {
- [key: string]: number;
- };
- totalIssues: number;
- module?: IModule;
- roundedTab?: boolean;
- noBackground?: boolean;
- isPeekView?: boolean;
- isCompleted?: boolean;
- filters?: IIssueFilters | undefined;
- handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
-};
-
-export const SidebarProgressStats: React.FC
- 
-
- No assignee
-
- }
- completed={assignee.completed_issues}
- total={assignee.total_issues}
- />
- );
- })
- ) : (
-
-
-
- )}
-
-
- No assignees yet
-
-
- )}
-
-
- No labels yet
-
-
- {cycle.total_issues > 0 ? (
- <>
- Issue burndown
+ +Issue burndown
+ +
+ {cycleBurnDownChartOptions.find((v) => v.value === plotType)?.label ?? "None"}}
+ onChange={onChange}
+ maxHeight="lg"
+ >
+ {cycleBurnDownChartOptions.map((item) => (
+
+ {item.label}
+
+ ))}
+
+ {loader &&
-
+
+ {label.title ?? "No labels"}
+
+ }
+ completed={label.completed}
+ total={label.total}
+ />
+ );
+ }
+ })
+ ) : (
+
-
+ );
+});
+
+export const LabelStatComponent = observer((props: TLabelStatComponent) => {
+ const { distribution, isEditable, filters, handleFiltersUpdate } = props;
+ return (
+
- = observer((props) => {
+ // props
+ const { workspaceSlug, projectId, cycleId } = props;
+ // router
+ const searchParams = useSearchParams();
+ const peekCycle = searchParams.get("peekCycle") || undefined;
+ // hooks
+ const { areEstimateEnabledByProjectId, currentActiveEstimateId, estimateById } = useProjectEstimates();
+ const { getPlotTypeByCycleId, setPlotType, getCycleById, fetchCycleDetails } = useCycle();
+ const {
+ issuesFilter: { issueFilters, updateFilters },
+ } = useIssues(EIssuesStoreType.CYCLE);
+ // state
+ const [loader, setLoader] = useState(false);
+
+ // derived values
+ const cycleDetails = validateCycleSnapshot(getCycleById(cycleId));
+ const plotType: TCyclePlotType = getPlotTypeByCycleId(cycleId);
+ const isCurrentProjectEstimateEnabled = projectId && areEstimateEnabledByProjectId(projectId) ? true : false;
+ const estimateDetails =
+ isCurrentProjectEstimateEnabled && currentActiveEstimateId && estimateById(currentActiveEstimateId);
+ const isCurrentEstimateTypeIsPoints = estimateDetails && estimateDetails?.type === EEstimateSystem.POINTS;
+
+ const completedIssues = cycleDetails?.completed_issues || 0;
+ const totalIssues = cycleDetails?.total_issues || 0;
+ const completedEstimatePoints = cycleDetails?.completed_estimate_points || 0;
+ const totalEstimatePoints = cycleDetails?.total_estimate_points || 0;
+
+ const progressHeaderPercentage = cycleDetails
+ ? plotType === "points"
+ ? completedEstimatePoints != 0 && totalEstimatePoints != 0
+ ? Math.round((completedEstimatePoints / totalEstimatePoints) * 100)
+ : 0
+ : completedIssues != 0 && completedIssues != 0
+ ? Math.round((completedIssues / totalIssues) * 100)
+ : 0
+ : 0;
+
+ const chartDistributionData =
+ plotType === "points" ? cycleDetails?.estimate_distribution : cycleDetails?.distribution || undefined;
+ const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;
+
+ const groupedIssues = useMemo(
+ () => ({
+ backlog: plotType === "points" ? cycleDetails?.backlog_estimate_points || 0 : cycleDetails?.backlog_issues || 0,
+ unstarted:
+ plotType === "points" ? cycleDetails?.unstarted_estimate_points || 0 : cycleDetails?.unstarted_issues || 0,
+ started: plotType === "points" ? cycleDetails?.started_estimate_points || 0 : cycleDetails?.started_issues || 0,
+ completed:
+ plotType === "points" ? cycleDetails?.completed_estimate_points || 0 : cycleDetails?.completed_issues || 0,
+ cancelled:
+ plotType === "points" ? cycleDetails?.cancelled_estimate_points || 0 : cycleDetails?.cancelled_issues || 0,
+ }),
+ [plotType, cycleDetails]
+ );
+
+ const cycleStartDate = getDate(cycleDetails?.start_date);
+ const cycleEndDate = getDate(cycleDetails?.end_date);
+ const isCycleStartDateValid = cycleStartDate && cycleStartDate <= new Date();
+ const isCycleEndDateValid = cycleStartDate && cycleEndDate && cycleEndDate >= cycleStartDate;
+ const isCycleDateValid = isCycleStartDateValid && isCycleEndDateValid;
+
+ // handlers
+ const onChange = async (value: TCyclePlotType) => {
+ setPlotType(cycleId, value);
+ if (!workspaceSlug || !projectId || !cycleId) return;
+ try {
+ setLoader(true);
+ await fetchCycleDetails(workspaceSlug, projectId, cycleId);
+ setLoader(false);
+ } catch (error) {
+ setLoader(false);
+ setPlotType(cycleId, plotType);
+ }
+ };
+
+ const handleFiltersUpdate = useCallback(
+ (key: keyof IIssueFilterOptions, value: string | string[]) => {
+ if (!workspaceSlug || !projectId) return;
+
+ let newValues = issueFilters?.filters?.[key] ?? [];
+
+ if (Array.isArray(value)) {
+ if (key === "state") {
+ if (isEqual(newValues, value)) newValues = [];
+ else newValues = value;
+ } else {
+ value.forEach((val) => {
+ if (!newValues.includes(val)) newValues.push(val);
+ else newValues.splice(newValues.indexOf(val), 1);
+ });
+ }
+ } else {
+ if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+ else newValues.push(value);
+ }
+ updateFilters(
+ workspaceSlug.toString(),
+ projectId.toString(),
+ EIssueFilterType.FILTERS,
+ { [key]: newValues },
+ cycleId
+ );
+ },
+ [workspaceSlug, projectId, cycleId, issueFilters, updateFilters]
+ );
+
+ if (!cycleDetails) return <>;
+ return (
+
+
+ }
+ completed={assignee?.completed ?? 0}
+ total={assignee?.total ?? 0}
+ />
+ );
+ })
+ ) : (
+
-
- Ideal
-
-
-
- Current
+
+ {cycle.total_issues > 0 ? (
+ <>
+
);
};
diff --git a/web/core/components/cycles/analytics-sidebar/index.ts b/web/core/components/cycles/analytics-sidebar/index.ts
new file mode 100644
index 000000000..c509152a2
--- /dev/null
+++ b/web/core/components/cycles/analytics-sidebar/index.ts
@@ -0,0 +1,3 @@
+export * from "./root";
+export * from "./issue-progress";
+export * from "./progress-stats";
diff --git a/web/core/components/cycles/analytics-sidebar/issue-progress.tsx b/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
new file mode 100644
index 000000000..3c20c93dd
--- /dev/null
+++ b/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
@@ -0,0 +1,276 @@
+"use client";
+
+import { FC, Fragment, useCallback, useMemo, useState } from "react";
+import isEmpty from "lodash/isEmpty";
+import isEqual from "lodash/isEqual";
+import { observer } from "mobx-react";
+import { useSearchParams } from "next/navigation";
+import { AlertCircle, ChevronUp, ChevronDown } from "lucide-react";
+import { Disclosure, Transition } from "@headlessui/react";
+import { ICycle, IIssueFilterOptions, TCyclePlotType, TProgressSnapshot } from "@plane/types";
+import { CustomSelect, Spinner } from "@plane/ui";
+// components
+import ProgressChart from "@/components/core/sidebar/progress-chart";
+import { CycleProgressStats } from "@/components/cycles";
+// constants
+import { EEstimateSystem } from "@/constants/estimates";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+// helpers
+import { getDate } from "@/helpers/date-time.helper";
+// hooks
+import { useIssues, useCycle, useProjectEstimates } from "@/hooks/store";
+
+type TCycleAnalyticsProgress = {
+ workspaceSlug: string;
+ projectId: string;
+ cycleId: string;
+};
+
+const cycleBurnDownChartOptions = [
+ { value: "burndown", label: "Issues" },
+ { value: "points", label: "Points" },
+];
+
+const validateCycleSnapshot = (cycleDetails: ICycle | null): ICycle | null => {
+ if (!cycleDetails || cycleDetails === null) return cycleDetails;
+
+ const updatedCycleDetails: any = { ...cycleDetails };
+ if (!isEmpty(cycleDetails.progress_snapshot)) {
+ Object.keys(cycleDetails.progress_snapshot || {}).forEach((key) => {
+ const currentKey = key as keyof TProgressSnapshot;
+ if (!isEmpty(cycleDetails.progress_snapshot) && !isEmpty(updatedCycleDetails)) {
+ updatedCycleDetails[currentKey as keyof ICycle] = cycleDetails?.progress_snapshot?.[currentKey];
+ }
+ });
+ }
+ return updatedCycleDetails;
+};
+
+export const CycleAnalyticsProgress: FC
+
-
+
+
+
+
+ {plotType === "points" ? (
+ {`Pending issues - ${cycle.backlog_issues + cycle.unstarted_issues + cycle.started_issues}`}
+ ) : (
+ {`Pending issues - ${cycle.backlog_issues + cycle.unstarted_issues + cycle.started_issues}`}
+ )}
+
+
+ Ideal
+
+
+
+ Current
+
+ {completionChartDistributionData && (
+
+ {plotType === "points" ? (
+
+ )}
- {`Pending issues - ${cycle.backlog_issues + cycle.unstarted_issues + cycle.started_issues}`}
-
-
- ) : (
- <>
-
+
-
-
-
- )}
-
+
+ )}
+
+
+
+ {({ open }) => (
+
+
+ );
+});
diff --git a/web/core/components/cycles/analytics-sidebar/progress-stats.tsx b/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
new file mode 100644
index 000000000..dc0efb255
--- /dev/null
+++ b/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
@@ -0,0 +1,372 @@
+"use client";
+
+import { FC } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import { Tab } from "@headlessui/react";
+import {
+ IIssueFilterOptions,
+ IIssueFilters,
+ TCycleDistribution,
+ TCycleEstimateDistribution,
+ TCyclePlotType,
+ TStateGroups,
+} from "@plane/types";
+import { Avatar, StateGroupIcon } from "@plane/ui";
+// components
+import { SingleProgressStats } from "@/components/core";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useProjectState } from "@/hooks/store";
+import useLocalStorage from "@/hooks/use-local-storage";
+// public
+import emptyLabel from "@/public/empty-state/empty_label.svg";
+import emptyMembers from "@/public/empty-state/empty_members.svg";
+
+// assignee types
+type TAssigneeData = {
+ id: string | undefined;
+ title: string | undefined;
+ avatar: string | undefined;
+ completed: number;
+ total: number;
+}[];
+
+type TAssigneeStatComponent = {
+ distribution: TAssigneeData;
+ isEditable?: boolean;
+ filters?: IIssueFilters | undefined;
+ handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
+};
+
+// labelTypes
+type TLabelData = {
+ id: string | undefined;
+ title: string | undefined;
+ color: string | undefined;
+ completed: number;
+ total: number;
+}[];
+
+type TLabelStatComponent = {
+ distribution: TLabelData;
+ isEditable?: boolean;
+ filters?: IIssueFilters | undefined;
+ handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
+};
+
+// stateTypes
+type TStateData = {
+ state: string | undefined;
+ completed: number;
+ total: number;
+}[];
+
+type TStateStatComponent = {
+ distribution: TStateData;
+ totalIssuesCount: number;
+ isEditable?: boolean;
+ handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
+};
+
+export const AssigneeStatComponent = observer((props: TAssigneeStatComponent) => {
+ const { distribution, isEditable, filters, handleFiltersUpdate } = props;
+ return (
+
+ {/* progress bar header */}
+ {isCycleDateValid ? (
+
+
+ {/* progress burndown chart */}
+
+
+
+ )}
+
+
+
+ {isCurrentEstimateTypeIsPoints && (
+ <>
+
+ {open ? (
+
+ ) : (
+
+ )}
+
+
+ ) : (
+ Progress
+ {progressHeaderPercentage > 0 && (
+ {`${progressHeaderPercentage}%`}
+ )}
+
+ {cycleBurnDownChartOptions.find((v) => v.value === plotType)?.label ?? "None"}
+ }
+ onChange={onChange}
+ maxHeight="lg"
+ >
+ {cycleBurnDownChartOptions.map((item) => (
+
+ {item.label}
+
+ ))}
+
+
+ {loader &&
+
+ )}
+
+ Progress
+
+
+
+
+ {plotType === "points" ? (
+
+ )}
+
+
+ {/* progress detailed view */}
+ {chartDistributionData && (
+
+
+ {cycleStartDate && cycleEndDate && completionChartDistributionData && (
+
+
+ Ideal
+
+
+
+ Current
+
+
+
+ )}
+
+ {distribution && distribution.length > 0 ? (
+ distribution.map((assignee, index) => {
+ if (assignee?.id)
+ return (
+
+
+ }
+ completed={assignee?.completed ?? 0}
+ total={assignee?.total ?? 0}
+ {...(isEditable && {
+ onClick: () => handleFiltersUpdate("assignees", assignee.id ?? ""),
+ selected: filters?.filters?.assignees?.includes(assignee.id ?? ""),
+ })}
+ />
+ );
+ else
+ return (
+
+
+
+ No assignee
+
+
+
+ )}
+
+
+ No assignees yet
+
+ {distribution && distribution.length > 0 ? (
+ distribution.map((label, index) => {
+ if (label.id) {
+ return (
+
+
+ {label.title ?? "No labels"}
+
+ }
+ completed={label.completed}
+ total={label.total}
+ {...(isEditable && {
+ onClick: () => handleFiltersUpdate("labels", label.id ?? ""),
+ selected: filters?.filters?.labels?.includes(label.id ?? `no-label-${index}`),
+ })}
+ />
+ );
+ } else {
+ return (
+
+
+ )}
+
+
+ No labels yet
+
+ {distribution.map((group, index) => (
+
+
+ }
+ completed={group.completed}
+ total={totalIssuesCount}
+ {...(isEditable && {
+ onClick: () => group.state && handleFiltersUpdate("state", getStateGroupState(group.state) ?? []),
+ })}
+ />
+ ))}
+
+ );
+});
+
+const progressStats = [
+ {
+ key: "stat-assignees",
+ title: "Assignees",
+ },
+ {
+ key: "stat-labels",
+ title: "Labels",
+ },
+ {
+ key: "stat-states",
+ title: "States",
+ },
+];
+
+type TCycleProgressStats = {
+ cycleId: string;
+ plotType: TCyclePlotType;
+ distribution: TCycleDistribution | TCycleEstimateDistribution | undefined;
+ groupedIssues: Record
+
+
+ {progressStats.map((stat) => (
+ setCycleTab(stat.key)}
+ >
+ {stat.title}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ );
+});
diff --git a/web/core/components/cycles/sidebar.tsx b/web/core/components/cycles/analytics-sidebar/root.tsx
similarity index 54%
rename from web/core/components/cycles/sidebar.tsx
rename to web/core/components/cycles/analytics-sidebar/root.tsx
index 1d2f3559f..9a800af7b 100644
--- a/web/core/components/cycles/sidebar.tsx
+++ b/web/core/components/cycles/analytics-sidebar/root.tsx
@@ -1,42 +1,29 @@
"use client";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
import isEmpty from "lodash/isEmpty";
-import isEqual from "lodash/isEqual";
import { observer } from "mobx-react";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
import { Controller, useForm } from "react-hook-form";
// icons
-import {
- ArchiveRestoreIcon,
- ChevronDown,
- LinkIcon,
- Trash2,
- AlertCircle,
- ChevronRight,
- CalendarClock,
- SquareUser,
-} from "lucide-react";
-import { Disclosure, Transition } from "@headlessui/react";
+import { ArchiveRestoreIcon, LinkIcon, Trash2, ChevronRight, CalendarClock, SquareUser } from "lucide-react";
// types
-import { ICycle, IIssueFilterOptions } from "@plane/types";
+import { ICycle } from "@plane/types";
// ui
import { Avatar, ArchiveIcon, CustomMenu, Loader, LayersIcon, TOAST_TYPE, setToast, TextArea } from "@plane/ui";
// components
-import { SidebarProgressStats } from "@/components/core";
-import ProgressChart from "@/components/core/sidebar/progress-chart";
-import { ArchiveCycleModal, CycleDeleteModal } from "@/components/cycles";
+import { ArchiveCycleModal, CycleDeleteModal, CycleAnalyticsProgress } from "@/components/cycles";
import { DateRangeDropdown } from "@/components/dropdowns";
// constants
import { CYCLE_STATUS } from "@/constants/cycle";
+import { EEstimateSystem } from "@/constants/estimates";
import { CYCLE_UPDATED } from "@/constants/event-tracker";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
import { EUserWorkspaceRoles } from "@/constants/workspace";
// helpers
import { findHowManyDaysLeft, getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
import { copyUrlToClipboard } from "@/helpers/string.helper";
// hooks
-import { useEventTracker, useCycle, useUser, useMember, useIssues } from "@/hooks/store";
+import { useEventTracker, useCycle, useUser, useMember, useProjectEstimates } from "@/hooks/store";
// services
import { CycleService } from "@/services/cycle.service";
@@ -63,10 +50,9 @@ export const CycleDetailsSidebar: React.FC
+
+ )}
-
+
+
+ {issueEstimatePointCount}
+
+
-
+ {workspaceSlug && projectId && cycleDetails?.id && (
+
-
- {({ open }) => (
-
-
-
-
-
-
-
-
-
-
- )}
-
- Progress
-
-
-
- {progressPercentage ? (
-
- {progressPercentage ? `${progressPercentage}%` : ""}
-
- ) : (
- ""
- )}
- {isStartValid && isEndValid ? (
-
- ) : (
-
-
-
- )}
-
- {isCompleted && !isEmpty(cycleDetails.progress_snapshot) ? (
- <>
- {cycleDetails.progress_snapshot.distribution?.completion_chart &&
- cycleDetails.start_date &&
- cycleDetails.end_date && (
-
-
-
- )}
-
- ) : (
- <>
- {cycleDetails.distribution?.completion_chart &&
- cycleDetails.start_date &&
- cycleDetails.end_date && (
-
-
-
-
-
-
- Ideal
-
-
-
- Current
-
-
-
-
-
- )}
-
- )}
- {/* stats */}
- {isCompleted && !isEmpty(cycleDetails.progress_snapshot) ? (
- <>
- {cycleDetails.progress_snapshot.total_issues > 0 &&
- cycleDetails.progress_snapshot.distribution && (
-
-
-
-
-
-
- Ideal
-
-
-
- Current
-
-
-
-
-
- )}
-
- ) : (
- <>
- {cycleDetails.total_issues > 0 && cycleDetails.distribution && (
-
-
- )}
-
- )}
-
+
+ {({ open }) => (
+
+
+ );
+});
diff --git a/web/core/components/modules/analytics-sidebar/progress-stats.tsx b/web/core/components/modules/analytics-sidebar/progress-stats.tsx
new file mode 100644
index 000000000..712928f14
--- /dev/null
+++ b/web/core/components/modules/analytics-sidebar/progress-stats.tsx
@@ -0,0 +1,372 @@
+"use client";
+
+import { FC } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import { Tab } from "@headlessui/react";
+import {
+ IIssueFilterOptions,
+ IIssueFilters,
+ TModuleDistribution,
+ TModuleEstimateDistribution,
+ TModulePlotType,
+ TStateGroups,
+} from "@plane/types";
+import { Avatar, StateGroupIcon } from "@plane/ui";
+// components
+import { SingleProgressStats } from "@/components/core";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useProjectState } from "@/hooks/store";
+import useLocalStorage from "@/hooks/use-local-storage";
+// public
+import emptyLabel from "@/public/empty-state/empty_label.svg";
+import emptyMembers from "@/public/empty-state/empty_members.svg";
+
+// assignee types
+type TAssigneeData = {
+ id: string | undefined;
+ title: string | undefined;
+ avatar: string | undefined;
+ completed: number;
+ total: number;
+}[];
+
+type TAssigneeStatComponent = {
+ distribution: TAssigneeData;
+ isEditable?: boolean;
+ filters?: IIssueFilters | undefined;
+ handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
+};
+
+// labelTypes
+type TLabelData = {
+ id: string | undefined;
+ title: string | undefined;
+ color: string | undefined;
+ completed: number;
+ total: number;
+}[];
+
+type TLabelStatComponent = {
+ distribution: TLabelData;
+ isEditable?: boolean;
+ filters?: IIssueFilters | undefined;
+ handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
+};
+
+// stateTypes
+type TStateData = {
+ state: string | undefined;
+ completed: number;
+ total: number;
+}[];
+
+type TStateStatComponent = {
+ distribution: TStateData;
+ totalIssuesCount: number;
+ isEditable?: boolean;
+ handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
+};
+
+export const AssigneeStatComponent = observer((props: TAssigneeStatComponent) => {
+ const { distribution, isEditable, filters, handleFiltersUpdate } = props;
+ return (
+
+ {/* progress bar header */}
+ {isModuleDateValid ? (
+
+
+ {/* progress burndown chart */}
+
+
+
+ )}
+
+
+
+ {isCurrentEstimateTypeIsPoints && (
+ <>
+
+ {open ? (
+
+ ) : (
+
+ )}
+
+
+ ) : (
+ Progress
+ {progressHeaderPercentage > 0 && (
+ {`${progressHeaderPercentage}%`}
+ )}
+
+ {moduleBurnDownChartOptions.find((v) => v.value === plotType)?.label ?? "None"}
+ }
+ onChange={onChange}
+ maxHeight="lg"
+ >
+ {moduleBurnDownChartOptions.map((item) => (
+
+ {item.label}
+
+ ))}
+
+
+ {loader &&
+
+ )}
+
+ Progress
+
+
+
+
+ {plotType === "points" ? (
+
+ )}
+
+
+ {/* progress detailed view */}
+ {chartDistributionData && (
+
+
+ {moduleStartDate && moduleEndDate && completionChartDistributionData && (
+
+
+ Ideal
+
+
+
+ Current
+
+
+
+ )}
+
+ {distribution && distribution.length > 0 ? (
+ distribution.map((assignee, index) => {
+ if (assignee?.id)
+ return (
+
+
+ }
+ completed={assignee?.completed ?? 0}
+ total={assignee?.total ?? 0}
+ {...(isEditable && {
+ onClick: () => handleFiltersUpdate("assignees", assignee.id ?? ""),
+ selected: filters?.filters?.assignees?.includes(assignee.id ?? ""),
+ })}
+ />
+ );
+ else
+ return (
+
+
+
+ No assignee
+
+ }
+ completed={assignee?.completed ?? 0}
+ total={assignee?.total ?? 0}
+ />
+ );
+ })
+ ) : (
+
+
+
+ )}
+
+ );
+});
+
+export const LabelStatComponent = observer((props: TLabelStatComponent) => {
+ const { distribution, isEditable, filters, handleFiltersUpdate } = props;
+ return (
+
+
+ No assignees yet
+
+ {distribution && distribution.length > 0 ? (
+ distribution.map((label, index) => {
+ if (label.id) {
+ return (
+
+
+ {label.title ?? "No labels"}
+
+ }
+ completed={label.completed}
+ total={label.total}
+ {...(isEditable && {
+ onClick: () => handleFiltersUpdate("labels", label.id ?? ""),
+ selected: filters?.filters?.labels?.includes(label.id ?? `no-label-${index}`),
+ })}
+ />
+ );
+ } else {
+ return (
+
+
+ )}
+
+ );
+});
+
+export const StateStatComponent = observer((props: TStateStatComponent) => {
+ const { distribution, isEditable, totalIssuesCount, handleFiltersUpdate } = props;
+ // hooks
+ const { groupedProjectStates } = useProjectState();
+ // derived values
+ const getStateGroupState = (stateGroup: string) => {
+ const stateGroupStates = groupedProjectStates?.[stateGroup];
+ const stateGroupStatesId = stateGroupStates?.map((state) => state.id);
+ return stateGroupStatesId;
+ };
+
+ return (
+
+
+ No labels yet
+
+ {distribution.map((group, index) => (
+
+
+ }
+ completed={group.completed}
+ total={totalIssuesCount}
+ {...(isEditable && {
+ onClick: () => group.state && handleFiltersUpdate("state", getStateGroupState(group.state) ?? []),
+ })}
+ />
+ ))}
+
+ );
+});
+
+const progressStats = [
+ {
+ key: "stat-assignees",
+ title: "Assignees",
+ },
+ {
+ key: "stat-labels",
+ title: "Labels",
+ },
+ {
+ key: "stat-states",
+ title: "States",
+ },
+];
+
+type TModuleProgressStats = {
+ moduleId: string;
+ plotType: TModulePlotType;
+ distribution: TModuleDistribution | TModuleEstimateDistribution | undefined;
+ groupedIssues: Record
+
+
+ {progressStats.map((stat) => (
+ setModuleTab(stat.key)}
+ >
+ {stat.title}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ );
+});
diff --git a/web/core/components/modules/sidebar.tsx b/web/core/components/modules/analytics-sidebar/root.tsx
similarity index 75%
rename from web/core/components/modules/sidebar.tsx
rename to web/core/components/modules/analytics-sidebar/root.tsx
index b065dca04..b195d9fa3 100644
--- a/web/core/components/modules/sidebar.tsx
+++ b/web/core/components/modules/analytics-sidebar/root.tsx
@@ -1,12 +1,10 @@
"use client";
-import React, { useCallback, useEffect, useState } from "react";
-import isEqual from "lodash/isEqual";
+import React, { useEffect, useState } from "react";
import { observer } from "mobx-react-lite";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
import { Controller, useForm } from "react-hook-form";
import {
- AlertCircle,
ArchiveRestoreIcon,
CalendarClock,
ChevronDown,
@@ -19,7 +17,7 @@ import {
Users,
} from "lucide-react";
import { Disclosure, Transition } from "@headlessui/react";
-import { IIssueFilterOptions, ILinkDetails, IModule, ModuleLink } from "@plane/types";
+import { ILinkDetails, IModule, ModuleLink } from "@plane/types";
// ui
import {
CustomMenu,
@@ -33,26 +31,24 @@ import {
TextArea,
} from "@plane/ui";
// components
-import { LinkModal, LinksList, SidebarProgressStats } from "@/components/core";
-import ProgressChart from "@/components/core/sidebar/progress-chart";
+import { LinkModal, LinksList } from "@/components/core";
import { DateRangeDropdown, MemberDropdown } from "@/components/dropdowns";
-import { ArchiveModuleModal, DeleteModuleModal } from "@/components/modules";
+import { ArchiveModuleModal, DeleteModuleModal, ModuleAnalyticsProgress } from "@/components/modules";
// constant
+import { EEstimateSystem } from "@/constants/estimates";
import {
MODULE_LINK_CREATED,
MODULE_LINK_DELETED,
MODULE_LINK_UPDATED,
MODULE_UPDATED,
} from "@/constants/event-tracker";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
import { MODULE_STATUS } from "@/constants/module";
import { EUserProjectRoles } from "@/constants/project";
// helpers
import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
import { copyUrlToClipboard } from "@/helpers/string.helper";
// hooks
-import { useModule, useUser, useEventTracker, useIssues } from "@/hooks/store";
-// types
+import { useModule, useUser, useEventTracker, useProjectEstimates } from "@/hooks/store";
const defaultValues: Partial
+
+ )}
+ {workspaceSlug && projectId && moduleDetails?.id && (
+
+
+
+ {issueEstimatePointCount}
+
+
-
-
- {({ open }) => (
-
-
-
-
-
-
-
-
-
-
- )}
-
- Progress
-
-
-
- {progressPercentage ? (
-
- {progressPercentage ? `${progressPercentage}%` : ""}
-
- ) : (
- ""
- )}
- {isStartValid && isEndValid ? (
-
- ) : (
-
-
-
- )}
-
- {moduleDetails.start_date && moduleDetails.target_date ? (
-
-
-
- ) : (
- ""
- )}
- {moduleDetails.total_issues > 0 && (
-
-
-
-
-
-
- Ideal
-
-
-
- Current
-
-
-
-
-
- )}
-
{/* Accessing link outside the disclosure as mobx is not considering the children inside Disclosure as part of the component hence not observing their state change*/}
diff --git a/web/core/components/modules/index.ts b/web/core/components/modules/index.ts
index c3ab36c00..be77ac004 100644
--- a/web/core/components/modules/index.ts
+++ b/web/core/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";
diff --git a/web/core/components/modules/module-peek-overview.tsx b/web/core/components/modules/module-peek-overview.tsx
index 22c57a5d2..106856d7d 100644
--- a/web/core/components/modules/module-peek-overview.tsx
+++ b/web/core/components/modules/module-peek-overview.tsx
@@ -5,7 +5,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { generateQueryParams } from "@/helpers/router.helper";
import { useModule } from "@/hooks/store";
// components
-import { ModuleDetailsSidebar } from "./sidebar";
+import { ModuleAnalyticsSidebar } from "./";
type Props = {
projectId: string;
@@ -46,7 +46,7 @@ export const ModulePeekOverview: React.FC = observer(({ projectId, worksp
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
}}
>
- ;
cycleMap: Record;
+ plotType: Record;
activeCycleIdMap: Record;
// computed
currentProjectCycleIds: string[] | null;
@@ -39,8 +40,10 @@ export interface ICycleStore {
getCycleNameById: (cycleId: string) => string | undefined;
getActiveCycleById: (cycleId: string) => ICycle | null;
getProjectCycleIds: (projectId: string) => string[] | null;
+ getPlotTypeByCycleId: (cycleId: string) => TCyclePlotType;
// actions
validateDate: (workspaceSlug: string, projectId: string, payload: CycleDateCheckData) => Promise;
+ setPlotType: (cycleId: string, plotType: TCyclePlotType) => void;
// fetch
fetchWorkspaceCycles: (workspaceSlug: string) => Promise;
fetchAllCycles: (workspaceSlug: string, projectId: string) => Promise;
@@ -69,6 +72,7 @@ export class CycleStore implements ICycleStore {
// observables
loader: boolean = false;
cycleMap: Record = {};
+ plotType: Record = {};
activeCycleIdMap: Record = {};
//loaders
fetchedMap: Record = {};
@@ -85,6 +89,7 @@ export class CycleStore implements ICycleStore {
// observables
loader: observable.ref,
cycleMap: observable,
+ plotType: observable.ref,
activeCycleIdMap: observable,
fetchedMap: observable,
// computed
@@ -96,6 +101,7 @@ export class CycleStore implements ICycleStore {
currentProjectActiveCycleId: computed,
currentProjectArchivedCycleIds: computed,
// actions
+ setPlotType: action,
fetchWorkspaceCycles: action,
fetchAllCycles: action,
fetchActiveCycle: action,
@@ -334,6 +340,26 @@ export class CycleStore implements ICycleStore {
validateDate = async (workspaceSlug: string, projectId: string, payload: CycleDateCheckData) =>
await this.cycleService.cycleDateCheck(workspaceSlug, projectId, payload);
+ /**
+ * @description gets the plot type for the module store
+ * @param {TCyclePlotType} plotType
+ */
+ getPlotTypeByCycleId = (cycleId: string) => {
+ const { projectId } = this.rootStore.router;
+
+ return projectId && this.rootStore.projectEstimate.areEstimateEnabledByProjectId(projectId)
+ ? this.plotType[cycleId] || "burndown"
+ : "burndown";
+ };
+
+ /**
+ * @description updates the plot type for the module store
+ * @param {TCyclePlotType} plotType
+ */
+ setPlotType = (cycleId: string, plotType: TCyclePlotType) => {
+ set(this.plotType, [cycleId], plotType);
+ };
+
/**
* @description fetch all cycles
* @param workspaceSlug
diff --git a/web/core/store/module.store.ts b/web/core/store/module.store.ts
index 0f2592bbe..845b7edf2 100644
--- a/web/core/store/module.store.ts
+++ b/web/core/store/module.store.ts
@@ -5,7 +5,7 @@ import update from "lodash/update";
import { action, computed, observable, makeObservable, runInAction } from "mobx";
import { computedFn } from "mobx-utils";
// types
-import { IModule, ILinkDetails } from "@plane/types";
+import { IModule, ILinkDetails, TModulePlotType } from "@plane/types";
// helpers
import { orderModules, shouldFilterModule } from "@/helpers/module.helper";
// services
@@ -19,6 +19,7 @@ export interface IModuleStore {
//Loaders
loader: boolean;
fetchedMap: Record;
+ plotType: Record;
// observables
moduleMap: Record;
// computed
@@ -30,7 +31,9 @@ export interface IModuleStore {
getModuleById: (moduleId: string) => IModule | null;
getModuleNameById: (moduleId: string) => string;
getProjectModuleIds: (projectId: string) => string[] | null;
+ getPlotTypeByModuleId: (moduleId: string) => TModulePlotType;
// actions
+ setPlotType: (moduleId: string, plotType: TModulePlotType) => void;
// fetch
fetchWorkspaceModules: (workspaceSlug: string) => Promise;
fetchModules: (workspaceSlug: string, projectId: string) => Promise;
@@ -72,6 +75,7 @@ export class ModulesStore implements IModuleStore {
// observables
loader: boolean = false;
moduleMap: Record = {};
+ plotType: Record = {};
//loaders
fetchedMap: Record = {};
// root store
@@ -86,11 +90,13 @@ export class ModulesStore implements IModuleStore {
// observables
loader: observable.ref,
moduleMap: observable,
+ plotType: observable.ref,
fetchedMap: observable,
// computed
projectModuleIds: computed,
projectArchivedModuleIds: computed,
// actions
+ setPlotType: action,
fetchWorkspaceModules: action,
fetchModules: action,
fetchArchivedModules: action,
@@ -213,6 +219,26 @@ export class ModulesStore implements IModuleStore {
return projectModuleIds;
});
+ /**
+ * @description gets the plot type for the module store
+ * @param {TModulePlotType} plotType
+ */
+ getPlotTypeByModuleId = (moduleId: string) => {
+ const { projectId } = this.rootStore.router;
+
+ return projectId && this.rootStore.projectEstimate.areEstimateEnabledByProjectId(projectId)
+ ? this.plotType[moduleId] || "burndown"
+ : "burndown";
+ };
+
+ /**
+ * @description updates the plot type for the module store
+ * @param {TModulePlotType} plotType
+ */
+ setPlotType = (moduleId: string, plotType: TModulePlotType) => {
+ set(this.plotType, [moduleId], plotType);
+ };
+
/**
* @description fetch all modules
* @param workspaceSlug