SVG-объекты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фильтры

Для добавления фильтра обратитесь к разделу Работа с расширенным фильтром.

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

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

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

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

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

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

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

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

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

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

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

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

Выбор SVG-объекта

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

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

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

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

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

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

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

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

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

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

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

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

Сохранение 

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

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

Экспорт SVG-объекта

Для экспорта SVG-объекта необходимо нажать на в правом углу. После нажатия откроется список доступных форматов для экспорта:

В выпадающем списке необходимо выбрать желаемый формат для экспорта. После выбора SVG-объект выгрузится на ваш компьютер в нужном формате.

Редактирование SVG-объекта

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

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