AWS Grid Integration Block for React

Edit SERVICES at the top of the file: an id, a name and last month's spend in dollars. OTHER is everything on the bill that the tool never lists, and START is the ids ticked on load. The total, every tile, the percentage covered, the service count and each bar segment's width are worked out from those numbers, so adding a service needs nothing else. All figures are example data.

No. A tick changes this page's own state and nothing else: nothing is read from AWS and nothing is saved or sent. The note under the figure says so from the first paint, in a polite status region, and a second visually hidden status announces the new coverage after each change ("Covers 91% of $48,200 with 7 of 8 services"). Wire toggle to your own settings call.

Each tile is one label around a real checkbox, so a click anywhere on the card toggles it, Space toggles it from the keyboard, and the checkbox is named by the service ("EC2"). The tile shows a visible focus ring and a ticked tint that does not depend on the primary colour. The bar is hidden from assistive technology because the figure, the count and the status line carry the same numbers in text.

So the state never depends on tone alone: a covered service is a solid segment, a left-out one is diagonal hatching, and the legend names both in words. The grey segment is the spend the tool never lists, which no tick can change.

On a phone the figure sits above the bar and the tiles run two across. The bar and its legend always run left to right, as a drawing of proportions should, while the header, tiles and text follow the page direction; money amounts are kept in reading order. The header fades up once on load and the bar segments change tone with a short transition; reduced motion turns both off.