Widget

Контейнер дашборда: заголовок, действия, крупное число, легенда и область графика. Pro · Данные и показатели › Показатели и виджеты

Установка

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

npm install valyro-ui-pro

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

Prop	Type	Default
`title`	`ReactNode`		Heading of the widget.
`description`	`ReactNode`		Muted line under the heading.
`actions`	`ReactNode`		Controls at the end of the header: a period select, a menu button.
`value`	`ReactNode`		Headline figure under the header: "$5,420", "72/52".
`unit`	`ReactNode`		Unit after the figure: "kcal", "avg".
`legend`	`WidgetLegendItem[]`	`[]`	Series dots with names.
`legendPosition`	`'header' \| 'footer'`		Where the legend goes: beside the title or centered under the content. Default `header` for `inset`, `footer` for `card`.
`variant`	`'inset' \| 'card'`	`'inset'`	`inset`: a tinted shell around an elevated content area; `card`: one surface. Default `inset`.
`footer`	`ReactNode`		Content under the body: a link, a note, buttons.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`3`	Level of the heading (default 3).

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