Sparkline

Мініграфік тренду без осей — лінія, заливка або стовпчики на всю ширину батька.

Графік розміром зі слово: показує форму ряду — росте, падає, скаче — без осей, підписів і легенди. Найчастіше живе в слоті trend у UiStatCard, який навмисно нічого не малює сам.

Виторг, лінія + заливка

Відтік — зростання погане

Замовлення за тиждень

Пропуск у даних — розрив, не нуль

У плитці метрики

Виторг

1 284 300 гривень

проти серпня

Відтік

3,6 %

проти серпня

Нові клієнти

проти серпня

Три рішення, які тримає компонент

Пропуск — це розрив, а не нуль. NaN у даних рве лінію. Нуль намалював би падіння, якого не було: день без даних — не день без продажів.

Згладжування не вигадує значень. curve="smooth" — монотонна кубічна крива (як curveMonotoneX у d3). Звичайний сплайн «перелітає» екстремуми: між 10 і 10 з піком 50 посередині він малює провал нижче 10, якого в даних немає. Монотонна крива проходить через кожну точку й ніколи не виходить за сусідні значення.

Стовпчики стоять на нулі. Шкала variant="bar" завжди містить нуль: стовпчик, що починається не з нуля, бреше про пропорції — 98 і 100 виглядали б як «удвічі більше». Останній стовпчик яскравіший — «де ми зараз».

API

Props

Назва	Тип	Типово	Опис
`data`*	`number[]`	—	Ряд значень, від старого до нового. `NaN` — пропуск: лінія рветься, а не падає в нуль (день без даних — не день без продажів).
`variant`	lineareabar	`"line"`	Вигляд: лінія, лінія із заливкою або стовпчики.
`tone`	accentsuccesswarningdangerneutral	`"accent"`	Колір. Тон — рішення споживача, а не компонента: зростання відтоку — погана новина, і автоматичне «вгору = зелене» тут збрехало б.
`height`	`number`	`32`	Висота в пікселях. Ширина — уся ширина батька.
`strokeWidth`	`number`	`2`	Товщина лінії в пікселях — однакова за будь-якої ширини.
`curve`	smoothlinear	`"smooth"`	`smooth` — монотонна крива: плавна, але ніколи не виходить за сусідні значення, тож не вигадує піків і провалів, яких у даних немає.
`min`	`number`	`undefined`	Нижня межа шкали. Типово — мінімум даних (для стовпчиків — нуль).
`max`	`number`	`undefined`	Верхня межа шкали. Типово — максимум даних.
`label`	`string`	`undefined`	Доступна назва. Без неї компонент складає підсумок сам: «зростання: від 120 до 180, мінімум 96, максимум 210».
`formatValue`	`(value: number) => string`	`undefined`	Форматування чисел в автоматичному підсумку: валюта, одиниці.
`showLastPoint`	`boolean`	`false`	Крапка на останньому значенні — «де ми зараз».

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

Форма ряду поруч із числом: у плитці метрики, у рядку таблиці, у картці клієнта.
Коли важливий напрям і ритм, а не точні значення.

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

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

Доступність

Весь графік — одне зображення (role="img") з назвою. Без label компонент складає підсумок сам: «зростання: від 120 до 180, мінімум 96, максимум 210». Числа форматуються за uk-UA або функцією formatValue — валюту й одиниці передавайте нею, щоб підсумок звучав так само, як число поруч.

Портування

Геометрія живе в app/utils/sparkline.ts — копіюйте її разом із компонентом. SVG тягнеться на всю ширину батька через preserveAspectRatio="none", а товщину лінії тримає vector-effect="non-scaling-stroke". Тому остання точка — HTML-крапка поверх SVG, а не <circle>: коло в розтягнутому SVG стало б еліпсом.