SVG объекты

Для добавления SVG объекта необходимо нажать на кнопку «SVG объекты » в правом боковом блоке в режиме редактирования проекта:

После нажатия отображается модальное окно «Настройка набора данных»:

Окно «Настройка набора данных»

Окно настройки набора данных состоит из следующих полей:

• Выпадающий список «Набор данных»;
  Выбор датасета, на основании которого будет построен svg объект.
  
  
• Поле «Разметка»;
  Данной колонкой сопоставляются размеченные части svg для соответствия куда выносить показатель и подсказки. Доступен вынос не более одной колонки. Поле обязательно для создания.
• Поле «Показатель»;
  Данная колонка служит для вывода агрегата при наведении на часть svg, по которой произошло соответствие значений. Доступен вынос неограниченного числа колонок. Поле обязательно для создания.
  
  
• Поле «Подсказка»;
  Данная колонка служит для вывода дополнительных не агрегированных значений на часть svg. Доступен вынос неограниченного числа колонок. Поле необязательно для создания.
  
  
• Фильтры. Добавление фильтра отображается после выбора набора данных;
• Поле «Сортировка»;
• Поле «Количество записей на странице».

Выпадающий список «Набор данных»

Выбор датасета, на основании которого будет построен svg объекта. После выбора значения в выпадающем списке отображаются колонки выбранного датасета:

Поле «Разметка»

В поле «Разметка» доступен вынос не более одной колонки.

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

Для удаления колонки из поля необходимо нажать кнопку .

Поле «Показатель»

Количество добавляемых колонок в поле - без ограничений.

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

Для удаления колонки из поля необходимо нажать кнопку .

Поле «Подсказка»

Количество добавляемых колонок в поле - без ограничений.

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

Фильтры

Для добавления фильтра необходимо нажать на текстовую кнопку , после нажатия появится кнопка . Далее следует нажать на данную кнопку, откроется модальное окно с выбором колонки для установки фильтра. Выбор колонки является обязательным параметром для установления фильтра. Модальное окно с настройками фильтра выглядит следующим образом:

Модальное окно «Фильтры» состоит из следующих полей:

• поле «Колонка». Поле обязательно для заполнения;
• поле «Тип Фильтра». Поле обязательно для заполнения;
• поле «Условие». Поле обязательно для заполнения;
• поле «Значение». Поле необязательно для заполнения.

Для сохранения настроек фильтра необходимо нажать кнопку «Применить».

Для сброса настроек фильтра необходимо нажать на кнопку «Отменить».

Поле «Сортировка»

Для добавления сортировки следует «перенести» необходимую колонку в поле «Сортировка».

Доступна множественная сортировка данных. Множественная сортировка учитывает порядок вынесенных колонок. Верхняя вынесенная колонка является первым уровнем сортировки.

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

Для удаления колонки из поля необходимо нажать кнопку .

Параметр необязателен для создания виджета.

Поле «Количество записей на странице»

Параметр ограничивает количество для отрисовки данных.

Настройка SVG объекта

Данный раздел делится на следующие блоки:

• Превью;
• Данные;
• Условия форматирования;
• Визуальные параметры.

После нажатия на кнопку  открывается окно где можно настроить визуальные параметры отображения svg объекта:

Выбор SVG компонента

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

Условия форматирования

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

Модальное окно с настройкой правила включает в себя следующие параметры:

• Цветовой градиент;
  Для настройки цветового градиента, необходимо нажать на переключатель . После нажатия отображается поле по типу селект, где необходимо выбрать колонку с числовыми показателями. Снизу от поля отображается RGB палитра, где можно настроить цвет значений и фона. Для настройки интервала окраски необходимо вручную установить начальное и конечное значение. В левом нижнем углу модального окна располагается переключатель на трехцветный градиент. После нажатия отображается еще одна палитра и еще одно поле для более детальной настройки цветовой дифференциации.
  
  
• Поле «Колонка»;
  Поле «Колонка» предназначено для выбора колонки на которую устанавливается условие. Для выбора нужной колонки необходимо нажать на кнопкукоторая располагается в правой части поля. После нажатия открывается список имеющихся колонок. Необходимо выбрать нужную колонку. Данное поле обязательно для заполнения.
  
  
• Поле «Условие»;
  Поле «Условие» предназначено для установления условия. Для выбора условия необходимо нажать на кнопкукоторая располагается в правой части поля. После нажатия открывается список условий. Необходимо выбрать нужное условие, которое будет применятся по выбранной колонке на предыдущем шаге. Данное поле обязательно для заполнения.
  
  
• Поле «Значение»;
  Поле «Значение» предназначено для указания значения. Данное поле обязательно для заполнения.
  
  
• Кнопка «Добавть колонку»;
  После нажатия на кнопку, добавится блок с выбором колонки и указания для этой колонки условия. Данный блок можно добавлять неограниченное количество раз.
  
  
• Настройка цвета значений;
  Для настройки окраса значений, необходимо нажать на  . После нажатия отображается RGB палитра, где можно указать необходимый цвет для отображения значений.
  Для настройки окраса фона, необходимо нажать на . После нажатия отображается RGB палитра, где можно указать необходимый цвет для окраса фона.
  
  
• Настройка цвета фона.
  Для настройки окраса фона, необходимо нажать на . После нажатия отображается RGB палитра, где можно указать необходимый цвет для окраса фона.
  
  

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

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

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

Визуальные параметры

Данный блок предусматривает настройку визуального отображения svg компонента. Для настройки определенного параметра необходимо поставить флажок слева от наименования параметра. Блок выглядит следующим образом:

В настройку визуальных параметров входят следующие параметры:

• Чекбокс «Отображение легенды»;
  По умолчанию чекбокс выключен. При установлении галочки, легенда будет отображаться. 
• Чекбокс «Сворачивать легенду»;
  По умолчанию чекбокс включен. 
  
  
• Выпадающий список «Положение легенды»:
  Настройка расположения легенды относительно svg компонента:
  • Снизу;
  • Сверху;
  • Слева;
  • Справа.
    
    
• Чекбокс «Отображать всплывающие подсказки».
  По умолчанию чекбокс включен. При наведении курсора на элемент svg компонента, будет отображаться всплывающая подсказка. В всплывающую подсказку входит:
  • Название точки разметки;
  • Значения колонок;
  • Значения показателей.

Сохранение 

Для выполнения сохранения всех настроек следует нажать кнопку . После нажатия на кнопку svg компонент отобразится в проекте.

Для закрытия необходимо нажать на кнопку  . После нажатия на кнопку окно добавления компонента закроется и будет осуществлен переход на страницу с проектом в режим редактирования.

Редактирование SVG компонента

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

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