StatCard

Плитка ключової метрики зі зміною за період і власним напрямом «краще».

Одна метрика на дашборді: назва, число, зміна за період. Компонент нічого не рахує й не форматує — він показує те, що йому дали, і відповідає за єдину нетривіальну річ: як пофарбувати зміну.

Виторг за місяць

₴1 284 300

проти липня

Нових угод

проти липня

Середній чек

₴14 762

без змін

Зростання не завжди добре

Найпоширеніша помилка такої плитки — фарбувати все зростання зеленим. Для виторгу це правильно, для відтоку клієнтів — навпаки: +0,4 % відтоку це погана новина, пофарбована в зелене.

Тому знак і колір розведені. Знак delta дає стрілку, deltaGood каже, який напрям вважати добрим:

deltaGood="up" — більше краще (виторг, конверсія);
deltaGood="down" — менше краще (відтік, час відповіді, відмови);
deltaGood="none" — «краще» не визначено: стрілка лишається, кольору немає.

Конверсія

4,8 %

більше — краще

Відтік клієнтів

2,1 %

менше — краще

Частка мобільних

63 %

просто зміна

Завантаження

API

Props

Назва	Тип	Типово	Опис
`label`*	`string`	—	Назва метрики. Коротка іменна група: «Замовлення», не «Скільки замовлень».
`value`	`string \| number`	—	Головне число. Форматування — на боці споживача, компонент друкує рядок як є.
`delta`	`number`	—	Зміна відносно попереднього періоду. ЗНАК визначає стрілку, а тон — `deltaGood`, і розводити їх обов'язково: для «Відмов» падіння зелене, для «Виручки» — червоне.
`deltaFormat`	percentabsolute	`"percent"`	Як друкувати `delta`: `12` → «+12 %» або «+12».
`deltaGood`	updownnone	`"up"`	Який напрям вважати добрим. `none` лишає стрілку, але прибирає колір: метрика змінилась, а «краще» для неї не визначено.
`hint`	`string`	—	Підпис під дельтою: «проти минулого тижня».
`valueLabel`	`string`	—	Повне значення для скрінрідера, коли видиме скорочене («1,2 млн»). Без нього буде зачитано саме скорочення.
`to`	`string`	—	Робить плитку посиланням. Зберігає Ctrl+клік і середній клік.
`size`	mdsm	`"md"`	Щільність плитки.
`loading`	`boolean`	—	Показує скелетони, зберігаючи висоту плитки — сітка не перебудовується.

Слоти

Назва	Опис
`icon`	Іконка у верхньому правому куті плитки.
`trend`	Спарклайн або міні-графік під значенням. Компонент нічого не малює сам.
`value`	Власний рендер значення: чип, посилання, дві величини поруч.
`footer`	Рядок під дельтою замість `hint`.

Коли використовувати

Рядок KPI над дашбордом або звітом.
Підсумок над таблицею: скільки записів, на яку суму, як змінилось.
Будь-де, де число важливіше за графік.

Коли НЕ використовувати

Для показника без контексту порівняння: без delta і hint це просто число, і звичайний абзац упорається дешевше.
Як кнопку дії. Плитка з to — це посилання на звіт, а не спосіб щось запустити.
Для рядів даних: п'ять плиток поспіль з тією самою метрикою за різні місяці — це таблиця або графік.

Доступність

Стрілка ▲/▼ має aria-hidden, а поруч стоїть словесний еквівалент: «зростання на 12 відсотків». Без цього скрінрідер зачитує назву символа — «чорний трикутник вгору 12».

Коли видиме значення скорочене («1,2 млн»), передайте повне в valueLabel: воно піде в sr-only, а видиме отримає aria-hidden, щоб число не прозвучало двічі.

Стан loading показує скелетони, зберігаючи висоту плитки — сітка дашборда не перебудовується в момент приходу даних.