Sohail: Job Posting Page Analytics: UI Fix for applicants by experience donut chart

[sohailuddinsyed]

Description

This PR is a follow-up to #4961 and delivers a full visual overhaul of the "Applicants by Experience" donut chart, addressing post-merge feedback on chart readability, label rendering, and data validation.

Main Changes Explained

Chart Labels & Layout

• Removed the legend/details panel below the chart — all information is now shown directly on the chart
• Added custom elbow label lines with full geometry control (diagonal + horizontal segment) so labels never clip
• Each segment now shows the count at its visual centroid, computed via midAngle/innerRadius/outerRadius
• Label lines show the experience label on the top line and percentage below it
• Removed tooltip — no hover popover needed since all data is always visible

Animation & Hover

• Sweep animation plays on initial load and on every filter apply/reset
• Counts, labels, and center total are hidden during animation and revealed only when it completes, preventing bleed-through
• Respects prefers-reduced-motion — animation is skipped and values shown immediately for users who have it enabled
• Hover over a segment expands the arc outward, thickens the label line, and increases font sizes for the label and inside count

Date Filter Validation

• Both date inputs are capped at today via max attribute — future dates are greyed out in the native picker
• applyFilters validates manually typed future dates and shows a clear error message
• resetFilters now also clears any validation error state

Bug Fixes

• Empty API response now correctly resets total to 0, preventing a stale center count
• Invalid date range previously cleared the chart silently — now shows "Start date must be before end date"
• TODAY and PREFERS_REDUCED_MOTION moved to module-level constants to prevent recalculation on every render
• animationDone effect dependency changed from visibleChartData (unstable array reference) to chartData to prevent unnecessary resets
• Removed ~3,000 chars of dead CSS from the removed legend, tooltip, and details panel

How to Test

1. Checkout the current branch
2. Run npm install followed by npm run start:local
3. Clear site data/cache to ensure fresh configuration
4. Log in as an Owner user and navigate to /ExperienceDonutChart
5. Verify the donut chart renders with:
   • Counts inside each segment
   • Label lines with experience name and percentage
   • Total count in the center hole
6. Hover over each segment and verify it expands with larger text and a thicker line
7. Verify counts and labels are hidden during the sweep animation and appear only once it finishes
8. Apply date filters — verify future dates are greyed out in the picker and manually typed future dates show an error
9. Apply an invalid date range (start after end) and verify the error message appears
10. Click Reset and verify the error clears and the chart reloads with unfiltered data
11. Switch between Light Mode and Dark Mode and verify labels, lines, and segment colors remain legible in both

Screenshots of changes

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	e42d6e9
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a0984bd7fc4790008ac409f
😎 Deploy Preview	https://deploy-preview-5280--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 failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

[sohailuddinsyed]

#5281 created as the replacement PR.