Svelte 5 component · machines-ui · Graphs
GraphQuota
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
GraphQuota is a Svelte 5 ASCII quota chart component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { GraphQuota } from '@fractaldesign/machines-ui';Usage
<GraphQuota
title="API QUOTA — OPENAI"
used={124500}
limit={200000}
unit="API calls"
resets="Oct 1"
daysInto={18}
daysTotal={30}
/>Props
| Name | Type | Default |
|---|---|---|
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 | '' |
Related components
GraphRank Ranked rows: each item gets a label, a glyph bar whose length follows its value against the max, and the…GraphSlo Error-budget burn bar.GraphSlope A before-and-after slope chart: each row shows a from number, a direction arrow, and a to number, with…GraphSpark Packed 1ch sparkline, centered with a small gap. Never stretched.GraphSpec A labeled specification list with optional accent styling on individual values.GraphStack One or more stacked tracks showing how each row's segments add up, with a shared glyph legend.