Metered Usage Forecast Billing Block for React Aria

Edit SPEND, the dollars each day of the month so far cost, and MONTH for the month's length and the day the data runs through. LAST_MONTH holds what the previous month spent on the days that match the rest of this one, taken from your own invoices. The running totals, the three forecasts and the axis are all derived from those three, so adding a day to SPEND moves the whole chart.

Run rate takes the average of every day so far and repeats it for each remaining day. Last 7 days does the same with only the most recent seven, so it follows a recent rise or fall. Last month adds what the previous month spent on the same stretch. All three add to the actual total, so they start together at the end of the solid line and fan out. None of them knows about a launch or a price change; they are straight arithmetic, and the sentence says "pace", not "will".

It sets the heavy line and the alert amount. Type a figure between $50 and $500 or use the buttons; the line moves, the crossing day is worked out again and the button reads "Alert me at" the new figure. If the actual spend has already passed it, the sentence says on which day instead. The alert is only noted on this page; in your app, send the amount to your alert rules from the same button.

The chart is one image with a label that gives the spend so far, each method's month-end figure and the sentence, and an sr-only table lists the same three methods with the day each crosses the budget. The method buttons are a pressed-state group and their month-end figures are part of their names. React Aria commits a typed budget on blur, Enter or an arrow key, not on every keystroke.

No. Time runs the same way in every language, so the chart stays left to right while the labels, sentence and controls around it follow the page.

The chart comes first at full width, then the method list, the budget field and the sentence, and the alert button in a foot that sticks to the bottom of the screen.