Credit usage
What is left of an allowance: the remaining amount in large, a meter that turns to warning then danger, the use per day and the day it runs out.
Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.
Why it is here. Orazaka's credits left and Orochia's allowance (PS-C ready-made charts).
When to use
- Orazaka's billing: the credits left this month and when they run out at the current pace.
- A storage plan (Orochia's console): gigabytes used of the plan, with a unit format.
- Any quota that renews: API calls, minutes of video.
When not to use
- Money raised towards a goal.Use instead: Goal progress
- A value in a range with no notion of running out (a load, a score).Use instead: Gauge
Installation
Install
npm install @krizaka/chartsImport
import { CreditUsage } from "@krizaka/charts/credits";Examples
Monthly credits
An Orazaka plan: credits left, the daily use, the run-out date.
Credits this month
Pro plan
1,880credits left of 5,000
3,120 used (62.4%)Renews on Nov 1, 2026
Use per day
Sparkline, 14 (1 – 14). Use per day: from 120 to 300, lowest 60 (7), highest 310 (10), up 150%.
| Category | Use per day |
|---|---|
| 1 | 120 |
| 2 | 180 |
| 3 | 95 |
| 4 | 210 |
| 5 | 260 |
| 6 | 140 |
| 7 | 60 |
| 8 | 75 |
| 9 | 230 |
| 10 | 310 |
| 11 | 280 |
| 12 | 190 |
| 13 | 240 |
| 14 | 300 |
At this pace, runs out on Oct 19, 2026
Storage plan
Orochia's console: gigabytes of the plan, past the warning level.
Platform storage
Bunny Stream · Growth plan
258 GBfree of 2,000 GB
1,742 GB used (87.1%)
Props
What is left of an allowance: the remaining amount, a meter in tones, the use per day and the run-out date.
| Prop | Type | Default | Description |
|---|---|---|---|
limitrequired | number | — | The allowance. |
titlerequired | string | — | What the allowance is (“Credits this month”): the heading and the meter's name. |
usedrequired | number | — | How much is used. |
brand | BrandId | — | The brand whose palette the charts use. Without it, a chart follows a .brand-<id> ancestor, else Krizaka. Set it
when the app loads a brand stylesheet on :root (@krizaka/tokens/brands/orazaka.css). |
className | string | — | A class on the figure (layout). |
daily | readonly (number | null)[] | — | The use of each recent day, oldest first: the sparkline and the projection. |
days | readonly unknown[] | — | The days of daily (ISO dates), for the sparkline's summary. |
description | ReactNode | — | A line under the title: the plan, the period. |
format | ValueFormat | integer | How the amounts are written. Default "integer"; a { style: "unit", unit: "gigabyte" } for storage. |
hideTitle | boolean | — | Visually hide the title (it stays the accessible name). |
labels | Partial<CreditLabels> | — | The words, passed translated; English by default. |
levels | readonly [number, number] | [0.8, 0.95] | The share where the meter turns to warning, then danger. Default [0.8, 0.95]. |
loading | boolean | — | The data is on its way. |
locale | Locale | — | The locale of every figure and date ("fr-FR"). Default "en-US". |
now | Date | — | Today, for the projection (pass it from the server to render the same date on both sides). Default: now. |
renewsAt | string | Date | — | When the allowance renews (an ISO date or a Date). |
style | CSSProperties | — | Inline style on the figure (layout only). |
Accessibility
- The meter is a
meternamed by the title, its value said in words (“3,120 used (62 %)”). - The warning and danger tones come with words: the projection says when it runs out.
Best practices
- Pass the use of the recent days: the projection and the sparkline need it.
- Pass
nowfrom the server when the page is server-rendered: both sides write the same date. - Lead with what is left, not what is used: it is what people decide on.
Related components
Generated from the code of @krizaka/ui 3.6.0: its meta.ts, its examples and its types.Edit this documentation on GitHub