Goal progress
A pot towards its goal, in money: an arc that fills, “raised of $500” under the amount, the supporters and the time left.
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. Orochia's challenge pots: raised of the goal (PS-C).
When to use
- An Orochia challenge with a goal: what fans pledged so far, on the web and in the app.
- A crowdfunded request: the amount raised, the supporters, the deadline.
When not to use
- An allowance that runs out.Use instead: Credit usage
- A value in a range that is not money raised.Use instead: Gauge
Installation
Install
npm install @krizaka/chartsImport
import { GoalProgress } from "@krizaka/charts/goal";Examples
A challenge's pot
An Orochia goal halfway there, its supporters and the time left.
Backflip on the beach
41 supporters · 3 days left
Gauge: $262 ($500).
| Category | Value |
|---|---|
| Backflip on the beach | $262 |
| min | $0 |
| max | $500 |
Goal reached
Past the goal: the success tone, the amount still counting.
Cover of the summer hit
128 soutiens · Objectif atteint
Gauge: 1 180 € (1 000 €).
| Category | Value |
|---|---|
| Cover of the summer hit | 1 180 € |
| min | 0 € |
| max | 1 000 € |
Props
A pot towards its goal, in money: the arc fills, the words say how much of what, and who chipped in.
| Prop | Type | Default | Description |
|---|---|---|---|
currencyrequired | string | — | The ISO 4217 currency. |
goalrequired | number | — | The goal, in minor units. |
raisedrequired | number | — | The amount raised, in **minor units** (cents). |
titlerequired | string | — | What the chart shows, in a few words: its accessible name, and its heading unless hideTitle. |
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: margins, grid placement). |
description | ReactNode | — | A sentence under the title: the period, the unit, the source. |
empty | ReactNode | — | What to show when there is nothing to draw (default: the empty label). An EmptyState of
@krizaka /ui fits. |
error | ReactNode | — | The data could not be loaded: true says the default words, a node says yours (a retry button…). |
height | number | — | The height of the plot in pixels. Default 280 (a sparkline: 32). |
hideTitle | boolean | — | Visually hide the title (it stays the chart's accessible name): a card that already has its heading. |
id | string | — | The id of the figure. |
labels | Partial<GoalLabels> | — | The words, passed translated; English by default. |
live | boolean | — | Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point. |
loading | boolean | — | The data is on its way: a skeleton of the chart, announced once. |
locale | Locale | — | The locale of every figure and date ("fr-FR"). Default "en-US". |
style | CSSProperties | — | Inline style on the figure (layout only: colours come from the tokens). |
summary | "hidden" | "visible" | — | The written summary: read by screen readers only ("hidden", default), or shown under the chart ("visible"). |
summaryText | string | — | Your own summary instead of the generated one (still read first by screen readers). |
supporters | number | — | How many people chipped in. |
timeLeft | ReactNode | — | The time left, written by the app (a Countdown, “2 days”). |
Accessibility
- The gauge is a
meter: the amount and “raised of $500” are its value in words. - “Goal reached” is written, never only shown by a colour.
Best practices
- Pass amounts in minor units and the currency.
- Write the time left with the app's countdown and pass it in
timeLeft. - Past the goal the amount keeps counting and the arc stays full, in the success tone.
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