Компоненты

Sparkline

Инлайновый тренд в SVG без chart-библиотеки — в строку и в бейдж.

Инлайновый спарклайн: тренд одной строкой — в таблицу, в бейдж, в статус-бар. Один <path> в SVG и, по желанию, точки экстремумов. Без chart-библиотеки.

Пример

Коммиты за 2 недели

+18%

Задержка ответа, мс

выброс

Остаток работ

−92%

В строке таблицы

Главное место спарклайна — не отдельный график, а ячейка рядом с числом: колонка «как менялось» без разворачивания в полноценную диаграмму.

auth	89
billing	80
search	45
notifications	52

Пропсы

Проп	Тип	По умолчанию	Описание
`values`*	`number[]`	—	Ряд значений слева направо.
`width / height`	`number`	`120 / 32`	Размеры в пикселях.
`color`	`string`	`var(--accent)`	Цвет линии.
`fill`	`boolean`	`false`	Залить область под линией градиентом цвета линии.
`smooth`	`boolean`	`false`	Сгладить кривыми вместо ломаной.
`dots`	`boolean`	`false`	Пометить первую и последнюю точку.
`extremes`	`boolean`	`false`	Пометить минимум и максимум ряда.
`zeroBased`	`boolean`	`false`	Включить ноль в шкалу — тогда высоты сопоставимы между графиками.
`maxPoints`	`number`	—	Проредить длинный ряд до этого числа точек, сохраняя выбросы.
`label`	`string`	—	Доступная подпись. По умолчанию — «Тренд +N%».

values*number[]

Ряд значений слева направо.

width / heightnumber

по умолчанию: 120 / 32

Размеры в пикселях.

colorstring

по умолчанию: var(--accent)

Цвет линии.

fillboolean

по умолчанию: false

Залить область под линией градиентом цвета линии.

smoothboolean

по умолчанию: false

Сгладить кривыми вместо ломаной.

dotsboolean

по умолчанию: false

Пометить первую и последнюю точку.

extremesboolean

по умолчанию: false

Пометить минимум и максимум ряда.

zeroBasedboolean

по умолчанию: false

Включить ноль в шкалу — тогда высоты сопоставимы между графиками.

maxPointsnumber

Проредить длинный ряд до этого числа точек, сохраняя выбросы.

labelstring

Доступная подпись. По умолчанию — «Тренд +N%».

Геометрия отдельно

Расчёт линии — чистый и переиспользуемый без React:

tsx

import {
  sparklineGeometry, // точки, path линии и заливки
  extentOf,          // границы шкалы (плоский ряд не делит на ноль)
  decimate,          // прореживание с сохранением экстремумов
  trend,             // доля изменения первое → последнее
} from "@toimetdev/pathlogs-core";