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

[ujjwalbPipKcK]

Description

Please include the exact bug/functionality description and a summary of the changes/ related issues. Please also include any other relevant motivation and context:

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):

None Required
…

Main changes explained:

• Updated the text color for the details above the pie chart to white in Dark Mode
• Fixed the Issue when both Pie Charts were active, toggling the Button for the 2nd Pie Chart would toggle it for the first Pie Chart
• Reworked the Show All Details feature to allow labels with a simple collision-avoidance
  …

How to test:

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

Screenshots or videos of changes:

2025-09-05.21-59-44.mp4

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	e8802e7
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/68bbc0fc431e0f000873ad21
😎 Deploy Preview	https://deploy-preview-4031--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.

[hemanthvenkat]

"Tested by navigating to Dashboard → Reports → Projects, toggling checkboxes to view PieCharts, and verifying in both Dark and Light modes. Working as expected."

PR4031.mp4

[jaydeep138]

Tested the changes and everything is working as expected.
• Pie charts correctly display project committed hours and all-time total hours.
• Toggle button behavior is functioning properly for both pie charts.
• Dark Mode updates are applied correctly (text color and toggle handling).

Approving this PR

[AbhishekSrikanth]

Working as expected. The checkboxes work, and the Pie charts are displayed, and they're interactive. Looks good on dark mode as well.

PR4031.mp4

[deep3072]

Verified the changes in dark mode and light mode.

• The toggle functions work well with the pie chart and it reflects the changes
• Dark mode change reflects proper color coding on the UI.

Approve.
Video: https://github.com/user-attachments/assets/e111e164-dce2-4fde-a4ea-40c8c6a2354e

[Swetha-1306]

Tested the PR. All the checkboxes and toggles work fine, everything works as described.

[Prem203]

Tested the PR with an admin account. The chart displays the data on clicking the checkbox and the toggle works correctly. The chart is displayed in both light and dark modes.

Although when the data is too compressed in all toggle, some of the names are overlapping. The UI is not responsive for all devices and the names are not visible in mobile screens.

[beblicarl]

This feature worked as intended and the code is great

https://www.loom.com/share/ea712b0c417645d4a184d734a03bae08?sid=d7d845c1-9c14-4f8f-a706-03a0cd5ff2c7

[Anusha-Gali]

Hi Ujjwal,

I have reviewed your PR locally and the names are overlapping and are not visible in responsive mode, mobile screen.

[VijayAnirudh]

For some reason I cannot login. I've followed the exact same steps mentioned.

Please let me know If I'm doing something wrong!

[rohanrastogi311]

Implementation is sleek, really nicely done with the piechart (very smooth). Dark mode is working well.

[one-community]

Redone with this #4928