Оформление
Конструктор дашборда
Конструктор открывается кнопкой Редактировать на странице дашборда. Экран разделён на три части: слева — объекты и дерево страницы, в центре — холст, справа — свойства того, что выделено.
Как собрать страницу
- Нажмите нужный объект в панели Объекты — он встанет на открытую вкладку и появится в дереве. Кнопка Виджет сначала открывает окно со списком сохранённых виджетов.
- Выделите объект на холсте или в дереве и задайте его свойства справа.
- Перетащите объекты в дереве, чтобы изменить порядок или вложенность.
- Нажмите Сохранить.
Пока правки не сохранены, уход со страницы платформа переспрашивает. Кнопка История разворачивает ленту сделанных шагов: любой из них можно отменить, вернуть или перейти к нужному состоянию целиком.
Объекты
Из панели Объекты на страницу добавляются виджеты, фильтры, группы, текст, картинки, кнопки, разделители и встраивания внешних страниц. Что умеет каждый — в разделе Объекты дашборда.
Объекты перетаскиваются мышью: и с панели на холст, и по холсту между группами. Пока вы тянете объект, у указателя видна подсказка — в какой контейнер он встанет и попадёт ли внутрь него или между его соседями. На вложенных группах по одной подсветке это неочевидно, поэтому подсказка называет приёмник до того, как вы отпустите кнопку.
Раскладка
Раскладку задаёт объект-родитель — вкладка или группа. Она определяет, как встают вложенные объекты.
| Раскладка | Как стоят объекты |
|---|---|
| Свободная | По координатам, заданным перетаскиванием |
| Вертикальная | Полосой вниз, друг под другом |
| Горизонтальная | Полосой вправо |
| Сетка | По клеткам колонок и строк |
Рецепт первой страницы
Для обычного отчёта из пяти плиток берите Сетку: она сама выравнивает элементы, и страница не разъезжается при изменении ширины окна. Сверху — два-три показателя (KPI) в один ряд, под ними — основной график на всю ширину, ниже — таблица с деталями. Фильтры кладите над первым рядом: так читатель сначала видит, что отобрано, и только потом цифры. Свободную раскладку берите, когда нужен нестандартный макет и вы готовы выравнивать плитки руками.
Настройка Содержимое за краями решает, что делать с тем, что не поместилось в объект: Видно — остаётся на виду поверх соседей, Обрезать — срезается по краям, Прокрутка — уходит под полосу прокрутки внутри объекта.
У каждой раскладки настраиваются внутренние отступы, зазор между объектами, выравнивание и распределение. Переключатель Переносить при нехватке места уводит то, что не влезло, в новую строку или колонку. Показывать сетку рисует под содержимым разметку — она видна только при правке; Шаг привязки задаёт шаг, к которому прилипают перенос объекта и изменение его размера.
Размер объекта
Ширина и высота задаются раздельно, каждая — одним из трёх способов:
| Способ | Когда выбирать |
|---|---|
| Фикс. | Нужен точный размер в пикселях, процентах или клетках сетки |
| Заполнить | Объект занимает всё свободное место родителя |
| авто | Размер по содержимому |
Переключатель Свободное размещение выводит объект из потока родителя: он встаёт по координатам от выбранного края и не сдвигает соседей.
В разделе Оформление задаются фон, рамка, скругление, тень и отступы объекта. Цвета задаются парой — для светлой и тёмной темы.
Новый объект уже отбит от холста тонкой рамкой по цвету границ темы, тени у него нет. Исключения — вкладка, картинка, кнопка и разделитель: рамка обвела бы у них пустое место или второй линией повторила бы то, что и так видно, поэтому по умолчанию её нет. Тень добавляется вручную тем объектам, которые нужно приподнять над холстом.
Холст и адаптив
Свойства холста открываются, когда на дашборде ничего не выделено.
| Настройка | Что задаёт |
|---|---|
| Ширина | Резиновая — холст тянется по окну; фиксированная — точное значение |
| Макс. ширина | Предел, шире которого резиновый холст не растягивается |
| Высота | Авто по содержимому или фиксированная |
| Фон | Цвет подложки страницы |
Над панелью свойств стоит переключатель экранов: Десктоп (от 1600 px), Ноутбук (1025–1599 px), Планшет (641–1024 px), Телефон (до 640 px). Десктоп — база: правки на нём действуют на всех экранах. На остальных экранах правка становится переопределением и работает только на нём, а незаданные свойства наследуются от базы. Переопределённые значения помечены, а кнопка Сбросить переопределения в шапке панели возвращает объекту наследование от базы — она появляется только там, где переопределения действительно заданы.
Проверяйте узкие экраны отдельно
Горизонтальная раскладка, которая на широком мониторе выглядит ровно, в узком окне достаётся тому же числу объектов полосой в несколько раз уже. Переключите экран и посмотрите, что вышло: если тесно, задайте на этом экране вертикальную раскладку — база при этом не изменится. Переопределения применяются и в режиме просмотра: когда область дашборда сужается до планшетной ширины объекты встают так, как задано на этом экране, а скрытые на нём не показываются вовсе.
Режим «Телефон» на практике не включается
Экран, по которому платформа выбирает набор переопределений, — это область самого дашборда, а не окно браузера. Интерфейс платформы не сжимается уже 1024 px, поэтому область дашборда не опускается до телефонной ширины даже на узком экране: вместо этого появляется горизонтальная прокрутка. Настройки, заданные на вкладке Телефон, сохраняются, но применяются только там, где область дашборда действительно окажется уже 640 px.
Вкладки
Вкладки добавляются кнопкой + на полосе над холстом. В свойствах холста раздел Вкладки задаёт: показывать ли полосу вкладок в режиме просмотра, какая вкладка открывается первой, с какой стороны стоит полоса и каким из трёх видов нарисована — Линия, Пилюли или Сегменты.
Стартовую вкладку стоит выбрать осознанно: именно её увидит тот, кому вы дали ссылку на дашборд — и внутренний читатель, и зритель публичной ссылки.
Что дальше
- Объекты дашборда — виджеты, фильтры, кнопки и остальное.
- Фильтры и связи — как одно значение перестраивает все виджеты.
- Дашборды — список, доступ и вкладки в режиме просмотра.
- Выгрузка в файл — готовый дашборд в PDF или PNG.