Yan fix piechart visualization by yany960 · Pull Request #4928 · OneCommunityGlobal/HighestGoodNetworkApp

yany960 · 2026-03-02T02:59:21Z

Description

Video: https://www.loom.com/share/c177e2f6c87c4005aad39dff9b99460f?sid=1a103e3c-dc92-4e62-9c2f-3b8c52f5305e

Video: https://drive.google.com/file/d/1Yl4CFf2yjRINe8chVIkw98kZsPPvFvWv/view

Fixes # (Priority: Medium)

Related PRS (if any):

#4031

Main changes explained:

Delete file A for removing unused components …
Update file B for including new pattern …
Create file C for introducing new components …
…

How to test:

Check into current branch
Do npm install and ... to run this PR locally
Clear site data/cache
Go to Dashboard → Reports → Reports → Projects
Select any Project name and Toggle the Checkboxes to view PieCharts (Example: /projectreport/6689dbd6c5e25463a05bcc9e)
Verify the changes made (In Both Dark Mode and Light Mode)

Screenshots or videos of changes:

…ed the toggle button issue

netlify · 2026-03-02T02:59:25Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`bbc5285`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69db3ddb25e15d000894bade
😎 Deploy Preview	https://deploy-preview-4928--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

rohanrastogi311

Hi Yanyan,

Well done with this implementation

- Add adaptive gap calculation based on screen size and data count - Add dynamic text offset for different screen sizes - Limit number of labels shown on small screens (6 on mobile, 8 on tablet) - Simplify label text on smaller screens for better readability - Ensure layout recalculates when window size changes Fixes PR #4928 responsive text overlap issue

- Add adaptive gap calculation based on screen size and data count - Add dynamic text offset for different screen sizes - Limit number of labels shown on small screens (6 on mobile, 8 on tablet) - Simplify label text on smaller screens for better readability - Ensure layout recalculates when window size changes

- Add iterative dodgeY with backward pass to prevent overlaps - Increase base gap from 16/20 to 20/24 pixels - Expand vertical bounds from R+60 to R+100 for more space - Add third pass to ensure labels stay within bounds

- Add automatic aggregation of small values into 'Others' category - Implement smart label distribution from center outward - Add adaptive gap calculation based on available space - Improve responsive design with dynamic container heights - Simplify text display for smaller screens

Anusha-Gali

Hi Yan,

I have reviewed your PR locally and although the functionality works as per requirement, found only one issues - the UI in mobile responsiveness is not compatible to the mobile

- Move responsive styles from CSS to inline JSX styles - ProjectPieChart: dynamic button-container positioning and scale based on windowSize - PieChartByProject: inline responsive styles for title, description, labels, and text - AGGRESSIVELY reduce pie chart size on mobile: - <=400px: outerRadius 90px (was 135px) - <=576px: outerRadius 105px (was 140px) - <=640px: outerRadius 120px - Reduce container dimensions and text offset for mobile - Reduce parent container height: 22rem/26rem/32rem based on screen size - Ensure proper display on iPhone and other mobile devices

- Use inline styles in JSX instead of CSS media queries - ProjectPieChart.jsx: dynamic circleSize, container dimensions, textOffset, fontSize - ProjectPieChart.jsx: inline styles for button container positioning - PieChartByProject.jsx: dynamic parent container height based on screen width - PieChartByProject.jsx: add missing isMobile, isTablet, isSmallMobile variable definitions - IMPROVED: Reduce pie size more aggressively on mobile (outerRadius 75px/85px) - IMPROVED: Simplify center text to 'All' + hours only on small screens - IMPROVED: Smaller switch button scale (0.55/0.65) on mobile - IMPROVED: Show only hours (e.g., '43.2h') in labels on small screens - IMPROVED: Reduce text offset further (10px/20px) to prevent cutoff - BUGFIX: Pass windowSize parameter to renderActiveShape function - BUGFIX: Fix button position to always center (top: 50%) instead of varying percentages - ENHANCEMENT: Center text changes between 'All'/'Selected' based on showAllValues state - ENHANCEMENT: Button scales down further when item selected (0.45/0.55 vs 0.55/0.65) - Keep CSS files identical to development branch (no changes) - Ensures mobile display on iPhone and other devices without violating CSS Module policy

ManojPuttaswamy · 2026-03-21T04:22:24Z

+  }, [mergedProjectUsersArray,showMembers])
+
+  // Detect screen size for responsive styling
+  const isMobile = windowSize.width <= 576;


CSS media queries should handle responsiveness instead.

rohanrastogi311

Hi Yan,

Well done.

sonarqubecloud · 2026-04-12T06:39:39Z

Quality Gate passed

Issues
26 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Anusha-Gali

Hi Yan,

The pie chart labels are not visible in mobile responsive mode.
Issue

rapolusidhartha · 2026-04-25T20:57:46Z

Hii
The piechart visualization is perfectly working

rapolusidhartha

Great Job working perfect

one-community · 2026-05-14T17:55:13Z

Thank you all, merging!

