Akshith: Fix - Most Popular Event - Added Trend indicators , High-Low sorting and clear y-axis description

[akshith312]

Description

Related PRS (if any):

This frontend PR is related to the ##3133.
…

Main changes explained:

• Added the High - Low and Low - High Sorting Option
• Added Trend indicators - Increase, Decrease
• Provided Y-axis description
  …

How to test:

1. check into current branch
2. do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. log as any user
5. go to dashboard→ /communityportal/reports/event/personalization
6. Check with Filters and verify if working correctly
7. Check if Note Description about y-axis is displayed
8. Toggle to Dark Mode and verify if display is good.

Screenshots or videos of changes:

Screen.Recording.2025-12-20.175646.mp4

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	767a165
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69efb0faff9bd000085ab490
😎 Deploy Preview	https://deploy-preview-4595--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
1 New issue
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

[beblicarl]

This functionality works as intended, and the code is great

https://www.loom.com/share/18754b60c23642728cd3ce1b0800b4eb

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
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

[HemanthNidamanuru]

Hi Akshith,

I tested this locally and everything is working fine. The bar chart is rendering correctly in both dark and light mode, trend icons are showing, sorting is working, and the x/y values are displaying as expected.

One thing I could not verify is whether the trend icons match the correct data. Could you please share the mock data you used for the trend indicators so I can cross check them?

[Anusha-Gali]

Hi Akshith,

I have reviewed your PR locally and it works as per requirement. However in dark mode, the arrows and - icons do not have the color similar to that of light mode.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
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