From f5205cd2218b90ceca29b2b070bd00c9dfbbec0f Mon Sep 17 00:00:00 2001 From: Akshita Goyal <36129505+gakshita@users.noreply.github.com> Date: Tue, 15 Oct 2024 19:04:33 +0530 Subject: [PATCH] fix: cycle build issue (#1509) * fix: cycle build issue * fix: removed beyond time * fix: today value + chart stacking --- web/core/store/cycle.store.ts | 2 +- .../cycles/active-cycle/cycle-chart/chart.tsx | 75 ++++++++++++------- .../cycles/active-cycle/cycle-chart/ticks.tsx | 37 ++++----- .../cycles/active-cycle/details.tsx | 1 + .../cycles/active-cycle/formatter.ts | 12 ++- .../cycles/analytics-sidebar/base.tsx | 3 +- 6 files changed, 80 insertions(+), 50 deletions(-) diff --git a/web/core/store/cycle.store.ts b/web/core/store/cycle.store.ts index d4408d8055..204c81d27b 100644 --- a/web/core/store/cycle.store.ts +++ b/web/core/store/cycle.store.ts @@ -277,7 +277,7 @@ export class CycleStore implements ICycleStore { getIsPointsDataAvailable = computedFn((cycleId: string) => { const cycle = this.cycleMap[cycleId]; if (!cycle) return false; - if (this.cycleMap[cycleId].version === 2) return cycle.progress.some((p) => p.total_estimate_points > 0); + if (this.cycleMap[cycleId].version === 2) return cycle.progress?.some((p) => p.total_estimate_points > 0); else if (this.cycleMap[cycleId].version === 1) { const completionChart = cycle.estimate_distribution?.completion_chart || {}; return !isEmpty(completionChart) && Object.keys(completionChart).some((p) => completionChart[p]! > 0); diff --git a/web/ee/components/cycles/active-cycle/cycle-chart/chart.tsx b/web/ee/components/cycles/active-cycle/cycle-chart/chart.tsx index 89ab148c73..37babbb720 100644 --- a/web/ee/components/cycles/active-cycle/cycle-chart/chart.tsx +++ b/web/ee/components/cycles/active-cycle/cycle-chart/chart.tsx @@ -31,10 +31,19 @@ type Props = { isFullWidth?: boolean; estimateType?: string; plotType: string; + showToday?: boolean; }; export const ActiveCycleChart = observer((props: Props) => { - const { areaToHighlight, data = [], cycle, isFullWidth = false, plotType, estimateType = "ISSUES" } = props; + const { + areaToHighlight, + data = [], + cycle, + isFullWidth = false, + plotType, + estimateType = "ISSUES", + showToday, + } = props; const { resolvedTheme } = useTheme(); const colors = getColors(resolvedTheme); @@ -53,7 +62,7 @@ export const ActiveCycleChart = observer((props: Props) => { data={dataWithRange} margin={{ top: isFullWidth ? 10 : 30, - right: isFullWidth ? 10 : 0, + right: isFullWidth ? 10 : 20, bottom: isFullWidth ? 30 : 70, left: isFullWidth ? -30 : 20, }} @@ -126,10 +135,12 @@ export const ActiveCycleChart = observer((props: Props) => { stroke={colors.axisLines} text={colors.axisText} startDate={startDate} + showToday={showToday} /> } tickLine={false} interval={0} + minTickGap={5} /> { fillOpacity={0.5} /> + {/* Required when manual cycles are implemented */} {/* Beyond Time */} - + {/* { position="middle" /> )} - + */} {/* Today */} {today < endDate && ( @@ -191,8 +203,38 @@ export const ActiveCycleChart = observer((props: Props) => { )} {/* Beyond Time */} + {/* Ideal - Actual */} + + + {/* Ideal */} + + {areaToHighlight === "ideal" && ( + + )} {/* Started */} - + {areaToHighlight === "started" && ( { isAnimationActive={false} /> )} - {/* Ideal */} - - {areaToHighlight === "ideal" && ( - - )} + {/* Scope */} { isAnimationActive={false} /> )} - {/* Ideal - Actual */} - ); diff --git a/web/ee/components/cycles/active-cycle/cycle-chart/ticks.tsx b/web/ee/components/cycles/active-cycle/cycle-chart/ticks.tsx index ef0dbf31f9..8baac29259 100644 --- a/web/ee/components/cycles/active-cycle/cycle-chart/ticks.tsx +++ b/web/ee/components/cycles/active-cycle/cycle-chart/ticks.tsx @@ -10,9 +10,10 @@ type TProps = { endDate?: string; stroke?: string; text?: string; + showToday?: boolean; }; const CustomizedXAxisTicks = (props: TProps) => { - const { x, y, payload, data, endDate, startDate, stroke, text } = props; + const { x, y, payload, data, endDate, startDate, stroke, text, showToday } = props; if (data === undefined || endDate === undefined) return null; const [year, month, day] = payload.value.split("-"); const monthName = new Date(payload.value).toLocaleString("default", { month: "short" }); @@ -25,7 +26,7 @@ const CustomizedXAxisTicks = (props: TProps) => { <> { {(payload.value === startDate || payload.value === endDate) && ( { {payload.value === format(startOfToday(), "yyyy-MM-dd") && payload.value < endDate && ( <> - + {day} {(payload.value === startDate || payload.value === endDate) && ( @@ -67,19 +68,21 @@ const CustomizedXAxisTicks = (props: TProps) => { {payload.value === startDate ? "Start" : "End"} )} - - - - Today - - + {showToday && ( + + + + Today + + + )} )} diff --git a/web/ee/components/cycles/active-cycle/details.tsx b/web/ee/components/cycles/active-cycle/details.tsx index b78529d6fc..85c99c1876 100644 --- a/web/ee/components/cycles/active-cycle/details.tsx +++ b/web/ee/components/cycles/active-cycle/details.tsx @@ -87,6 +87,7 @@ const ActiveCycleDetail = observer((props: ActiveCycleDetailProps) => { isFullWidth={containerWidth < 890} estimateType={computedEstimateType} plotType={computedPlotType} + showToday /> ) : ( diff --git a/web/ee/components/cycles/active-cycle/formatter.ts b/web/ee/components/cycles/active-cycle/formatter.ts index 72e8d501ae..f19e7ca68f 100644 --- a/web/ee/components/cycles/active-cycle/formatter.ts +++ b/web/ee/components/cycles/active-cycle/formatter.ts @@ -13,7 +13,9 @@ const ideal = (date: string, scope: number, cycle: ICycle) => { const formatV1Data = (isTypeIssue: boolean, cycle: ICycle, isBurnDown: boolean, endDate: Date | string) => { const today = format(startOfToday(), "yyyy-MM-dd"); const data = isTypeIssue ? cycle.distribution : cycle.estimate_distribution; - const extendedArray = generateDateArray(endDate, endDate).map((d) => d.date); + const extendedArray = generateDateArray(endDate, endDate) + .filter((d) => d.date >= cycle.start_date! && d.date <= cycle.end_date!) + .map((d) => d.date); if (!data?.completion_chart) return null; if (isEmpty(data?.completion_chart)) return generateDateArray(new Date(cycle.start_date!), endDate); let progress = [...Object.keys(data.completion_chart), ...extendedArray].map((p) => { @@ -23,7 +25,7 @@ const formatV1Data = (isTypeIssue: boolean, cycle: ICycle, isBurnDown: boolean, const idealDone = ideal(p, total, cycle); return { date: p, - scope: p! <= format(endDate as Date, "yyyy-MM-dd") ? total : null, + scope: p! <= cycle.end_date! ? total : null, completed, backlog: isTypeIssue ? cycle.backlog_issues : cycle.backlog_estimate_points, started: p === today ? cycle[isTypeIssue ? "started_issues" : "started_estimate_points"] : undefined, @@ -42,7 +44,11 @@ const formatV1Data = (isTypeIssue: boolean, cycle: ICycle, isBurnDown: boolean, const formatV2Data = (isTypeIssue: boolean, cycle: ICycle, isBurnDown: boolean, endDate: Date | string) => { let today: Date | string = startOfToday(); const extendedArray = - endDate > today ? generateDateArray(today as Date, endDate).filter((d) => d.date >= cycle.start_date!) : []; + endDate > today + ? generateDateArray(today as Date, endDate).filter( + (d) => d.date >= cycle.start_date! && d.date <= cycle.end_date! + ) + : []; if (!cycle?.progress) return null; if (isEmpty(cycle.progress)) return generateDateArray(new Date(cycle.start_date!), endDate); const startDate = cycle.start_date && format(new Date(cycle.start_date), "yyyy-MM-dd"); diff --git a/web/ee/components/cycles/analytics-sidebar/base.tsx b/web/ee/components/cycles/analytics-sidebar/base.tsx index 0b89b81adb..c7ba929dfc 100644 --- a/web/ee/components/cycles/analytics-sidebar/base.tsx +++ b/web/ee/components/cycles/analytics-sidebar/base.tsx @@ -1,6 +1,5 @@ "use client"; -import { isEmpty } from "lodash"; import { observer } from "mobx-react"; // helpers import { TCycleEstimateType, TCyclePlotType } from "@plane/types"; @@ -76,8 +75,8 @@ export const SidebarChart = observer((props: TProps) => { projectId={projectId} handlePlotChange={handlePlotChange} handleEstimateChange={handleEstimateChange} - showEstimateSelection={!isEmpty(cycle.estimate_distribution)} className="!px-0 mt-0" + cycleId={cycle.id} />