Общие сведения
HTML-компонент позволяет отображать на слое уникальную визуализацию данных из датасета, сформированную с использованием языков HTML и JavaScript.
Чтобы добавить на слой проекта HTML-компонент, нажмите на плавающей панели редактирования проекта на кнопку 
.
|
По нажатию кнопки открывается страница редактора HTML-компонента.
|
Структура редактора
В левой части страницы расположена область редактора кода. Редактор служит для обращения к данным, получаемым из датасета, применения форматирования колонок из настройки датасета, и описания оформления с использованием языков HTML и JavaScript.
Под областью редактора кода находится область предпросмотра. В области отображается возвращаемый редактором результат. Чтобы показать или скрыть его, используйте переключатель "Превью" справа от области. Когда область предпросмотра скрыта, область редактора кода занимает всю левую часть страницы.
В правой части страницы находится область настройки данных. Область служит для получения данных из датасета. Полученные данные используются в редакторе кода. Получать данные можно в агрегированном виде или таблицей.
Получение данных
Получать данные можно в агрегированном виде или таблицей.
Таблица
Чтобы получать данные в виде одномерной таблицы, как они хранятся в датасете, переключите селектор в области настройки данных на радиокнопку "Таблица".
Далее найдите или выберите в поле "Датасет" датасет, из которого требуется получать данные. Вынесите колонку датасета в поле "Столбцы". Сразу после вынесения колонки справа внизу страницы, в области "Переменная контекста", отобразится пример получаемых данных в формате JSON.
|
Полное содержание полученных данных из примера представлено ниже.
{
"data": {
"rows": [
{
"1": "Краснодарский край"
},
"..."
],
"columns": [
{
"key": "1",
"column": {
"name": "Лидеры сельхозпроизводства",
"field_type": "string",
"base_type": 0,
"formatter": {
"prefix": "",
"suffix": "",
"digit_capacity": 2,
"digit_capacity_enabled": true,
"digits_separate_type": 0,
"separate_digits": false,
"text_view_type": 0,
"bool_true_format": "true",
"bool_false_format": "false",
"date_format": {
"format_type": "date_time",
"settings": [
{
"type": "year",
"value": "xl",
"suffix": "-"
},
{
"type": "month",
"value": "m",
"suffix": "-"
},
{
"type": "day",
"value": "m",
"suffix": " "
},
{
"type": "hour",
"value": "m",
"suffix": ":"
},
{
"type": "minute",
"value": "m",
"suffix": ":"
},
{
"type": "second",
"value": "m",
"suffix": ""
}
]
},
"null_format": ""
}
}
}
],
"total": 10
}
} |
где data - данные датасета;
rows - нумерованные строки датасета, - обратите внимание, что отображается только первая строка, остальные строки подразумеваются под многоточием;
columns - свойства и настройка форматирования колонки, заданная в настройках датасета;
key - номер колонки в JSON;
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 - параметры настройки форматирования;
total - количество отобранных записей из колонки датасета.
Агрегированные данные
Чтобы получать агрегированные данные, переключите селектор в области настройки данных на радиокнопку "Агрегированные данные".
Далее найдите или выберите в поле "Датасет" датасет, из которого требуется получать данные. Выбрав датасет, вынесите в поле "Группы" колонки датасета, по значениям которых требуется группировать агрегированные результаты, а в поле "Агрегат" - колонки, по которым требуется получать агрегированные результаты. Сразу после выноса колонок справа внизу страницы, в области "Переменная контекста", отобразятся полученные данные в формате JSON.
|
Полное содержание полученных данных из примера представлено ниже.
{
"data": {
"rows": [
{
"1": "Орловская область",
"2": "Сахарная свёкла",
"3": 79800
},
"..."
],
"columns": [
{
"key": "1",
"column": {
"name": "Лидеры сельхозпроизводства",
"field_type": "string",
"base_type": 0,
"formatter": {
"prefix": "",
"suffix": "",
"digit_capacity": 2,
"digit_capacity_enabled": true,
"digits_separate_type": 0,
"separate_digits": false,
"text_view_type": 0,
"bool_true_format": "true",
"bool_false_format": "false",
"date_format": {
"format_type": "date_time",
"settings": [
{
"type": "year",
"value": "xl",
"suffix": "-"
},
{
"type": "month",
"value": "m",
"suffix": "-"
},
{
"type": "day",
"value": "m",
"suffix": " "
},
{
"type": "hour",
"value": "m",
"suffix": ":"
},
{
"type": "minute",
"value": "m",
"suffix": ":"
},
{
"type": "second",
"value": "m",
"suffix": ""
}
]
},
"null_format": ""
}
}
},
{
"key": "2",
"column": {
"name": "Крупнейший тип продукции",
"field_type": "string",
"base_type": 0,
"formatter": {
"prefix": "",
"suffix": "",
"digit_capacity": 2,
"digit_capacity_enabled": true,
"digits_separate_type": 0,
"separate_digits": false,
"text_view_type": 0,
"bool_true_format": "true",
"bool_false_format": "false",
"date_format": {
"format_type": "date_time",
"settings": [
{
"type": "year",
"value": "xl",
"suffix": "-"
},
{
"type": "month",
"value": "m",
"suffix": "-"
},
{
"type": "day",
"value": "m",
"suffix": " "
},
{
"type": "hour",
"value": "m",
"suffix": ":"
},
{
"type": "minute",
"value": "m",
"suffix": ":"
},
{
"type": "second",
"value": "m",
"suffix": ""
}
]
},
"null_format": ""
}
}
},
{
"key": "3",
"column": {
"name": "Объем производства, т",
"field_type": "int64",
"base_type": 1,
"formatter": {
"prefix": "",
"suffix": "",
"digit_capacity": 2,
"digit_capacity_enabled": true,
"digits_separate_type": 0,
"separate_digits": false,
"text_view_type": 0,
"bool_true_format": "true",
"bool_false_format": "false",
"date_format": {
"format_type": "date_time",
"settings": [
{
"type": "year",
"value": "xl",
"suffix": "-"
},
{
"type": "month",
"value": "m",
"suffix": "-"
},
{
"type": "day",
"value": "m",
"suffix": " "
},
{
"type": "hour",
"value": "m",
"suffix": ":"
},
{
"type": "minute",
"value": "m",
"suffix": ":"
},
{
"type": "second",
"value": "m",
"suffix": ""
}
]
},
"null_format": ""
}
}
}
],
"total": 10
}
} |
где data - данные датасета;
rows - строки датасета, - обратите внимание, что в данных показана только первая строка датасета, остальные строки подразумеваются под многоточием, а количество возвращенных строк можно видеть в ключе "total";
1-3 - нумерация колонок датасета в 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 - параметры настройки форматирования.
Область настройки данных
Выпадающий список "Датасет"
Для выбора необходимого датасета нужно ввести название в поисковое поле и выбрать нужный датасет. После выбора датасета в списке в левой части области настройки данных отображаются колонки выбранного датасета:
|
Область настройки данных для типа получения данных "Таблица"
Поле "Столбцы"
Количество добавляемых колонок в поле - без ограничений.
Для добавления колонки в поле следует "перетащить" необходимую колонку в поле. Из выбранных колонок будут извлекаться данные.
Для удаления колонки из поля необходимо нажать на кнопку 
.
Поле "Сортировка"
Для добавления колонки в поле следует "перетащить" необходимую колонку в поле. По выбранной колонке будут сортироваться данные.
Доступна множественная сортировка данных. Множественная сортировка учитывает порядок вынесенных колонок. Верхняя вынесенная колонка является первым уровнем сортировки.
Для вынесенной колонки можно выбрать метод агрегации (см. Создание виджета - Агрегация) и направление сортировки (по умолчанию - по убыванию).
Для удаления колонки из поля необходимо нажать на кнопку .
Поле "Количество записей на странице"
Параметр ограничивает количество записей, извлекаемых из датасета для отрисовки.
Локальные фильтры
Для ограничения данных датасета можно воспользоваться локальным фильтром, см. Работа с локальным фильтром.
|
Область настройки данных для типа получения данных "Агрегат"
Поле "Группы"
Количество добавляемых колонок в поле - без ограничений.
Для добавления колонки в поле следует "перетащить" необходимую колонку в поле. По выбранным колонкам будут группироваться данные, извлекаемые из датасета.
Для удаления колонки из поля необходимо нажать на кнопку .
Поле "Агрегат"
Количество добавляемых колонок в поле - без ограничений.
Для добавления колонки в поле следует "перетащить" необходимую колонку в поле. По выбранным колонкам будут агрегироваться данные, извлекаемые из датасета.
Для удаления колонки из поля необходимо нажать на кнопку .
Поле "Сортировка"
Для добавления колонки в поле следует "перетащить" необходимую колонку в поле. По выбранной колонке будут сортироваться данные.
Доступна множественная сортировка данных. Множественная сортировка учитывает порядок вынесенных колонок. Верхняя вынесенная колонка является первым уровнем сортировки.
Для вынесенной колонки можно выбрать метод агрегации (см. Создание виджета - Агрегация) и направление сортировки (по умолчанию - по убыванию).
Для удаления колонки из поля необходимо нажать на кнопку .
Поле "Количество записей на странице"
Параметр ограничивает количество записей, извлекаемых из датасета для отрисовки.
Локальные фильтры
Для ограничения данных датасета можно воспользоваться локальным фильтром, см. Работа с локальным фильтром.
|
Использование данных в редакторе
Для обращения к полученным данным используйте скобочную нотацию.
Использование значений
Чтобы получить значение из первой строки датасета в четвертой колонке JSON, используйте код:
{{data["rows"][1]["2"]}} |
Для примера с таблицей код вернет значение "Рожь", а для примера с агрегатом - значение "Кукуруза".
Чтобы получить количество возвращенных строк датасета, используйте код:
{{data["total"]}} |
В обоих случаях вернется значение 10, т. к. датасет содержит по 10 записей в каждой колонке.
Использование форматирования
Чтобы применить к колонке форматирование, заданное для колонки в настройках датасета, используйте код:
{{data["rows"][1]["2"] | columnFormat('1')}} |
где '1' - номер колонки, от которой требуется взять параметры форматирования. Обратите внимание, что настройку форматирования можно применять только к колонке с соответствующим типом данных. Так, следующий код не применит форматирование, так как третья колонка JSON из примера с агрегатом содержит данные с типом "число":
{{data["rows"][1]["2"] | columnFormat('3')}} |
Пример. HTML-код
Для примера выберет тип получения данных "Таблица" и вынесем датасет "Сельское хозяйство". Далее вынесем колонки в "Группы". Для создания компонента нужно воспользоваться HTML-редактором. Для примера, введем следующий код:
|
|
После ввода кода, снизу отображается превью HTML-компонента, заполненного данными датасета. Для сохранения введенного кода необходимо нажать на кнопку "Сохранить". Созданный компонент отобразится в проекте:
|
График-фильтр по HTML-компоненту
HTML-компонент, для возможности его использования в качестве график-фильтра, должен обрабатывать события нажатия курсором.
В коде HTML-компонента используйте встроенную функцию
HTMLFilter() |
в которую по нажатию элемента HTML-компонента необходимо передавать значение этого элемента.
Функцию можно вызывать по нажатию разнотипных элементов, однако в график-фильтре для HTML-компонента предусмотрена фильтрация только по одной колонке датасета (см. График-фильтр).
Пример использования функции график-фильтра в коде HTML-компонента
|
Пример кода
<HTML>
<head>
<title>Кнопки с текстом</title>
<style>
.button {
margin: 5px;
width: 150px;
height: 50px;
}
</style>
</head>
<body>
<div id="buttonsContainer"></div>
<script>
(function() {
const rawData = JSON.parse('{{ data | dump | safe }}');
var input = rawData.rows;
var values = Array.from(new Set(input.flatMap(obj => Object.values(obj).filter(value => typeof value === 'string'))));
var buttonsContainer = document.getElementById('buttonsContainer');
for (var i = 0; i < values.length; i++) {
var button = document.createElement('button');
button.innerHTML = values[i];
button.className = 'button';
button.addEventListener('click', handleClick); // Добавление обработчика события нажатия
buttonsContainer.appendChild(button);
}
function handleClick(event) {
var clickedButton = event.target;
var value = clickedButton.innerHTML;
HTMLFilter(value); // Вызов встроенной функции HTMLFilter()
}
})();
</script>
</body>
</HTML> |
Сохранение
Для выполнения сохранения всех настроек следует нажать на кнопку "Сохранить". После нажатия на кнопку, все настройки которые были сделаны в HTML-редакторе, отобразятся в проекте.
Для закрытия HTML-редактора необходимо нажать на кнопку . После нажатия на кнопку окно создания закроется и будет осуществлен переход на страницу с проектом в режиме редактирования.