Графики
Графики
Семь компонентов, и ни один из них не график в обычном смысле: у них нет осей. Это показания, встроенные в интерфейс, — доля, состав, тренд, расшифровка цветов. Как только у картинки спрашивают значения, ей нужны оси, а с осями она заслуживает собственного места на экране, а не строки под числом.
Сравнение стоит здесь, а не на страницах: «возьмите другое» — это утверждение о СОСЕДЯХ, и повторённое семь раз оно расходится с ними по одной строке за правку.
Что выбрать
| Что нужно | Возьмите | Почему не соседа |
|---|---|---|
| Доля от известного целого во всю ширину блока | Меру | Полоса длиннее кольца, значит точнее |
| Из чего целое состояло — несколько исходов сразу | Полосу состава | Мера сравнивает одну величину с потолком, здесь части сравниваются друг с другом |
| Ту же долю в тесном месте: у заголовка карточки, в строке | Кольцо | Мера во всю ширину там не помещается |
| Направление изменения под числом | Спарклайн | У меры и кольца нет истории |
| Сколько чего-то за день, по неделям | Тепловую карту | Спарклайн проводит линию сквозь время, тепловая карта даёт каждому дню свой квадрат |
| Расшифровку рядов, различаемых цветом | Легенду | При двух и более рядах она не опция, а обязанность |
| Цвет ряда по его номеру из данных | Палитру | Статусные тона закреплены и в палитре не участвуют |
Когда ни один не подходит
| Что нужно | Возьмите | Почему не отсюда |
|---|---|---|
| Значения, а не форму | полноценный график с осями | Спарклайн отвечает на «растёт или падает», а не «сколько» |
| Точные значения, которые читают по строкам | таблицу | Цифры читаются цифрами, а не формой |
| Седьмой ряд | таблицу | Пять-шесть рядов — потолок различимости цветом |
| Состояние объекта из словаря | бейдж с точкой | Статус не категория, и цвет у него закреплён |
| Когда что-то случилось, а не сколько его было | историю проверок | Полоса состава не умеет в порядок: те же 8% — это один долгий провал или девяносто разбросанных |
| Исходы по дням, а не количество | историю проверок | В тепловой карте нет провалов: её ось — интенсивность, а ok/warn/error — другой вопрос |
| Ожидание без величины вовсе | скелетон или спиннер | У меры обязан быть потолок |
| Число само по себе | метрику | Кольцо без величины у потолка ничего не добавляет |
| Список пар «имя — значение» без графика | список свойств | Квадратик ряда сообщал бы о цвете, которого нет |
| Расход исчерпаемого ресурса в прогоне | бюджет прогона | Он знает про лимит и про то, что бывает при его достижении |
Общее для всех шести
Величина живёт в атрибуте, а не в ширине. aria-valuenow обязателен: без
него значение существует только в пикселях и недоступно ни скринридеру, ни
тесту.
Категориальный цвет — только на графике. Заливка кнопки, подсветка строки, тон бейджа берутся из семантики; палитра рядов вне графика запрещена, иначе цвет перестаёт что-либо означать.
Пять-шесть рядов — потолок. Он не про палитру, а про глаз: седьмой цвет человек уже не сопоставляет с легендой, и картинка перестаёт отвечать на вопрос, ради которого нарисована.
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument