HTML- редактор

Для открытия HTML- редактора необходимо нажать на кнопку , расположенную в правом меню кнопок в режиме редактирования проекта:

После нажатия открывается окно HTML- редактора:

Окно редактирования

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

• Выпадающий список «Набор данных»;
• Поле «Группы»;
• Поле «Агрегат»;
• Фильтры
• Поле «Сортировка»;
• Поле «Количество записей на странице»;
• Пространство для ввода HTML- кода.

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

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

Поле «Группы»

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

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

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

Поле «Агрегат»

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

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

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

Фильтры

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример. HTML-код

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

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

<style>
  .grid {
    display: grid;
    grid-template-columns: 60% 35%;
    grid-column-gap: 10px;
    grid-row-gap: 30px;
    margin-left: 30px;
  }
  .label {
    display: block;
    margin-bottom: 5px;
    margin-top: 15px;
    color: #777;
    font-size: 16px;
    text-transform: uppercase;
  }
  .value {
    display: block;
    font-size: 15px;
    font-weight: bold;
    margin-top: 15px;
  }
</style>

{% if data.rows.length == 1 %}
<div class="grid">
  {% for column in data.columns %}
  <div>
    <span class="label">{{ column.column.name }}</span>
    <span class="value">{{ data.rows[0][column.key] }}</span>
  </div>
  {% endfor %}
</div>
{% endif %}

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

Сохранение

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

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