Chart (ECharts option)
Any ECharts option on the Krizaka frame: the theme resolved from the tokens, the lazy engine, the states, the table, the keyboard, the export.
Web uniquement — React, depuis @krizaka/charts/chart. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- A chart type the typed components do not cover: polar bars, a sunburst, a parallel axis, a graph.
Quand ne pas l’utiliser
- A type the package has: its props say more and its summary is written for you.À la place : Line chart
Installation
Installer
npm install @krizaka/chartsImporter
import { Chart } from "@krizaka/charts/chart";Exemples
Polar bars
Uploads per hour on a clock face: a type the package does not ship, with only its modules loaded.
Uploads by hour of the day
Uploads by hour: quietest at 02:00 (1), busiest at 19:00 (61).
| Hour | Uploads |
|---|---|
| 00:00 | 3 |
| 01:00 | 2 |
| 02:00 | 1 |
| 03:00 | 1 |
| 04:00 | 2 |
| 05:00 | 4 |
| 06:00 | 9 |
| 07:00 | 18 |
| 08:00 | 26 |
| 09:00 | 31 |
| 10:00 | 34 |
| 11:00 | 37 |
| 12:00 | 41 |
| 13:00 | 39 |
| 14:00 | 36 |
| 15:00 | 38 |
| 16:00 | 44 |
| 17:00 | 52 |
| 18:00 | 58 |
| 19:00 | 61 |
| 20:00 | 49 |
| 21:00 | 33 |
| 22:00 | 17 |
| 23:00 | 8 |
Props
Any ECharts option, themed and framed like the typed charts. Memoise option when it is a function.
| Prop | Type | Défaut | Description |
|---|---|---|---|
optionrequis | ECBasicOption | ((theme: ResolvedTheme, size: { width: number; height: number; }) => ECBasicOption) | — | The ECharts option, or a function of the resolved theme (colours as plain strings, the palette, the ramp). |
summaryTextrequis | string | — | The written summary: an option says nothing on its own. |
tablerequis | TableModel | — | The data as a table: the alternative of every chart. |
titlerequis | 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. |
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…). |
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. |
items | readonly WalkItem[] | — | What the arrow keys walk (series and data indexes, and what each one says). |
labels | ChartLabelsInput | — | The words, translated: the buttons, the states, the written summary. |
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". |
modules | (() => Promise<unknown>) | () => import("../echarts/engines/full") | Registers what the option needs, from echarts/charts and echarts/components (tree-shaken):
() => import("./my-echarts") where that module calls use([...]). Default: all of ECharts (~380 kB gzip). |
onItem | ((item: { seriesIndex: number; dataIndex: number; }) => void) | — | A click (or Enter) on a data item. |
renderer | Renderer | — | svg (default): sharp, exportable as SVG. canvas: for tens of thousands of marks. |
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"). |
Accessibilité
- The plot is a group named by the title and described by
summaryText. - Give
itemsfor the arrow keys to walk; without them the plot is not a tab stop. tableis the data table, always in the page for assistive technology.
Clavier
| Touches | Action |
|---|---|
| Tab | Moves the focus to the plot (one tab stop), then to the data and export buttons. |
| Arrow keys | Walk the items one by one: each is announced and highlighted, its tooltip shown. |
| Home / End | Jump to the first or the last item. |
| Esc | Hides the tooltip and clears the highlight. |
Bonnes pratiques
- Pass
moduleswith only what the option needs (use([...])in a module of yours): the default loads all of ECharts. - Write
summaryTextandtable: an option is opaque, the alternative is yours to give. - Read the colours from the theme function (
theme.palette,theme.text2), never hard-coded.
Composants liés
Générée depuis le code de @krizaka/ui 2.4.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub