shadcn.io is not affiliated with official shadcn/ui
Line Chart With Threshold Stats Block for Vue
A latency line against its 300 ms SLO for an API monitor: the stretches over the threshold are drawn thicker with ringed points, and a rail repeats the breaches, the time over and the worst reading in text.
Installation
Overview
A threshold line chart for Vue with Ark UI. A split: the wide cell holds the header, "Latency broke its 300 ms SLO 2 times in 4 hours", and a hand-drawn chart of the last four hours of p95 response time, one reading every five minutes. The threshold is a solid hairline labelled on its line; wherever the series goes over it the stroke is thicker and each reading is a ring, and the thick stretch begins and ends exactly on the threshold because the crossing points are computed. The narrow cell, past a divider that reaches the top rule, holds a status dot that marks the breach once, a list of figures (breaches, time over 300 ms, the worst reading and when) and a list of the stretches with their length and peak. Every path, ring, label and sentence is computed from one typed series, so the drawing and the text agree. The chart is SVG in foreground weights with no colour for good or bad. On a phone the chart comes first and the figures follow under a rule.
FAQ
How do I change the readings and the SLO?
Edit LATENCY (one reading per STEP minutes, oldest first), THRESHOLD and CEILING at the top of the file. The breaches, minutes over, worst reading, thick strokes, rings, labels, headline and the chart's accessible name are all derived from them. The time labels under the chart are a short list, HOURS, placed by reading number: change it if you add readings.
How is the thick stretch above the threshold drawn?
The module finds every run of readings over the threshold and draws each as its own path. Where the line crosses, the start and end points are found by interpolation between the reading under the threshold and the one over it, so the thick stroke meets the threshold line cleanly instead of starting at the next reading. The rings are HTML elements positioned from the same numbers, so they stay round while the chart box stretches.
Why isn't the breach red?
The block follows your theme, and colour is kept for one thing. A breach is shown by weight (a thicker stroke), by shape (rings) and by words, so it reads without colour and in every preset. A single status dot in the rail marks the alert; that is the only status colour in the block.
Is the chart accessible?
Yes. The drawing is an image whose name states the range, the worst reading, how long the series was over the SLO and in how many stretches. The same facts are in the rail as a description list and an ordered list, so nobody has to read the drawing. Figures sit in bdi elements, the chart box is dir="ltr" because time runs from the start to the end in every language, and the text is never smaller than 12 pixels.