Общие сведения

Компонент позволяет отображать на слое визуализацию данных из датасета, сформированную с использованием языков HTML и JS.

Чтобы добавить на слой проект HTML-компонент, кликните в панели инструментов кнопку .


Кнопка редактора HTML на панели инструментов


По нажатию кнопки открывается страница редактора HTML-компонента.


Страница редактора HTML-компонента

Структура страницы

Слева сверху страницы расположена область редактора кода. Редактор служит для обращения к данным, получаемым из датасета, применения форматирования колонок из настройки датасета, и описания оформления с использованием языков HTML и JS.

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

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

Область настройки данных

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

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


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

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

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

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

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

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

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

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

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

Фильтры

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

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

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

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

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

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

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

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

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

Получение данных

Получать данные можно в агрегированном виде или таблицей.

Таблица

Чтобы получать данные в виде одномерной таблицы, как они хранятся в датасете, переключите селектор в области настройки данных на радиокнопку «Таблица».

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


Область «Переменная контекста» справа внизу страницы


Полное содержание полученных данных из примера представлено ниже.

Полное содержание полученных данных 
{
  "data": {
    "rows": [
      {
        "1": "Дальневосточный федеральный округ",
        "2": "Республика Бурятия",
        "3": "Городской округ г Улан -Удэ",
        "4": "г Улан-Удэ",
        "5": 2021,
        "6": 370946,
        "7": 370946,
        "8": 0,
        "id": "c26acf8a-fddd-44dd-8785-b82ecc90a553"
      },
      "..."
    ],
    "columns": [
      {
        "key": "1",
        "column": {
          "name": "Федеральный округ",
          "field_type": "string",
          "base_type": 0,
          "formatter": {
            "prefix": "Преф",
            "suffix": "Суф",
            "digit_capacity": 2,
            "digit_capacity_enabled": false,
            "digits_separate_type": 0,
            "separate_digits": false,
            "text_view_type": 0,
            "bool_true_format": "true",
            "bool_false_format": "false",
            "date_format": [
              {
                "type": "year",
                "value": "xl",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "month",
                "value": "m",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "day",
                "value": "m",
                "disabled": false,
                "suffix": " "
              },
              {
                "type": "hour",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "minute",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "second",
                "value": "m",
                "disabled": false,
                "suffix": ""
              },
              {
                "type": "millisecond",
                "value": "m",
                "disabled": false,
                "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": [
              {
                "type": "year",
                "value": "xl",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "month",
                "value": "m",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "day",
                "value": "m",
                "disabled": false,
                "suffix": " "
              },
              {
                "type": "hour",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "minute",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "second",
                "value": "m",
                "disabled": false,
                "suffix": ""
              },
              {
                "type": "millisecond",
                "value": "m",
                "disabled": false,
                "suffix": ""
              }
            ],
            "null_format": ""
          }
        }
      },
      {
        "key": "3",
        "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": [
              {
                "type": "year",
                "value": "xl",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "month",
                "value": "m",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "day",
                "value": "m",
                "disabled": false,
                "suffix": " "
              },
              {
                "type": "hour",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "minute",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "second",
                "value": "m",
                "disabled": false,
                "suffix": ""
              },
              {
                "type": "millisecond",
                "value": "m",
                "disabled": false,
                "suffix": ""
              }
            ],
            "null_format": ""
          }
        }
      },
      {
        "key": "4",
        "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": [
              {
                "type": "year",
                "value": "xl",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "month",
                "value": "m",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "day",
                "value": "m",
                "disabled": false,
                "suffix": " "
              },
              {
                "type": "hour",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "minute",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "second",
                "value": "m",
                "disabled": false,
                "suffix": ""
              },
              {
                "type": "millisecond",
                "value": "m",
                "disabled": false,
                "suffix": ""
              }
            ],
            "null_format": ""
          }
        }
      },
      {
        "key": "5",
        "column": {
          "name": "Год",
          "field_type": "int64",
          "base_type": 1,
          "formatter": {
            "prefix": "",
            "suffix": "",
            "digit_capacity": null,
            "digit_capacity_enabled": false,
            "digits_separate_type": 0,
            "separate_digits": false,
            "text_view_type": 0,
            "bool_true_format": "true",
            "bool_false_format": "false",
            "date_format": [
              {
                "type": "year",
                "value": "xl",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "month",
                "value": "m",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "day",
                "value": "m",
                "disabled": false,
                "suffix": " "
              },
              {
                "type": "hour",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "minute",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "second",
                "value": "m",
                "disabled": false,
                "suffix": ""
              },
              {
                "type": "millisecond",
                "value": "m",
                "disabled": false,
                "suffix": ""
              }
            ],
            "null_format": ""
          }
        }
      },
      {
        "key": "6",
        "column": {
          "name": "Население",
          "field_type": "int64",
          "base_type": 1,
          "formatter": {
            "prefix": "",
            "suffix": "",
            "digit_capacity": null,
            "digit_capacity_enabled": false,
            "digits_separate_type": 0,
            "separate_digits": false,
            "text_view_type": 0,
            "bool_true_format": "true",
            "bool_false_format": "false",
            "date_format": [
              {
                "type": "year",
                "value": "xl",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "month",
                "value": "m",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "day",
                "value": "m",
                "disabled": false,
                "suffix": " "
              },
              {
                "type": "hour",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "minute",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "second",
                "value": "m",
                "disabled": false,
                "suffix": ""
              },
              {
                "type": "millisecond",
                "value": "m",
                "disabled": false,
                "suffix": ""
              }
            ],
            "null_format": ""
          }
        }
      },
      {
        "key": "7",
        "column": {
          "name": "Городское",
          "field_type": "int64",
          "base_type": 1,
          "formatter": {
            "prefix": "",
            "suffix": "",
            "digit_capacity": null,
            "digit_capacity_enabled": false,
            "digits_separate_type": 0,
            "separate_digits": false,
            "text_view_type": 0,
            "bool_true_format": "true",
            "bool_false_format": "false",
            "date_format": [
              {
                "type": "year",
                "value": "xl",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "month",
                "value": "m",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "day",
                "value": "m",
                "disabled": false,
                "suffix": " "
              },
              {
                "type": "hour",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "minute",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "second",
                "value": "m",
                "disabled": false,
                "suffix": ""
              },
              {
                "type": "millisecond",
                "value": "m",
                "disabled": false,
                "suffix": ""
              }
            ],
            "null_format": ""
          }
        }
      },
      {
        "key": "8",
        "column": {
          "name": "Сельское",
          "field_type": "int64",
          "base_type": 1,
          "formatter": {
            "prefix": "",
            "suffix": "",
            "digit_capacity": null,
            "digit_capacity_enabled": false,
            "digits_separate_type": 0,
            "separate_digits": false,
            "text_view_type": 0,
            "bool_true_format": "true",
            "bool_false_format": "false",
            "date_format": [
              {
                "type": "year",
                "value": "xl",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "month",
                "value": "m",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "day",
                "value": "m",
                "disabled": false,
                "suffix": " "
              },
              {
                "type": "hour",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "minute",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "second",
                "value": "m",
                "disabled": false,
                "suffix": ""
              },
              {
                "type": "millisecond",
                "value": "m",
                "disabled": false,
                "suffix": ""
              }
            ],
            "null_format": ""
          }
        }
      }
    ],
    "total": 100
  }
}

где 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": [
      {
        "1": "Дальневосточный федеральный округ",
        "2": "Агинский Бурятский округ - территория с особым статусом",
        "3": 4,
        "4": 88478
      },
      "..."
    ],
    "columns": [
      {
        "key": "1",
        "column": {
          "name": "Федеральный округ",
          "field_type": "string",
          "base_type": 0,
          "formatter": {
            "prefix": "Преф ",
            "suffix": " Суф",
            "digit_capacity": 2,
            "digit_capacity_enabled": false,
            "digits_separate_type": 0,
            "separate_digits": false,
            "text_view_type": 0,
            "bool_true_format": "true",
            "bool_false_format": "false",
            "date_format": [
              {
                "type": "year",
                "value": "xl",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "month",
                "value": "m",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "day",
                "value": "m",
                "disabled": false,
                "suffix": " "
              },
              {
                "type": "hour",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "minute",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "second",
                "value": "m",
                "disabled": false,
                "suffix": ""
              },
              {
                "type": "millisecond",
                "value": "m",
                "disabled": false,
                "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": [
              {
                "type": "year",
                "value": "xl",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "month",
                "value": "m",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "day",
                "value": "m",
                "disabled": false,
                "suffix": " "
              },
              {
                "type": "hour",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "minute",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "second",
                "value": "m",
                "disabled": false,
                "suffix": ""
              },
              {
                "type": "millisecond",
                "value": "m",
                "disabled": false,
                "suffix": ""
              }
            ],
            "null_format": ""
          }
        }
      },
      {
        "key": "3",
        "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": [
              {
                "type": "year",
                "value": "xl",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "month",
                "value": "m",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "day",
                "value": "m",
                "disabled": false,
                "suffix": " "
              },
              {
                "type": "hour",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "minute",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "second",
                "value": "m",
                "disabled": false,
                "suffix": ""
              },
              {
                "type": "millisecond",
                "value": "m",
                "disabled": false,
                "suffix": ""
              }
            ],
            "null_format": ""
          }
        }
      },
      {
        "key": "4",
        "column": {
          "name": "Население",
          "field_type": "int64",
          "base_type": 1,
          "formatter": {
            "prefix": "",
            "suffix": "",
            "digit_capacity": null,
            "digit_capacity_enabled": false,
            "digits_separate_type": 0,
            "separate_digits": false,
            "text_view_type": 0,
            "bool_true_format": "true",
            "bool_false_format": "false",
            "date_format": [
              {
                "type": "year",
                "value": "xl",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "month",
                "value": "m",
                "disabled": false,
                "suffix": "-"
              },
              {
                "type": "day",
                "value": "m",
                "disabled": false,
                "suffix": " "
              },
              {
                "type": "hour",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "minute",
                "value": "m",
                "disabled": false,
                "suffix": ":"
              },
              {
                "type": "second",
                "value": "m",
                "disabled": false,
                "suffix": ""
              },
              {
                "type": "millisecond",
                "value": "m",
                "disabled": false,
                "suffix": ""
              }
            ],
            "null_format": ""
          }
        }
      }
    ],
    "total": 87
  }
}

