React Quota & Usage Meter

Copy Page

A usage page answers one question — "am I about to be charged for overage" — and a plain progress bar can't. 62% used looks fine until you notice you're 11 days into the month. This meter projects the current run-rate to the end of the period, so the bar tells you where you're heading, not just where you are.

Installation

Props

The projection is the whole point

Each cumulative meter divides current usage by periodElapsed to get an end-of-period estimate — 4.8M requests at 37% of the month projects to 13M — and draws it as a striped extension beyond the solid "used" bar, up to a limit tick. Green means the run-rate lands under the limit; amber means it doesn't, even while today's number is comfortably below the line. Where an unitOveragePrice is set, the projected overage is priced, and the per-meter estimates roll up into a single "projected overage this period" figure in the footer — the number the account owner actually wants.

This is a linear run-rate, which is the right default and an honest simplification: it assumes the rest of the period looks like the start. For spiky or seasonal usage, feed a smarter forecast straight into a meter as its projection — the bar and the copy don't care how the number was produced.

Not everything can be projected

mode: "instant" marks a meter that is a point-in-time count rather than an accrual — active seats, live connections, provisioned nodes. Projecting a headcount by elapsed time is a fiction (41 seats at 37% of the month is not "heading for 111 seats"), so instant meters skip the run-rate entirely and show current headroom — "9 remaining" — with a near-limit warning at 90%. Keeping the two kinds visibly distinct is what stops the projection from lying: a meter is only extrapolated when extrapolating it means something.