Отображение данных

Двенадцать компонентов, и выбор между ними почти всегда сводится к одному вопросу: сколько объектов и сравнивают ли их между собой. Один объект — список свойств; много однородных, которые сравнивают, — таблица; много разнородных — карточки.

Сравнение стоит здесь, а не на страницах: «возьмите другое» — это утверждение о СОСЕДЯХ, и повторённое двенадцать раз оно расходится с ними по одной строке за правку.

Как показать данные

Что нужно	Возьмите	Почему не соседа
Свойства одного объекта, 3–15 пар	Список свойств	В таблице колонки сравнивают, а сравнивать не с чем
Записи, которые сравнивают по одним и тем же полям	Таблицу	У карточек половина ячеек оказалась бы пустой
Объекты списка со своим заголовком и составом	Карточки	В таблице разнородное не выстраивается в колонки
Число-герой, за которым следят	Метрику	Таблица нужна, когда чисел много и есть разбивка
Разнородные события во времени	Ленту	У лога колонки и моноширинный набор
Обзор месяца с раскладкой по неделям	Календарь	Ввод одной даты — это `<input type="date">`
Команду, фрагмент конфига, разметку	Код	У лога есть уровень и время, у дифа — стороны

Чем пометить объект

Что нужно	Возьмите	Почему не соседа
Состояние из перечислимого набора: идёт, готово, упало	Бейдж	Бейдж — словарь библиотеки, тег — слова пользователя
Метку, заведённую пользователем и снимаемую	Тег	Бейдж не снимается
Судьбу файла в списке изменений	Метку изменения	«Удалён» — не оценка, а бейдж с тоном её подразумевает
Опознать человека или агента	Аватар	Аватар отвечает «кто», а не «как дела»
Область приложения с шапкой и прокруткой	Панель	Панелей несколько и они не меняются; карточек сколько угодно и они из данных

Когда ни один не подходит

Что нужно	Возьмите	Почему не отсюда
Выбор фильтра	чип	Тег показывает уже выбранное, но не переключает
Выбор варианта	выбираемую карточку	У карточки нет состояния «выбрана»
Строки с состоянием и прогрессом	очередь	Она плоская: на сотне строк рамки превращаются в сетку
Поток строк от машины	лог	Уровень, время и хвост, который читают вместо страницы
Изменения в файле	диф	У него две стороны и счёт строк
Прогресс к пределу	меру	У метрики нет максимума
Ряд значений во времени	спарклайн	Метрика показывает одно число
Редактируемые свойства	инспектор (`inst-props`)	Список свойств — только для чтения
Десятки тысяч строк	виртуализация	Её в библиотеке нет, и таблица на них ляжет

Общее для всех двенадцати

Тон несёт значение, а не настроение. Бейдж, метка изменения и точка состояния берут тон из словаря; «удалён» при этом не «плохо», и красить его как ошибку — врать про смысл.

Рамка объявляет объект. Четыре метрики без рамок — одна группа; четыре метрики в рамках — четыре объекта. Поэтому ряд чисел рамок не получает, а карточка получает.

Цифры табличные везде. font-variant-numeric: tabular-nums стоит в базе: в инструментальном интерфейсе почти любое число либо стоит в колонке, либо обновляется на месте, и пропорциональные цифры дёргают оба случая.

Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument