Generated view catalog

Web only — React, from @krizaka/charts/genui. Beta: its API may still change in a minor version.

• Mobile · ✗ to build. Slice 3 of the data-driven UI epic: the same messages drawn by the native charts. issue #207

Why it is here. Used by Orazaka.

Installation

npm install @krizaka/charts

import { chartsGenUiCatalog } from "@krizaka/charts/genui";

Examples

Props

This module has no component props: see the import and the preview above.

Accessibility

• Each generated chart keeps its title as accessible name, its written summary and its data table, as any chart of the package.

Best practices

• Tell the model the catalog and that every number must come from the data it was given: the entries check shapes, not truth.
• Formats are a closed list (number, integer, compact, percent, money with a currency): no free-form format string reaches the chart.

Related components

• KPI statA key figure with its change against the previous period and a sparkline of the period, on the kit's Stat.
• Chart cardThe frame of a chart: title, one line of insight, the chart, a footer, and the actions menu (view as table, download, copy) — used everywhere a chart is shown.
• 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.

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