Skip to content

Conversation

@Namitha7070
Copy link
Contributor

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
Screenshot 2025-12-26 152926

@netlify
Copy link

netlify bot commented Dec 27, 2025

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

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

- Created constants.js to share village/property options and styles
- Reduced code duplication in RatingDistribution component
- Fixed SonarQube quality gate duplication issue
- Fixed mismatched HTML tags from merge conflict
- Integrated RatingDistribution properly with AnalysisSection
- Maintained two-column layout for Rating Distribution and Review Word Cloud
@sonarqubecloud
Copy link

sonarqubecloud bot commented Jan 2, 2026

Quality Gate Failed Quality Gate failed

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

See analysis details on SonarQube Cloud

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants