Leaderboard

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

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add leaderboard

npm install valyro-ui-pro

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

Prop	Type	Default
`items` *	`LeaderboardItem[]`		Ranked entries, first place first.
`title`	`ReactNode`		Heading of the board.
`icon`	`ReactNode`		Icon before the heading.
`periods`	`{ value: string; label: string }[]`	`[]`	Period choices shown as a switcher in the header.
`period`	`string`		Chosen period (controlled).
`defaultPeriod`	`string`		Initial `period` when uncontrolled.
`onPeriodChange`	`(period: string) => void`		Called with the new `period` when it changes.
`medals`	`boolean`	`true`	Gold, silver and bronze dots on the top three. Default true.
`footer`	`ReactNode`		Note under the list: "Updated hourly".
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`3`	Level of the heading (default 3).
`locale`	`string`		BCP 47 locale for the rank and rating numbers.
`labels`	`Partial<LeaderboardLabels>`		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 — Полоса долей с легендой: хранилище, бюджет, структура
Activity Rings — Концентрические кольца прогресса к целям
Data Table — Таблицы с поиском и сортировкой
Data Grid — Таблица на 100 000 строк: группировка, фильтры, редактирование
Virtual List — Виртуальный список на 100 000 строк
Bulk Action Bar — Панель действий над выбранными строками с горячими клавишами
List Block — Блок списка с картинками или иконками, описанием и значением