Namitha: Add Rating Distribution bar chart to LB Dashboard

[Namitha7070]

Description

(PRIORITY HIGH) Jae/Rajrajeshwari – Create a bar chart titled ‘Rating distribution’

• Let the chart be titled ‘Rating Distribution’
• Let it be placed in Reviews section
• Let the Y axis - Number of reviews
• Let the X axis - Rating given from 1-5
• Let the colors of the bar chart change their transparency and gradient as shown in image
• Include drop down menu to manually include a date range.
• The graph has 2 main filters. Dates: which allows the user to pick to and from dates Category: Does the user want to see results grouped by village or property. By Village and By Property are the two selectable options. The two mutli-select options are for the user to select specific villages or properties. One of these filters will not work based on what the user has chosen in his category filter.
• All graphs on this dashboard would be the same size

Related PRS (if any):

…

Main changes explained:

• Created RatingDistribution component with gradient purple bars
• Implemented date range filters (presets and custom range)
• Added category filters (By Village/By Property) with multi-select
• Integrated into Insights from Reviews section
• Added responsive design and dark mode support
• Chart displays ratings 1-5 stars with number of reviews
• Fixed accessibility issues with label associations"

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. go to dashboard→ /lbdashboard
6. verify if the graph is rendering as shown in the pictures and videos.

Screenshots or videos of changes:

Week.21.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	ea2dca2
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/695857f3f498680008873ff5
😎 Deploy Preview	https://deploy-preview-4631--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 failed

Failed conditions
5.3% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

[Anusha-Gali]

Hi Namitha,

I have reviewed your PR locally and as you can see in the video and below screenshot, In dark mode:

• the number in the bars are not visible
• the calendar is in light mode
• the dates selected in the calendar is not visible

4631.mp4

[rohanrastogi311]

Hi Namitha,

Well done on this implementation.

[HemanthNidamanuru]

Hi Namitha,

Thanks for the PR. I reviewed it locally, and as you can see in the video and screenshot below, there are a few dark mode issues:

1. The numbers inside the bars aren't visible.
2. The calendar is rendering in light mode.
3. Selected dates on the calendar aren't visible.