shadcn.io is not affiliated with official shadcn/ui
Time to Approve Histogram Integration Block for Svelte
An integration stats section for a spend approvals tool posting to Slack: a reverse split with a framed histogram of how long approvals took, a solid hairline at the median, and a list of figures worked out from the six bucket counts.
Installation
Overview
An integration stats section for Svelte with Ark UI, written for Pursefinch, a fictional spend approvals tool for teams, and its Slack connection. A reverse split sits behind a divider. The copy comes first in reading order and sits at the end: a title, one sentence with the share decided within fifteen minutes, the mark pair and a list of figures (approvals, the bucket the median falls in, the share within fifteen minutes, the slowest bucket), every one worked out from six typed bucket counts. At the start, a framed histogram of how long approvals took: six bars rising from a baseline rule with the count over each, the bucket the median falls in drawn solid, and a solid hairline at the median itself. The bars are a drawing; each bucket also reads as text for screen readers. It's built from Guides with plain CSS for the chart and your theme's tokens for every colour, no hue. Slack is named in text only: no Slack 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?
BUCKETS holds the six counts. The total, the median bucket, the share within 15 minutes, the slowest bucket, every bar's height and the median line's position are worked out from them; change a count and everything moves together. Change FAST_BUCKETS if your threshold is not fifteen minutes.
How is the median line placed?
The middle approval falls in one bucket; the line is drawn that far through the bucket, assuming approvals are spread evenly inside it. It marks where the middle falls, not an exact time, and the list says the bucket in words.
Is any of this read from Slack?
No. The counts are typed example data. The integration asks for scopes to post and to read names, not message history, so a real version would count the decisions your own app records when someone presses Approve or Decline.
How do screen readers get the chart?
Each bar is a list item whose text reads the bucket and its count ("5 to 15 minutes: 27 approvals, the median falls here"); the bars and labels themselves are hidden from assistive technology. The figcaption names the chart, and the figures are a real description list.
How does it behave on a phone and in right-to-left layouts?
On a phone the copy and figures come first and the chart sits under them with a rule between; the labels are two short lines so six columns fit. The chart keeps its own direction in a right-to-left layout because time runs one way on its axis, while the split itself mirrors.