Общие сведения
Компонент-html позволяет отображать на слое визуализацию данных из датасета, сформированную с использованием языков HTML и JS.
Чтобы добавить на слой проект html-компонент, кликните в панели инструментов кнопку "".
По клику кнопки открывается страница редактора html-компонента.
Структура страницы
Слева сверху страницы расположена область редактора кода. Редактор служит для обращения к данным, получаемым из датасета, применения форматирования колонок из настройки датасета, и описания оформления с использованием языков HTML и JS.
Под областью редактора кода находится область предпросмотра. В области отображается возвращаемый редактором результат. Чтобы показать или скрыть её, кликайте переключатель "Превью" справа от области. Когда область предпросмотра скрыта, область редактора кода занимает всю левую часть страницы.
В правой части страницы находится область настройки данных. Область служит для получения данных из датасета. Полученные данные используются в редакторе кода. Получать данные можно в агрегированном виде или плоской таблицей.
Область настройки данных
Выпадающий список «Набор данных»
Для выбора необходимого датасета нужно ввести название в поисковое поле и выбрать. После выбора значения в выпадающем списке отображаются колонки выбранного датасета:
Поле «Группы»
Количество добавляемых колонок в поле - без ограничений.
Для добавления колонки в поле следует «перетащить» необходимую колонку в поле. Данные по колонкам добавленные в поле будут группироваться.
Для удаления колонки из поля необходимо нажать кнопку .
Поле «Агрегат»
Количество добавляемых колонок в поле - без ограничений.
Для добавления колонки в поле следует «перетащить» необходимую колонку в поле.
Для удаления колонки из поля необходимо нажать кнопку .
Фильтры
Для добавления фильтра необходимо нажать на текстовую кнопку , после нажатия появится кнопка . Далее следует нажать на данную кнопку, откроется модальное окно с выбором колонки для установки фильтра. Выбор колонки является обязательным параметром для установления фильтра. Модальное окно с настройками фильтра выглядит следующим образом:
Модальное окно «Фильтры» состоит из следующих полей:
- поле «Колонка». Поле обязательно для заполнения;
- поле «Тип Фильтра». Поле обязательно для заполнения;
- поле «Условие». Поле обязательно для заполнения;
- поле «Значение». Поле необязательно для заполнения.
Для сохранения настроек фильтра необходимо нажать кнопку «Применить».
Для сброса настроек фильтра необходимо нажать на кнопку «Отменить».
Поле «Сортировка»
Для добавления сортировки следует «перенести» необходимую колонку в поле «Сортировка».
Доступна множественная сортировка данных. Множественная сортировка учитывает порядок вынесенных колонок. Верхняя вынесенная колонка является первым уровнем сортировки.
Для изменения порядка сортировки необходимо нажать кнопку.
Для удаления колонки из поля необходимо нажать кнопку .
Параметр необязателен для создания виджета.
Поле «Количество записей на странице»
Параметр ограничивает количество для отрисовки данных.
Получение данных
Получать данные можно в агрегированном виде или плоской таблицей.
Таблица
Чтобы получать данные в виде одномерной таблицы, как они хранятся в датасете, переключите селектор в области настройки данных на радиокнопку "Таблица".
Далее найдите или выберите в поле "Набор данных" датасет, из которого требуется получать данные. Сразу после выбора датасета, справа внизу страницы, в области "Переменная контекста", отображаются полученные данные в формате JSON.
Полное содержание полученных данных из примера представлено ниже.
где data – данные датасета;
rows – строки датасета, – обратите внимание, что в данных показана только первая строка датасета, остальные строки подразумеваются под многоточием, см. строку 15, а количество возвращенных строк можно видеть в ключе "total", в строке 531;
1–8 – нумерация колонок датасета в JSON, – колонки нумеруются в том порядке, как они вынесены из датасета в поле "Столбцы", или в порядке их расположения в датасете;
columns – свойства и настройка форматирования колонки, заданная в настройках датасета;
key – номер колонки в JSON, в rows;
name, field_type, base_type – свойства колонки;
formatter – настройка форматирования колонки;
prefix, suffix, digit_capacity, digit_capacity_enabled, digits_separate_type, separate_digits, text_view_type, bool_format, date_format, null_format – параметры настройки форматирования.
Настройка получаемых для таблицы данных
Настройка получаемых данных предлагает следующие параметры.
- Столбцы – ограничение получаемых данных указанными колонками. Когда ни одна колонка датасета не вынесена в это поле, по умолчанию возвращаются данные по всем колонкам.
Обратите внимание, что в примере, в columns показано форматирование восьми колонок, так как именно такое количество колонок получено. Если получаемые данные ограничены параметром "Столбцы", возвращается только форматирование для вынесенных колонок. - Фильтры – ограничение получаемых данных посредством фильтра.
- Количество записей на странице – ограничение получаемых строк датасета. Возвращается верхнее указанное количество строк с учетом сортировки. В примере, в JSON, количество записей можно видеть в строке 531.
Агрегат
Чтобы получать агрегированные данные, переключите селектор в области настройки данных на радиокнопку "Агрегат".
Далее найдите или выберите в поле "Набор данных" датасет, из которого требуется получать данные.
Выбрав датасет, вынесите в поле "Группы" колонки датасета, по значениям которых требуется группировать агрегированные результаты, а в поле "Агрегат" – колонки, по которым требуется получать агрегированные результаты. Сразу после выноса колонок, справа внизу страницы, в области "Переменная контекста", отображаются полученные данные в формате JSON.
Полное содержание полученных данных из примера представлено ниже.
где data – данные датасета;
rows – строки датасета, – обратите внимание, что в данных показана только первая строка датасета, остальные строки подразумеваются под многоточием, см. строку 10, а количество возвращенных строк можно видеть в ключе "total", в строке 270;
1–4 – нумерация колонок датасета в JSON, – колонки нумеруются в том порядке, как они вынесены из датасета в поля "Группы" и "Агрегат";
columns – свойства и настройка форматирования колонки, заданная в настройках датасета;
key – номер колонки в JSON, в rows;
name, field_type, base_type – свойства колонки;
formatter – настройка форматирования колонки;
prefix, suffix, digit_capacity, digit_capacity_enabled, digits_separate_type, separate_digits, text_view_type, bool_format, date_format, null_format – параметры настройки форматирования.
Настройка получаемых для агрегата данных
Настройка получаемых данных предлагает следующие параметры.
- Группы – поле принимает колонки датасета, по значениям которых требуется группировать агрегированные результаты.
Обратите внимание, что в примере, в columns, под соответствующими номерами показано форматирование для вынесенных колонок. - Агрегат – поле принимает колонки датасета, по значениям которых требуется получить агрегированные результаты.
Обратите внимание, что в примере, в columns, под соответствующими номерами показано форматирование для вынесенных колонок. - Фильтры – ограничение получаемых данных посредством фильтра.
- Количество записей на странице – ограничение получаемых строк датасета. Возвращается верхнее указанное количество строк с учетом сортировки. В примере, в JSON, количество записей можно видеть в строке 270.
Использование данных в редакторе
Для обращения к полученным данных используйте скобочную нотацию.
Использование значений
Чтобы получить значение из первой строки датасета в четвертой колонке JSON используйте код:
{{data["rows"][0]["4"]}}
Для примера с таблицей код вернет значение "г Улан-Удэ", а для примера с агрегатом – значение "88478".
Чтобы получить количество возвращенных строк датасета, используйте код:
{{data["total"]}}
Для примера с таблицей код вернет значение "100", а для примера с агрегатом – значение "87".
Использование форматирования
Чтобы применить к колонке форматирование, заданное для колонки в настройках датасета, используйте код:
{{data["rows"][0]["1"] | columnFormat('1')}}
где '1' – номер колонки, от которой требуется взять параметры форматирования. Обратите внимание, что настройку форматирования можно применять только к колонке с соответствующим типом данных. Так, следующий код не применит форматирование, так как четвертая колонка JSON содержит данные с типом "число":
{{data["rows"][0]["4"] | columnFormat('1')}}
Пример. HTML-код
Для добавления компонента с помощью HTML кода, необходимо перейти в режим редактирования и на боковой панели нажать на иконку «HTML редактор»:
После нажатия откроется HTML редактор. Перед созданием компонента, необходимо выбрать датасет, на основании которого будет формироваться визуализация. Для примера рассмотрим датасет «Стройматериалы», выбираем его в поле «Набор данных». Далее выносим колонки в «Группы». Для создания компонента, нужно воспользоваться HTML редактором. Для примера, введем следующий код:
После ввода кода, снизу отображается превью. В правом нижнем углу отображаются возвращаемые данные. Для сохранения введенного кода, необходимо нажать на кнопку «Сохранить». Созданный компонент отобразится в проекте:
Сохранение
Для выполнения сохранения всех настроек следует нажать кнопку . После нажатия на кнопку, все настройки которые были сделаны в HTML-редакторе, отобразятся в проекте.
Для закрытия HTML-редактора необходимо нажать на кнопку . После нажатия на кнопку окно создания закроется и будет осуществлен переход на страницу с проектом в режим редактирования.