shadcn.io is not affiliated with official shadcn/ui
Data Pipeline Freshness Monitoring Block for Svelte
How stale six warehouse tables got over 12 hours as a sawtooth against an SLA line, with hatched spans where it ran over, marks for missed loads, a cursor that reads the data's age and a header that names the longest breach.
Installation
Overview
Answer "how stale was this table, and for how long?" with this data freshness monitor for Svelte with Ark UI. It is Freshline, and its six warehouse tables are a list at the start (name in mono, Within or Over its SLA at the moment; a Native Select on a phone). Beside it, the chosen table's age since its last load is drawn as a sawtooth over twelve hours: it grows between loads and drops to zero at each one, a dashed line marks the freshness SLA, a hatched span covers every stretch where the age ran past it, and a mark on the axis shows each load that never came. A range under the chart is a cursor that reads the data's age at that minute ("10:20 UTC: data 50 min old, over the 30 min SLA"). Three figures above the chart give the age now, the loads that landed and the minutes over the SLA, and the header names the longest breach of the day. Guides draw the frame and its bands. For warehouse owners, analytics reviews and any pipeline with a freshness promise.
FAQ
How do I load my own tables?
Edit TABLE_LINES: a table name, the minutes between expected loads, the SLA in minutes and the expected loads that never came, as minutes after 06:00. The loads, the sawtooth, the breaches and every figure are worked out from those. In your app build the same list from your orchestrator's load times and keep START and SPAN for the window.
How is a breach decided?
A breach starts when the age passes the SLA, which is the previous load plus the SLA, and ends at the next load (or at the end of the window if none came). Its length is the minutes over. A table is Over at the moment if its age now is above its SLA.
What stays local?
The loads are typed examples and nothing is read from a warehouse. The cursor only moves a marker and a sentence; it changes nothing else. In your app feed the real load times and the same helpers draw them.