Google Cloud Stats Integration Block for React

It is the rule BigQuery states: on-demand queries are billed by the bytes they process, and the first 1 TiB each month is free. The quantities in the block are example data, six typed queries in GiB, and nothing is fetched from Google Cloud. The free terabyte applies per billing account on Google's side, so a real figure would need to add up every project on the account.

From the QUERIES list at the top of the file: a name, a table and the GiB each processed. The total, what is left, the share used, the TiB figure in the headline, the gauge's fill, the three biggest queries and the "other queries" row are all computed from it by small helpers. Add, remove or change a query and every figure follows. Edit FREE_GIB and SCALE_GIB if your free allowance or gauge range differ.

The gauge is a drawing hidden from assistive technology, and the caption under it says the same in words ("739 GiB of the 1,024 GiB free tier queried, 285 GiB to go"). It reads without colour: the filled part is solid, the on-demand zone is hatched, and a bold line marks where the free tier ends, with a label beside it. Below lg it lies down as a horizontal bar with the same ticks.

The product is PRODUCT and the service is SERVICE, a name and a two-letter mark for its lettermark tile, typed rather than worked out from the name. MarkTile draws either side and carries a comment where your own logo goes; never redraw a brand's logo. Rewrite the queries, the free allowance and the copy in your service's terms.

Below lg the divider gives way to rules between the parts, which stack in reading order, and the gauge becomes horizontal. In a right-to-left layout the columns flip while the gauge, its ticks, numbers and table names keep their left-to-right order. The header fades up once on load, and not at all with reduced motion.