Proportion Bar

Полоса долей с легендой: хранилище, бюджет, структура. Pro · Данные и показатели › Показатели и виджеты

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add proportion-bar

npm install valyro-ui-pro

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

Prop	Type	Default
`segments` *	`ProportionSegment[]`		The parts, drawn left to right; zero or negative values take no space.
`total`	`number`		Capacity of the bar (100 GB of storage): the rest stays as empty track. Default: the sum of the segments.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Bar thickness. Default `md`.
`showLegend`	`boolean`	`true`	Dots with names under the bar. Default true.
`showValues`	`boolean`	`false`	Adds each segment's formatted value to the legend.
`valueFormatter`	`(value: number) => string`		Formats values in the legend and the accessible summary.
`ariaLabel`	`string`		Accessible name of the bar (the summary of the segments follows it).
`legendEnd`	`ReactNode`		Content at the end of the legend row: "61.8 GB available".
`locale`	`string`		BCP 47 locale for the default number format.

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