Activity Rings

Концентрические кольца прогресса к целям. Pro · Данные и показатели › Показатели и виджеты

Установка

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