-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[WEB-2380] chore: cycle sidebar refactor #5759
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,69 @@ | ||||||
"use client"; | ||||||
import { FC, Fragment } from "react"; | ||||||
import { observer } from "mobx-react"; | ||||||
// plane ui | ||||||
import { Loader } from "@plane/ui"; | ||||||
// components | ||||||
import ProgressChart from "@/components/core/sidebar/progress-chart"; | ||||||
import { validateCycleSnapshot } from "@/components/cycles"; | ||||||
// helpers | ||||||
import { getDate } from "@/helpers/date-time.helper"; | ||||||
// hooks | ||||||
import { useCycle } from "@/hooks/store"; | ||||||
|
||||||
type ProgressChartProps = { | ||||||
workspaceSlug: string; | ||||||
projectId: string; | ||||||
cycleId: string; | ||||||
}; | ||||||
export const SidebarChart: FC<ProgressChartProps> = observer((props) => { | ||||||
const { workspaceSlug, projectId, cycleId } = props; | ||||||
|
||||||
// hooks | ||||||
const { getEstimateTypeByCycleId, getCycleById } = useCycle(); | ||||||
|
||||||
// derived data | ||||||
const cycleDetails = validateCycleSnapshot(getCycleById(cycleId)); | ||||||
const cycleStartDate = getDate(cycleDetails?.start_date); | ||||||
const cycleEndDate = getDate(cycleDetails?.end_date); | ||||||
const totalEstimatePoints = cycleDetails?.total_estimate_points || 0; | ||||||
const totalIssues = cycleDetails?.total_issues || 0; | ||||||
const estimateType = getEstimateTypeByCycleId(cycleId); | ||||||
|
||||||
const chartDistributionData = | ||||||
estimateType === "points" ? cycleDetails?.estimate_distribution : cycleDetails?.distribution || undefined; | ||||||
|
||||||
const completionChartDistributionData = chartDistributionData?.completion_chart || undefined; | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Remove unnecessary Similarly, the Simplify the code as: - const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;
+ const completionChartDistributionData = chartDistributionData?.completion_chart; 📝 Committable suggestion
Suggested change
|
||||||
|
||||||
if (!workspaceSlug || !projectId || !cycleId) return null; | ||||||
|
||||||
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> | ||||||
<ProgressChart | ||||||
distribution={completionChartDistributionData} | ||||||
startDate={cycleStartDate} | ||||||
endDate={cycleEndDate} | ||||||
totalIssues={estimateType === "points" ? totalEstimatePoints : totalIssues} | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Consider renaming When Consider renaming the prop to better reflect its purpose, such as - totalIssues={estimateType === "points" ? totalEstimatePoints : totalIssues}
+ totalCount={estimateType === "points" ? totalEstimatePoints : totalIssues} You'll also need to update the
|
||||||
plotTitle={estimateType === "points" ? "points" : "issues"} | ||||||
/> | ||||||
</Fragment> | ||||||
) : ( | ||||||
<Loader className="w-full h-[160px] mt-4"> | ||||||
<Loader.Item width="100%" height="100%" /> | ||||||
</Loader> | ||||||
)} | ||||||
Comment on lines
+52
to
+66
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Enhance error handling for missing data If Consider adding error handling to inform the user if data cannot be loaded: {cycleStartDate && cycleEndDate && completionChartDistributionData ? (
// existing code
) : hasError ? (
<div className="text-center text-sm text-red-500">Failed to load data.</div>
) : (
<Loader className="w-full h-[160px] mt-4">
<Loader.Item width="100%" height="100%" />
</Loader>
)} You'll need to implement |
||||||
</div> | ||||||
); | ||||||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
export * from "./sidebar-chart"; | ||
export * from "./root"; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
"use client"; | ||
import React, { FC } from "react"; | ||
// components | ||
import { SidebarChart } from "./base"; | ||
|
||
type Props = { | ||
workspaceSlug: string; | ||
projectId: string; | ||
cycleId: string; | ||
}; | ||
|
||
export const SidebarChartRoot: FC<Props> = (props) => <SidebarChart {...props} />; |
This file was deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Simplify 'chartDistributionData' assignment
The use of
|| undefined
is redundant sincecycleDetails?.distribution
will returnundefined
if it doesn't exist.Consider simplifying the code as follows:
📝 Committable suggestion