Adithya Enhanced Popularity Timeline Chart Frontend

[adithya-6101]

Description

Implements the Enhanced Role-Based Popularity Analytics dashboard for the Job Posting Analytics page. It replaces the previous basic line chart with a comprehensive visualization that compares "Hits" versus "Applications" for multiple job roles simultaneously.

The chart supports filtering by dynamic date ranges (3, 6, 12 months) and job roles, displays dual lines (solid for Hits, dashed for Applications), includes interactive highlighting via the legend/summary cards, and adapts to dark mode.

Related PRS (if any)

This frontend PR is related to backend PR Adithya - Enhanced Popularity Analytics Backend. To test this frontend PR, checkout backend PR Adithya - Enhanced Popularity Analytics Backend.

---

Main changes explained:

• Created EnhancedPopularityTimelineChart.jsx to render the advanced line chart with Recharts.
• Displays paired lines per role: Solid for Hits and Dashed for Applications.
• Added Interactive Highlighting: Clicking a role in the legend focuses on specific data.
• Added Role Performance Summary cards showing totals and dynamic conversion rates.
• Added Dynamic Filters:
  • Time Range (3, 6, 12 Months, All Time).
  • Multi-select Role filter.
  • "Show Low Volume" toggle to hide roles with minimal activity (<10 hits).

---

How to test:

1. Checkout the current branch
2. Run backend server and npm install / npm start on frontend
3. Clear site cache
4. Log in as admin
5. Ensure your frontend .env file is configured as:

   REACT_APP_APIENDPOINT="http://localhost:4500/api"
   

Note: Use http://localhost:4500/api instead of the staging endpoint (https://api-staging.highestgood.com/api) to see the graph working.

6. Navigate to http://localhost:5173/popularity-enhanced
7. Verify:
   • Graph is being display correctly
   • Data labels, markers, and tooltips appear
   • Filters dynamically update chart

---

Screenshots or videos of changes:

Enhanced.Popularity.Timeline.mp4

Note:

Please mute the audio of this recording. Timer sounds have been recorded.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	fb960fd
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/694adc0ce299ab000876f191
😎 Deploy Preview	https://deploy-preview-4416--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.

[sanjeev29]

Tested the PR changes locally on Chrome browser. The graph is being display correctly with data labels, markers, and tooltips. The filters dynamically update chart. Tested both in light and dark mode. The show volume toggle also works as expected.

[Anusha-Gali]

Hi Aditya,

I have reviewed your PR locally and the functionalities do work as per requirement but there are two UI issues which i have mentioned below.

The word "Show Low Volume" is not visible in dark mode.

The Filter by Role dropdown options are not visible in dark mode and does not adapt to dark mode

[adithya-6101]

Hi Aditya,

I have reviewed your PR locally and the functionalities do work as per requirement but there are two UI issues which i have mentioned below. The word "Show Low Volume" is not visible in dark mode. The Filter by Role dropdown options are not visible in dark mode and does not adapt to dark mode

Hi @Anusha-Gali, thanks for the review.

I've updated the CSS for the "Show Low Volume" label and added styling to the Role dropdown to fix the visibility issues in dark mode. Ready for a re-review when you have a chance.

[Anusha-Gali]

Hi Aditya,

I have re-reviewed your PR and it works as per requirement. The changes requested have been made and verified.

[bhanuanishakkineni]

Hello Adithya,
I have reviewed and tested both frontend and backend of this PR. Please find the backend comments at #1885.
I directed to http://localhost:5173/popularity-enhanced page and tested the functionality of role-based popularity timeline chart.
The filters are working and I am able to choose single or multiple roles, time range.
The reset filters button and show low volume checkbox are also working fine. UI is consistent with both light and dark modes.
I am also able to highlight a specific role in timeline using the cards below for individual role.
Below are the UI issues I found,

1. Since there are to lines (solid and dotted) for each role, its better to distinguish between hits and applications lines in legend for better UX.
2. While hovering over the months axis(find it from testing video below) in the timeline chart, if user wants to check all roles' data from a month, its hard for the user to scroll down on the tooltip while there are more number of months as the tooltip is changing immediately because of near by month.
   Try to implement feature that if mouse hovered on tooltip, event listeners from the chart shouldn't work.
3. For small screen sizes(Mobile) the graph is being compressed and so does the months on x-axis. Try to make the graph scrollable for small screen so that it will be readable.

PR.4416.1885.testing.mp4

[adithya-6101]

Hello Adithya, I have reviewed and tested both frontend and backend of this PR. Please find the backend comments at #1885. I directed to http://localhost:5173/popularity-enhanced page and tested the functionality of role-based popularity timeline chart. The filters are working and I am able to choose single or multiple roles, time range. The reset filters button and show low volume checkbox are also working fine. UI is consistent with both light and dark modes. I am also able to highlight a specific role in timeline using the cards below for individual role. Below are the UI issues I found,

1. Since there are to lines (solid and dotted) for each role, its better to distinguish between hits and applications lines in legend for better UX.
2. While hovering over the months axis(find it from testing video below) in the timeline chart, if user wants to check all roles' data from a month, its hard for the user to scroll down on the tooltip while there are more number of months as the tooltip is changing immediately because of near by month.
   Try to implement feature that if mouse hovered on tooltip, event listeners from the chart shouldn't work.
3. For small screen sizes(Mobile) the graph is being compressed and so does the months on x-axis. Try to make the graph scrollable for small screen so that it will be readable.

PR.4416.1885.testing.mp4

Hi @bhanuanishakkineni, thanks for the review!

I have pushed the fixes for the UI issues you noted:

1. Legend Distinction I added an explicit Legend Key (Solid = Hits, Dashed = Apps) directly above the legend. This ensures the two metrics are visually distinct at a glance, even when multiple roles are active.

2. Mobile Readability I updated the chart container to use overflow-x: auto with a fixed minimum width. On small screens (like iPhone 12 Pro), the chart now maintains its proper aspect ratio and offers a horizontal scrollbar, preventing the data from being compressed or unreadable.
   Note: Displaying the "All Time" (25+ months) dataset on mobile is an edge case. The scrollbar ensures it doesn't break the layout, but further performance optimization for such large datasets on mobile would be a separate feature PR.

3. Tooltip Interaction Regarding the request to "lock" the tooltip on hover: The chart library (Recharts) is designed to update the tooltip dynamically with mouse movement. Forcing it to freeze on hover to allow scrolling inside it conflicts with the library's core behavior. However, this use case is already handled: As per the original requirements by Jae, I implemented the "Click to Highlight" feature. If a user needs to focus on specific data in a crowded month, they can simply click the role. This freezes the view on that specific data, allowing them to read the details.

Ready for re-review!

[SwathiAngadi]

Hi Adithya,

I have testes this PR. Able to load charts based on different criteria, works in dark mode. And the page is responsive too including charts. Everything is working as expected.

[bhanuanishakkineni]

Hello Adithya,
I have reviewed changes made to this PR.
Legend added.
Tooltip working fine.
Graph is readable for mobile screens.
I am approving this PR

[sonarqubecloud]

Quality Gate passed

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

[one-community]

Thank you all, merging!