Chart card

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

Pourquoi il est là. The one frame of every chart of Orazaka's dashboard and usage pages (#253).

Installation

Installer

npm install @krizaka/charts

Importer

import { ChartCard } from "@krizaka/charts/card";

Exemples

Props

Accessibilité

• The chart keeps its data table in the page, its written summary and its keyboard walk inside the card.
• The actions menu is a real menu: arrow keys, Escape, focus returned to the ⋯ button; the table opens in a sheet with a focus trap.
• Legend chips are toggle buttons (aria-pressed); the last visible series cannot be switched off.

Bonnes pratiques

• Write the insight from the data, in one line: the figure first, then the change (100 jobs · +100 % vs last week).
• Leave the chart without a title: the card hands it its own, which stays the chart's accessible name.
• Zoom the time axis on the period that has data with autoRange rather than drawing empty days.
• Keep the footer for the source and the freshness; never a second insight.

Composants liés

• KPI statA key figure with its change against the previous period and a sparkline of the period, on the kit's Stat.
• Line chartChange over time: one line per series, the last value written at its end, thresholds, markers and a crosshair tooltip.
• Bar chartAmounts compared across categories: grouped, stacked or horizontal bars, each value written at its tip.
• Pie and donut chartPart of a whole: slices sorted by size, folded into “Other” past six, each share written in the legend; a donut carries the total in its hole.
• SparklineA word-sized trend without axes — in a stat, a table cell or a sentence — drawn on the server when its width is known.

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