Deep fix volunteer status pie chart

[deep3072]

Description

Added a new pie chart to show Total Mentors next to Total Volunteer pie chart

Related PRS (if any):

This frontend PR is related to the #1759 backend PR.

Main changes explained:

• Added a mentor-status pie chart that consumes mentorNumberStats and renders next to the volunteer chart with the shared footnote.
• Built externalLabelGuidesPlugin.js to draw connector lines and pill-shaped callouts
• Tweaked chart CSS (heading centering, count offset, container spacing) so the volunteer and mentor pie charts stay visually aligned.

How to test:

1. Checkout to deep-fix-volunteer-status-pie-chart branch in the frontend.
2. Checkout to deep-fix-volunteer-status-pie-chart branch in backend and run it to test.
3. Run npm install, and ... to run this PR locally.
4. Clear site data/cache.
5. Log in as Admin user.
6. Go to dashboard→ Reports→ Total Org Summary
7. Verify if the Total Mentors Chart is properly loaded or not.
8. Verify the count is changing as per date filters.

Screenshots or videos of changes:

Before:

Screen.Recording.2025-09-28.at.14.46.46.mov

After:

Screen.Recording.2025-09-28.at.14.41.37.mov

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	3d46c29
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69363fc42a15b60008ed5c57
😎 Deploy Preview	https://deploy-preview-4138--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]

PR verification confirms the Total Mentors Chart loads correctly under Total Org Summary. The mentor count updates accurately based on applied date filters.
https://github.com/user-attachments/assets/0d4a263a-56a7-4693-9544-3959d15ace32

[laharinandipati]

Its working as expected.

[laharinandipati]

Reviewed the concerned backend and frontend PRs. Working as expected

[ChiragBellara]

Reviewed PR #4138
The page loads and displays the pie chart as expected. The pie chart also reflects the change in values on applying a date filter.

However, I noticed that there is a time delay between the application of the date filter and it's reflection on the charts. This seems to happen on all the visualizations on the screen. I suggest adding a loading animation to the chart to ensure that it is not confusing to the users.

Delay.between.application.of.filter.and.its.reflection.on.the.charts.mov

[laynet]

Reviewed PR #4138. I followed the testing instructions and logged in as admin user running the backend with PR # 1759. The graph loaded as expected and changed when different dates were selected through the filters. Behaved as expected in dark mode as well. There was a significant lag between filter selection and graph load.

[akshith312]

Tested PR locally. Logged in as Admin.
All the charts are rendering as expected.

[Ramaruva]

Hi, changes are working as expected

[KurtisIvey]

Looks good and functions as intended. it does look like there's some merge conflicts that need to be sorted out though

Charts are visually balanced. Approved!

[Aswin20010]

Tested the new Mentor Status Pie Chart under Reports → Total Org Summary. Verified data rendering from mentorNumberStats, correct alignment beside the volunteer chart, and consistent count updates based on date filters. Confirmed the connector lines and pill-shaped callouts render correctly using externalLabelGuidesPlugin.js. Checked layout spacing, responsiveness, and dark mode — all functioning as expected. Approved the Frontend and related Backend PR.

[Aditya-gam]

• The mentor chart follows the same architectural pattern as the volunteer chart, ensuring consistency
• Props are properly typed with PropTypes validation
• Responsive design implementation with appropriate loading states
• The mentor donut chart renders correctly alongside the volunteer chart
• Clean separation of concerns with dedicated components for each chart

These are the issues I found:

• The floating labels disappear when positioned near the chart boundaries. The externalLabelGuidesPlugin calculates label positions but doesn't account for container overflow, causing labels to be clipped when they extend beyond the chart container's bounds.

• The chart headings ("TOTAL VOLUNTEERS" and "TOTAL MENTORS") use hardcoded colors (#828282 and #6c6c6c) that don't adapt to dark mode. These colors remain dark gray in dark mode, making them difficult to read against the dark background.

• The charts are clipped on smaller screens, particularly:
  • iPad Pro dimensions (1024px × 1366px)
  • Screen widths between 992.50px x 1025px to 1390px x 1025px
• The current CSS uses fixed flex values and doesn't properly handle the container width constraints for these breakpoints.

Test Video:

TestVideo.mov

[sonarqubecloud]

Quality Gate passed

Issues
19 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

[Aditya-gam]

• Tested the new changes on the local environment.
• The labels now don't overflow and are properly visible.

• The chart headings ("TOTAL VOLUNTEERS" and "TOTAL MENTORS") now appropriately adapt to dark mode.

  

• The charts are now responsive for smaller screen sizes.

• Checked for multiple screen sizes, including the ones mentioned in the first review. The Charts are now responsive for all screen sizes.

Test Video:

UpdatedTestVideo.mov

[sonarqubecloud]

Quality Gate passed

Issues
5 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

[one-community]

Thank you all, merging!