[WEB-4073] chore: Added done and pending values in cycle progress charts #3171

This commit is contained in:
Akshita Goyal
2025-05-12 19:33:30 +05:30
committed by GitHub
parent e7f3e46ff8
commit 1ffc65d4ce
2 changed files with 26 additions and 5 deletions

View File

@@ -28,11 +28,11 @@ const CustomTooltip = ({ active, payload, label, plotType, endDate }: Props) =>
</svg>
)}
</p>
<div className="flex flex-col space-y-2">
<div className="flex flex-col space-y-2 pb-2 border-b">
<span className="flex text-xs text-custom-text-300 gap-1">
<PlannedState className="my-auto" width="14" height="14" />
<span className="font-semibold">{Math.round(payload.ideal) || 0}</span>
<span> planned</span>
<span className="font-semibold">{Math.round(payload.scope) || 0}</span>
<span>scope</span>
</span>
<span className="flex text-xs text-custom-text-300 gap-1 items-center">
<InProgressState className="my-auto items-center" width="14" height="14" />
@@ -51,6 +51,19 @@ const CustomTooltip = ({ active, payload, label, plotType, endDate }: Props) =>
<span> {plotType === "burndown" ? "pending" : "done"}</span>
</span>
</div>
<div className="flex flex-col space-y-2">
<span className="flex text-xs text-custom-text-300 gap-1 items-center ml-0.5">
{plotType !== "burndown" ? (
<PendingState className="my-auto" width="12" height="12" />
) : (
<DoneState className="my-auto" width="12" height="12" />
)}
<span className="font-semibold">
{plotType !== "burndown" ? payload.scope - payload.completed || 0 : payload.completed || 0}
</span>
<span> {plotType !== "burndown" ? "pending" : "done"}</span>
</span>
</div>
</Card>
);
}

View File

@@ -78,6 +78,11 @@ const Summary = observer((props: Props) => {
},
],
secondaryStates: [
{
group: plotType !== "burndown" ? "Pending" : "Done",
key: plotType !== "burndown" ? "pending" : "completed",
states: plotType !== "burndown" ? ["started", "unstarted", "backlog", "cancelled"] : ["completed"],
},
{ group: "Unstarted", key: "unstarted", states: ["unstarted"] },
{ group: "Backlog", key: "backlog", states: ["backlog"] },
],
@@ -102,7 +107,7 @@ const Summary = observer((props: Props) => {
{isBehind ? <TrendingDown className=" mr-2" /> : <TrendingUp className=" mr-2" />}
<div className="text-md font-medium flex-1">
{isBehind ? "Trailing" : "Leading"} by{" "}
{Math.round(Math.abs((dataToday?.ideal ?? 0) - (dataToday?.actual ?? 0)))}{" "}
{Math.round(Math.abs((dataToday?.ideal || 0) - (dataToday?.actual || 0)))}{" "}
{Math.abs((dataToday?.ideal ?? 0) - (dataToday?.actual ?? 0)) > 1
? `${ESTIMATE_TYPE[estimateType]}s`
: ESTIMATE_TYPE[estimateType]}
@@ -171,7 +176,10 @@ const Summary = observer((props: Props) => {
key={index}
onClick={() => {
if (groupedProjectStates) {
const states = groupedProjectStates[group.key].map((state) => state.id);
const states = group.states?.reduce(
(acc, state) => acc.concat(groupedProjectStates[state].map((state) => state.id)),
[] as string[]
);
handleFiltersUpdate("state", states, true);
}
}}