Графики
Легенда
Расшифровка цветов графика. Обязательна при двух и более рядах: без неё цвет не сообщает ничего, а график с бессмысленным цветом — это раскрашенная картинка.
- Рендер 18,2 с
- Физика 11,5 с
- Ассеты 8,1 с
- Аудио 4,2 с
Разметка
<ul class="inst-legend">
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-1)"></span>Рендер <span class="inst-legend-value">18,2 с</span></li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-2)"></span>Физика <span class="inst-legend-value">11,5 с</span></li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-3)"></span>Ассеты <span class="inst-legend-value">8,1 с</span></li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-4)"></span>Аудио <span class="inst-legend-value">4,2 с</span></li>
</ul>
Контракт
Легенда — список. Ряды перечислимы, значит это <ul>: скринридер объявит
«список из четырёх элементов» до того, как начнёт их читать.
| Что | Обязательно | Почему |
|---|---|---|
<ul> и <li> |
да | Ряды перечислимы. Список объявляет их количество до чтения |
--series на каждой метке |
да | Иначе все метки одного цвета — легенда без легенды |
| Порядок, совпадающий с графиком | да | Номер ряда — контракт, а не порядок сортировки |
| Величина или отличимая подпись | да | Цвет не имеет права быть единственным признаком ряда |
Доступность
| Структура | <ul> — количество рядов объявляется до перечисления |
| Цвет не единственный носитель | У ряда есть подпись словом и, как правило, величина. Легенда, где ряды различимы только тоном метки, не работает ни при дальтонизме, ни на чёрно-белой печати |
| Контраст | Метка держит 3:1 против поверхности: это несущий знак, а не декорация. Подписи — 4.5:1 |
| Различимость рядов | Светлота внутри категориальной палитры разная: ряды остаются различимы, когда тон исчезает вовсе |
| Кегль | --text-xs — 12,5px. Метка размером --size-dot, то есть 6px: меньше делать нельзя, она перестанет читаться как цвет |
| Порядок чтения | Метка перед подписью: скринридер читает подпись, а не пустой узел, потому что метка не имеет текста и не объявляется |
Устройство
- Успешно
- С замечаниями
- Упало
Разметка
<ul class="inst-legend">
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-1)"></span>Успешно</li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-2)"></span>С замечаниями</li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-3)"></span>Упало</li>
</ul>
| Узел | Работа |
|---|---|
inst-legend |
<ul>. Маркеры и отступы списка сняты, элементы переносятся |
inst-legend-item |
<li>. Метка и подпись в одну строку |
inst-legend-swatch |
Метка ряда. Читает --series |
inst-legend-value |
Величина ряда. Полный цвет текста и средний вес |
Метка ряда — квадрат, а не круг: круг в библиотеке занят точкой состояния, и круглая метка ряда прочиталась бы как статус.
Варианты
Цвет ряда назначается через --series инлайном — это канал данных: номер
ряда приходит вместе с данными и не может быть известен статическому CSS.
Оформление метки — размер, радиус, положение — целиком в библиотеке.
- Ряд 1
- Ряд 2
- Ряд 3
- Ряд 4
Разметка
<ul class="inst-legend">
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-1)"></span>Ряд 1</li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-2)"></span>Ряд 2</li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-3)"></span>Ряд 3</li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-4)"></span>Ряд 4</li>
</ul>
Порядок — часть контракта: первый ряд всегда --chart-1, и порядок в
легенде обязан совпадать с порядком рядов на графике. Легенда,
отсортированная по величине, а график — по времени, дают две разные нумерации
одного и того же.
Один ряд — не категория. Если ряд один, --series не ставится вовсе, и
умолчание — не --chart-1, а --accent-mark. Категориальный цвет существует,
чтобы различать ряды; при одном ряде различать нечего, и первый тон палитры
там означал бы категорию, которой нет.
--chart-1 вступает в силу тогда, когда появляется ряд №2 — и тогда --series
проставляется явно на всех рядах, включая первый.
Композиции
С величинами
- Рендер 18,2 с
- Физика 11,5 с
Разметка
<ul class="inst-legend">
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-1)"></span>Рендер <span class="inst-legend-value">18,2 с</span></li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-2)"></span>Физика <span class="inst-legend-value">11,5 с</span></li>
</ul>
Величина в легенде — второй носитель: она даёт точное
число тому, кто не различает тона, и делает легенду читаемой отдельно от
графика. Именно поэтому inst-legend-value берёт полный цвет текста, а
подпись — приглушённый: сканируют числа.
Под графиком в карточке
- Рендер 18,2 с
- Физика 11,5 с
Разметка
<div class="inst-card inst-stack inst-stack--tight">
<div class="inst-card-title">Время по модулям</div>
<svg class="inst-sparkline" viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true">
<path class="inst-sparkline-line" d="M0,26 24,24 48,18 72,13 96,9 120,6"/>
</svg>
<ul class="inst-legend">
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-1)"></span>Рендер <span class="inst-legend-value">18,2 с</span></li>
<li class="inst-legend-item"><span class="inst-legend-swatch" style="--series:var(--chart-2)"></span>Физика <span class="inst-legend-value">11,5 с</span></li>
</ul>
</div>
Легенда стоит под графиком: сверху она отодвигает данные ниже линии сгиба ради того, что читают вторым.
API
| Имя | Что делает |
|---|---|
| класс | |
inst-legend | Контейнер-список |
inst-legend-item | Элемент: метка плюс подпись |
inst-legend-swatch | Квадратная метка ряда |
inst-legend-value | Величина ряда |
| Имя | Значение | Откуда |
|---|---|---|
| переменная | ||
--seriesПриёмник тона: образец легенды читает её | --accent-mark | задаёт приложение |
| токен | ||
--chart-1Тон ряда №1. Порядок — часть контракта | light-dark(oklch(0.520 0.150 292), oklch(0.700 0.130 292)) | одно на все ячейки |
--chart-2Тон ряда №2. Порядок — часть контракта | light-dark(oklch(0.600 0.150 320), oklch(0.760 0.120 320)) | одно на все ячейки |
--chart-3Тон ряда №3. Порядок — часть контракта | light-dark(oklch(0.550 0.140 355), oklch(0.720 0.120 355)) | одно на все ячейки |
--chart-4Тон ряда №4. Порядок — часть контракта | light-dark(oklch(0.650 0.120 55), oklch(0.800 0.110 55)) | одно на все ячейки |
--chart-5Тон ряда №5. Порядок — часть контракта | light-dark(oklch(0.580 0.130 115), oklch(0.740 0.120 115)) | одно на все ячейки |
--chart-6Тон ряда №6. Порядок — часть контракта | light-dark(oklch(0.620 0.110 190), oklch(0.780 0.100 190)) | одно на все ячейки |
--size-dotСторона образца | 6px | база +4: масштаб |
--radius-markСкругление образца | var(--radius-2xs) | одно на все ячейки |
--text-xsКегль подписи | 0.78125rem | база +4: масштаб |
--space-3Зазор между образцом и подписью | 6px | одно на все ячейки |
--gap-inlineЗазор между пунктами | var(--space-4) | база +14: плотность · масштаб |
--weight-mediumНачертание значения | 600 | одно на все ячейки |
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument