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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { UsageForecast } from 'animui/usage-forecast';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
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 "animui/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.