Отображение данных
Метрика
Одно число, за которым следят. Единица набирается мельче и тише самого числа: «42 с» одним кеглем читается как одно слово, а разделив размер и цвет, глаз хватает число, и «с» уходит в фон.
Прогонов за сутки
128
18% к прошлому
Среднее время
4,2с
Предупреждений
5
5 новых
Разметка
<div class="inst-metric-row">
<div class="inst-metric">
<div class="inst-metric-label">Прогонов за сутки</div>
<div class="inst-metric-value">128</div>
<div class="inst-metric-delta" data-dir="down" data-tone="ok">18% к прошлому</div>
</div>
<div class="inst-metric">
<div class="inst-metric-label">Среднее время</div>
<div class="inst-metric-value">4,2<span class="inst-metric-unit">с</span></div>
</div>
<div class="inst-metric">
<div class="inst-metric-label">Предупреждений</div>
<div class="inst-metric-value">5</div>
<div class="inst-metric-delta" data-dir="up" data-tone="error">5 новых</div>
</div>
</div>
Прогонов в сутки
128
Среднее время
4.2с
Предупреждений
5
Разметка
<div class="inst-metric-row inst-metric-row--joined">
<div class="inst-metric">
<div class="inst-metric-label">Прогонов в сутки</div>
<div class="inst-metric-value">128</div>
</div>
<div class="inst-metric">
<div class="inst-metric-label">Среднее время</div>
<div class="inst-metric-value">4.2<span class="inst-metric-unit">с</span></div>
</div>
<div class="inst-metric">
<div class="inst-metric-label">Предупреждений</div>
<div class="inst-metric-value">5</div>
</div>
</div>
Доля успешных
94.2%
1.8 пункта за неделю
Длительность p95
4:12мин
медиана 2:48
В очереди
37
9 ждут дольше часа
Разметка
<div class="inst-metric-row inst-metric-row--joined inst-metric-row--headline">
<div class="inst-metric">
<div class="inst-metric-label">Доля успешных</div>
<div class="inst-metric-value">94.2<span class="inst-metric-unit">%</span></div>
<div class="inst-metric-delta" data-dir="down" data-tone="warn">1.8 пункта за неделю</div>
</div>
<div class="inst-metric">
<div class="inst-metric-label">Длительность p95</div>
<div class="inst-metric-value">4:12<span class="inst-metric-unit">мин</span></div>
<div class="inst-metric-delta">медиана 2:48</div>
</div>
<div class="inst-metric">
<div class="inst-metric-label">В очереди</div>
<div class="inst-metric-value">37</div>
<div class="inst-metric-delta" data-dir="up" data-tone="warn">9 ждут дольше часа</div>
</div>
</div>
Контракт
| Что | Обязательно | Почему |
|---|---|---|
--joined, когда полоса — один факт |
да | Отдельные плитки говорят «набор чисел», одна разделённая поверхность — «состояние этого экрана». Выбрать не то — не оплошность стиля, а неверная фраза |
inst-metric-label |
да | «128» без ответа на «чего» не является метрикой |
| Знак изменения словом в дельте | да | Стрелка — второй носитель, а не единственный: «↓ 18%» читается и без тона |
| Доступное имя из подписи и числа | да, если метрика кликабельна | Иначе прозвучит «128» без ответа на «чего» |
data-dir и data-tone |
нет | Без первого дельта идёт без стрелки, без второго — нейтральным цветом |
Доступность
| Подпись и число | Связаны визуально порядком. Если метрика кликабельна, доступное имя должно включать оба — иначе прозвучит «128» без ответа на «чего» |
| Не только цвет | Дельта несёт стрелку и знак изменения в тексте. Читатель, не различающий тон, читает «↓ 18%» |
| Контраст | Дельта берёт --tone-ink — порог текста 4.5:1, а не метки 3:1 |
| Кегль числа | --text-lg внутри области, отношение значения к подписи 1.44. Метрика там не перевешивает имя экрана, на котором стоит — замерено 2026-08-27. Единственное исключение — --headline ниже |
--headline только под шапкой страницы, никогда внутри области |
да |
Не больше одной полосы --headline на экран |
да |
| Табличные цифры | Включены по умолчанию: число, обновляемое на месте, не дёргает соседей |
Устройство
Направление и оценка — разные атрибуты
Это главная ловушка компонента. Стрелка вниз у времени прогона — хорошо, стрелка вверх у предупреждений — плохо. Атрибут, названный стрелкой и означающий оценку, — гарантированная ошибка применения.
| Атрибут | Что кодирует | Значения |
|---|---|---|
data-dir |
Куда изменилось | up · down |
data-tone |
Хорошо это или плохо | ok · warn · error · neutral · running |
Время прогона
42 с
18% — упало, и это хорошо
Предупреждений
12
5 новых — выросло, и это плохо
Разметка
<div class="inst-metric-row">
<div class="inst-metric">
<div class="inst-metric-label">Время прогона</div>
<div class="inst-metric-value">42<span class="inst-metric-unit"> с</span></div>
<div class="inst-metric-delta" data-dir="down" data-tone="ok">18% — упало, и это хорошо</div>
</div>
<div class="inst-metric">
<div class="inst-metric-label">Предупреждений</div>
<div class="inst-metric-value">12</div>
<div class="inst-metric-delta" data-dir="up" data-tone="error">5 новых — выросло, и это плохо</div>
</div>
</div>
Оба атрибута необязательны: дельта без data-dir идёт без стрелки, без
data-tone — нейтральным цветом.
Композиции
Ряд метрик — без рамок
Всего
128
Успешно
121
Упало
7
Разметка
<div class="inst-metric-row">
<div class="inst-metric">
<div class="inst-metric-label">Всего</div>
<div class="inst-metric-value">128</div>
</div>
<div class="inst-metric">
<div class="inst-metric-label">Успешно</div>
<div class="inst-metric-value">121</div>
</div>
<div class="inst-metric">
<div class="inst-metric-label">Упало</div>
<div class="inst-metric-value">7</div>
</div>
</div>
Четыре числа — это одна группа. Рамка вокруг каждого превращает их в четыре объекта, между которыми читатель начинает искать различия, которых нет. Поэтому метрика стоит на приглушённой поверхности, а не в карточке.
Сценарии
Сводка прогона
Порознь метрика — просто крупное число; смысл появляется в ряду.
Что видно только здесь:
- рамок нет ни у одной. Четыре числа — одна группа; рамка вокруг каждого превратила бы их в четыре объекта, между которыми читатель начнёт искать различия;
- единица мельче и тише числа. «42 с» одним кеглем читается как одно слово; разделив размер и цвет, глаз хватает число, а «с» уходит в фон;
- направление и оценка независимы. Стрелка вниз у времени — хорошо, стрелка вверх у предупреждений — плохо.
Время прогона
42 с
18% к прошлому
Тесты пройдены
248/251
3 падают
Размер бандла
7,4 МБ
без изменений
Предупреждений
12
5 новых
Разметка
<div class="inst-metric-row">
<div class="inst-metric">
<div class="inst-metric-label">Время прогона</div>
<div class="inst-metric-value">42<span class="inst-metric-unit"> с</span></div>
<div class="inst-metric-delta" data-dir="down" data-tone="ok">18% к прошлому</div>
</div>
<div class="inst-metric">
<div class="inst-metric-label">Тесты пройдены</div>
<div class="inst-metric-value">248<span class="inst-metric-unit">/251</span></div>
<div class="inst-metric-delta" data-tone="warn">3 падают</div>
</div>
<div class="inst-metric">
<div class="inst-metric-label">Размер бандла</div>
<div class="inst-metric-value">7,4<span class="inst-metric-unit"> МБ</span></div>
<div class="inst-metric-delta">без изменений</div>
</div>
<div class="inst-metric">
<div class="inst-metric-label">Предупреждений</div>
<div class="inst-metric-value">12</div>
<div class="inst-metric-delta" data-dir="up" data-tone="error">5 новых</div>
</div>
</div>
API
| Имя | Что делает |
|---|---|
| класс | |
inst-metric | Одна метрика |
inst-metric-row | Ряд метрик |
inst-metric-label | Подпись над числом |
inst-metric-value | Само число |
inst-metric-unit | Единица внутри числа: мельче и тише |
inst-metric-delta | Изменение к прошлому периоду |
| модификатор | |
inst-metric-row--joined | Одна поверхность, разделённая линиями, вместо отдельных плиток |
inst-metric-row--headline | Полоса под шапкой страницы. Значение берёт потолок шкалы. Одна на экран |
| Имя | Значение | Что делает |
|---|---|---|
| атрибут | ||
data-dir | up · down | на inst-metric-delta |
data-tone | neutral · running · ok · warn · error | там же |
| Имя | Значение | Откуда |
|---|---|---|
| переменная | ||
--metric-value-sizeНасколько громко значение | --text-lg | задаёт приложение |
| токен | ||
--text-2xl | 1.75rem | база +4: масштаб |
--text-2xs | 0.6875rem | база +4: масштаб |
--surface-recessed | light-dark(oklch(0 0 0 / 0.060), oklch(1 0 0 / 0.050)) | одно на все ячейки |
--radius-md | 8px | база +4: масштаб |
--pad-block-y | var(--space-4) | база +14: плотность · масштаб |
--gap-row | var(--space-3) | база +14: плотность · масштаб |
--text-lg | 1.125rem | база +4: масштаб |
--text-xs | 0.78125rem | база +4: масштаб |
--tracking-tight | -0.01em | одно на все ячейки |
--tone-ink | var(--accent-text) | база +2: |
--size-chevron | 10px | база +4: масштаб |
--space-2 | 4px | одно на все ячейки |
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument