caliper uidocs
DemoSign inGet Pro

Usage forecast

Pro

Daily usage with a projected month-end total and cost.

Installs components/ui/usage-forecast.tsxDepends on d3-shapeMotion none in component source
pnpm dlx shadcn@latest add @caliper/usage-forecast
API requests this monthBased on the last
limit 2,400,000

At about 76,714 requests a day you will use 2,021,429 by Oct 31, around $2,576.43, within your limit of 2,400,000.

API requests this month
Dayrequests that dayRunning total
Oct 13800038000
Oct 24100079000
Oct 336000115000
Oct 452000167000
Oct 561000228000
Oct 644000272000
Oct 739000311000
Oct 847000358000
Oct 955000413000
Oct 1063000476000
Oct 1171000547000
Oct 1258000605000
Oct 1349000654000
Oct 1466000720000
Oct 1574000794000
Oct 1669000863000
Oct 1781000944000
Oct 18770001021000
Oct 19620001083000
Oct 20700001153000
Oct 21860001239000
Oct 22920001331000

When to use #

Use it for

  • Warning customers that they are heading over a limit.
  • Showing the cost of staying on course.

Skip it when

  • There is too little history to project.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/usage-forecast

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { UsageForecast } from "@/components/ui/usage-forecast"

The worked example comes with Pro

The 13-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

UsageForecast

component
PropTypeDefaultDescription
label *string—
daily *readonly number[]—Usage on each day so far, oldest first.
days *number—Days in the billing period.
limitnumber—
unitNamestring"units"
startDatestring—First day of the period, "YYYY-MM-DD", for the labels.
cost((total: number) => string)—Converts a total to money for the summary.
classNamestring—

Accessibility #

It exposes img and status semantics, with aria-label and aria-hidden kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.