Trend Value

Metric change: arrow, sign and color, as text or a pill. Pro · Data and metrics › Metrics and widgets

Installation

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 — Metric cards
KPI Group — KPI row: value, change vs. previous period, sparkline and progress to goal
Widget — Dashboard container: title, actions, big number, legend and chart area
Number Value — Locale-aware number: currency, percent, compact notation and units
Proportion Bar — Proportion bar with a legend: storage, budget, breakdown
Activity Rings — Concentric progress rings toward goals
Leaderboard — Leaderboard: medal places, thumbnails, numbers and change over a period
Data Table — Tables with search and sorting
Data Grid — Grid for 100,000 rows: grouping, filters, inline editing
Virtual List — Virtual list for 100,000 rows
Bulk Action Bar — Actions for selected rows, with keyboard shortcuts
List Block — List with images or icons, descriptions and values