From d3c56c1765eead777e977d66768e0c076267ef08 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Fri, 23 Jun 2023 11:09:34 +0530 Subject: [PATCH] fix: cycle stats empty state (#1338) * chore: active cycle percentage fix * fix: progress chart x-axis values --- .../core/sidebar/progress-chart.tsx | 25 ++- .../cycles/active-cycle-details.tsx | 173 +++++++++--------- .../components/cycles/active-cycle-stats.tsx | 153 ++++++++-------- .../components/cycles/single-cycle-list.tsx | 18 +- apps/app/helpers/date-time.helper.ts | 7 +- 5 files changed, 211 insertions(+), 165 deletions(-) diff --git a/apps/app/components/core/sidebar/progress-chart.tsx b/apps/app/components/core/sidebar/progress-chart.tsx index e6349bfe5..47af406cc 100644 --- a/apps/app/components/core/sidebar/progress-chart.tsx +++ b/apps/app/components/core/sidebar/progress-chart.tsx @@ -3,7 +3,7 @@ import React from "react"; // ui import { LineGraph } from "components/ui"; // helpers -import { renderShortNumericDateFormat } from "helpers/date-time.helper"; +import { getDatesInRange, renderShortNumericDateFormat } from "helpers/date-time.helper"; //types import { TCompletionChartDistribution } from "types"; @@ -46,6 +46,27 @@ const ProgressChart: React.FC = ({ distribution, startDate, endDate, tota pending: distribution[key], })); + const generateXAxisTickValues = () => { + const dates = getDatesInRange(startDate, endDate); + + const maxDates = 4; + const totalDates = dates.length; + + if (totalDates <= maxDates) return dates; + else { + const interval = Math.ceil(totalDates / maxDates); + const limitedDates = []; + + for (let i = 0; i < totalDates; i += interval) + limitedDates.push(renderShortNumericDateFormat(dates[i])); + + if (!limitedDates.includes(renderShortNumericDateFormat(dates[totalDates - 1]))) + limitedDates.push(renderShortNumericDateFormat(dates[totalDates - 1])); + + return limitedDates; + } + }; + return (
= ({ distribution, startDate, endDate, tota ]} layers={["grid", "markers", "areas", DashedLine, "slices", "points", "axes", "legends"]} axisBottom={{ - tickValues: chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : "")), + tickValues: generateXAxisTickValues(), }} enablePoints={false} enableArea diff --git a/apps/app/components/cycles/active-cycle-details.tsx b/apps/app/components/cycles/active-cycle-details.tsx index 5a0c1cb58..b2f27d037 100644 --- a/apps/app/components/cycles/active-cycle-details.tsx +++ b/apps/app/components/cycles/active-cycle-details.tsx @@ -395,82 +395,87 @@ export const ActiveCycleDetails: React.FC = () => {
High Priority Issues
{issues ? ( - issues.map((issue) => ( -
-
-
+ issues.length > 0 ? ( + issues.map((issue) => ( +
+
+
+ + + {issue.project_detail?.identifier}-{issue.sequence_id} + + +
- - {issue.project_detail?.identifier}-{issue.sequence_id} + + {truncateText(issue.name, 30)}
- - - {truncateText(issue.name, 30)} - - -
- -
-
- {getPriorityIcon(issue.priority, "text-sm")} -
- {issue.label_details.length > 0 ? ( -
- {issue.label_details.map((label) => ( - - - {label.name} - - ))} +
+
+ {getPriorityIcon(issue.priority, "text-sm")}
- ) : ( - "" - )} -
- {issue.assignees && - issue.assignees.length > 0 && - Array.isArray(issue.assignees) ? ( -
- + {issue.label_details.length > 0 ? ( +
+ {issue.label_details.map((label) => ( + + + {label.name} + + ))}
) : ( "" )} +
+ {issue.assignees && + issue.assignees.length > 0 && + Array.isArray(issue.assignees) ? ( +
+ +
+ ) : ( + "" + )} +
+ )) + ) : ( +
+ No issues present in the cycle.
- )) + ) ) : ( @@ -481,27 +486,29 @@ export const ActiveCycleDetails: React.FC = () => {
-
-
-
issue?.state_detail?.group === "completed") - ?.length / - issues.length) * - 100 ?? 0 - }%`, - }} - /> + {issues && issues.length > 0 && ( +
+
+
issue?.state_detail?.group === "completed") + ?.length / + issues.length) * + 100 ?? 0 + }%`, + }} + /> +
+
+ {issues?.filter((issue) => issue?.state_detail?.group === "completed")?.length} of{" "} + {issues?.length} +
-
- {issues?.filter((issue) => issue?.state_detail?.group === "completed")?.length} of{" "} - {issues?.length} -
-
+ )}
diff --git a/apps/app/components/cycles/active-cycle-stats.tsx b/apps/app/components/cycles/active-cycle-stats.tsx index a01293d43..30b69ffaf 100644 --- a/apps/app/components/cycles/active-cycle-stats.tsx +++ b/apps/app/components/cycles/active-cycle-stats.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { Fragment } from "react"; // headless ui import { Tab } from "@headlessui/react"; @@ -32,6 +32,7 @@ export const ActiveCycleProgressStats: React.FC = ({ cycle }) => { return ( { switch (i) { @@ -68,81 +69,87 @@ export const ActiveCycleProgressStats: React.FC = ({ cycle }) => { Labels - - - {cycle.distribution.assignees.map((assignee, index) => { - if (assignee.assignee_id) - return ( - - - {assignee.first_name} -
- } - completed={assignee.completed_issues} - total={assignee.total_issues} - /> - ); - else - return ( - -
- User 0 ? ( + + + {cycle.distribution.assignees.map((assignee, index) => { + if (assignee.assignee_id) + return ( + + + {assignee.first_name}
- No assignee -
- } - completed={assignee.completed_issues} - total={assignee.total_issues} - /> - ); - })} - - - {cycle.distribution.labels.map((label, index) => ( - - - {label.label_name ?? "No labels"} -
- } - completed={label.completed_issues} - total={label.total_issues} - /> - ))} - - + ); + else + return ( + +
+ User +
+ No assignee +
+ } + completed={assignee.completed_issues} + total={assignee.total_issues} + /> + ); + })} + + + {cycle.distribution.labels.map((label, index) => ( + + + {label.label_name ?? "No labels"} +
+ } + completed={label.completed_issues} + total={label.total_issues} + /> + ))} + + + ) : ( +
+ No issues present in the cycle. +
+ )} ); }; diff --git a/apps/app/components/cycles/single-cycle-list.tsx b/apps/app/components/cycles/single-cycle-list.tsx index f8a1fbf28..d957b5ab7 100644 --- a/apps/app/components/cycles/single-cycle-list.tsx +++ b/apps/app/components/cycles/single-cycle-list.tsx @@ -282,12 +282,18 @@ export const SingleCycleList: React.FC = ({ > {cycleStatus === "current" ? ( - - - {Math.floor((cycle.completed_issues / cycle.total_issues) * 100)} % - + {cycle.total_issues > 0 ? ( + <> + + + {Math.floor((cycle.completed_issues / cycle.total_issues) * 100)} % + + + ) : ( + No issues present + )} ) : cycleStatus === "upcoming" ? ( diff --git a/apps/app/helpers/date-time.helper.ts b/apps/app/helpers/date-time.helper.ts index 6333e7558..d462474a4 100644 --- a/apps/app/helpers/date-time.helper.ts +++ b/apps/app/helpers/date-time.helper.ts @@ -25,13 +25,18 @@ export const findHowManyDaysLeft = (date: string | Date) => { return Math.ceil(timeDiff / (1000 * 3600 * 24)); }; -export const getDatesInRange = (startDate: Date, endDate: Date) => { +export const getDatesInRange = (startDate: string | Date, endDate: string | Date) => { + startDate = new Date(startDate); + endDate = new Date(endDate); + const date = new Date(startDate.getTime()); const dates = []; + while (date <= endDate) { dates.push(new Date(date)); date.setDate(date.getDate() + 1); } + return dates; };