shadcn.io is not affiliated with official shadcn/ui
Time to Approve Histogram Integration Block for React
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 React with Base 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.
Related
- Pro
Slack Detail Integration
Scopes and stepsAn integration detail section for a spend tool connecting to Slack: a header with the mark pair and Add to Slack, then what it does, the Slack scopes it reads and writes, three steps to install and the listing's facts.
- Pro
Message Layouts Grid Integration
Cards and previewsAn integration grid section for a spend approvals tool posting to Slack: a list of six message layouts beside a framed preview that draws the chosen one as a greyscale message, with a drawn app tile, text, facts and action chips.
- Pro
Approvals by State Tabs Integration
Grouped and triagedAn integration list section for a spend approvals tool posting to Slack: underline tabs with counts (Waiting, Approved, Expired) over rail-to-rail request rows, with a channel in code, a state line, a reminder count and a Nudge button on waiting rows.
- Pro
Crash-Free Sessions Stats Integration
Lines and dotsAn integration stats section for a release gate reading from Sentry: a framed step line of crash-free sessions over five releases with a solid hairline at the 99.5% gate, beside the current release as one figure and a list of sessions and users.
- Pro
Reconciliation Ledger Stats Integration
Rings and talliesAn integration stats section for a stock sync tool reading from Shopify: a rail-to-rail ledger table of seven days comparing the units that left stock as Shopify reports them with Tallybin's count, the gap and each day's state, with a total row and a headline counted from it.
- Pro
Donut Pill Legend Stats
Parts of a wholeA traffic-source donut over a row of pill toggles: switch a source off and its arc leaves the ring, the others grow to fill it, and the shares and the total in the middle are worked out again.