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

# Вкладки

Конфигурация чарта настраивается с помощью кода на JavaScript, который заполняется на вкладках в редакторе в [интерфейсе](index.md#interface).

Код формирования конфигурации чарта, описанный на вкладках, выполняется на сервере. На этой странице представлены форматы заполнения каждой из вкладок.

Код функций, расположенный внутри `Editor.wrapFn`, выполняется на клиенте в браузере пользователя. Это накладывает ряд ограничений, подробнее можно почитать в разделе [Доступные методы](methods.md#wrap).

Вкладки выполняются в определенном порядке.



## Meta {#meta}

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

На вкладке **Meta** добавляются id объектов использующихся источников для чарта/селектора. Описание id объектов является обязательным. Эта информация используется для определения, с какими подключениями и датасетами связан чарт, а также для диалога связанных объектов, при копировании воркбука и при публикации в Public.

Идентификаторы объектов можно скопировать из меню соответствующего объекта или в навигации, нажав **Копировать ID**. Идентификатор будет сохранен в буфере обмена.

В качестве ключа необходимо указать произвольное имя-алиас, которое будет присвоено данному источнику данных в чарте. Далее на вкладке **Source** можно получить это имя-алиас с помощью [`Editor.getId(arg)`](methods.md#get-id) и указать его в качестве источника.

{% list tabs %}

- Формат

  ```js
  {
      "links": {
          "<string>": "<string>",
          ...
      }
  }
  ```

- Пример

  ```js
  {
      "links": {
          "myDatasetKeyName": "qvnkqzm0wstyf",
          "connectionKey": "ch96co0501xy1",
          "apiConnectionKey": "uzrou8sqm5zaj"     
      } 
  }
  ```

{% endlist %}


## Params {#params}

Вкладка предназначена для установки дефолтных параметров чарта/селектора. Все параметры, которые используются в чарте/селекторе, должны быть описаны на вкладке **Params**. Значения параметров являются массивами строк. Если требуется передать только одно значение, его нужно оформить в виде массива из одного элемента.

{% list tabs %}

- Формат

  ```js
  {
      "<string>": "<string>",
      ...
  }
  ```

- Пример

  
  ```js
  module.exports = {
      count: ['10'],
      setting: ['value'],
  };
  ```


{% endlist %}

В случае, если на дашборде или в отчете установить в настройках виджета другие значения параметров для такого чарта, то значения со вкладки **Params** будут переопределены. Также значения будут переопределены, если в селекторе дашборда или отчета выбрать значения, отличные от значений в селекторе по умолчанию или если применить кросс-фильтрацию другим чартом. [Подробнее о переопределении параметров](../../dashboard/dashboard_parameters.md#params-applying)

Значения всех актуальных параметров на последующих вкладках можно получить с помощью метода [Editor.getParams()](methods.md#get-params), а получить актуальное значение параметра по его названию можно с помощью [Editor.getParam(name)](methods.md#get-param).

Переопределить параметры можно через URL графика. Например:

```text
&period=40&metric=2012&metric=2014
```

Такой URL, наложенный на параметры по умолчанию, описанные выше, образует следующий объект:

```js
{
  period: 40,
  metric: ['2012', '2014'],
  id: ['1215', '1217', '979', '483']
}
```

При изначальной отрисовке дашборда или отчета параметры, которые связывают JS-селектор с чартами на дашборде или в отчете, остаются статичными. Если параметр динамически вычисляется в коде селектора, то перерисовка чартов с обновленными значениями параметра произойдет только при последующем изменении селектора.

### Специальные параметры {#special-parameters}

#### Относительная дата {#relative-date}

**Форматы:**

* `__relative_<знак><количество><единица_измерения>`
* `__relative_<знак><количество><единица_измерения>_<тип_приведения><единица_измерения>`

- `<знак>`: `+` или `-`
- `<единица_измерения>`:
  - `y` - год
  - `Q` - квартал
  - `M` - месяц
  - `w` - неделя
  - `d` - день
  - `h` - час
  - `m` - минута
  - `s` - секунда
  - `ms` - миллисекунда
- `<тип_приведения>`:
  - `s` - к началу
  - `e` - к концу

**Пример:**

Если время на данный момент `2020-03-24T23:30:39.874Z`, то
- `__relative_-7d` - семь дней назад - ` 2020-03-17T00:00:00.000Z`
- `__relative_+30m` - через 30 минут - ` 2020-03-25T00:00:39.874Z`
- `__relative_-0d` - сегодня - `2020-03-24T00:00:00.000Z`
- `__relative_-0h` - сейчас - `2020-03-24T23:30:39.874Z`
- `__relative_-3M_sQ`
  * минус 3 месяца - `2019-12-24T00:00:00.000Z`
    * приведенные к началу квартала - `2019-10-01T00:00:00.000Z`
- `__relative_+15s_em`
  * плюс 15 секунд - `2020-03-24T23:30:54.874Z`
    * приведенные к концу минуты - `2020-03-24T23:30:59.999Z`

**Примечание:** если не указаны приведения, то для единиц измерения от дня и выше время приводится к началу дня,
т.е. `00:00:00.000`, а для единиц измерения меньше дня используется текущее время.

**Вспомогательный метод:** [Editor.resolveRelative(arg)](methods.md#resolve-relative)

#### Интервал {#interval}

**Формат:** `__interval_<начало>_<конец>`

`начало`/`конец` - [относительная дата](#relativedate) или ISO дата.

**Пример:**

Если время на данный момент `2020-03-24T23:30:39.874Z`, то
- `__interval_2019-03-11T09:35:48_2019-12-28T09:35:48`
  * с `2019-03-11T09:35:48` по `2019-12-28T09:35:48`
- `__interval_2019-01-17T09:35:48___relative_+0d`
  * с `2019-01-17T09:35:48` по сегодня (`2020-03-24T23:59:59.999Z`)
- `__interval___relative_-2w_sM___relative_+1d`
  * от двух недель назад - `2020-03-10T00:00:00.000Z`
    * приведенных к началу месяца - `2020-03-01T00:00:00.000Z`
  * до завтра - `2020-03-25T23:59:59.999Z`

**Вспомогательный метод:** [Editor.resolveInterval(arg)](methods.md#resolve-interval)

### Ограничения {#params-restrictions}

При использовании параметров существуют следующие ограничения:

* Зарезервированные ключи, которые нельзя использовать:

  * `tab`
  * `state`
  * `mode`
  * `focus`
  * `grid`
  * `scale`
  * `tz`
  * `timezone`
  * `date`
  * `datetime`
  * `_action_params`
  * `_autoupdate`
  * `_opened_info`
  * `report_page`
  * `preview_mode`

  Параметры с такими ключами будут проигнорированы и не будут сохранены.

* В ссылках могут быть использованы только те параметры, которые заданы в настройках дашборда. В противном случае они будут проигнорированы. Например, если в ссылке будет указано `?product=Furniture`, но в настройках дашборда не будет задан параметр `product` (даже с пустым значением), то такой параметр будет проигнорирован.
* Параметры дашборда в любом случае будут применены к виджетам, что может привести к ошибкам в запросах данных.

## Sources {#sources}


На этой вкладке определяется структура для запроса данных, которые нужно визуализировать.

Данные можно запросить, используя:

* [датасет](#sources-dataset);
* [подключение к базам данных через SQL-запрос](#sources-database);
* [подключение через API Connector](#sources-api-connector).

### Подключение к источнику данных через датасет {#sources-dataset}

Для использования данных из датасета:


{% list tabs %}

- Формат

  Возвращаемый на вкладке JSON-объект вида:

  ```json
  {
      datasetId: "<string>",
      data: {
          fields: [
              {
                  ref: {
                      title: "<string>",
                      type: "title"| "id",
                  },
              },
              ...
          ],
      }
  }
  ```

  Где:

  * `datasetId` — id датасета, описанного на вкладке [Meta](#meta) и полученного с помощью метода [Editor.getId(arg)](methods.md#get-id).
  * `fields` — массив имен колонок датасета:
    
    * `title` — название или id колонки;
    * `type` — тип колонки, указанной в title (выбирать колонку по названию или по id).


- Пример 1

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

- Пример 2

  Для удобства можно использовать вспомогательный служебный модуль для работы с датасетами, тогда Пример 1 будет выглядеть так:

  ```js
  const {buildSource} = require('libs/dataset/v2');
  module.exports = {
      'myDatasetSource': buildSource({
          datasetId: Editor.getId('myDatasetKeyName'),
          columns: ['PaymentType', 'OrderYear', 'OrderMonth'],
      }),
  };
  ```

  Где:

  * `datasetId` — id датасета, описанного на вкладке [Meta](#meta) и полученного с помощью метода [Editor.getId(arg)](methods.md#get-id).
  * `columns` — массив имен колонок датасета.

  В дальнейшем появится дополнительный параметр, в котором можно будет передать массив идентификаторов колонок датасета.


{% endlist %}

Пример с получением только списка полей из датасета:

{% list tabs %}


- Вкладка Sources

  ```js
  module.exports = {
    fields: {
        datasetId: Editor.getId('mySource'),
        path: 'fields'
    }
  };
  ```


{% endlist %}

#### Полезные ссылки {#see-also-dataset}

* [Быстрый старт по созданию таблицы с подключением через датасет](quickstart/from-dataset.md)

### Подключение к источнику данных через SQL-запрос {#sources-database}

Для получения данных из подключения (через SQL запрос):

{% list tabs %}

- Формат

  ```json
  {
      qlConnectionId: "<string>",
      data: {
          sql_query: "<string>",
      },
  }
  ```

  Где:

  * `qlConnectionId` — id подключения, описанного на вкладке [Meta](#meta) и полученного с помощью метода [Editor.getId(arg)](methods.md#get-id).
  * `sql_query` — запрос данных.

  
- Пример

  ```js
  module.exports = {
      'myDataSource': {
          qlConnectionId: Editor.getId('connectionKey'),
          data: {
              sql_query: 'SELECT 1 + 1',
          },
      }
  }
  ```


{% endlist %}

#### Полезные ссылки {#see-also-database}

* [Быстрый старт по созданию таблицы с подключением через SQl-запрос](quickstart/from-database.md)

### Подключение к источнику данных через API Connector {#sources-api-connector}

Для получения данных с помощью API Connector:

{% list tabs %}

- Формат

  ```json
  {
      apiConnectionId: "<string>",
      path: "<string>",
      method: "GET"|"POST",
      body: <object>,
  }
  ```

  Где:

  * `apiConnectionId` — id подключения с типом API Connector, описанного на вкладке [Meta](#meta) и полученного с помощью метода [Editor.getId(arg)](methods.md#get-id).
  * `path` — путь к API после хоста.
  * `method` — метод: поддерживаются GET и POST.
  * `body` — тело запроса.


- Пример

  ```js
  module.exports = {
      'myApiDataSource': {
          apiConnectionId: Editor.getId('apiConnectionKey'),
          path: '/html',
          method: 'GET',
      }
  }
  ```


{% endlist %}

#### Полезные ссылки {#see-also-api-connector}

* [Быстрый старт по созданию таблицы с подключением через API Connector](quickstart/from-api-connector.md)

## Config {#config}

В этой вкладке задаются настройки визуализации, например настройки кросс-чарт фильтрации.

Доступно для типов визуализаций: [График (Gravity UI Charts)](widgets/gravity-ui.md) и [Таблица](widgets/table.md). Возможное содержимое зависит от конкретного типа визуализации.


## Prepare {#prepare}

Вкладка отвечает за препроцессинг данных перед их передачей на отрисовку и предполагает следующие действия:

* Получение загруженных данных из источников с помощью метода [Editor.getLoadedData()](methods.md#get-loaded-data).

* Обработка и приведение к нужному формату (зависит от типа визуализации).

* Запись результатов в `module.exports`, откуда они попадают на отрисовку.

Доступно для типов визуализаций: [График (Gravity UI Charts)](widgets/gravity-ui.md), [Advanced-чарт](widgets/advanced.md), [Таблица](widgets/table.md), [Markdown](widgets/markdown.md).


## Controls {#controls}

В декларативном стиле описываются возможные контролы — элементы управления на чарте. В отличие от селекторов [дашборда](../../concepts/dashboard.md) и селекторов [отчета](../../reports/index.md), контролы влияют только на текущий чарт, и их состояние не сохраняется после обновления страницы.

Вкладка доступна для всех [типов визуализаций](widgets/index.md).

Подробный формат вкладки зависит от типа [контролов](widgets/controls.md).

## Activities {#activities}

Вкладка позволяет конфигурировать [интерактивные действия](#run-activities) для элементов дашборда, например, отправлять HTTP-запрос по клику на строку таблицы.

Доступно для типов визуализаций: [Селектор](widgets/controls.md), [Таблица](widgets/table.md) и [График (Gravity UI Charts)](widgets/gravity-ui.md).

{% list tabs %}

- Формат

  ```js
  module.exports = {
      sources: ({params}) => { /* конфигурация источников */ },
      handleResponse: ({data}) => { /* обработка ответа */ }
  }
  ```


- Пример

  ```js
  module.exports = {
    sources: ({params}) => {
        const ticketId = params.cells[0].value;
        return {
            todoList: {
                apiConnectionId: Editor.getId('todoListConnection'),
                path: `?ticketId=${ticketId}`,
                method: "GET",
            },
        }; 
    },
    handleResponse: ({data}) => {
        const ticket = data.todoList.data.body;
        return {
            action: 'popup',
            title: ticket.title,
            content: ticket.description,
        };
    }
  };
  ```


{% endlist %}

### Доступные методы {#activities-methods}

* Метод `sources()` — функция, возвращающая объект для подключения к источнику данных. Используется для отправки запросов. Формат идентичен формату вкладки [Sources](#sources).


  ```js
  sources: ({params}) => ({     
      sourceKey: {         
          apiConnectionId: Editor.getId("mySourceKeyName"),         
          path: '/api/endpoint',         
          method: 'POST',         
          body: { /* данные запроса */ }     
      } 
  })
  ```

  Где:
  
  * `params` — объект с параметрами из элементов управления дашборда.
  * `apiConnectionId` — ID подключения с типом [API Connector](../../operations/connection/create-api-connector.md), описанного на вкладке [Meta](#meta) и полученного с помощью метода [Editor.getId(arg)](methods.md#get-id).
  * `mySourceKeyName` — имя-алиас источника данных, описанного на вкладке Meta.
  * `path` — путь к API после хоста.
  * `method` — метод запроса.
  * `body` — данные запроса.


* Метод `handleResponse()` — функция, возвращающая объект в формате, зависящем от типа [действия](#activities-actions). Обрабатывает ответ от сервера и определяет действие в интерфейсе.

  ```js
      handleResponse: ({data}) => { /* обработка ответа */ }
  ```

  Где `data` — объект с ответами от источников данных.

### Доступные действия {#activities-actions}

* `toast` — всплывающее уведомление:

  {% list tabs %}

  - Формат

    ```json
    {
        action: "toast",
        title: "<string>",
        content: "<string>",
        type: "warning"|"success"|"normal"|"info"|"danger"|"utility",
    }
    ```

    Где:

    * `action` — тип действия, которое нужно вызывать после отправки запроса. Значение `toast` показывает компоненту всплывающего кратковременного уведомления в правом нижнем углу.
    * `title` — заголовок уведомления.
    * `content` — содержимое уведомления.

  - Пример

    ```js
    {
        action: 'toast',
        title: 'Заголовок',
        content: 'Текст уведомления' 
    }
    ```

  {% endlist %}

* `popup` — всплывающее окно:

  {% list tabs %}

  - Формат

    ```json
    {
        action: "popup",
        title: "<string>",
        /** текст или разметка в формате markdown */
        content: "<string>",
    }
    ```

    Где:

    * `action` — тип действия, которое нужно вызывать после отправки запроса. Значение `popup` показывает компоненту всплывающего окна по центру экрана.
    * `title` — заголовок окна.
    * `content` — содержимое окна.

  - Пример

    ```js
    {
        action: 'popup',
        title: 'Заголовок',
        content: 'Содержимое окна' 
    }
    ```

  {% endlist %}

* `setParams` — установка параметров:

  {% list tabs %}

  - Формат

    ```json
    {
        action: "setParams",
        params: object,
    }
    ```

    Где:

    * `action` — тип действия, которое нужно вызывать после отправки запроса. Значение `setParams` обновляет значения параметров из переданного поля `params`.
    * `params` — объект со списком ключей и значений параметров для установки.

  - Пример

    ```js
    {
        action: "setParams",
        params: {p: ["1"]}
    }
    ```

  {% endlist %}

### Выполнение действий {#run-activities}

Чтобы выполнить действия вкладки **Activities**, обработайте события элементов интерфейса:

* Для селекторов: на вкладке **Controls** для кнопки укажите действие `runActivity` по событию `onClick`.
* Для чартов **График (Gravity UI Charts)** и **Таблица**: настройте действие `runActivity` на вкладке **Config**.

### Ограничения {#activities-restrictions}

* На вкладке **Activities** доступен ограниченный набор источников данных для отправки запросов: запросы к датасетам, стандартным подключениям и подключениям API Connector.
* Функциональность на текущий момент доступна для следующих типов чартов: [Селектор](widgets/controls.md), [Таблица](widgets/table.md) и [График (Gravity UI Charts)](widgets/gravity-ui.md).


#### Полезные ссылки {#see-also-activities}

* [Практическое руководство с примером использования вкладки Activities в Editor](../../tutorials/create-editor-activities.md)

* [Пример использования вкладки Activities в Editor](https://datalens.yandex/nvkfwnekf9xy9?tab=vZX)