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	f0a4435
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a0fac199d94640008bcc6fb
😎 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.

[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.

[sonarqubecloud]

Quality Gate passed

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

[sohailuddinsyed]

Hi @DeepighaJ @kunchalasireesha @HemanthNidamanuru,
Thank you for your reviews. I addressed all the feedback, here's what was updated:

• Inconsistent count colors inside segments - This is intentional. The color (black or white) is chosen based on each segment's background brightness to ensure readable contrast to improve accessibility.
• Empty space between filter and chart - tightened filter section margin, PieChart margins, and container padding.
• Multi-select roles filter - replaced with a checkbox list. All roles visible at once, no scrollbar.
• Labels clipping on small screens - outside labels are hidden below 450px width. A compact color-coded legend appears below the chart instead so no data is lost.
• Date picker in dark mode - added color-scheme: dark to date inputs so the native calendar popup renders in dark mode.

Additional improvements:

• Empty space at the bottom - removed the fixed aspect-ratio: 1/1 that was forcing excess vertical space. Chart now sizes to its content.
• Font sizes - increased across all labels: inside counts, outside names, percentages, and center total.
• Reset button - now turns red when filters are active so users know a filter is applied and the button is available. Returns to default style when no filters are set.
• Hover segment getting clipped - increased PieChart margins and added overflow: visible to the SVG surface to give the expanded segment room.

Kindly re-review to confirm all changes perform as expected.

[HemanthNidamanuru]

Hi,

I reviewed and retested this PR locally. The chart rendering, hover behavior, animations, and theme switching are working as expected. However, the error messages could use some top padding for better UI spacing.

Also, even after changing the date filters without selecting a specific role, the values remain the same, so I’m unable to properly validate whether the date filter functionality is working correctly.

[kunchalasireesha]

Hey Sohail, I still don’t see the changes I requested. Maybe you can use the multi-select dropdown in Roles instead of the multi-select box? I think that would provide a better user experience and align more with the expected behavior.

[DeepighaJ]

• The chart position is still quite low on the page, leaving a large amount of whitespace between the filter section and the visualization.
• The filter and reset works as expected.
• But in dark mode the chosen roles in multiselect dropdown are not highlighted like in light mode. In light mode its highlighted in grey when selected. I'm confused after selecting the roles in the dropdown, if they are selected on not in dark mode.
• In mobile view label clipped issue still there. PFA screenshot.