Usage

Web uniquement — React, depuis @krizaka/ui/usage. Bêta : son API peut encore changer à une version mineure.

• Mobile · ✗ à construire. 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

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

Installation

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

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

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

Exemples

Props

Accessibilité

• 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.

Clavier

Bonnes pratiques

• 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.

Composants liés

• MeterA measure within a known range — a quota, a balance, a share: thresholds turn it to warning then danger (or the reverse when high is good), and split into parts it becomes a stacked bar or ring with its legend.
• StatA key figure: a label, a value in tabular digits, a hint and a trend said in words.
• Quota meterSpace or time used against a plan: the figure in words, a meter that turns amber at 80 % and red at 95 %, the sentence that says what to do, the small figures and the way out.
• Dashboard layoutA dashboard: the screen's heading with its actions and filters, then a responsive grid of widgets — one column on a phone, two from sm, four from xl — each a titled region that spans one to four columns.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub