Activity Rings

Concentric progress rings toward goals. Pro · Data and metrics › Metrics and widgets

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add activity-rings

npm install valyro-ui-pro

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

Prop	Type	Default
`rings` *	`ActivityRing[]`		Rings from the outside in; one ring is a plain progress ring.
`size`	`number`	`200`	Diameter in px. Default 200.
`thickness`	`number`	`14`	Stroke width of each ring in px. Default 14.
`gap`	`number`	`4`	Space between rings in px. Default 4.
`children`	`ReactNode`		Content in the middle: a figure with a caption.
`legend`	`'none' \| 'list'`	`'none'`	`list` adds the rings' names and progress beside the rings; `none` keeps them for screen readers only.
`legendPosition`	`'top' \| 'start'`	`'top'`	Where the list goes relative to the rings. Default `top`.
`locale`	`string`		BCP 47 locale for the numbers.
`labels`	`Partial<ActivityRingsLabels>`		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
Trend Value — Metric change: arrow, sign and color, as text or a pill
Proportion Bar — Proportion bar with a legend: storage, budget, breakdown
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