Trend Value

Изменение показателя: стрелка, знак и цвет, текстом или пилюлей. Pro · Данные и показатели › Показатели и виджеты

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add trend-value

npm install valyro-ui-pro

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

Prop	Type	Default
`value` *	`number`		The change: +62000, −0.033 (with `percent`). Its sign picks the direction.
`format`	`'number' \| 'currency' \| 'percent' \| 'compact'`	`'number'`	How the change is printed; `percent` takes a share of one (0.33 prints +33%).
`currency`	`string`		ISO 4217 code for `currency` and compact money.
`fractionDigits`	`number`		Fixed number of fraction digits.
`direction`	`'up' \| 'down' \| 'flat'`		Overrides the direction taken from the sign (a flat arrow for a tiny change, for example).
`invert`	`boolean`	`false`	A fall is good news (costs, latency, churn): the colors swap, the arrow does not.
`variant`	`'text' \| 'badge'`	`'text'`	`text`: colored figure; `badge`: a tinted pill, as on KPI cards. Default `text`.
`showIcon`	`boolean`		Shows the arrow before the figure. Default true for `badge`, false for `text`.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Text size. Default `md`.
`locale`	`string`		BCP 47 locale. Default: the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<TrendValueLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

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