Stats Card

Карточки показателей. Бесплатно, MIT · Данные и показатели › Показатели и виджеты

Установка

npx valyro-cli@latest add stats-card

npx shadcn@latest add https://valyro.xyz/r/stats-card.json

npm install valyro-ui

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

Prop	Type	Default
`label` *	`ReactNode`		Metric name in the card header, e.g. "Revenue".
`value` *	`ReactNode`		A number (formatted with `locale` and `format`) or pre-formatted content such as "$12,480".
`format`	`Intl.NumberFormatOptions`		Number formatting for a numeric `value`, e.g. `{ notation: 'compact' }` or a currency.
`delta`	`number`		Change in percent (12.5 → "12.5%"). The sign sets the arrow and color.
`invertTrend`	`boolean`	`false`	Treat a decrease as good news (error rate, latency, churn).
`icon`	`ReactNode`		Decorative icon at the end of the header, opposite the label (hidden from screen readers).
`caption`	`ReactNode`		Context next to the delta, e.g. "vs last week".
`sparkline`	`number[]`		Series for a small trend line. Needs at least two finite points.
`loading`	`boolean`	`false`	Skeleton lines replace the value, delta and sparkline; the label stays. Sets `aria-busy`.
`locale`	`string`		Number and percent formatting. Defaults to the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<StatsCardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

KPI Group — Ряд KPI: значение, изменение к прошлому периоду, спарклайн и прогресс к цели
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 — Блок списка с картинками или иконками, описанием и значением