Roshini Seelamsetty: Volunteer Hours Distribution Chart Shows Incorrect Totals and Misleading Visualization

[roshini1212]

Description

Fixes Yagna PRIORITY HIGH: Volunteer Hours Distribution Chart Shows Incorrect Totals and Misleading Visualization

Summary: Redesigned pie chart to show volunteer counts per hour range (not misleading hour values). Fixed center total, 40+/50+ buckets, tooltips, and percentage labels.

Main changes explained:

• VolunteerHoursDistribution.jsx: formatRangeLabel(), HoursWorkList w/ counts, userData w/ percentages
• HoursWorkedPieChart.jsx: Center = totalHoursData.current (Leaderboard), tooltipType="hoursDistribution"
• NumbersVolunteerWorked.jsx: "X volunteers (Y%) logged Z+ hours..."
• CustomTooltip.jsx: Volunteers + % display
• Tests: Full coverage + PropTypes

How to test:

1. git checkout roshini/volunteer-hours-distribution-chart-visualization-fix in frontend
2. Run npm run start:local
3. Owner login → Reports → Total Org Summary
4. Verify: volunteer counts, Leaderboard total, 40-49→50+, hover tooltip
5. npm test ✅

Screenshots:

BEFORE:

Screen.Recording.2026-02-26.at.15.12.04.mov

AFTER:

PR.4913.Light.Mode.mov

PR.4913.Dark.Mode.mov

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	51b6b26
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69e2b2e82b9f3200083bb71b
😎 Deploy Preview	https://deploy-preview-4913--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.

[HemanthNidamanuru]

Hi Roshini,

Great work! All values look correct. Just noticed the pie chart labels are a bit off, some are cut off or not centered within their slices. Worth fixing the text positioning. Does this fall under the scope of this PR?

[Anusha-Gali]

Hi Roshini,

I have reviewed your PR locally, though the main functionality works as per requirement have found the below issues:

• The chart data labels are not compatible to dark mode
• The chart data labels overlap in case of bigger numerical values
• The Total Hours Worked label is extended into to the graph

[HemanthNidamanuru]

Hi Roshini,
I have reviewed your PR locally. The main functionality works as expected, however I noticed a few issues:

1. The Total Hours Worked label extends into the graph area
2. The chart data labels overlap when the numerical values are larger

I approved the changes accidentally.

[HemanthNidamanuru]

Hi Roshini,
I have reviewed your PR locally. The main functionality works as expected, however I noticed a few issues:

The Total Hours Worked label extends into the graph area
The chart data labels overlap when the numerical values are larger

[rohanrastogi311]

Hi Roshini,

The arrows don't function in dark mode (and look tacky). There's some clipping occurring with the numbers too.

[HemanthNidamanuru]

Hi Roshini,

I have reviewed your PR locally. The main functionality works as expected, however I noticed a few issues:

1. Percentage labels are missing on the smaller pie slices.
2. The hover tooltip is misaligned and not styled correctly in dark mode.

[Anusha-Gali]

Hi Roshini,

Thank you for making the suggested changes, i have reviewed your PR locally and it works as per requirement.

[sonarqubecloud]

Quality Gate passed

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