Usage forecastPro
A billing period usage chart with a forecast cone and a draggable budget that dates the crossing.
Usage forecast
Northwind Labs · Scale plan · Renews Oct 1
API calls: At this pace you reach the budget on Sep 26. 4 days before the period closes, likely between Sep 25 and Sep 27.
- Used so far
- 32.3M
- 85% of budget
- Projected by Sep 30
- 45.2M
- Likely 43.3–47.9M
- Cost above budget
- $1,449
- At $0.20 per 1k calls
| Date | Reading | Likely range |
|---|---|---|
| Sep 1 | 1.7M | Measured |
| Sep 2 | 3.3M | Measured |
| Sep 3 | 5.0M | Measured |
| Sep 4 | 6.7M | Measured |
| Sep 5 | 7.4M | Measured |
| Sep 6 | 8.1M | Measured |
| Sep 7 | 9.8M | Measured |
| Sep 8 | 11.5M | Measured |
| Sep 9 | 13.1M | Measured |
| Sep 10 | 14.8M | Measured |
| Sep 11 | 16.5M | Measured |
| Sep 12 | 17.3M | Measured |
| Sep 13 | 18.1M | Measured |
| Sep 14 | 19.9M | Measured |
| Sep 15 | 21.6M | Measured |
| Sep 16 | 23.4M | Measured |
| Sep 17 | 25.1M | Measured |
| Sep 18 | 27.0M | Measured |
| Sep 19 | 27.7M | Measured |
| Sep 20 | 28.5M | Measured |
| Sep 21 | 30.4M | Measured |
| Sep 22 | 32.3M | Measured |
| Sep 23 (forecast) | 34.1M | 33.7 to 34.8M |
| Sep 24 (forecast) | 36.0M | 35.3 to 37.0M |
| Sep 25 (forecast) | 37.9M | 36.9 to 39.2M |
| Sep 26 (forecast) | 38.7M | 37.5 to 40.3M |
| Sep 27 (forecast) | 39.5M | 38.2 to 41.4M |
| Sep 28 (forecast) | 41.4M | 39.9 to 43.6M |
| Sep 29 (forecast) | 43.3M | 41.6 to 45.8M |
| Sep 30 (forecast) | 45.2M | 43.3 to 47.9M |
- Billing or usage pages that warn customers before they hit a budget.
- Metered products that show month to date usage with a forecast range.
- Use usage-meter for a simple progress bar against a limit.
- Use usage-pricing to estimate price from usage before buying.
- Use metric-explorer for general KPIs without a budget.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this on a billing or usage page to warn before a customer hits a budget. Replace the readings in usage-data.ts with your metering data and connect the budget and alert rules to your billing settings; alert emails in the preview are simulated.
import { UsageForecast } from "@/registry/blocks/usage-forecast/usage-forecast"; export default function BillingUsagePage() { return ( <section> <UsageForecast /> </section> );}UsageForecast
A billing period usage chart with a forecast cone, a draggable budget line and alert rules. Takes no props; readings and metrics are sample data in usage-data.ts, and alert emails are simulated.
No props.
- Arrow keys
- On the plot, steps one day; on the budget handle, moves the budget one step.
- Page uporPage down
- Jumps a week on the plot, or five steps on the budget handle.
- HomeorEnd
- Jumps to the first or last day, or to the minimum or maximum budget.
- Escape
- Clears the inspected day on the plot.
- The plot and the budget handle are role="slider" elements with aria-valuetext in plain words.
- The chart SVG has a full sentence label and is described by a data table; a polite live region reads the forecast summary.
- Alert rules are toggle buttons with aria-pressed and labels that include their current status.
- The budget line follows drags directly and settles on a snappy spring when released or moved by keyboard.
- The crossing marker and inspection panel follow the scrubbed day on springs; numbers roll with the animated counter.
- Reduced motion drops the springs and applies changes immediately.
- Chart width follows its container through a ResizeObserver, and below 560px KPIs and the legend tighten.
- The plot uses touch-action pan-y for scrubbing, while the budget handle uses touch-action none so it can be dragged on touch.
- SVG over daily readings for one billing period; the forecast cone is computed once per change, not per frame.
- Dragging the budget updates one line and label; there is no loop at rest.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use on a billing or usage page to warn customers before they hit a budget.
- Replace METRICS and daily readings in usage-data.ts with your metering data.
- Persist budget and alert rule changes to your billing settings; they are local state in the preview.
The full library index for assistants is at /llms.txt.