ujjwalbPipKcK and others added 3 commits September 5, 2025 19:00

updated the pie chart info color from gray to white in dark mode. fix…

c8da0eb

…ed the toggle button issue

Updated visualization when All is selected

e8802e7

fix: resolve conflicts and update piechart logic

ec0208f

yany960 added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Mar 2, 2026

one-community mentioned this pull request Mar 5, 2026

Yu Yan taking over for Ujjwal - fix: project report piechart visualization #4031

Closed

rohanrastogi311 previously approved these changes Mar 7, 2026

View reviewed changes

yany960 dismissed rohanrastogi311’s stale review via 169c94d March 9, 2026 14:45

yany0309 added 4 commits March 9, 2026 22:54

fix: enhance pie chart label anti-overlap algorithm

32454f6

- Add iterative dodgeY with backward pass to prevent overlaps - Increase base gap from 16/20 to 20/24 pixels - Expand vertical bounds from R+60 to R+100 for more space - Add third pass to ensure labels stay within bounds

fix: filter small data labels and improve mobile text visibility

19d55b2

fix: resolve ReferenceError - item used before definition

1c1f07d

fix: simplify label filtering to prevent empty visibleSet error

b95d1f8

yany960 force-pushed the yanyan_fix_piechart_visualization_4031 branch from 604e6a2 to b95d1f8 Compare March 9, 2026 16:17

yany0309 added 4 commits March 10, 2026 13:43

fix: correct useRef usage for data aggregation

2b51aaf

fix: improve mobile label visibility - reduce offset and text length

fe0500c

fix: reduce pie size and text offset for mobile visibility

dce7eb0

yany960 requested a review from rohanrastogi311 March 10, 2026 07:08

fix: remove redundant conditional (SonarQube issue)

cfe1e22

yany960 changed the title ~~Yanyan fix piechart visualization 4031~~ Yan fix piechart visualization Mar 10, 2026

Anusha-Gali suggested changes Mar 13, 2026

View reviewed changes

yany960 force-pushed the yanyan_fix_piechart_visualization_4031 branch from cf46e1b to 8654aa6 Compare March 17, 2026 05:47

yany960 force-pushed the yanyan_fix_piechart_visualization_4031 branch 5 times, most recently from ea9f9be to 587daca Compare March 17, 2026 06:29

yany960 force-pushed the yanyan_fix_piechart_visualization_4031 branch from 587daca to 957afa6 Compare March 17, 2026 06:34

yany960 force-pushed the yanyan_fix_piechart_visualization_4031 branch from 957afa6 to 7b220e2 Compare March 17, 2026 06:43

ManojPuttaswamy requested changes Mar 21, 2026

View reviewed changes

rohanrastogi311 previously approved these changes Mar 22, 2026

View reviewed changes

Move pie chart responsiveness to CSS media queries

7fbedc7

yany960 dismissed rohanrastogi311’s stale review via 7fbedc7 April 12, 2026 06:34

yany0309 added 2 commits April 11, 2026 23:36

Convert pie chart styles to CSS module

0f57934

Update WBS pie chart to use CSS module

bbc5285

Anusha-Gali suggested changes Apr 17, 2026

View reviewed changes

rapolusidhartha approved these changes Apr 25, 2026

View reviewed changes

one-community merged commit 6f21716 into development May 14, 2026
10 checks passed

one-community mentioned this pull request May 19, 2026

Frontend Release to Main [4.91] #5286

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Yan fix piechart visualization#4928

Yan fix piechart visualization#4928
one-community merged 18 commits into
developmentfrom
yanyan_fix_piechart_visualization_4031

yany960 commented Mar 2, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Mar 2, 2026 •

edited

Loading

Uh oh!

rohanrastogi311 left a comment

Uh oh!

Anusha-Gali left a comment

Uh oh!

ManojPuttaswamy Mar 21, 2026

Uh oh!

rohanrastogi311 left a comment

Uh oh!

sonarqubecloud Bot commented Apr 12, 2026

Uh oh!

Anusha-Gali left a comment

Uh oh!

rapolusidhartha commented Apr 25, 2026

Uh oh!

rapolusidhartha left a comment

Uh oh!

one-community commented May 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

Uh oh!

Conversation

yany960 commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related PRS (if any):

Main changes explained:

How to test:

Screenshots or videos of changes:

Uh oh!

netlify Bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for highestgoodnetwork-dev ready!

Uh oh!

rohanrastogi311 left a comment

Choose a reason for hiding this comment

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

ManojPuttaswamy Mar 21, 2026

Choose a reason for hiding this comment

Uh oh!

rohanrastogi311 left a comment

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud Bot commented Apr 12, 2026

Quality Gate passed

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

rapolusidhartha commented Apr 25, 2026

Uh oh!

rapolusidhartha left a comment

Choose a reason for hiding this comment

Uh oh!

one-community commented May 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

yany960 commented Mar 2, 2026 •

edited

Loading

netlify Bot commented Mar 2, 2026 •

edited

Loading