shadcn.io is not affiliated with official shadcn/ui
Real User Monitoring Slowest Segments Block for Solid
A strip of dots on one Largest Contentful Paint axis that ranks 2,400 sessions slowest first by device, connection or country, with good, needs work and poor zones and a band that reads the chosen slice.
Installation
Overview
Find which visitors have the slowest page with this real-user monitoring panel for Solid with Ark UI. It is Visitgauge, a real-user monitoring service, reading a typed sample of 2,400 sessions. A segment group in the header groups them by device, by connection or by country. For the chosen grouping every slice is a row: its name, a dot on one axis from 0 to 6 seconds at its 75th percentile of Largest Contentful Paint, and the time. Three zones sit behind the dots in foreground weights (good up to 2.5 s, needs work up to 4 s, poor beyond), rows run slowest first, and the header sentence is worked out from the data ("Kenya is 4.3 s at p75: 2.4 times Germany, 1.7 times the good line"). Pressing a dot reads that slice in a band under the strip: its time in words, its sessions and its share of traffic. Guides draw the frame and its bands; the entrance is CSS only. For performance reviews, release checks and any report that needs to say who is slow, not just how slow.
FAQ
How do I use my own sessions?
Edit DIMENSIONS: each has a label and its slices, slowest first, and each slice has a name, a p75 in milliseconds and a session count. The zones, the order of the rows, the shares of traffic and the header sentence are worked out from those numbers, so keep the session counts of every grouping adding up to the same total. In your app compute the 75th percentile per slice from your own beacon data, and keep the sample size beside it.
What is the axis and how are the zones set?
The axis runs from 0 to 6,000 ms. GOOD (2,500) and POOR (4,000) are the usual Largest Contentful Paint limits; change them and the three bands, the legend and the words Good, Needs work and Poor follow. A dot beyond the end of the axis would sit on its edge, so raise AXIS if your slowest slice is past 6 s.
What stays local in the demo?
Everything. The sessions are typed examples, nothing is measured or sent, and the status line says so. The segment group and the dots only change what is shown. In your app load the slices from your analytics endpoint and keep the same shape.
Does the panel change height when I switch the grouping?
No. All three groupings are drawn in one grid cell and the two that are not shown are hidden and inert, so the panel always takes the height of the longest list (six countries). The dots of a hidden list cannot be reached with the keyboard or read by a screen reader.
How does it look on a phone?
Each row stacks: the name and the time on one line, the track with its dot under them across the whole width. The dots keep a 32 px target. The zone key wraps under the axis and the header's segment group drops under the sentence.
How is the chart read without seeing it?
The strip is a figure with a caption that says what the dots are, and every dot is a button named with its slice, its time and its zone ("Mobile, 3.1 s at p75, needs work"). The same numbers are in the row text and in the band under the strip. The chosen slice is read in the polite status line.