где 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».

Обратите внимание, что хотя счет колонок в датасете начинается с «1», то счет строк начинается с «0». Поэтому для обращения к первой строке используется значение «0», а к последней – «total - 1».

Использование форматирования

Чтобы применить к колонке форматирование, заданное для колонки в настройках датасета, используйте код:

{{data["rows"][0]["1"] | columnFormat('1')}}

где '1' – номер колонки, от которой требуется взять параметры форматирования. Обратите внимание, что настройку форматирования можно применять только к колонке с соответствующим типом данных. Так, следующий код не применит форматирование, так как четвертая колонка JSON содержит данные с типом «число»:

{{data["rows"][0]["4"] | columnFormat('1')}}

Пример. 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-компонент, для возможности его использования с график-фильтром, должен обрабатывать события нажатия курсором.

В коде HTML-компонента используйте встроенную функцию

HTMLFilter()

в которую по нажатию элемента HTML-компонента необходимо передавать значение этого элемента.

Функцию можно вызывать по нажатию разнотипных элементов, однако в график-фильтре для HTML-компонента предусмотрена фильтрация только по одной колонке датасета (см. График-фильтр).

Примеры использования функции график-фильтра в коде HTML-компонента

Пример 1

Код компонента 
<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>

Пример 2

Код компонента 
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<head>
  <style>
    #chartdiv {
      width: 100%;
      height: 100%;
      max-width: 100%;
    }
  </style>
</head>
<script>
  (function() {<!-- Chart code -->
    am5.ready(function() {
      // Create root element
      // https://www.amcharts.com/docs/v5/getting-started/#Root_element
      var root = am5.Root.new("chartdiv");
      // Set themes
      // https://www.amcharts.com/docs/v5/concepts/themes/
      root.setThemes([
        am5themes_Animated.new(root)
      ]);
      // Create chart
      // https://www.amcharts.com/docs/v5/charts/xy-chart/
      var chart = root.container.children.push(am5xy.XYChart.new(root, {
        panX: true,
        panY: true,
        wheelX: "panX",
        wheelY: "zoomX",
        pinchZoomX: true
      }));
      // Add cursor
      // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
      var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
      cursor.lineY.set("visible", false);

      // Create axes
      // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
      var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
      xRenderer.labels.template.setAll({
        rotation: -90,
        centerY: am5.p50,
        centerX: am5.p100,
        paddingRight: 15
      });
      xRenderer.grid.template.setAll({
        location: 1
      })
      var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
        maxDeviation: 0.3,
        categoryField: "1",
        renderer: xRenderer,
        tooltip: am5.Tooltip.new(root, {})
      }));
      var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        maxDeviation: 0.3,
        renderer: am5xy.AxisRendererY.new(root, {
          strokeOpacity: 0.1
        })
      }));

      // Create series
      // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
      var series = chart.series.push(am5xy.ColumnSeries.new(root, {
        name: "Series 1",
        xAxis: xAxis,
        yAxis: yAxis,
        valueYField: "2",
        sequencedInterpolation: true,
        categoryXField: "1",
        tooltip: am5.Tooltip.new(root, {
          labelText: "{valueY}"
        })
      }));
      series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
      series.columns.template.adapters.add("fill", function(fill, target) {
        return chart.get("colors").getIndex(series.columns.indexOf(target));
      });
      series.columns.template.adapters.add("stroke", function(stroke, target) {
        return chart.get("colors").getIndex(series.columns.indexOf(target));
      });
      series.columns.template.events.on("click", function(ev) {         HTMLFilter(ev.target.dataItem.dataContext[1]);// Вызов встроенной функции HTMLFilter()
      });
      // Set data
      const rawData = JSON.parse('{{ data | dump | safe }}');
      var data = rawData.rows;    
      xAxis.data.setAll(data);
      series.data.setAll(data);
      // Make stuff animate on load
      // https://www.amcharts.com/docs/v5/concepts/animations/
      series.appear(1000);
      chart.appear(1000, 100);
    }); // end am5.ready()
  })();
</script>
<body>
  <div id="chartdiv"></div>
</body>

Сохранение

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

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

  • Нет меток