shadcn.io is not affiliated with official shadcn/ui
Delivery Outcomes Donut Integration Stats Block for Vue
An integration stats section for a clinic reminder tool connecting to Twilio: a hand-built donut of how reminders ended, with a legend of counts and shares, and three cells for the top reasons a text did not arrive, in words, all worked out from typed counts.
Installation
Overview
An integration stats section for Vue with Ark UI, written for Chimewell, a fictional appointment-reminder tool for clinics, and its Twilio connection. A compact header carries the title, one sentence with the delivered share and the mark pair at its end. Then a grid of hairline cells whose outer lines run past the rails. The first cell is a hand-built donut of how the reminders ended (delivered, undelivered, failed) with the total in its centre and a legend that gives each count and share; the arcs differ by weight, never by hue. Beside it, three cells give the top reasons a text did not arrive, in words, each with its count, its share of the texts that did not arrive and a thin bar. Every count, share and arc is worked out from typed numbers, the shares are made to add up to 100 and the reasons add up to the texts that did not arrive. It's built from Guides with an inline SVG and plain CSS and your theme's tokens for every colour. Twilio is named in text only: no Twilio logo, colour or wordmark ships with the block. The counts are example figures for the last 28 days.
FAQ
How do I change the figures?
OUTCOMES holds the delivered, undelivered and failed counts, and NAMED the counts of the first two reasons. The total, the shares, every arc, the delivered share in the header and the number of texts that did not arrive are worked out from them, and the last reason (the landline) is whatever remains, so the reasons always add up.
Why do the shares always add up to 100?
Shares are rounded with the largest-remainder method: every share is rounded down and the few points remaining go to the rows with the biggest remainders, so the rows never add up to 99 or 101.
Is any of this read from Twilio?
No. The counts are typed example data. A real version would count the status updates Twilio sends about each message, and group the reasons from what it reports; here they are written in words rather than numeric codes.