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

Bug Fixes

• 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	ee43e4f
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a098ae3b53508000890f36c
😎 Deploy Preview	https://deploy-preview-5281--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
11 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

[DeepighaJ]

• Checked out to current branch and ran PR locally.
• In dark mode, selected values in the Roles multi-select dropdown are not visually highlighted properly. The selected option appears similar to unselected options, making it difficult to distinguish active selections.
• The colors of numbers inside the chart is inconsistent.
• Large empty space exists between the filter section and chart.
• The multi-select box height is small for two selected items and scrollbar appears cramped.
• In mobile view, some outer labels are also truncated/clipped near the screen edges.

[kunchalasireesha]

Screen.Recording.2026-05-19.at.7.14.44.PM.mov

I found two UI-related issues in the Roles multi-select component:

1. Multi-select box usability/UI issue
   The Roles multi-select box is currently resizable (can be dragged to expand or shrink) and includes a scroll bar. In its default state, the scrollable area appears small and cramped, which affects the overall UI experience. It may be better to implement this differently to improve usability and maintain a cleaner, more consistent UI.

2. Selected values are not visually distinguishable
   The selected values in the Roles multi-select dropdown are not visually highlighted properly. Selected options appear very similar to unselected ones, making it difficult for users to distinguish active selections. Adding clearer visual differentiation for selected items would improve usability and accessibility.

[HemanthNidamanuru]

1. Selected roles are not highlighted. In the Roles dropdown, selected and unselected options look the same, so it's hard to know what is selected.

2. Roles multi-select box can be dragged and resized. The box can be dragged to resize, looks too small by default, and the scroll bar makes it feel messy.

3. Calendar is not aligned in dark mode. The calendar appears misaligned when dark mode is on.