General
Rating Progress Bar Filter
Star-rating progress bar that doubles as a clickable filter control inside the `Review` section.
Overview
RatingProgressBarFilter renders all five star rows inside the Review section: each row is a progress bar showing how many reviews fall into a given star count, and a click target that filters the review list down to that rating. Pass the full ratingLevels array (one entry per star tier) and the totalCount; the component handles the row layout itself. Clicking the "5 stars" row emits setFilterOption with 5.
For the aggregate score above the bars, use RatingSummary. For the standalone star graphic, see StarsRating. For capturing a new rating, use InputRating.
Key Business & UX Benefits
- Lets shoppers drill into low-star reviews quickly, which actually builds trust because customers see the brand is not hiding criticism.
- Two-in-one display and filter pattern saves vertical space on PDPs, where review density already competes with conversion-critical content.
- Visual rating distribution at a glance helps users gauge product quality without reading every review, speeding up purchase decisions.
Usage
RatingProgressBarFilter Default
<RatingProgressBarFilter
:rating-levels="ratingLevels"
:total-count="totalReviews"
@set-filter-option="(rating) => setRatingFilter(rating)"
/>
Feature List
- `stars` typed as `1 | 2 | 3 | 4 | 5`, so consumers cannot pass an invalid rating row by mistake
- Each row pairs the star label with a `ProgressBar` (`value=level.count`, `max=Math.max(1, totalCount)`), avoiding divide-by-zero on empty review sets
- `@setFilterOption` emits the selected rating so the review list query stays in the consumer's store
- Localized star label via `ratingProgressBarFilter.starsLabel` keeps copy correct in singular and plural forms
- BEM child classes (`__level-stars`, `__level-count`) expose hooks to restyle individual rows without touching the bar
API Reference
| Prop | Default | Type |
|---|---|---|
totalCountrequired | number | |
ratingLevelsrequired | RatingLevel[] { stars, count } | |
color | accent | RatingProgressBarFilterColor ("primary" | "accent" | "yellow" | "black") |
| Event | Type |
|---|---|
setFilterOption | (event: "setFilterOption", rating: number): void |