shadcn.io is not affiliated with official shadcn/ui
AWS Stats Integration Block for Vue
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 Vue with Ark 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.