github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: implemented module analytics issue burndown chart

Browse Source
This commit is contained in:
guru_sainath 2024-06-09 01:03:06 +05:30
parent dae291fe3b
commit 2672163c9c
5 changed files with 116 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/modules/analytics-sidebar/index.ts Normal file
View File

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

93
web/components/modules/analytics-sidebar/issue-burndown-chart.tsx Normal file
View File

@ -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>
);
};

43
web/components/modules/sidebar.tsx → web/components/modules/analytics-sidebar/root.tsx
View File

@ -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 ? (
<div className=" h-full w-full pt-4">
<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>
{moduleDetails.start_date && moduleDetails.target_date && moduleDetails?.id ? (
<ModuleIssuesBurnDownChart moduleId={moduleDetails.id} />
) : (
""
)}

2
web/components/modules/index.ts
View File

@ -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";

2
web/components/modules/module-peek-overview.tsx
View File

@ -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;