Data Display ratingdatagraph

Rating Distribution

Bar graph breakdown of user ratings/reviews.

5★
4★
3★

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { RatingDistribution } from 'astro-component-kit';
---

<RatingBreakdownBar>Content</RatingBreakdownBar>
--- import { RatingDistribution } from 'astro-component-kit'; --- <RatingBreakdownBar>Content</RatingBreakdownBar>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/RatingDistribution.astro and paste the following code:

astro 
---
---
<div class="rating-box">
  <div class="r-row"><span>5★</span><div class="bar-bg"><div class="bar-val" style="width: 80%"></div></div></div>
  <div class="r-row"><span>4★</span><div class="bar-bg"><div class="bar-val" style="width: 15%"></div></div></div>
  <div class="r-row"><span>3★</span><div class="bar-bg"><div class="bar-val" style="width: 5%"></div></div></div>
</div>
<style>
  .rating-box { display: flex; flex-direction: column; gap: 8px; width: 220px; }
  .r-row { display: flex; align-items: center; gap: 10px; color: #94a3b8; font-size: 0.75rem; font-weight: 700; }
  .bar-bg { flex: 1; height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.03); }
  .bar-val { height: 100%; background: #fbbf24; border-radius: inherit; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }
</style>
--- --- <div class="rating-box"> <div class="r-row"><span>5★</span><div class="bar-bg"><div class="bar-val" style="width: 80%"></div></div></div> <div class="r-row"><span>4★</span><div class="bar-bg"><div class="bar-val" style="width: 15%"></div></div></div> <div class="r-row"><span>3★</span><div class="bar-bg"><div class="bar-val" style="width: 5%"></div></div></div> </div> <style> .rating-box { display: flex; flex-direction: column; gap: 8px; width: 220px; } .r-row { display: flex; align-items: center; gap: 10px; color: #94a3b8; font-size: 0.75rem; font-weight: 700; } .bar-bg { flex: 1; height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.03); } .bar-val { height: 100%; background: #fbbf24; border-radius: inherit; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4); } </style>

Quick Info

Category
Data Display
Filename
RatingDistribution.astro
Dependencies
None — pure Astro + CSS
Tags
ratingdatagraph