Analytics Connected Success Block for React

Nothing is received or measured. The twelve events, their sources, times and properties, the three source names and the 412 events a minute are typed constants at the top of the file. To wire it, replace EVENTS with the events your ingest endpoint returns (keep them newest first), feed RATE from your own count, and keep the properties as the JSON your SDK sent. Make Open the debugger link to your own route.

Five seconds after load a first extra event arrives at the top, then one every few seconds, four in all, and each new row fades in while the oldest drops off the bottom of the table. Pause the feed is a toggle button that keeps its label and says whether it is pressed; paused, nothing arrives, and pressing it again resumes. The feed is bounded, so it never runs for ever, and the status line says when all the sample events have arrived. With reduced motion on, the feed starts paused and the first rows show at once.

Each event name is a button; pressing it chooses the event and the docked panel shows its properties. New rows are added at the top without moving the others in the markup, so a focused row keeps its focus when a new event arrives. If the chosen event scrolls out of the table, the panel keeps showing it under its own name.

Its heading is a button with aria-expanded that opens and closes the panel, which holds the chosen event's properties in a JSON tree: the arrow keys move between nodes and open or close the ones that hold more. Values read as plain foreground text. The panel has a fixed height and scrolls inside itself, and the window's height never changes when it opens or closes.

It counts up to 412 once on load and then stays; with reduced motion it shows 412 at once, and screen readers read the number, never the count on the way. The figure is typed sample data, not a measurement.

It keeps its height (36rem on a phone, 46rem from the medium breakpoint) and scrolls inside itself. The table drops its Source column below the medium breakpoint and shows the event and its time, and the properties panel follows the table instead of docking.