KPI Group

Ряд KPI: значение, изменение к прошлому периоду, спарклайн и прогресс к цели. Бесплатно, MIT · Данные и показатели › Показатели и виджеты

Установка

npx valyro-cli@latest add kpi-group

npx shadcn@latest add https://valyro.xyz/r/kpi-group.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { KpiGroup } from 'valyro-ui';

Prop	Type	Default
`items` *	`KpiItem[]`		Metrics, one tile each in order: value, change vs the previous period, optional sparkline and target.
`comparisonLabel`	`ReactNode`		Context after every delta, e.g. "vs last month".
`variant`	`'joined' \| 'cards'`	`'joined'`	`joined` — one panel split by hairlines (default); `cards` — a panel per metric.
`minTileWidth`	`number`	`200`	Narrowest tile before the grid wraps, px. Default 200.
`loading`	`boolean`	`false`	Skeleton tiles; with no `items` yet, `skeletonCount` of them.
`skeletonCount`	`number`	`4`	Placeholder tiles shown while `loading` and `items` is still empty.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<KpiGroupLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Stats Card — Карточки показателей
Widget — Контейнер дашборда: заголовок, действия, крупное число, легенда и область графика
Number Value — Число с учётом локали: валюта, проценты, компактная запись и единицы
Trend Value — Изменение показателя: стрелка, знак и цвет, текстом или пилюлей
Proportion Bar — Полоса долей с легендой: хранилище, бюджет, структура
Activity Rings — Концентрические кольца прогресса к целям
Leaderboard — Рейтинг: места с медалями, миниатюры, цифры и динамика за период
Data Table — Таблицы с поиском и сортировкой
Data Grid — Таблица на 100 000 строк: группировка, фильтры, редактирование
Virtual List — Виртуальный список на 100 000 строк
Bulk Action Bar — Панель действий над выбранными строками с горячими клавишами
List Block — Блок списка с картинками или иконками, описанием и значением