Настройки визуализации
Компоненты
Компоненты - это no-code инструментарий, который позволяет создавать различные элементы визуализации данных без необходимости программировать. Достаточно выбирать нужные элементы из списка предварительно созданных шаблонов (подробнее о палитре шаблонов можно посмотреть здесь) и адаптировать их под свои потребности с помощью визуального интерфейса.
Для удобства отображения все отдельные элементы визуализации (например, текст, таблица, различные виды графиков) объединяются в группы, внутри которых можно настраивать взаимное расположение элементов. Группы могут быть вложенными. По умолчанию все добавляемые элементы помещаются в корневую (root) группу.
Добавление компонентов
Для добавления компонента на график необходимо:
- Перейти к настройкам визуализации из редактора графика графика.
- Нажать на кнопку
.
Изображение
- Выбрать интересующий компонент в открывшемся окне.
Изображение
Если стоит флаг "Демонстрационные данные", то вместе с компонентом визуализации в график будет добавлена новая таблица с данными, которые будут отображаться на графике непосредственно после добавления компонента. Это позволит быстро оценить внешний вид и функциональность компонента без необходимости настройки данных. Позже, при необходимости, можно изменить источник данных для компонента в его настройках, подключив любой из уже существующих запросов.
| Основные виды компонентов | Описание |
|---|---|
| График | Визуализация данных в виде графиков различного типа (столбчатая и круговая диаграммы, линейный график) |
| Таблица | Визуализация данных в виде таблицы |
| Текст | Добавление текстовых блоков на график. Есть возможность отображать не только фиксированные значения, но и результаты запросов |
| Фильтр | Добавление фильтра на график для настройки отображения данных на дашборде |
| Кнопка | Добавление на график кнопки для выполнения определённого действия |
| Группа (пустая) | Компонент используется для объединения нескольких других компонентов вместе. Есть возможность настроить расположение элементов внутри группы |
| Группа элементов | Предварительно созданная группа с набором компонентов, которые часто используются вместе |
Настройки внешнего вида группы
Видимость
Эта настройка позволяет контролировать, будет ли группа показываться на графике. Выберите в выпадающем списке "Показать", чтобы группа отображалась, или "Скрыть", чтобы она была скрыта.
Обратите внимание, что для корректной работы настроек отображения компонентов это поле должно быть заполнено.
Направление
Настройка позволяет управлять тем, как элементы выстраиваются вдоль оси группы.
| Опция | Описание |
|---|---|
 | В строку. Элементы располагаются в строку слева направо. Ось группы направлена горизонтально. Значение по умолчанию. CSS: flex-direction: row; |
 | В строку наоборот. Элементы располагаются в строку справа налево. Ось группы направлена горизонтально, но направление обратное. CSS: flex-direction: row-reverse; |
 | В столбец. Элементы располагаются в столбец сверху вниз. Ось группы направлена вертикально. CSS: flex-direction: column; |
 | В столбец наоборот. Элементы располагаются в столбец снизу вверх. Ось гибкого контейнера направлена вертикально, но направление обратное. CSS: flex-direction: column-reverse; |
Выравнивание по основной оси
Настройка контролирует распределение пространства между элементами группы вдоль главной оси.
| Опция | Описание |
|---|---|
 | В начале. Элементы выравниваются в начале (левом краю для направления "В строку", верхнем краю для направления "В столбец") главной оси группы. Значение по умолчанию. CSS: justify-content: start; |
 | По центру. Элементы выравниваются по центру главной оси группы. CSS: justify-content: center; |
 | В конце. Элементы выравниваются в конце (правом краю для направления "В строку", нижнем краю для направления "В столбец") главной оси группы. CSS: justify-content: end; |
 | По ширине. Элементы распределяются равномерно по главной оси группы, с равным пространством между ними. Первый элемент прижимается к началу, а последний - к концу группы. CSS: justify-content: space-between; |
 | По размеру. Элементы распределяются равномерно по главной оси группы, с равным пространством вокруг каждого элемента. Это означает, что между каждым элементом есть одинаковое пространство, а также половина этого пространства на краях группы. CSS: justify-content: space-around; |
Выравнивание по вторичной оси
Настройка контролирует выравнивание элементов в поперечном направлении, перпендикулярном главной оси.
| Опция | Описание |
|---|---|
| В начале. Элементы выравниваются в начале вторичной оси группы. Значение по умолчанию. CSS: align-items: flex-start; |
| По центру. Элементы выравниваются по центру вторичной оси группы. CSS: align-items: center; |
| В конце. Элементы выравниваются в конце вторичной оси группы. CSS: align-items: flex-end; |
Ширина
Настройка позволяет устанавливать фиксированную ширину элемента, а также использовать относительные единицы измерения, такие как проценты, чтобы элемент мог адаптироваться к изменениям размеров окна браузера. Обратите внимание, что значение нужно вводить в поле вместе с единицами измерения.
| Единицы измерения | Описание |
|---|---|
px | Фиксированная ширина элемента в пикселях. Значение может быть дробным |
em | Определяет ширину элемента относительно размера шрифта его родительского элемента. Например, 2em; означает, что ширина элемента будет в два раза больше размера шрифта родительского элемента |
rem | Аналогично em, но определяет ширину относительно размера шрифта корневого элемента документа (html) |
% | Установка ширины элемента в процентах. Ширина будет рассчитана относительно ширины его родительского контейнера. Например, если установить 50%, элемент будет занимать половину ширины родительского контейнера |
vw | Определяет ширину элемента в процентах от ширины видимой области окна браузера |
vh | Аналогично vw, но определяет ширину элемента в процентах от высоты видимой области окна браузера |
| Предустановленные значения | Описание |
|---|---|
auto | Ширина элемента будет автоматически рассчитана браузером в зависимости от его содержимого и контекста. Значение по умолчанию |
max-content | Устанавливает ширину элемента такой, чтобы он вмещал максимальное содержимое, но не больше |
min-content | Устанавливает ширину элемента такой, чтобы он вмещал минимальное содержимое, но не меньше |
fit-content | Устанавливает ширину элемента такой, чтобы он вмещал свое содержимое, но не шире своего контейнера |
Высота
Настройка позволяет устанавливать фиксированную высоту элемента, а также использовать относительные единицы измерения, такие как проценты, чтобы элемент мог адаптироваться к изменениям размеров окна браузера. Обратите внимание, что значение нужно вводить в поле вместе с единицами измерения.
Единицы измерения и возможные предустановленные значения совпадают с указанными для настройки ширины.
Размер шрифта
Настройка позволяет устанавливать размер текста для элемента в различных единицах измерения.
| Единицы измерения | Описание |
|---|---|
px | Фиксированный размер шрифта в пикселях |
em | Относительная единица измерения, которая зависит от размера шрифта родительского элемента. Например, если размер шрифта родительского элемента равен 16 пикселей, то 1em будет равен 16 пикселям. |
rem | Это относительная единица измерения, которая аналогична em, но зависит от размера шрифта корневого элемента (обычно элемента HTML) |
% | Размер шрифта в процентах относительно размера шрифта родительского элемента |
Фиксированные предустановленные значения размера шрифта: xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large, где medium - размер шрифта по умолчанию, который используется браузером, а остальные значения рассчитываются относительно значения medium.
Относительные предустановленные значения: smaller, larger. Шрифт будет увеличен или уменьшен по отношению к размеру шрифта родительского элемента.
Дополнительные настройки CSS
Если вы знакомы с CSS, в поле ввода можно дописать любые необходимы параметры, которые будут применяться к текущему элементу.
Редактор JavaScript
Чтобы перейти в режим редактирования JavaScript нужно:
-
Перейти в режим редактирования графика.
-
На странице редактирования графика перейти в раздел Настройка визуализации.
-
Перевести график в простой режим, нажав на кнопку
на странице настроек визуализации и подтвердить действие во всплывающем окне.Изображение
-
Перейти на вкладку JS.
Изображение
Эти действия нужно выполнить один раз после создания графика. Обратите внимание, что после отключения визуального редактора для графика, вернуться к нему будет уже нельзя.
Подробнее о возможностях редактора JavaScript можно прочитать в руководстве разработчика.