Neeraj Fix Hiring Analytics chart rendering and improve layout styling

[Neeraj-Kondaveeti]

Description

Related PRS (if any):

This frontend PR is related to the development backend PR.
…

Main changes explained:

This PR improves the clarity, accuracy, and usability of the “Number of People Hired vs. Total Applications” chart.

1. Chart Accuracy & Label Fixes

• Corrected misleading axis labeling.
• X-axis now dynamically updates:
  • "Number of Applications / Hires" in Count View
  • "Percentage of People Hired (%)" in Percentage View
• Y-axis label updated to "Role".

2. Added Percentage Toggle View

• Implemented toggle between:
  • Count View
  • Percentage View
• Percentage is calculated as:
  (totalHired / totalApplicants) * 100
• Values rounded to 1 decimal place.

3. UX & Readability Improvements

• Added clear legend for metric differentiation.
• Adjusted spacing (barSize, barCategoryGap, margins) to prevent label overlap.

---

How to test:

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:

   • Count View:

     • Blue = Total Applications
     • Green = People Hired
     • X-axis shows "Number of Applications / Hires"
     • Values display correctly without overlap

   • Percentage View:

     • Chart switches to percentage mode
     • X-axis shows "Percentage of People Hired (%)"
     • Values include % symbol
     • Domain is 0–100

   • Role Filtering:

     • Selecting/removing roles updates chart correctly

Screenshots or videos of changes:

Note:

• Edge cases validated (invalid date range, empty role selection, zero data).

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	5bf8f19
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/699f7c7aee002400088253cb
😎 Deploy Preview	https://deploy-preview-4896--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.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
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

[rohanrastogi311]

Hi Neeraj,

Well done with this implementation.

[Vishnu10-hub]

• Checked locally with backend running.

• Both Count and Percentage views display correctly.

• Values and axes render properly.

• Role filtering updates the chart as expected.