shadcn.io is not affiliated with official shadcn/ui
Email Delivery Time Block for Vue
How long email takes to arrive: a step curve of the share delivered by delay on a log axis from 1 second to 1 hour, a cursor, markers at 30 seconds and 5 minutes, a Transactional or Marketing select and three recipient groups.
Installation
Overview
See how quickly mail reaches inboxes, and how long the stragglers take, with this delivery time chart for Vue with Ark UI. It is Inboxhaven, an email delivery monitor (made up). A select in the header picks transactional or marketing mail; the plot draws the share of messages delivered against the delay on a log axis from one second to one hour as a step curve, with the other kind as a faint dashed line to compare, dashed markers at 30 seconds and 5 minutes, and a diamond for a deferral when a group of mailboxes held a send for 14 minutes. A hidden range over the plot is the cursor and reads the share delivered by any delay. Under it, three figures give the share within 30 seconds, within 5 minutes and not within an hour, and three recipient groups give their share of the mail and their p95 delay. A table of the curve is there for screen readers. Guides draw the frame. For mail platforms and deliverability reports.
FAQ
How do I use my own curve?
Edit MAILS: each kind has a delivered list (the cumulative share at each delay in DELAYS, oldest delay first), its recipient groups and the messages timed. The figures, the p95 and the deferral wave are derived from the list.
How does the cursor work?
It is a native range laid over the plot, named Delay, along the log axis. Arrow keys move it, Home and End jump, and dragging scrubs it. The reading under the plot updates at once and a polite status line speaks it about 600 ms after the last change.
What is real here?
Nothing is sent or timed. The curves, the groups and the deferral are typed examples and no mailbox provider is named.