По умолчанию при создании проекта создается один дефолтный слой - стандартного типа. При включении beta режима у пользователя появляется возможность добавления в рамках проекта нового типа слоя - слой с боковой панелью.

Для создания слоя типа "Боковая панель" необходимо в проекте кликнуть на кнопку добавления нового слоя и в открывшемся окне выбрать "Боковая панель".

Для чего нужен такой тип слоя?

Например, в левой части HTML-виджет в котором расположены "индикаторы", при клике на конкретный "индикатор" в правой части меняется набор виджетов.

Слой проекта

После того как проект был создан он отобразится в списке проектов, необходимо перейти в него. Отобразится пустой слой проекта:


Слой проекта


Слой представляет собой рабочую область, где можно создавать различные визуализации и проводить анализ данных. В системе можно создавать неограниченное количество слоев и присваивать им наименования в соответствии с тематикой данных.

В Polymatica Dashboards существует 2 вида слоя:

  • Стандартный слой;
  • Боковая панель.

Стандартный слой создается автоматически при создании проекта. 

Боковая панель

Для создания слоя с боковой панелью необходимо нажать на значок в левом нижнем углу. После нажатия отобразится 2 варианта создания слоя, необходимо выбрать вариант «Боковая панель»:


Создание слоя «Боковая панель»


После выбора варианта слоя «Боковая панель» рабочая область проекта поменяется:


Изменение рабочей области проекта


Рабочая область слоя делится на две части:

  • Левая сторона;
  • Правая сторона. 

Данное разделение необходимо для группировки конкретных виджетов в определенной стороне. При переходе в режим редактирования, сверху отображается переключатель «Активный блок». Данный функционал предназначен для добавления виджета в в левую или правую сторону.


Если переключатель направлен в левую сторону, то виджеты будут добавляться в левую часть рабочей области слоя

Если переключатель направлен в правую сторону, то виджеты будут добавляться в правую сторону рабочей области слоя

Левая сторона

Для добавления виджетов в левую часть рабочей области необходимо установить активное положение переключателя в левую сторону. После добавления виджеты будут располагаться в левой части слоя:


Группировка виджетов в левой стороне


Виджеты будут расположены последовательно сверху вниз в левой части слоя. В левую часть рабочей области можно добавлять неограниченное количество виджетов. Левая часть рабочей области слоя скроллится при превышении высоты

Правая сторона

Для добавления виджетов в правую часть рабочей области необходимо установить активное положение переключателя в правую сторону. После добавления виджеты будут располагаться в правой части слоя:


Группировка виджетов в правой стороне


Виджеты будут группироваться в правой стороне слоя по 3 в ряд. В правую часть рабочей области можно добавлять неограниченное количество виджетов. Для быстрого поиска конкретного виджета необходимо воспользоваться поисковой строкой. Она располагается в правой части слоя сверху над виджетами.

Виджеты в правой части рабочей области предназначены для установления связи с виджетами на левой стороне. Они будут отображаться в случае установления связи с конкретным виджетом на левой стороне в режиме просмотра проекта

После того как виджеты были добавлены в правую часть рабочей области, после нажатия кнопки «Сохранить», виджеты не будут отображаться.

Для отображения виджетов на правой стороне необходимо настроить правила отображения.

Переключение виджетов в панели при клике на значение в другой работает только с html левой панели и только в случае, если в html коде указана команда onclick="triggerValue('значение')", инициализирующая передачу значения, по которому был осуществлен клик


Правила отображения

Для установления связи между двумя сторонами необходимо перейти в режим редактирования и воспользоваться боковой панелью справа на рабочей области, перейти в блок «Правила отображения»:


Блок «Правила отображения»


После перехода в блок «Правила отображения» необходимо нажать на кнопку . Далее следует выбрать виджет, который располагается на левой стороне рабочей области, кликнув по левой части дашборда:


1. Установление связи


Далее необходимо выбрать конкретные виджеты для которых мы хотим создать правило отображения. Для этого следует отметить виджеты на правой части рабочей области:


2. Установление связи


Виджеты будут нумероваться в соответсвии с последовательностью выбора. После того как мы установили связи между сторонами, необходимо завершить настройку правил отображения выбранных виджетов на правой стороне, нажав на кнопку . После нажатия откроется модальное окно «Параметры правила»:


Параметры правила


Завершающим этапом является настройка параметров отображения виджетов. Данное модальное окно состоит из следующих настроек:

Условие


Условие


Необходимо выбрать условие отображение - «Равно» или «Не равно».

Значение

В текстовом поле необходимо указать значение виджета, который находится на левой стороне рабочей области. В данном примере рассмотрим виджет с значением - «Баланс - Активы». Для того чтоб установить связь с выбранными виджетами в правой части слоя с виджетом «Баланс - Активы» располагающимся в левой части слоя, необходимо указать в текстовое поле «Значение» наименование виджета «Баланс - Активы»:


Значение


После того как мы указали нужный виджет в текстовое поле «Значение» нажимаем кнопку «Применить», связь с виджетом будет установлена. Далее нужно сохранить внесенные изменения, для этого необходимо нажать кнопку «Сохранить». Изменения сохранены, отображается рабочая область проекта. При нажатии на виджет «Баланс - Активы», отобразятся выбранные виджеты из правой части слоя:


Нажатие на виджет «Баланс - Активы»

 
Связь установлена с виджетами левой и правой стороны установлена. Таким образом можно устанавливать связь виджетов, чтоб при нажатии на любой виджет из левой части рабочей области  отображались конкретные виджеты из правой части слоя.

Шаблоны

Для настройки визуального отображения виджетов в правой части рабочей области, необходимо выбрать шаблон отображения. При выборе конкретного шаблона, виджеты будут по разному располагаться на рабочей области, в соответствии с представленными иконками.  Для примера рассмотрим шаблон с иконкой -, для выбора данного шаблона необходимо нажать на иконку:


Шаблон


После того как мы выбрали данный шаблон, виджеты на правой стороне рабочей области будут располагаться в соотношение как представлено на иконке шаблона:


Пример расположения виджетов на правой стороне рабочей области


В соответсвии с выбранным шаблоном можно указывать:

  • Фиксированный размер виджетов;
  • Включение областей;
  • Количество колонок и строк;
  • Высоту колонок и строк;
  • Ширину колонок и строк.

Данный функционал расположен внизу модального окна, он будет меняться в соответсвии с выбранным шаблоном:


Настройка колонок и строк

Кастомный шаблон

Для выбора кастомного шаблона необходимо нажать на иконку . Можно задать собственные настройки шаблона с помощью CSS кода. Для этого необходимо выбрать иконку кастомного шаблона и снизу в полях «Стили блока» и «Стили элемента», указать CSS код:


Кастомный шаблон
Пример кода
grid-template-areas: 
"area-1 area-2"
"area-3 area-4";
grid-template-columns: repeat(2, calc(50% - var(--sl-spacing-small)));
grid-template-rows: 50% 50%;

Сохранение

После внесения всех настроек в создание правила отображения необходимо нажать кнопку «Применить» и далее выполнить сохранение на слое проекта. Созданной правило отобразится в блоке «Правило отображения»:


Созданное правило отображения


Все созданные правила будут отображаться в данном блоке. Для редактирования определенного правила необходимо нажать на иконку расположенную справа от наименования самого правила. После нажатия откроется модальное окно «Параметры правила». Для удаления правила необходимо нажать на иконку , правило пропадет из списка.