No Performance Data Empty State Block for React

No. There is no data and the page says so ("No data yet", "Waiting for data"). The targets are numbers in the page's state and a reload resets them. To wire it for real, create the monitors with your API where the code says so, and draw your own series over the same axes once data arrives.

Everything on it is worked out from the metric's typed range: the gridline labels from its top value, the target line's place from the slider's value, and the dashed band from which side of the target is good (under for times and errors, above for throughput). The picture is hidden from assistive technology; the words under it and the slider's own value text say the same thing, and the day marks are a fixed week.

It is a real slider with a name and a value text ("under 300 ms"), and the foot's polite line speaks the new target once you let go, not on every step. Each metric has its own range and step, and the target you set stays when you move to another tab and back, because it lives in the page and not in the tab.

It turns the flat line solid, changes the strip's four cells from Draft to Waiting for data, locks the sliders and quiets the button, which stays in place and says "Monitoring set up". Nothing is created. Start over unlocks everything, resets the four targets and returns focus to the button.

No. Every tab holds a chart and a slider of the same height, the caption under the chart reserves two lines, and the strip's cells are one height in every state.

The tabs scroll sideways inside their own row, the chart is about 210 px tall, the strip is two cells across and two down, and the foot with Set up monitoring is pinned to the bottom of the screen. Nothing makes the page scroll sideways at 320 px.