shadcn.io is not affiliated with official shadcn/ui
AWS Stats Integration Block for React
An integration stats section for a cloud cost tool reading from AWS: six region lanes on one 0 to 24 hour ruler showing how far each region's cost data runs behind, with a solid tick at the 6 hour agreement.
Installation
Overview
An integration stats section for React with Base UI, written for Meterfern, a fictional cloud cost reporting tool, and its AWS connection. A compact header asks how fresh the data is; its first sentence is the headline, counted from the data ("5 of 6 regions land inside 6 hours"), with the mark pair at its end. Under it a framed figure draws six region lanes on one shared 0 to 24 hour ruler: each lane is a bar to how many hours that region's cost data runs behind, with a marker and its value, and one solid tick runs through every lane at the 6 hour agreement. The lane that crosses the tick is hatched and spells out its overshoot in words, so nothing relies on colour. A visually hidden table repeats every value for screen readers, and the caption names the chart. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides with plain CSS for the lanes, ruler and hatching, and your theme's tokens for every colour. AWS is named in text only: no AWS logo, colour or wordmark ships with the block. Every figure is example data; nothing is read from AWS.
FAQ
Where do the figures come from, and how do I change them?
They are typed example data in REGIONS: a region code, its city and the hours its cost data runs behind. The agreement (AGREEMENT, 6 hours) and the ruler's end (SPAN, 24 hours) sit beside it. Everything else is worked out from that list: the headline count, the slowest region named in the sentence, each bar's length, which lane is hatched and the hidden table. Wire it to your own import timings and nothing else needs editing.
What does a region's lag mean here?
It is how many hours pass between AWS recording usage in a region and that usage showing in the customer's reports. AWS delivers Cost and Usage Reports up to three times a day, so a few hours of lag is normal. The block makes no claim about AWS itself: the numbers are an example and the 6 hour agreement is the fictional product's own promise.
Why is one lane hatched?
A lane that crosses the agreement tick is drawn with diagonal hatching and an outline, and its label says how many hours it is over ("9 h, 3 h over"). Colour is never the only signal, so it reads the same in a greyscale print or for a colour-blind reader. Every other lane is a solid bar.
How do screen readers get the chart?
The drawing is hidden from assistive technology and the same facts are in a visually hidden table inside the figure: region, hours behind, and whether it is inside or over the agreement. The figure's caption names the chart, and the headline sentence above it states the count.
How does it behave on a phone and in right-to-left layouts?
On a phone each region's label sits above its bar, the ruler shows 0, 12 and 24 hours and the agreement tick is drawn inside each lane. The ruler and lanes always run left to right, because time on an axis is not mirrored; the labels, header and caption follow the page direction. The only motion is the header's fade-up on load, and reduced motion turns it off. The block has no state.
Related
- Pro
AWS Detail Integration
Scopes and stepsAn integration detail section for a cloud cost tool connecting to AWS: a header with the mark pair and Connect AWS, a three-cell trust chain on one wire, and the five read-only IAM actions its role allows.
- Pro
AWS List Integration
Synced tablesAn integration list section for a cloud cost tool reading from AWS: six cost-allocation tags as rows with a coverage bar, a state word and an Activate switch, a segmented filter with counts, and a working Retry on the one row that timed out.
- Pro
AWS Grid Integration
Switch and tick gridsAn integration grid section for a cloud cost tool reading from AWS: eight service tiles you tick, and one stacked bar and coverage figure that follow every tick, counted from last month's typed spend.
- Pro
Time to Approve Histogram Integration
Bars and columnsAn 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.
- Pro
A gateway usage table where each route shows calls, error rate, a p50-to-p99 latency range on one scale, and a bar for its share of the rate limit.
- Pro
A 3 by 3 grid of hosting services whose latency and twelve-bar history advance on a timer you can pause, with the one slow service marked.