Mahathi - Improve applicant volunteer ratio chart visualization

[mahathiganimi]

Description

Issue found:

1. The page loaded only the title “Number of People Hired vs. Total Applications”.

Related PRS (if any):

This frontend PR is related to the https://github.com/OneCommunityGlobal/HGNRest/pull/2313 backend PR.
Old PR https://github.com/OneCommunityGlobal/HighestGoodNetworkApp/pull/5123

Changes

• Updated the y-axis label to Role.
• Updated Count View x-axis labeling to Number of Applications and Hires.
• Added a Percentage View displaying the calculated Hire Rate.
• Added a segmented Count / Percentage toggle.
• Improved chart legend placement and labeling.
• Added an All Roles option to the Role filter.
• Selecting All Roles displays all available roles.
• Selecting individual roles automatically removes All Roles.
• Selecting All Roles again clears individual role selections.
• Added custom tooltips for Count and Percentage views.
• Added Total Applications, People Hired, and Hire Rate information to tooltips.
• Added theme-aware chart row highlighting on hover.
• Improved hover behavior in both light and dark modes.
• Improved date input styling and filter spacing.
• Improved chart margins and value-label presentation.
• Added clearer no-data messaging for empty filter results.
• Improved responsive styling.

Testing

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. Navigate to: http://localhost:5173/applicant-volunteer-ratio
6. Verify:
   Chart loads correctly and does not get stuck on "Loading..."
7. Toggle dark mode:
   Legend colors should match chart bars (blue for Total Applications, green for People Hired)
   Legend should be clearly visible and readable

Note

This PR specifically addresses post-merge feedback related to chart loading

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	4b638b8
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a87f75999c9d80008b9a488
😎 Deploy Preview	https://deploy-preview-5457--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

[sonarqubecloud]

Quality Gate passed

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

[iAbhi001]

Pull Request Review Feedback

Hi @mahathiganimi,

Thanks for working on the UI improvements for the applicant-to-volunteer ratio visualization.

During local testing on this branch, I encountered a blocking error where the role options fail to populate.

Issue Identified

• Behavior: When navigating to /applicant-volunteer-ratio, the UI displays a "Failed to load roles" error message, preventing the role filter from populating and blocking the chart from rendering.
• Network / Console Observations:
• Endpoint fetching roles fails to resolve / returns an error state.
• (Optional: Add specific HTTP status code or console error here, e.g., 500 Internal Server Error on GET /api/...)

Steps to Reproduce

1. Check out branch Mahathi_improve_applicant_volunteer_ratio_chart_ui locally (or test against the latest backend dependency).
2. Log in as an Admin user.
3. Clear site data/cache and navigate to http://localhost:5173/applicant-volunteer-ratio.
4. Observe the "Failed to load roles" error state.

Requested Actions

• Please verify if there is an unhandled edge case or missing fallback when fetching role data.
• If this requires specific seed data or additional updates from backend PR [#2313](OneCommunityGlobal/HGNRest#2313), please update the testing instructions or handle the error gracefully so the UI doesn't break.

Once this is resolved, I’ll be happy to re-test and complete the review!