[Документация Yandex Cloud](../../../index.md) > [Yandex DataLens](../../index.md) > Чарты > [Чарты в Editor](index.md) > Доступные методы

# Доступные методы в Editor

Поддерживаются методы:

* [Editor.generateHtml(arg)](#gen-html)
* [Editor.getActionParams()](#get-action-params)
* [Editor.getCurrentPage()](#get-current-page)
* [Editor.getId(arg)](#get-id)
* [Editor.getLang()](#get-lang)
* [Editor.getLoadedData()](#get-loaded-data)
* [Editor.getParam(name)](#get-param)
* [Editor.getParams()](#get-params)
* [Editor.getSortParams()](#get-sort-params)
* [Editor.getWidgetConfig()](#get-widget-config)
* [Editor.resolveInterval(arg)](#resolve-interval)
* [Editor.resolveOperation(args)](#resolve-oper)
* [Editor.resolveRelative(arg)](#resolve-relative)
* [Editor.setChartsInsights(args)](#set-insights)
* [Editor.setRawData(data)](#set-raw-data)
* [Editor.updateActionParams()](#update-action-params)
* [Editor.updateParams(params)](#update-params)
* [Editor.wrapFn(conf)](#wrap)

## Editor.generateHtml(arg) {#gen-html}

Формирует безопасную HTML-разметку в чарте.

{% cut "Поддерживаемые HTML-теги" %}

* `a`
* `abbr`
* `b`
* `br`
* `button`
* `caption`
* `circle`
* `clipPath`
* `code`
* `dd`
* `defs`
* `details`
* `div`
* `dl`
* `dl-tooltip`
* `dt`
* `ellipse`
* `em`
* `feComponentTransfer`
* `feDropShadow`
* `feFuncA`
* `feFuncB`
* `feFuncG`
* `feFuncR`
* `feGaussianBlur`
* `feOffset`
* `feMerge`
* `feMergeNode`
* `filter`
* `g`
* `h1`
* `h2`
* `h3`
* `h4`
* `h5`
* `h6`
* `hr`
* `i`
* `img`
* `li`
* `line`
* `linearGradient`
* `marker`
* `mask`
* `ol`
* `p`
* `path`
* `pattern`
* `polyline`
* `polygon`
* `pre`
* `radialGradient`
* `rect`
* `small`
* `span`
* `stop`
* `strong`
* `sub`
* `summary`
* `sup`
* `svg`
* `table`
* `text`
* `textPath`
* `thead`
* `title`
* `tbody`
* `tspan`
* `td`
* `th`
* `tr`
* `u`
* `ul`

{% endcut %}

{% cut "Поддерживаемые атрибуты тегов" %}

* `alt`
* `alignment-baseline`
* `aria-controls`
* `aria-describedby`
* `aria-expanded`
* `aria-haspopup`
* `aria-hidden`
* `aria-label`
* `aria-labelledby`
* `aria-live`
* `aria-pressed`
* `aria-readonly`
* `aria-roledescription`
* `aria-selected`
* `class` ^1^
* `clip-path`
* `clip-rule`
* `color`
* `colspan`
* `cursor`
* `cx`
* `cy`
* `d`
* `data-id`
* `data-tooltip-content`
* `data-tooltip-placement`
* `data-tooltip-anchor-id`
* `data-tooltip-hide-delay`
* `data-tooltip-open-delay`
* `disabled`
* `dominant-baseline`
* `dx`
* `dy`
* `fill`
* `fill-opacity`
* `fill-rule`
* `filter`
* `filterunits`
* `flood-color`
* `flood-opacity`
* `font-family`
* `font-size`
* `font-weight`
* `fx`
* `fy`
* `height`
* `href`
* `id`
* `in`
* `letter-spacing`
* `mask`
* `name`
* `offset`
* `opacity`
* `orient`
* `overflow`
* `padding`
* `paint-order`
* `pointer-events`
* `points`
* `preserveaspectratio`
* `r`
* `refX`
* `refY`
* `role`
* `rx`
* `ry`
* `scope`
* `slope`
* `src`
* `stddeviation`
* `stop`
* `stop-color`
* `stop-opacity`
* `stroke`
* `stroke-dasharray`
* `stroke-dashoffset`
* `stroke-linecap`
* `stroke-linejoin`
* `stroke-opacity`
* `stroke-width`
* `result`
* `rowspan`
* `summary`
* `target`
* `tabindex`
* `text-align`
* `text-anchor`
* `text-decoration`
* `title`
* `transform`
* `type`
* `valign`
* `viewbox`
* `width`
* `x`
* `x1`
* `x2`
* `xlink:href`
* `xmlns`
* `xmlns:xlink`
* `y`
* `y1`
* `y2`
* `zindex`

^1^ Чтобы избежать несовместимости при последующих обновлениях, не используйте классы сервиса в атрибуте `class`.

{% endcut %}

#### Поддерживаемые виды чартов {#gen-html-charts}

* [График (Gravity UI Charts)](widgets/gravity-ui.md)
* [Таблица](widgets/table.md)
* [Advanced-чарт](widgets/advanced.md)

#### Аргументы {#gen-html-args}

`arg` — строка или JSON-объект вида:

```json
{
  "tag": "<string>",
  "style": "<object>",
  "content": "<string> / <object> / <array_of_objects>"
}
```

Где:

* `tag` (_строка_) — тип HTML-тега, обязательное поле.
* `style` (_JSON-объект_) — описание CSS-свойств вида:

  ```json
  {
    "key": "value"
  }
  ```

  Где:

  * `key` (_строка_) — название CSS-свойства.
  * `value` (_строка_) — значение CSS-свойства.

* `content` (_строка_, _JSON-объект_, _массив объектов_) — строка, JSON-объект или массив объектов вида:

  ```json
  {
    "tag": "<string>",
    "style": "<object>",
    "content": "<string> / <object> / <array_of_objects>"
  }
  ```

#### Отображение тултипа по наведению {#dl-tooltip}

В разметке можно использовать специальный тег `dl-tooltip` со следующими атрибутами:

* `data-tooltip-content` (_строка_, _JSON-объект_) — содержимое тултипа. Задается в виде строки или по аналогии с [аргументом](#gen-html-args) `arg`.
* `data-tooltip-placement` (_строка_) — местоположение тултипа:

  * `top` — над содержимым.
  * `bottom` — под содержимым.
  * `left` — слева от содержимого.
  * `right` — справа от содержимого.

* `data-tooltip-open-delay` (_целое число_) — задержка перед отображением тултипа. Задается в миллисекундах.
* `data-tooltip-hide-delay` (_целое число_) — задержка перед скрытием тултипа. Задается в миллисекундах.

#### Стили для цветовых тем {#css}

Поддерживается использование CSS-переменных для каждой из четырех цветовых схем:

* Каждая переменная должна быть определена и для светлой (`light`), и для темной (`dark`) темы.
* Если значения для светлой контрастной (`light-hc`) и/или темной контрастной (`dark-hc`) темы не определены, они будут взяты из соответствующих неконтрастных тем.
* Название переменной должно начинаться с префикса `--ce-theme`, чтобы избежать переопределения системных переменных DataLens и переменных, которые используются в [Gravity UI](https://gravity-ui.com/).
* Переменная действует только в области элемента, в рамках которого она определена, а также в области его потомков.

#### Примеры {#gen-html-example}

{% cut "Пример разметки" %}

```js
const result = {
    tag: 'div',
    style: {
        display: 'flex',
        'flex-direction': 'row',
    },
    content: [
        {
            tag: 'a',
            style: {
                display: 'inline-block',
                'vertical-align': 'baseline',
                width: '10px',
                'margin-right': '10px',
            },
            attributes: {
                href: 'https://ya.ru',
                target: '_blank',
            },
            content: {
                tag: 'img',
                attributes: {
                    src: 'https://storage.yandexcloud.net/datalens-public-demo-assets/logo-new.svg',
                    width: '238',
                    height: '32',
                },
                styles: {
                    display: 'block',
                },
            },
        },
        {
            tag: 'span',
            style: {
                'font-style': 'italic',
                color: 'var(--g-color-text-info)',
                'line-height': '1',
                'margin-right': '10px',
            },
         content: 'some text',
        },
        {
            tag: 'svg',
            attributes: {
                'xmlns': 'http://www.w3.org/2000/svg',
                width: 16,
                height: 16,
                fill: 'var(--g-color-text-complementary)',
                viewBox: '0 0 16 16',
            },
            content: {
                tag: 'path',
                attributes: {
                    d: 'M4.355.522a.5.5 0 0 1 .623.333l.291.956A4.979 4.979 0 0 1 8 1c1.007 0 1.946.298 2.731.811l.29-.956a.5.5 0 1 1 .957.29l-.41 1.352A4.985 4.985 0 0 1 13 6h.5a.5.5 0 0 0 .5-.5V5a.5.5 0 0 1 1 0v.5A1.5 1.5 0 0 1 13.5 7H13v1h1.5a.5.5 0 0 1 0 1H13v1h.5a1.5 1.5 0 0 1 1.5 1.5v.5a.5.5 0 1 1-1 0v-.5a.5.5 0 0 0-.5-.5H13a5 5 0 0 1-10 0h-.5a.5.5 0 0 0-.5.5v.5a.5.5 0 1 1-1 0v-.5A1.5 1.5 0 0 1 2.5 10H3V9H1.5a.5.5 0 0 1 0-1H3V7h-.5A1.5 1.5 0 0 1 1 5.5V5a.5.5 0 0 1 1 0v.5a.5.5 0 0 0 .5.5H3c0-1.364.547-2.601 1.432-3.503l-.41-1.352a.5.5 0 0 1 .333-.623zM4 7v4a4 4 0 0 0 3.5 3.97V7H4zm4.5 0v7.97A4 4 0 0 0 12 11V7H8.5zM12 6a3.989 3.989 0 0 0-1.334-2.982A3.983 3.983 0 0 0 8 2a3.983 3.983 0 0 0-2.667 1.018A3.989 3.989 0 0 0 4 6h8z',
                },
            },
        },
    ],
};
...
title: Editor.generateHtml(result),
...
```

{% endcut %}

{% cut "Пример разметки с шаблонными строками в графике" %}

```js
...
dataLabelsFormat: Editor.generateHtml({
    tag: 'i',
    content: '{point.yLabel}'
}),
...
```

{% endcut %}

{% cut "Пример разметки тултипов" %}

```js
...
text: Editor.generateHtml({
    tag: 'div',
    content: [
        {
            tag: 'dl-tooltip',
            content: 'Tooltip trigger 1',
            attributes: {
                'data-tooltip-content': {
                    tag: 'i',
                    content: 'Italic content',
                },
                'data-tooltip-placement': ['top']
            }
        },
        {
            tag: 'dl-tooltip',
            content: 'Tooltip trigger 2',
            style: { 'font-weight': 'normal' },
            attributes: {
                'data-tooltip-content': 'Hey!',
                'data-tooltip-placement': 'right'
            }
        },
        {
            tag: 'div',
            content: 'Without tooltip',
        },
        {
            tag: 'dl-tooltip',
            content: {
                tag: 'img',
                attributes: {
                    src: 'https://storage.yandexcloud.net/datalens-public-demo-assets/logo-new.svg',
                    width: 238,
                    height: 32,
                },
                style: {
                    'display': 'inline-block',
                    'vertical-align': 'middle',
                },
            },
            attributes: {
                'data-tooltip-content': {
                    tag: 'a',
                    attributes: {
                        href: 'https://ya.ru',
                    },
                    content: 'go to link',
                    style: {
                        'display': 'inline-block',
                        'vertical-align': 'middle',
                    },
                },
                'data-tooltip-placement': 'bottom'
            },
            style: {
                'display': 'inline-block',
                'vertical-align': 'middle',
            },
        },
        {
            tag: 'dl-tooltip',
            content: {
                tag: 'a',
                attributes: {
                    href: 'https://ya.ru',
                },
                style: {
                    'display': 'inline-block',
                    'vertical-align': 'middle',
                },
                content: [{
                    tag: 'img',
                    attributes: {
                        src: 'https://storage.yandexcloud.net/datalens-public-demo-assets/logo-new.svg',
                        width: 238,
                        height: 32,
                    },
                    style: {
                        'display': 'inline-block',
                        'vertical-align': 'middle',
                    },
                }],
            },
            style: {
                'display': 'inline-block',
                'vertical-align': 'middle',
                'margin-left': '20px',
            },
            attributes: {
                'data-tooltip-content': {
                    tag: 'img',
                    attributes: {
                        src: 'https://storage.yandexcloud.net/datalens-public-demo-assets/logo-new.svg',
                    },
                    content: 'some image desc',
                },
                'data-tooltip-placement': 'bottom'
            }
        },
    ]
}),
...
```

{% endcut %}

{% cut "Пример разметки с описанием стилей для разных цветовых тем" %}

```js
module.exports = {
    title: {
        text: Editor.generateHtml({
            tag: 'div',
            content: [
                {
                    tag: 'div',
                    theme: {
                        dark: {
                            '--ce-theme-bg': 'purple',
                            '--ce-theme-text': 'yellow',
                        },
                        light: {
                            '--ce-theme-bg': 'pink',
                            '--ce-theme-text': 'orange',
                        },
                    },
                    style: {
                        'background-color': 'var(--ce-theme-bg)',
                    },
                    content: {
                        tag: 'div',
                        style: {
                            color: 'var(--ce-theme-text)',
                        },
                        content: 'I can use --ce-theme-text variable',
                    },
                },
                {
                    tag: 'div',
                    style: {
                        color: 'var(--ce-theme-text)',
                    },
                    content: 'I cannot use --ce-theme-text variable',
                },
            ]
        }),
    },
};
```

{% endcut %}

{% cut "Пример разметки с описанием стилей для разных цветовых тем (вариант 2)" %}

```js
module.exports = {
    title: {
        text: Editor.generateHtml({
            tag: 'div',
            style: {
                'display': 'flex',
                'flex-direction': 'column',
                'align-items': 'center'
            },
            theme: {
                dark: {
                    '--ce-theme-bg': '#BF90EE',
                    '--ce-theme-text': '#F5D629',
                },
                light: {
                    '--ce-theme-bg': '#9658D5',
                    '--ce-theme-text': '#26FFD9',
                },
            },
            content: [
                {
                    tag: 'div',
                    style: {
                        'margin-bottom': '10px',
                    },
                    content: 'Use settings to switch the theme',
                },
                {
                    tag: 'div',
                    style: {
                        'width': '100%',
                        'height': '300px',
                        'background-color': 'var(--ce-theme-bg)',
                        'color': 'var(--ce-theme-text)',
                        'text-align': 'center',
                        'display': 'flex',
                        'justify-content': 'center',
                        'align-items': 'center',
                    },
                    content: 'Some text',
                },
            ]
        }),
    },
};
```

{% endcut %}

## Editor.getActionParams() {#get-action-params}

Возвращает объект с нормализованными [фильтрующими (action) параметрами](cross-filtration.md).

#### Поддерживаемые виды чартов {#get-action-params-charts}

* [График (Gravity UI Charts)](widgets/gravity-ui.md)
* [Таблица](widgets/table.md)
* [Advanced-чарт](widgets/advanced.md)

#### Аргументы {#get-action-params-args}

Нет.

#### Возвращаемый результат {#get-action-params-result}

JSON-объект вида:

```json
{
  "key": "value"
}
```

Где:

* `key` (_строка_) — имя параметра.
* `value` (_массив строк_) — значения параметров, которыми фильтрует текущий чарт.

{% note info %}

В чартах можно использовать числовые или логические значения для параметров. Тогда в `value` будет массив значений этих типов. Но параметры с дашборда передаются только в виде строк. Поэтому рекомендуется всегда приводить значения параметров к строке или массиву строк, чтобы избежать несогласованности отображения данных в разных состояниях виджета.

{% endnote %}

{% note tip %}

Для включения отладки режима с фильтрующими параметрами необходимо добавить в URL страницы параметр `_action_params` со значением  `1`.

{% endnote %}

#### Пример {#get-action-params-example}

{% list tabs %}

- Примененные параметры

  К чарту применены фильтрующие параметры — нажат фильтрующий элемент или в URL чарта указан параметр с префиксом:

  ```js
  _ap_City=Moscow
  ```

- Вкладка Params

  Содержимое вкладки [Params](tabs.md#params):

  ```js
  module.exports = {
      "Year": "2024",
      "City": ["Moscow", "Sochi"]
  };
  ```

- Вкладка Prepare

  Содержимое вкладки [Prepare](tabs.md#prepare):

  ```js
  const actionParams = Editor.getActionParams();
  ```

- Результат

  Значение переменной `actionParams` после выполнения вкладки **Prepare**:

  ```json
  {
    "City": ["Moscow"]
  }
  ```

{% endlist %}

#### Примеры чартов {#get-action-params-chart-examples}

[Пример кросс-фильтрации](https://datalens.yandex/nvkfwnekf9xy9#Editor.getActionParams()%2C%20Editor.updateActionParams(args)%2C%20Editor.getParam(args)) — клик по Advanced-чарту слева фильтрует Markdown справа.

## Editor.getCurrentPage() {#get-current-page}

Возвращает текущее значение номера страницы в таблице с включенной пагинацией.

#### Поддерживаемые виды чартов {#get-current-page-charts}

[Таблица](widgets/table.md).

#### Аргументы {#get-current-page-args}

Нет.

#### Возвращаемый результат {#get-current-page-result}

Число, соответствующее номеру страницы.

#### Пример {#get-current-page-example}

{% list tabs %}

- Вкладка Config

  Содержимое вкладки [Config](tabs.md#config):

  ```js
  module.exports = {
      paginator: {
          enabled: true,
          limit: 5
      }
  };
  ```

- Вкладка Prepare

  Содержимое вкладки [Prepare](tabs.md#prepare):

  ```js
  const page = Editor.getCurrentPage();
  ```

- Результат

  ![screenshot](../../../_assets/datalens/editor/table-pagination.png)

{% endlist %}

#### Примеры чартов {#get-current-page-charts-example}


[Пример чарта с пагинацией и сортировкой](https://datalens.yandex/nvkfwnekf9xy9#Editor.getSortParams()%2C%20Editor.getCurrentPage())



## Editor.getId(arg) {#get-id}

Возвращает id объекта из поля `links` со вкладки [Meta](tabs.md#meta).

#### Поддерживаемые виды чартов {#get-id-charts}

Все.

#### Аргументы {#get-action-params-args}

`arg` (_строка_) — строка с названием ключа (имя-алиас) в объекте `links` на вкладке **Meta**.

#### Возвращаемый результат {#get-id-result}

Строка со значением id.

#### Пример {#get-id-example}

{% list tabs %}

- Вкладка Meta

  Содержимое вкладки [Meta](tabs.md#meta):

  ```js
  {
    "links": {
        "myBestDataset": "tlzr1t5kto9cg"
    }
  }
  ```

- Вкладка Sources

  Содержимое вкладки [Sources](tabs.md#sources) с получением значения со вкладки **Meta**:

  ```js
  module.exports = {
    'myDatasetSource': {
        datasetId: Editor.getId('myBestDataset'),
        data: {
            fields: [
                {
                    ref: {
                        type: "title",
                        title: "PaymentType",
                    },
                },
		        {
                    ref: {
                        type: "title",
                        title: "OrderYear",
                    },
                },
		        {
                    ref: {
                        type: "title",
                        title: "OrderMonth",
                    },
                },
            ],
        },
    },
  };
  ```

{% endlist %}


## Editor.getLang() {#get-lang}

Возвращает строку с языком, заданным в [настройках текущего пользователя](../../settings/index.md#user-settings).

#### Поддерживаемые виды чартов {#get-lang-charts}

Все.

#### Аргументы {#get-lang-args}

Нет.

#### Возвращаемый результат {#get-lang-result}

Строка, соответствующая языку, заданному в настройках пользователя: `"ru"` или `"en"`.

#### Пример {#get-lang-example}

{% list tabs %}

- Вкладка Prepare

  Содержимое вкладки [Prepare](tabs.md#prepare):

  ```js
  const lang = Editor.getLang();
  ```

- Результат

  Значение переменной `lang` после выполнения вкладки [Prepare](tabs.md#prepare) при текущем значении настройки языка пользователя — `ru`:

  ```json
  ["ru"]
  ```

{% endlist %}

## Editor.getLoadedData() {#get-loaded-data}

Возвращает объект с данными, запрошенными на вкладке [Sources](tabs.md#sources).

#### Поддерживаемые виды чартов {#get-loaded-data-charts}

Все.

#### Аргументы {#get-loaded-data-args}

Нет.

#### Возвращаемый результат {#get-loaded-data-result}

Зависит от источника данных и типа визуализации.

#### Пример {#get-loaded-data-example}

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

{% list tabs %}

- Вкладка Sources

  Содержимое вкладки [Sources](tabs.md#sources):

  ```js
  const {buildSource} = require('libs/dataset/v2');
  const datasetId = Editor.getId('myDatasetKeyName');
  module.exports = {
      'myChartDataSource': buildSource({
          id: datasetId,
          columns: ['Year', 'Country', 'City'],
          where,
          order_by: [{
              direction: 'ASC',
              column: 'Year',
          }],
      }),
  };
  ```

- Вкладка Prepare

  Содержимое вкладки [Prepare](tabs.md#prepare):

  ```js
  const data = Editor.getLoadedData();
  ```

- Результат

  Значение переменной `data` после выполнения вкладки **Prepare**:

  ```json
  {
      "travelSet": {
          "result": {
              "data": {
                  "Data": [
                      [
                          "2013",
                          "Russia",
                          "Moscow"
                      ],
                      [
                          "2014",
                          "Russia",
                          "Sochi"
                      ]
                  ],
                  "Type": [
                      "ListType",
                      [
                          "StructType",
                          [
                              [
                                  "Year",
                                  [
                                      "OptionalType",
                                      [
                                          "DataType",
                                          "Int64"
                                      ]
                                  ]
                              ],
                              [
                                  "Country",
                                  [
                                      "OptionalType",
                                      [
                                          "DataType",
                                          "String"
                                      ]
                                  ]
                              ],
                              [
                                  "City",
                                  [
                                      "OptionalType",
                                      [
                                          "DataType",
                                          "String"
                                      ]
                                  ]
                              ]
                          ]
                      ]
                  ]
              },
              "query": "SELECT `A`, `D`, `C`\n LIMIT 1000001",
              "data_export_forbidden": false,
              "fields": [
                  {
                      "guid": "34ca4a89-f609-4e00-83af-4ae0********",
                      "title": "DateStart",
                      "data_type": "date",
                      "calc_mode": "direct"
                  },
                  {
                      "guid": "50927ab0-3a7e-11ec-965f-71d2********",
                      "title": "Year",
                      "data_type": "integer",
                      "calc_mode": "formula"
                  },
                  {
                      "guid": "13dbfc8f-b649-4201-b3d0-fb8b********",
                      "title": "City",
                      "data_type": "string",
                      "calc_mode": "direct"
                  },
                  {
                      "guid": "d079937f-6bc4-4133-9171-4009********",
                      "title": "Country",
                      "data_type": "string",
                      "calc_mode": "direct"
                  }
              ]
          }
      }
  }
  ```

{% endlist %}

#### Примеры чартов {#get-loaded-data-charts-example}


[Пример использования Editor.getLoadedData() в таблице с источником на основе датасета](https://datalens.yandex/nvkfwnekf9xy9#Editor.getLoadedData())


## Editor.getParam(name) {#get-param}

Возвращает нормализованное значение параметра с именем `name`.

#### Поддерживаемые виды чартов {#get-param-charts}

Все.

#### Аргументы {#get-param-args}

`name` (_строка_) — имя параметра.

#### Возвращаемый результат {#get-param-result}

Массив строк, возвращающий значение параметра.

#### Пример {#get-param-example}

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

{% list tabs %}

- Вкладка Params

  Содержимое вкладки [Params](tabs.md#params):

  ```js
  module.exports = {
      "Year": "2024",
      "City": ["Moscow", "Sochi"]
  };
  ```

- Вкладка Prepare

  Содержимое вкладки [Prepare](tabs.md#prepare):

  ```js
  const params = Editor.getParam('Year');
  ```

- Результат

  Значение переменной `params` после выполнения вкладки [Prepare](tabs.md#prepare):

  ```json
  ["2024"]
  ```

{% endlist %}


#### Примеры чартов {#get-param-charts-example}

[Пример чарта с обращением к параметру по имени](https://datalens.yandex/nvkfwnekf9xy9#Editor.getActionParams()%2C%20Editor.updateActionParams(args)%2C%20Editor.getParam(args))


## Editor.getParams() {#get-params}

Возвращает объект с нормализованными параметрами.

#### Поддерживаемые виды чартов {#get-params-charts}

Все.

#### Аргументы {#get-params-args}

Нет.

#### Возвращаемый результат {#get-params-result}

JSON-объект вида:

```json
{
  "key": "value"
}
```

Где:

* `key` (_строка_) — имя параметра.
* `value` (_массив строк_) — значения параметров.

{% note info %}

В чартах можно использовать числовые или логические значения для параметров. Тогда в `value` будет массив значений этих типов. Но параметры с дашборда передаются только в виде строк. Поэтому рекомендуется всегда приводить значения параметров к строке или массиву строк, чтобы избежать несогласованности отображения данных в разных состояниях виджета.

{% endnote %}

#### Пример {#get-params-example}

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

{% list tabs %}

- Вкладка Params

  Содержимое вкладки [Params](tabs.md#params):

  ```js
  module.exports = {
      "Year": "2024",
      "City": ["Moscow", "Sochi"]
  };
  ```

- Вкладка Prepare

  Содержимое вкладки [Prepare](tabs.md#prepare):

  ```js
  const params = Editor.getParams();
  ```

- Результат

  Значение переменной `params` после выполнения вкладки [Prepare](tabs.md#prepare):

  ```json
  {
      "Year": ["2024"],
      "City": ["Moscow", "Sochi"]
  }
  ```

{% endlist %}


#### Примеры чартов {#get-params-charts-example}

[Пример использования функции получения всех примененных параметров](https://datalens.yandex/nvkfwnekf9xy9#Editor.getParams())



## Editor.getSortParams() {#get-sort-params}

Возвращает объект с параметрами сортировки в таблице.

#### Поддерживаемые виды чартов {#get-sort-params-charts}

[Таблица](widgets/table.md).

#### Аргументы {#get-sort-params-args}

Нет.

#### Возвращаемый результат {#get-sort-params-result}

JSON-объект вида:

```json
{
  "columnId": "<string>",
  "order": "<numer> | <string>"
}
```

Где:

* `columnId` (_строка_) — ID колонки, например `0_0_1_id=date_name=Дата`;
* `order` (_число_ или _строка_) — порядок сортировки. Возможные значения:
  
  * `1` — сортировка по возрастанию;
  * `-1` — сортировка по убыванию;
  * `__special_value__NaN` — нет сортировки.

#### Пример {#get-sort-params-example}

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

{% list tabs %}

- Вкладка Sources

  Содержимое вкладки [Sources](tabs.md#sources):

  ```js
  const sort_params = Editor.getSortParams();
  ```

- Результат

  Объект с параметрами сортировки после выполнения вкладки **Sources**:

  ```json
  {
    "columnId": "_id=ProductCategory_name=ProductCategory",
    "order": -1
  }
  ```

{% endlist %}

#### Примеры чартов {#get-sort-params-charts-example}


[Пример чарта с пагинацией и сортировкой](https://datalens.yandex/nvkfwnekf9xy9#Editor.getSortParams()%2C%20Editor.getCurrentPage())


## Editor.getWidgetConfig() {#get-widget-config}

Возвращает текущее значение настроек виджета с дашборда или отчета. Может использоваться для отладки кастомного отображения чарта при состоянии фильтрации этим чартом.

#### Поддерживаемые виды чартов {#get-widget-config-charts}

* [График (Gravity UI Charts)](widgets/gravity-ui.md)
* [Таблица](widgets/table.md)
* [Advanced-чарт](widgets/advanced.md)

#### Аргументы {#get-widget-config-args}

Нет.

#### Возвращаемый результат {#get-widget-config-result}

JSON-объект вида:

```json
{
  "widgetConfig": {
    ...
    "actionParams": {
      "enable": "<boolean>",
      "fields": "<string[]>"
    }
  }
}
```

Где:

* `actionParams` — настройки фильтрации чарта чартом:

  * `enable` (_логический_) — флаг, включена ли фильтрация.
  * `fields` (_массив строк_) — поля, по которым фильтрует чарт.

#### Пример {#get-widget-config-example}

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

{% list tabs %}

- Вкладка Config

  Содержимое вкладки [Config](tabs.md#config):

  ```js
  module.exports = {
      events: {
          click: {
              handler: [{type: 'setActionParams'}],
              scope: 'point',
          },
      },
  };
  ```

- Вкладка Prepare

  Содержимое вкладки [Prepare](tabs.md#prepare):

  ```js
  const seriesData = [
      [
          {
              y: 5,
              custom: {actionParams: {'Apples': 'John'}},
          },
          {
              y: 3,
              custom: {actionParams: {'Oranges': 'John'}},
          },
          {
              y: 4,
              custom: {actionParams: {'Pears': 'John'}},
          },
          {
              y: 7,
              custom: {actionParams: {'Grapes': 'John'}},
          },
          {
              y: 2,
              custom: {actionParams: {'Bananas': 'John'}},
          },
      ],
      [
          {
              y: 2,
              custom: {actionParams: {'Apples': 'Jane'}},
          },
          {
              y: 2,
              custom: {actionParams: {'Oranges': 'Jane'}},
          },
          {
              y: 3,
              custom: {actionParams: {'Pears': 'Jane'}},
          },
          {
              y: 2,
              custom: {actionParams: {'Grapes': 'Jane'}},
          },
          {
              y: 1,
              custom: {actionParams: {'Bananas': 'Jane'}},
          },
      ],
      [
          {
              y: 3,
              custom: {actionParams: {'Apples': 'Joe'}},
          },
          {
              y: 4,
              custom: {actionParams: {'Oranges': 'Joe'}},
          },
          {
              y: 4,
              custom: {actionParams: {'Pears': 'Joe'}},
          },
          {
              y: 2,
              custom: {actionParams: {'Grapes': 'Joe'}},
          },
          {
              y: 5,
              custom: {actionParams: {'Bananas': 'Joe'}},
          },
      ]

  ];

  const widgetSettings = Editor.getWidgetConfig();
  if ('widgetConfig' in widgetSettings && 'enable' in widgetSettings.widgetConfig) {
      Editor.updateConfig({title: ...});
  }

  module.exports = {
      graphs: [
          {
              name: 'John',
              data: seriesData[0],
          },
          {
              name: 'Jane',
              data: seriesData[1],
          },
          {
              name: 'Joe',
              data: seriesData[2],
          },
      ],
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
  };
  ```

- Результат

  Если на дашборде включена фильтрация чартом, то в результате выполнения в `widgetSettings` придет конфигурация с настройкой включенной фильтрации.

{% endlist %}


## Editor.resolveInterval(arg) {#resolve-interval}

Преобразовывает интервал времени в пару значений с началом и концом этого интервала.

#### Поддерживаемые виды чартов {#resolve-interval-charts}

Все.

#### Аргументы {#gresolve-interval-args}

`arg` (_строка_) — строка в формате интервала.

#### Возвращаемый результат {#resolve-interval-result}

Объект `{from, to}`, где `from/to` — ISO дата, если строка соответствует формату, иначе — `null`.

#### Пример {#resolve-interval-example}

```js
// время на данный момент: 2020-02-26T07:05:52.552Z
const {from, to} = Editor.resolveInterval('__interval___relative_-1y___relative_+10d_eM');
// from === 2019-02-26T00:00:00.000Z
// to === 2020-03-31T23:59:59.999Z
```

```js
// время на данный момент: 2020-02-26T07:05:52.552Z
const interval = Editor.resolveInterval('__interval_2019-01-01T07:08:25.941Z___relative_+1h');
// interval.from === 2019-01-01T07:08:25.941Z
// interval.to === 2020-02-26T08:05:52.552Z
```

```js
// время на данный момент: 2020-02-26T07:05:52.552Z
const interval = Editor.resolveInterval('__interval_2020.01.15___relative_-0d');
// interval === null
```

**Примечание:** начало и конец интервала, прописанного на вкладке [Params](tabs.md#params) или указанного в URL, будут автоматически пропущены через вспомогательный метод для [относительной даты](#resolve-relative). Однако в случае, если значение `начала`/`конца` интервала не соответствует формату, то вместо `null` будет возвращено исходное значение.

Например:

Вкладка **Params:**
```js
module.exports = {
    first: '__interval_2020-01-01T12:30:11.324Z___relative_+1d',
    second: '',
    incorrect: '__inteval_01.01.2020___relative_-1d'
}
```

Параметры **url:** `...?second=__interval___relative_-1y_eQ_2021`
```js
// время на данный момент: 2020-02-20T12:30:11.324Z
const params = Editor.getParams();
// params === {
//   first: ['__interval_2020-01-01T12:30:11.324Z_2020-02-21T23:59:59.999Z'],
//   second: ['__interval_2019-03-31T23:59:59.999Z_2021'],
//   incorrect: ['__inteval_01.01.2020___relative_-1d']
// }
```

## Editor.resolveOperation() {#resolve-oper}

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

#### Поддерживаемые виды чартов {#resolve-oper-charts}

Все.

#### Аргументы {#resolve-oper-args}

Нет.

#### Пример {#resolve-oper-example}

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

{% list tabs %}

- Вкладка Prepare

  Содержимое вкладки [Prepare](tabs.md#prepare):

  ```js
  Editor.resolveOperation("__gt_42");
  ```

- Результат

  ```json
      operation: "GT", 
      value: "42",
  ```

{% endlist %}

## Editor.resolveRelative(arg) {#resolve-relative}

Принимает строку в формате относительной даты, возвращает ISO дату, если строка соответствует формату, иначе — `null`.

#### Поддерживаемые виды чартов {#resolve-relative-charts}

Все.

#### Аргументы {#gresolve-relative-args}

`arg` (_строка_) — строка в формате относительной даты.

#### Возвращаемый результат {#resolve-relative-result}

ISO дата, если переданный аргумент `arg` соответствует формату, иначе — `null`.

#### Пример {#resolve-relative-example}

```js
// время на данный момент: 2020-02-18T09:14:56.123Z
const date = Editor.resolveRelative('__relative_-7d');
// date === 2020-02-11T00:00:00.000Z
```

```js
// время на данный момент: 2020-02-18T09:14:56.123Z
const date = Editor.resolveRelative('__relative_+30m_sh');
// date === 2020-02-18T09:00:00.000Z
```

```js
const date = Editor.resolveRelative('2020-01-01');
// date === null
```

**Примечание:** относительные даты, прописанные на вкладке [Params](tabs.md#params) или указанные в URL, будут автоматически пропущены через вспомогательный метод. Однако в случае, если значение параметра не соответствует формату относительной даты, вместо `null` будет возвращено исходное значение.

Например:

Вкладка **Params:**
```js
module.exports = {
    date_min: '2020-01-01',
    date_max: '__relative_+1d_sw',
    incorrect: '_relative_d1',
}
```

Параметры **url:** `...?date_min=__relative_-7d`
```js
// время на данный момент: 2020-02-20T12:30:11.324Z
const params = Editor.getParams();
// params === {
//   date_min: ['2020-02-13T00:00:00.000Z'],
//   date_max: ['2020-02-17T00:00:00.000Z'],
//   incorrect: ['_relative_d1']
// }
```

## Editor.setChartsInsights(args) {#set-insights}

Добавляет уведомление в чарт.

#### Поддерживаемые виды чартов {#set-insights-charts}

Все.

#### Аргументы {#set-insights-args}

`args` — массив JSON-объектов вида:

```json
{
  "title": "<string>",
  "message": "<string>",
  "level": "<string>",
  "locator": "<string>",
}
```

Где:

* `title` (_строка_) — заголовок уведомления.
* `message` (_строка_) — текст уведомления на языке разметки [Markdown](widgets/markdown.md).
* `level` (_строка_) — тип уведомления:

  * `info` — примечание.
  * `warning` — предостережение.
  * `critical` — ограничение.

  Тип уведомления определяет его приоритет и отображаемый значок. Если в чарт добавлено более одного уведомления, в свернутом виде отображается значок только одного уведомления.

* `locator` (_строка_) — уникальный идентификатор для каждого уведомления в пределах чарта.

#### Пример {#set-insights-example}

{% list tabs %}

- Вкладка Prepare

  Содержимое вкладки [Prepare](tabs.md#prepare):


  ```js
  Editor.setChartsInsights([
      {
          title: 'markdown',
          message: 'Используй [markdown](https://yandex.cloud/ru/docs/datalens/charts/editor/widgets/markdown)',
          level: 'critical',
          locator: '1'
      },
      {
          title: 'Список',
          message: 'Для перехода на новую строку используй разделитель \\n \n- раз\n- два\n- три',
          level: 'info',
          locator: '4'
      },
      {
          title: 'Таблица',
          message: 'Заголовок | Заголовок \n:--- | :--- |\nТекст | Текст ',
          level: 'warning',
          locator: '2'
      },
      {
          title: 'Внимание',
          message: 'Данные будут недоступны во время завтрашних учений',
          level: 'critical',
          locator: 'qaz'
      }
  ]);
  ```


- Результат

  ![screenshot](../../../_assets/datalens/editor/notifications.png)

{% endlist %}

#### Примеры чартов {#set-insights-charts-example}


[Пример чарта с уведомлениями](https://datalens.yandex/nvkfwnekf9xy9#Editor.%20setChartsInsights(args))



## Editor.setRawData(data) {#set-raw-data}

Задает структурированные данные чарта. Используется для двух задач:

* Экспорт данных Advanced-чарта в форматы CSV, XLSX и Markdown. Без вызова метода экспорт для Advanced-чарта недоступен.
* Работа Нейроаналитика: если данные заданы, Нейроаналитик будет использовать их вместо парсинга HTML-разметки чарта.

#### Поддерживаемые виды чартов {#set-raw-data-charts}

[Advanced-чарт](widgets/advanced.md).

#### Аргументы {#set-raw-data-args}

`data` (_массив_) — массив с данными. Поддерживаемые форматы:

* Массив объектов: `[{x: 1, y: 2}, ...]`
* Массив массивов (матрица): `[["header1", "header2"], [1, 2], ...]`
* Массив примитивов: `[1, 2, 3]`

#### Возвращаемый результат {#set-raw-data-result}

Нет.

#### Пример {#set-raw-data-example}

{% list tabs %}

- Вкладка Prepare

  Содержимое вкладки [Prepare](tabs.md#prepare):

  ```js
  const data = [
      {x: 1, y: 10},
      {x: 2, y: 20},
      {x: 3, y: 30},
  ];

  Editor.setRawData(data);

  module.exports = {
      render: Editor.wrapFn({
          fn: function() {
              return 'Hello world';
          },
      }),
  };
  ```

{% endlist %}

## Editor.updateActionParams() {#update-action-params}

Обновляет объект с [фильтрующими (action) параметрами](cross-filtration.md).

#### Поддерживаемые виды чартов {#update-action-params-charts}

* [График (Gravity UI Charts)](widgets/gravity-ui.md)
* [Таблица](widgets/table.md)
* [Advanced-чарт](widgets/advanced.md)

#### Аргументы {#update-action-params-args}

JSON-объект вида:

```json
{
  "key": "value"
}
```

Где:

* `key` (_строка_) — имя параметра.
* `value` (_массив строк_) — значения параметров, которыми фильтрует текущий чарт.

{% note info %}

В чартах можно использовать числовые или логические значения для параметров. Тогда в `value` будет массив значений этих типов. Но параметры с дашборда передаются только в виде строк. Поэтому рекомендуется всегда приводить значения параметров к строке или массиву строк, чтобы избежать несогласованности отображения данных в разных состояниях виджета.

{% endnote %}

#### Возвращаемый результат {#update-action-params-result}

Нет.

#### Пример {#update-action-params-example}

{% list tabs %}

- Вкладка Params

  Содержимое вкладки [Params](tabs.md#params):

  ```js
  module.exports = {
      "Year": "2024",
      "City": ["Moscow", "Sochi"]
  };
  ```

- Вкладка Prepare

  Содержимое вкладки [Prepare](tabs.md#prepare):

  ```js
  const actionParams = Editor.updateActionParams({"City": "Moscow"});
  ```

- Результат

  Значение фильтрующих параметров (через Editor.getActionParams) после выполнения вкладки [Sources](tabs.md#sources):

  ```json
  {
    "City": ["Moscow"]
  }
  ```

{% endlist %}

#### Примеры чартов {#get-action-params-chart-examples}


[Пример кросс-фильтрации](https://datalens.yandex/nvkfwnekf9xy9#Editor.getActionParams()%2C%20Editor.updateActionParams(args)%2C%20Editor.getParam(args)) — клик по Advanced-чарту слева фильтрует Markdown справа.




## Editor.updateParams(params) {#update-params}

Доопределяет параметры чарта аргументом `params`.

Не рекомендуем обновлять параметры внутри чартов и контролов, т.к. могут возникнуть проблемы в работе компоненты и связанных элементов. Но в случае крайней необходимости стоит использовать этот метод вместо мутации исходного объекта `params`. В случае мутации не гарантируется стабильность работы чарта.


#### Поддерживаемые виды чартов {#update-params-charts}

Все.

{% note info %}

Рекомендуется использовать только для [контролов](widgets/controls.md).

{% endnote %}

#### Аргументы {#update-params-args}

`params` — JSON-объект вида:

```json
{
  "key": "value"
}
```

Где:

* `key` (_строка_) — имя параметра.
* `value` (_массив строк_) — значения параметра. Одиночные значения также передаются внутри массива.

#### Пример {#update-params-example}

{% list tabs %}

- Вкладка Params

  ```js
  module.exports = {
      paramA: '1',
      paramB: 'Значение 1',
  }
  ```

- Вкладка Controls

  ```js
  const {paramA} = Editor.getParams();
  
  const currentParamA = Number(paramA[0]);
  
  Editor.updateParams({paramB: [`Значение ${currentParamA}`]})
  
  module.exports = [
      {
          type: 'button',
          label: 'Поменять значение',
          theme: 'action',
          onClick: {
              action: 'setParams',
              args: {
                  paramA: [currentParamA > 2 ? 1 : currentParamA + 1] 
              }
          },
          updateOnChange: true,
      },
      {
          type: 'select',
          param: 'paramB',
          content: ['Значение 1', 'Значение 2', 'Значение 3'],
      }
  ];
  ```

- Результат

  Кнопка при каждом нажатии меняет значение в селекте по циклу: `Значение 1`, `Значение 2`, `Значение 3`.

  Изначально значения параметров: `paramA: '1'` и `paramB: 'Значение 1'`.
  
  После нажатия на кнопку на вкладке **Controls** значение параметра `paramA` увеличивается на `1`. Если значение больше `2`, ему присваивается значение `1`. Значение параметра `paramB` меняется с помощью метода `Editor.updateParams()` на `Значение ${currentParamA}`, где `{currentParamA}` — текущее значение параметра `paramA`.
  
  После этого селектор будет перерисован с учетом текущего значения параметра `paramB`.

{% endlist %}

## Editor.wrapFn(conf) {#wrap}

Функция для формировании обработчика чарта, исполняется в браузере в песочнице с ограниченным доступом к API браузера. Избегайте тяжелых вычислений, которые могут замедлить отображение чарта. А также следует минимизировать объем передаваемой информации в `args`.


Функция `Editor.wrapFn` чувствительна к ошибкам синтаксиса. Поэтому при возникновении проблем с использованием функции в первую очередь проверьте синтаксис на валидность.

Ограничения времени исполнения функции `Editor.wrapFn`:

* для одной функции — 100 мс;
* для одной функции [Advanced-чарта](widgets/advanced.md) — 1,5 с;
* суммарное время исполнения всех функций одного чарта — 3 с.

#### Поддерживаемые виды чартов {#wrap-charts}


Все.



#### Аргументы {#wrap-args}

`conf` — объект вида:

```js
fn: function(highchartsArgs1, …, highchartsArgsN, arg1, …, argN) {
    ...
},
args: [arg1, …, argN],
libs: [lib1, …, libN],
```

Где:

* `fn` — функция-обработчик. Не может быть ссылкой или содержать ссылки на сторонние переменные (в том числе функции).
* `args` — массив аргументов для функции-обработчика. Эти аргументы передаются после всех встроенных аргументов метода.

  {% note info %}

  Передаваемые в `args` объемные параметры снижают скорость выполнения скрипта, поэтому рекомендуется передавать в них минимально возможный объем информации.

  {% endnote %}

* `libs` — массив строк, в которых указываются библиотеки, используемые в функции-обработчике. Рекомендуется указывать имя библиотеки вместе с версией, например `date-utils@2.3.0` или `date-utils@2.5.3`. Если указать имя библиотеки без версии, например, `date-utils`, будет использоваться последняя версия (`latest`), которая опубликована в [npm registry](https://www.npmjs.com/).

  Доступные значения библиотек для подключения: `date-utils@2.3.0`, `date-utils@2.5.3`(алиас `date-util`), `d3@7.9.0` (алиас `d3`), `d3-chord@3.0.1` (алиас `d3-chord`), `d3-sankey@0.12.3` (алиас `d3-sankey`).

  {% note warning %}

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

  {% endnote %}


#### Примеры {#wrap-example}

Пример для Advanced-чарта:

{% list tabs %}

- Вкладка Prepare

  ```js
   module.exports = {
      render: Editor.wrapFn({
          fn: function() {
              return 'Hello world';
          },
      }),
  };
  ```

{% endlist %}

#### Примеры чартов {#wrap-charts-example}

[Вариант использования с подключением d3 библиотеки на примере визуализации Advanced-чарт](https://datalens.yandex/nvkfwnekf9xy9#Editor.%20wrapFn(args))