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 + MobileBetaCharts

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/charts

Import

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

Backflip on the beach — data
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 €).

Cover of the summer hit — data
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
`currency`required	`string`	—	The ISO 4217 currency.
`goal`required	`number`	—	The goal, in minor units.
`raised`required	`number`	—	The amount raised, in minor units (cents).
`title`required	`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.

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