Krizaka UI
Krizaka UI
Components

Usage

The blocks of a « Credits & usage » page: the balance on a meter, the period switch (the address holds it), the figures on a strip with their trend in words, and the activity stacked by outcome.

Web · ✓Mobile · ✗ to buildDesktop · ✓BetaData display
import { CreditsMeter, PeriodSwitch, UsageTiles, UsageChart, parsePeriod } from "@krizaka/ui/usage";

Web only — React, from @krizaka/ui/usage. Beta: its API may still change in a minor version.

  • Mobile · ✗ to build. The phone apps show their credits through Meter and Stat by hand; a native twin of the blocks follows the first app that moves onto them. issue #728

Why it is here. Yomizaka « Crédits et usage » (krizaka/yomizaka#314), Akinaza's activity panel (akinaza#325); Orazaka moves onto it in its dispatch.

When to use

  • A « Credits & usage » page or panel: what is left, how it was used over 7, 30 or 90 days, and what happened to each run.
  • Any metered product (checks, runs, storage) that bills or limits by credits.

When not to use

  • A single quota against a plan, with no period.Use instead: Quota meter
  • A free-form dashboard of charts.Use instead: Dashboard layout
  • A single key figure.Use instead: Stat

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { CreditsMeter, PeriodSwitch, UsageTiles, UsageChart, parsePeriod } from "@krizaka/ui/usage";

Examples

Credits & usage

The balance, the period switch, the strip of figures and the activity by outcome (demo data).

Loading and empty

The skeletons while the data is on its way, then the empty state.

Props

CreditsMeter

The balance: the figure large, a meter that turns to warning then danger as it runs low, the renewal and the way to buy.

PropTypeDefaultDescription
balancerequirednumber—Credits left.
labelrequiredstring—What the balance is (« Crédits »): the heading and the meter's name.
totalrequirednumber—The allowance of the period; the meter fills with what is left.
actionReactNode—The way to buy more: a link or a button.
localestringfr-CADefault fr-CA.
renewalReactNode—The renewal, written by the app (« Renouvelés le 1er novembre »).

PeriodSwitch

7 · 30 · 90 d: links, so the address holds the period (?period=30) and the server renders it.

PropTypeDefaultDescription
hrefrequiredstring—The page's path (and any other parameters); each period is a link to it with ?period=.
labelrequiredstring—The accessible name (« Période »).
valuerequirednumber—The period shown, from parsePeriod(searchParams.period).
linkAsLinkComponent—The app's router link (Next's Link); default a plain <a>.
localestringfr-CADefault fr-CA.
paramstringperiodThe query parameter. Default period.
periodLabel((days: number) => string)—The text of a period. Default 7 j (7 d for an English locale).
periodsreadonly number[][7, 30, 90] as constThe periods offered, in days. Default 7 · 30 · 90.

UsageChart

The activity of the period, one bar per day stacked by outcome — with its legend and its text version (a table).

PropTypeDefaultDescription
columnsrequired{ day: string; total: string; }—The text version's column headings: the day, the total.
daysrequiredreadonly UsageDay[]—The days, oldest first.
emptyLabelrequiredstring—Said when there is nothing in the period.
outcomesrequiredreadonly UsageOutcome[]—The outcomes stacked in each bar, bottom first.
loadingboolean—The data is on its way: a skeleton keeps the height.
localestringfr-CADefault fr-CA.

UsageTiles

The figures of the period on the strip, each compared with the previous period in words.

PropTypeDefaultDescription
tilesrequiredreadonly UsageTileInput[]—2 to 4 figures.
loadingboolean—The data is on its way: the row keeps its height.
localestring—The language of the figures and the words. Default fr-CA.
periodReactNode—The period switch, above the row.
wordsPartial<UsageWords>—Your own words for the change: {change} is the percentage.

Accessibility

  • CreditsMeter is a role=meter named by its label, its value in words (« 820 sur 1 000 »); its tone is never the only signal.
  • PeriodSwitch is a navigation of links; the shown period is aria-current="page".
  • UsageChart is a figure with a caption; the bars are decorative and the text version is a table with every day and outcome.
  • Loading is aria-busy; the skeleton does not animate under reduced motion.

Keyboard

KeysAction
Tab / EnterMoves through the periods; each is a link.

Best practices

  • Read the period with parsePeriod(searchParams.period) and pass it to PeriodSwitch and to the query: the server renders the period, the address can be shared.
  • UsageTiles computes the change against the previous period from previous and says it in words (« +12 % vs période précédente »); French and fr-CA figures are the default, locale="en" switches both.
  • Put a Sparkline of @krizaka/charts (64 × 18) in a tile's chart; the tiles stay on the strip, never four full-width stats.
  • Pass outcomes in the order they should stack, bottom first; tones are the tokens' (success, danger…), never colours.
  • Show loading while the data is on its way and give an emptyLabel that says what to do next.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub

Swipeable row

Previous

Virtual

Next

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components