shadcn.io is not affiliated with official shadcn/ui
Segment Stats Integration Block for React
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 Base 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.
Related
- Pro
Segment Grid Integration
Switch and tick gridsAn integration grid section for a tracking-plan checker working with Segment: a table of six tracked events by four destinations with a named checkbox in every cell, a count in each column header and a derived tally of routes.
- Pro
Segment List Integration
Synced tablesAn integration list section for a tracking-plan checker working with Segment: seven held events as table rows with checkboxes, a select-all with a mixed state, working Replay and Discard that take the ticked rows off the list, and an empty state that brings the sample back.
- Pro
Source Fan-Out Detail Integration
With a product drawingAn integration detail section for a tracking-plan checker connecting to Segment: what it can read and write as an accordion of three groups, and a framed figure of one source fanning out to four destinations, one of them barred.
- Pro
Write Key Log Setup Integration
Keys and codeAn integration setup section for a tracking-plan checker connecting to Segment: a source type combobox, the write key with a Copy button, and a check that prints four example calls into a dark log window and ends on a result that says it ran in this demo.
- Pro
AWS Stats Integration
Bars and columnsAn integration stats section for a cloud cost tool reading from AWS: six region lanes on one 0 to 24 hour ruler showing how far each region's cost data runs behind, with a solid tick at the 6 hour agreement.
- Pro
Sentry Grid Integration
Switch and tick gridsAn integration grid section for a release gate working with Sentry: six conditions that hold a deploy in a framed grid of shared hairlines, each a checkbox with number fields for its limits, and a sentence worked out from the ticks.