shadcn.io is not affiliated with official shadcn/ui
Segment Stats Integration Block for Radix UI
An integration stats section for a tracking-plan checker working with Segment: four destinations as rows with a hand-drawn line of events delivered per day, one slider that moves a marker across all four, a readout for the chosen day and totals worked out from typed counts.
Installation
Overview
An integration stats section for React with Radix UI, written for Schemawick, a fictional tracking-plan checker, and its Segment connection. A compact header ("Four destinations, one shared day") has the mark pair at its end. Under a band rule, one slider chooses the day, from 1 to 7, beside a readout of what each of four destinations (Warehouse, Ads, Email, CRM) received on that day. Below it, four rail-to-rail rows each show a destination's name, the week's total, how day 7 compares with day 1, and a hand-drawn line of events delivered per day; moving the slider moves one marker, a hairline with a dot, across all four lines together. Every figure (the totals, the percentages, the readout and the shape of each line) is worked out from the typed daily counts at the top of the file, and the line is plain SVG with no chart library. On a phone each line sits under its name and the readout wraps to two columns. The block ends on its last row, so no rule closes it. The page's rails and top rule come from the Guides spine. It's built from Guides, Slider and Badge, with your theme's tokens for every colour and no brand hue. Segment is named in text only: no Segment logo, colour or wordmark ships with the block. Nothing is read from Segment, and the counts are example data.
FAQ
How do I change the destinations and the counts?
Edit DESTINATIONS at the top of the file: each destination has an id, a name and seven daily counts (days). DAYS is the number of days, FIRST the first day and START the day the slider begins on. The week totals, the day 7 against day 1 percentages, the readout and the drawn lines are all computed from those numbers, so nothing else needs editing.
Is any of this read from Segment?
No. The counts are typed in the file and labelled as example figures on the page, and the slider only moves a marker. In a real product, feed DESTINATIONS from your own delivery numbers, such as what Segment's delivery overview reports for each destination.
How is each line scaled?
Each line uses its own scale: the lowest day sits near the bottom of its row and the highest near the top, so a small destination such as CRM reads as clearly as the warehouse. That makes the shapes comparable but not the heights, which is why the readout above gives the actual number for every destination on the chosen day.
How is the slider named for keyboards and screen readers?
It is labelled "Day" and announces "Day 4 of 7" as you move it with the arrow keys, Home and End. The drawn lines are hidden from assistive technology because each row also has a screen-reader-only sentence listing its seven daily figures, and the readout is a real description list.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
On a phone the slider and the readout stack, the readout becomes two columns, and each line sits full width under its destination's name. In a right-to-left layout the page flips, but each line is drawn left to right so time still runs forward, and the figures keep their reading order. The marker glides between days; reduced motion makes it jump, and the header's one fade on load is turned off too.