Intercom Stats Integration Block for React

From BUCKETS: how many messages were tagged in each second after they arrived, twelve typed counts. The cumulative curve, the share at each threshold, the p50 and p95 (interpolated inside the bucket that crosses them) and the slowest second are computed from it. Percentages are rounded down so a figure never claims 100% before every message is in.

It is a single-choice group that can't be left empty: pressing the chosen one again does nothing. It moves a vertical cursor and a dot along the curve, and the readout, a polite status line, says the new sentence. The sentence's three variants sit in one grid cell with the unchosen ones hidden, so changing the choice never moves the page.

The drawing is hidden from assistive technology. A visually hidden table lists the share tagged by each second from 1 to 12, the caption says what the curve shows, and the readout and the three figures give the headline numbers in text. The marks are labelled in text, not colour.

The product is PRODUCT and the service is SERVICE, a name and a two-letter mark for its lettermark tile, typed rather than worked out from the name. MarkTile carries a comment where your own logo goes; never redraw a brand's logo. Replace BUCKETS with your own distribution and the chart, thresholds and figures follow.

Below lg the divider gives way to a rule and the controls stack under the chart. The chart keeps its left-to-right axis in a right-to-left layout, as any time series should, while the columns around it flip. The curve draws in once on load; with reduced motion it simply appears, and the cursor jumps instead of sliding.