Компоненты
Графики
Столбчатый график, горизонтальные полосы, линия тренда, кольцо, прогресс.
Столбчатый график
Число по месяцам, дням, часам. Над столбцом — точное число, внизу — период; несколько частей — стопкой и с легендой.
Продажи · 12 месяцев
число сделок по месяцам
24
31
19
42
56
55
73
25
32
47
66
сделок (админка)Продано в CRM
Правила
- Без библиотек — SVG и div, только токены (COLOR).
- Цвет сам по себе смысла не несёт: число или подпись есть всегда.
- Пустой период — тонкая серая линия, а не столбец.
- Для экранного диктора все числа — в aria-label.
Горизонтальные полосы
Рейтинг и сравнение: кто продаёт, этапы воронки, причины потерь. Самый большой — на всю длину.
Кто продаёт
- Aziz Karimov24 · 31%
- Malika Yusupova19 · 27%
- Jasur Aliyev11 · 18%
- Dilnoza Rahimova4 · 7%
Причины потерь
- Дорого38
- Не ответил21
- Другая фирма12
- Не подошла дата7
Показатель, кольцо, прогресс
Под числом в карточке — маленькая линия тренда; доли — кольцо; выполнение плана — прогресс.
Выручка · неделя
48 600 $
+12% к прошлой неделе
Источники лидов
Telegram · 61Instagram · 37Рекомендация · 22Другие · 8
План на месяц
Продажи
72%
Оплата
48%
Документы
93%
Таблица под линейным графиком
На графике нет легенды: имя в таблице — в цвете своей линии. Нажатие на имя скрывает или показывает линию на графике.
| Менеджер | Назначено | Выполненные |
|---|---|---|
| 23 | 18 | |
| 15 | 11 | |
| 12 | 7 |
Правила
- Выбор периода — над графиком, таблица — под ним.
- Текст имени остаётся тёмным, цвет — в фоне и точке: читается на любом цвете.
- Скрытая линия — пунктирная рамка и пустая точка.
- Цвет привязан к человеку, а не к месту; с девятого — серые «Другие».