ДокументацияРазделы, компоненты, системы и их подразделы
KPI и статистика
Целевые показатели и оперативные метрики
Data Display
KPI связывает число с целью, Statistic сообщает текущую метрику
Оба компонента выделяют число, но отвечают на разные вопросы: KPI показывает движение к бизнес-результату, Statistic — состояние показателя здесь и сейчас.
01 · ЦельKPIПлан, период, отклонение и прогресс
02 · НаблюдениеStatisticТекущее число, контекст и тренд
01 · Goal metric
KPI показывает показатель в контексте цели
Название объясняет смысл числа, value удерживает акцент, meta добавляет период, план или изменение.
.ox-kpiHTMLKPI с динамикой
<article class="ox-kpi">
<span class="ox-kpi-label">Месячная выручка</span>
<strong class="ox-kpi-value">4,8 млн ₽</strong>
<div class="ox-kpi-meta">
<span>Август 2026</span>
<span class="ox-kpi-delta is-positive">+12,4%</span>
</div>
</article>Динамика оценивается по влиянию на цель
Рост расходов может быть опасным, а снижение времени ответа — положительным. Знак остаётся в числе, цвет отражает смысл.
.ox-kpi-delta.is-positive.ox-kpi-delta.is-warning.ox-kpi-delta.is-dangerПрогресс нужен только для известной цели
Полоса не заменяет число. Доступное значение сообщает текущий процент независимо от цвета заполнения.
.ox-kpi-progress.ox-kpi-progress-bar02 · Current metric
Statistic быстро сообщает текущее число
Компонент подходит оперативной метрике в карточке, панели или сводке. Large выделяет одну главную метрику текущего контекста.
Новые регистрации1 284За последние 7 дней
.ox-statisticАктивные пользователи8 420Главная метрика сводки
.ox-statistic-lgHTMLОперативная метрика
<div class="ox-statistic">
<span class="ox-statistic-label">Новые регистрации</span>
<strong class="ox-statistic-value">1 284</strong>
<span class="ox-statistic-helper">За последние 7 дней</span>
</div>Тренд дополняет значение
Стрелка, знак и число передают направление без зависимости от цвета. Период сравнения остаётся рядом.
Конверсия6,8%↑ 0,7 п. п. к прошлой неделе
.ox-statistic-trend.is-positiveОшибки API42↑ 18 за последние 24 часа
.ox-statistic-trend.is-dangerОтсутствие данных — не ноль
Ноль является измеренным значением. Если расчёт не выполнен или источник недоступен, показывайте нейтральный знак и объяснение.
Среднее время ответа—Недостаточно данных за период
— + пояснениеРазница в структуре отражает задачу
Оба компонента не должны зависеть от одного цвета и всегда показывают единицу измерения и период.
.ox-kpiСамостоятельный показатель, связанный с целью или планом..ox-kpi-metaПериод, цель, пояснение и оценённая динамика..ox-statisticВертикальная группа одной оперативной метрики..ox-statistic-helperПериод, источник или объяснение состояния.ПоверхностьStatistic не задаёт контейнер; размещайте его внутри подходящей карточки.Знак + текстНаправление и состояние не передаются одним цветом.