machines-ui
graphs

Quota

Quota usage bar: used against a hard limit, with reset date and an end- of-window projection. Billing-style: surfaces the headline figure, the "X of Y" copy, and pace so a customer can see whether they will run out.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphQuota } from '@fractaldesign/machines-ui';

Preview

[ API QUOTA — OPENAI ]

124,500 / 200,000 API calls

62%

resets
Oct 1
days left
12 / 30
projected
207,500 (104% of limit)
avg / day
6,917
pace
over budget

↗ projected to exceed the limit before reset

Used 124,500 of 200,000 API calls, 62 percent of quota , resets Oct 1 , projected to use 207,500 by end of window.
<GraphQuota
  title="API QUOTA — OPENAI"
  used={124500}
  limit={200000}
  unit="API calls"
  resets="Oct 1"
  daysInto={18}
  daysTotal={30}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
used* number —Amount consumed in the current quota window.
limit* number —Maximum amount available in the current quota window.
unit string —Unit label, e.g. "API calls" or "GB".
resets string —Optional reset label, e.g. "Oct 1" or "in 4 days".
daysInto number —Days elapsed in the current window. Enables the projection.
daysTotal number —Window length in days.
format (n: number) => string —Optional number formatter. Defaults to thousands-grouped.
caption string —Optional caption below the panel.
corner string —Character drawn at each corner of the frame.
class string ''

API

  • class forwarded to the outer element
  • motion reveals on scroll into view

Theming

CSS custom properties this component reads.

  • --border
  • --graph-accent
  • --graph-accent-3
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphQuota.svelte

machines-ui