Components
Price ticker
A live auction's price: the current bid in large, the change since the opening and the number of bids, the bids as steps, the reserve as a line.
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 live auction price (PS-C).
When to use
- Orochia's auction room, on the web and in the app: the bids as they arrive.
- Any price that moves by discrete steps: a bid, a quote, an offer.
When not to use
- A price series over days with open, high, low and close.Use instead: Candlestick
- Money per period.Use instead: Earnings chart
Installation
Install
npm install @krizaka/chartsImport
import { PriceTicker } from "@krizaka/charts/ticker";Examples
Auction room
Eight bids in an Orochia auction, the reserve met.
Signed first take
$72.00current bid+$52.00 (+260%) since the opening · 8 bids
Line chart, 9 (6:00 PM – 6:33 PM). Price: from $20.00 to $72.00, lowest $20.00 (6:00 PM), highest $72.00 (6:33 PM), up 260%.
| Category | Price |
|---|---|
| 6:00 PM | $20.00 |
| 6:02 PM | $25.00 |
| 6:05 PM | $30.00 |
| 6:11 PM | $35.00 |
| 6:12 PM | $42.00 |
| 6:20 PM | $50.00 |
| 6:26 PM | $55.00 |
| 6:31 PM | $65.00 |
| 6:33 PM | $72.00 |
No bid yet
The opening price, the reserve ahead.
Studio session, one hour
$40.00opening price, no bid yet
Line chart, 1. Price: from $40.00 to $40.00. Reserve price at $90.00.
| Category | Price |
|---|---|
| 6:00 PM | $40.00 |
Props
A live auction's price: the current bid, the change since the opening, the steps of the bids, the reserve.
| Prop | Type | Default | Description |
|---|---|---|---|
bidsrequired | readonly Bid[] | — | The bids, in any order: when and how much (minor units). |
currencyrequired | string | — | The ISO 4217 currency. |
openingrequired | number | — | The opening price, in minor units. |
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). |
dataTable | boolean | — | The "Show data" button (the table is in the page for screen readers either way). Default true. |
description | ReactNode | — | A sentence under the title: the period, the unit, the source. |
dots | boolean | — | A dot on every point (short series). Default false: the end of each line carries one. |
empty | ReactNode | — | What to show when there is nothing to draw (default: the empty label). An EmptyState of
@krizaka /ui fits. |
endLabels | boolean | — | Write the last value at the end of each line (up to three series). Default true. |
error | ReactNode | — | The data could not be loaded: true says the default words, a node says yours (a retry button…). |
exportable | boolean | readonly ExportFormat[] | — | Export buttons: true for PNG, SVG and CSV, or the formats you want. |
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<TickerLabels> | — | The words, passed translated; English by default. |
legend | boolean | — | Show the legend (from two series). Default true. |
live | boolean | true | 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". |
markers | readonly Marker[] | — | Vertical markers at a category: a launch, an incident. |
onSelect | ((datum: Point, index: number) => void) | — | Called with the row when a point or a bar is clicked (or Enter is pressed on it). |
openedAt | string | Date | — | When the auction opened: the first point of the line. |
reserve | number | — | The reserve price, drawn as a line until it is met. |
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). |
timeFormat | CategoryFormat | time | How the times are written. Default "time" (14:30); "datetime" for auctions over several days. |
xLabel | string | — | The header of the categories in the data table (Month). |
zero | boolean | — | Start the value axis at zero. Default: true for bars and areas; for lines, unless the values sit far from zero. |
Accessibility
- The current price and the change are written above the plot; the arrow is decorative.
- The reserve is drawn and named until it is met.
Keyboard
| Keys | Action |
|---|---|
| Tab | Moves the focus to the plot, then to the data and export buttons. |
| Arrow keys | Walk the bids: each price and time is announced. |
Best practices
- Pass every bid with its time; the opening price and time give the first step.
- Keep
liveon (the default) while the auction runs: no entrance, no announcement of every bid. - Announce a new bid in the app's own live region (who outbid whom): the chart does not.
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