shadcn.io is not affiliated with official shadcn/ui
Recent Activity Reviews Block for Solid
The running average of a ski-hire shop's ratings: the last ten ratings as pressable rows showing the average before and after each, beside a step line with the selected point marked.
Installation
Overview
A running average for Solid with Ark UI, for Heronmoor, a fictional ski-hire shop. A divider splits the section. At the start, a compact header and the last ten star ratings as a stream, newest first: who gave it, the stars and their value in words, the day, and what the average did, written as "4.31 to 4.34" with a signed change beside it. Every row is a button, and pressing one selects its point. At the end, a step line of the running average in a frame with + marks: it holds each value until the next rating, marks every point with a small ring, and lifts the selected point into a larger dot, with the average as a figure above and a sentence below that says what that rating did. The average is worked out from a typed starting tally (52 ratings adding up to 224 stars) and the ten ratings, by whole-number maths in hundredths. On a phone the chart sits under the stream at 160 px. It's built from Guides and a hand-drawn SVG with CSS transitions only.
FAQ
How is the average after each rating calculated?
From BASE (how many ratings came before these ten, and the stars they add up to) plus the ratings so far: the stars total times 100, divided by the count and rounded, so 4.31 is the whole number 431 until it's shown. The row's "before" is the average after the previous rating, so each row's "after" is the next row's "before", and the change is their difference. Edit BASE and RATINGS to use your own.
How is the chart drawn, and is there a text version?
The step line is one SVG path (each value held until the next rating) over HTML gridlines and rings placed with percentages, so it stretches to any width. The drawing is hidden from screen readers because the stream beside it lists every value in text, and a status line below announces the selected rating's effect ("Mina Takeda's 4-star rating moved the average from 4.28 to 4.30."). The axis shows the lowest and highest average with two hundredths of room, so small moves are visible.
How do the rows work with a keyboard?
Each row is a native button with aria-pressed, so Tab moves between them and Enter or Space selects one. The selected row gets a ring and a tint, and the chart's dot moves with a short transition that stops under reduced motion.
Why does a four-star rating sometimes lower the average?
Because the average was above four. A rating moves the average up only when it is above the average at that moment: a five raises it, a four below an average of 4.31 lowers it a little, and a one lowers it most. The signed change beside each row uses a plus or a true minus sign, never colour, so it reads the same to everyone.
Are the dates real?
They're typed, fixed ISO dates shown without a year, each in a time element; nothing reads the visitor's clock. Ratings made on the same day appear in the order typed.
Does it work right to left?
Yes for the stream: rows, stars and the arrow between the two averages follow the page's direction (the arrow mirrors), and figures are isolated so their digits keep their order. The chart is a time series, so it always runs from earlier to later in the same direction, whatever the page's direction.