Neeraj Fix Job Posting Analytics Frontend

[Neeraj-Kondaveeti]

Description

Related PRS (if any):

This frontend PR is related to the development backend PR.
To test this backend PR you need to checkout the development backend PR.
…

Main changes explained:

• Fixed Filter Alignment & Layout Consistency
• Improved Graph Alignment & Prevented Label Overflow
• Fixed Y-Axis Job Role Truncation / Overlap
• Enhanced Dark Mode Accessibility
• Added PropTypes validation for all incoming props (title, hits, applications, conversionRate, etc.).
• Updated ResizeObserver mock to include non-empty methods to eliminate SonarQube "empty method" issues.
  …

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/job-analytics
6. Verify the following :

• Filter Alignment
  • Date range dropdown + “Show %” checkbox + “Loading analytics…” have been provided with padding so that they are not hugging the extreme left side of the page.
• Converted Applications Graph and Non-Converted Applications Graph:
  • Bars fully visible inside container.
  • Labels do not overflow.
  • Tooltip is readable in dark mode (white text, not blue).
• Dark Mode
  - All labels, ticks, axes, and tooltip text remain fully readable.

Screenshots or videos of changes:

Note:

• This PR also introduces new test files for the analytics graphs to ensure future maintainability and consistent coverage of sorting, rendering, and dark-mode behaviors.
• A ResizeObserver mock was added and improved inside setupTests.js to prevent test environment crashes.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	aab02e7
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6928bf2f7c00960008630a44
😎 Deploy Preview	https://deploy-preview-4463--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
7 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

[VijayAnirudh]

Review Summary ✅

I pulled down the Neeraj_Fix_Job_Posting_Analytics_Frontend branch and tested it locally against the backend development branch. Here are the results of my verification:

• Filter Alignment & Layout Consistency
  • Date range dropdown, “Show %” checkbox, and “Loading analytics…” message now have proper padding and are no longer hugging the left edge.
• Graph Alignment & Label Handling
  • Converted and Non-Converted Applications graphs render fully within the container.
  • Y-axis job role labels are no longer truncated or overlapping.
  • Graph labels do not overflow outside their containers.
• Dark Mode Accessibility
  • Tooltip text is clearly readable in dark mode (white text instead of blue).
  • All labels, ticks, and axes remain legible in both light and dark themes.
• PropTypes Validation
  • Verified that incoming props (title, hits, applications, conversionRate, etc.) are validated correctly with no warnings in console.
• Testing & Maintainability
  • New test files for analytics graphs run successfully and cover sorting, rendering, and dark-mode behaviors.
  • Updated ResizeObserver mock resolves SonarQube “empty method” issues and prevents test environment crashes.
• Deployment Preview
  • Netlify deploy preview matches local behavior and confirms fixes are consistent in hosted environment.

Conclusion

All acceptance criteria have been met:

• UI fixes are working as expected.
• Dark mode accessibility is solid.
• Tests pass with no regressions.
• SonarQube Quality Gate passed.

Approving this PR

[IndraAnuraag9]

I have reviewed this PR locally using an Admin account. Everything is working as intended. Filter Alignment, Graph Alignment and Data Labels are properly contained without any overflow. Y-Axis Labels are no longer overlapping. No issues with visibility of labels in Dark Mode.

[Anusha-Gali]

Hi Neeraj,

I have reviewed your PR locally and all the requirement have been satisfied.

[Prem203]

Reviewed the PR with an admin account and the job analytics page does not seem to load any data. The console shows that no the api responded with 404 not found error. Let me know if I am doing anything wrong and I can check the PR again.

[one-community]

Thank you all, merging!