Gayatri - Fix rounding inconsistency between chart labels and legend in Blue Square Stats donut chart - #5455
Gayatri - Fix rounding inconsistency between chart labels and legend in Blue Square Stats donut chart#5455sawantgayatri19 wants to merge 16 commits into
Conversation
…sum in VolunteerStatusChart
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
one-community
changed the title
one-community
added
the
High Priority - Please Review First
ShreyasB02
left a comment
ShreyasB02
left a comment
There was a problem hiding this comment.
Hello,
Tested this PR locally with the backend development branch. Verified that the rounding is consistent between the chart labels and the the legend in the blue squares stats donut start section under total org summary.
Also verified that it works perfectly in dark mode and content is legible.
Approving the PR.
DeMoliT1on
left a comment
DeMoliT1on
left a comment
There was a problem hiding this comment.
Tested on local for branch Gayatri-Fix-BlueSquare-Rounding and verified that the values on chart labels and legend on the Blue Square Stats are consistent and do not mismatch.
Also checked that UI is consistent for both light mode and dark mode.
I observed that few of the Unit Test cases are failing for the PR checks, appreciate if you could look into it.
There was a problem hiding this comment.
Hello @sawantgayatri19,
Tested this PR locally with the backend development branch running.
Verification details:
- Navigated to Dashboard → Total Org Summary → Teams and Blue Squares → Blue Square Stats.
- Verified that the percentage callout labels and legend values in the Blue Square Stats donut chart are now completely aligned and consistently formatted to one decimal place (e.g.,
6.7%on both). - Tested across both Light Mode and Dark Mode; text legibility, contrast, and layout look solid in both themes.
- Verified that no visual truncation or premature rounding occurs on the callouts.
Everything functions as expected. Approving the PR! 👍
(Note: Don't forget to resolve the current merge conflicts in yarn.lock and check the CI test suite before merging).
cda1994
Thanks for testing this, Shreyas! Your approval got dismissed automatically since I pushed some additional commits (fixed a few CI/test issues unrelated to the rounding fix itself). Would you mind taking another quick look and re-approving when you get a chance? The rounding behavior you verified hasn't changed. |
|
@DeMoliT1on Thanks for the thorough testing! You flagged that some unit tests were failing in CI — that's fixed now. It turned out to be a Node.js version mismatch in the CI workflow files plus a stale/duplicate route in routes.jsx, both unrelated to the rounding logic itself. All checks are passing now except the unrelated Netlify deploy-preview ones. Could you take another look and re-approve since your review was dismissed by the new commits? |
|
@iAbhi001 Thanks for the detailed verification, and for flagging the yarn.lock merge conflict and CI check note! Both are resolved now — the merge conflict is fixed, and all the real test/lint checks are passing (the only red ones left are the Netlify deploy-preview checks, which are unrelated infra issues, not code problems). Since your approval got dismissed by the new commits, would you mind re-reviewing when you have a moment? |
RuthwikHM
left a comment
RuthwikHM
left a comment
There was a problem hiding this comment.
I tested the changes out locally and they are working as expected. Just one small change is to not commit the package-json and yarn lock files as none of the changes made require changes to the dependency versions from what I can make out. Also remove the .github/workflow files that are being shown as modified and being committed as well.
There was a problem hiding this comment.
I dont think any of the changes that were made required updates to the dependencies so this should not be pushed to the repo.
There was a problem hiding this comment.
I dont think any of the changes that were made required updates to the dependencies so this should not be pushed to the repo.
|
DeepighaJ
left a comment
DeepighaJ
left a comment
There was a problem hiding this comment.
Tested the Blue Square Stats section on the Total Org Summary page. The chart callout and legend percentages match and are displayed to one decimal place (e.g., 100.0%). Verified the percentages remain readable in dark mode. No issues observed.
DeMoliT1on
left a comment
DeMoliT1on
left a comment
There was a problem hiding this comment.
Hi @sawantgayatri19,
Thanks for the clarification for the Unit test cases. I re-confirmed the changes and everything seems to be working correctly. The chart labels and legend values are consistent with each other.
Approving!
iAbhi001
left a comment
iAbhi001
left a comment
There was a problem hiding this comment.
Hello @sawantgayatri19,
Re-tested the latest updates locally on the Gayatri-Fix-BlueSquare-Rounding branch alongside the backend development branch.
Verification Details:
- Navigation: Navigated to Dashboard → Total Org Summary → Teams and Blue Squares → Blue Square Stats.
- Precision & Alignment: Verified that the percentage callouts on the donut chart and the corresponding legend values consistently match and format to one decimal place (e.g.,
100.0%). - Theme Compatibility: Confirmed that the callout labels and legend remain clear, legible, and properly styled in Dark Mode.
- No visual or rounding issues observed.
Everything looks great and works as expected. Approving the PR! 👍
9 participants
Description
Fixed a rounding inconsistency bug on the Total Org Summary dashboard where the Blue Square Stats donut chart's inline callout labels showed whole numbers while the legend displayed one decimal place (e.g., 5% vs 5.3%). This update standardizes the percentage precision across both chart callout labels and the legend so they consistently match to one decimal place.
Related PRS (if any):
N/A
Main changes explained:
src/components/TotalOrgSummary/VolunteerStatus/externalLabelGuidesPlugin.jsto remove prematureMath.round()truncation and preserve floating-point percentage values.src/components/TotalOrgSummary/DonutChart/DonutChart.jsxto apply.toFixed(1)to percentage values within theexternalLabelGuidesplugin formatter.How to test:
Gayatri-Fix-BlueSquare-Rounding)npm installandnpm run start:localto run this PR locally (ensure backendHGNRestis running)6.7%) (feel free to include screenshot here)Screenshots or videos of changes:
(Attach your screenshot showing matching callout and legend percentages)