Вкладки

Статья создана

Обновлена 16 июня 2026 г.

Meta
Params
- Специальные параметры
- Ограничения
Sources
Config
Prepare
Controls
Activities

Конфигурация чарта настраивается с помощью кода на JavaScript, который заполняется на вкладках в редакторе в интерфейсе.

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

Код функций, расположенный внутри Editor.wrapFn, выполняется на клиенте в браузере пользователя. Это накладывает ряд ограничений, подробнее можно почитать в разделе Доступные методы.

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

Params

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

Формат

Пример

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

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

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

Значения всех актуальных параметров на последующих вкладках можно получить с помощью метода Editor.getParams(), а получить актуальное значение параметра по его названию можно с помощью Editor.getParam(name).

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

&period=40&metric=2012&metric=2014

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

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

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

Специальные параметры

Относительная дата

Форматы:

__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)

Интервал

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

начало/конец - относительная дата или 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)

Ограничения

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

Зарезервированные ключи, которые нельзя использовать:
- tab
- state
- mode
- focus
- grid
- scale
- tz
- timezone
- date
- datetime
- _action_params
- _autoupdate
- _opened_info
- report_page
- preview_mode
Параметры с такими ключами будут проигнорированы и не будут сохранены.
В ссылках могут быть использованы только те параметры, которые заданы в настройках дашборда. В противном случае они будут проигнорированы. Например, если в ссылке будет указано ?product=Furniture, но в настройках дашборда не будет задан параметр product (даже с пустым значением), то такой параметр будет проигнорирован.
Параметры дашборда в любом случае будут применены к виджетам, что может привести к ошибкам в запросах данных.

Sources

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

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

Подключение к источнику данных через датасет

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

Формат

Пример 1

Пример 2

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

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

Где:

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

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

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

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

Где:

datasetId — id датасета, описанного на вкладке Meta и полученного с помощью метода Editor.getId(arg).
columns — массив имен колонок датасета.

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

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

Вкладка Sources

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

Полезные ссылки

Быстрый старт по созданию таблицы с подключением через датасет

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

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

Формат

Пример

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

Где:

qlConnectionId — id подключения, описанного на вкладке Meta и полученного с помощью метода Editor.getId(arg).
sql_query — запрос данных.

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

Полезные ссылки

Быстрый старт по созданию таблицы с подключением через SQl-запрос

Подключение к источнику данных через API Connector

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

Формат

Пример

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

Где:

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

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

Полезные ссылки

Быстрый старт по созданию таблицы с подключением через API Connector

Config

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

Доступно для типов визуализаций: График (Gravity UI Charts) и Таблица. Возможное содержимое зависит от конкретного типа визуализации.

Prepare

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

Получение загруженных данных из источников с помощью метода Editor.getLoadedData().
Обработка и приведение к нужному формату (зависит от типа визуализации).
Запись результатов в module.exports, откуда они попадают на отрисовку.

Доступно для типов визуализаций: График (Gravity UI Charts), Advanced-чарт, Таблица, Markdown.

Controls

В декларативном стиле описываются возможные контролы — элементы управления на чарте. В отличие от селекторов дашборда и селекторов отчета, контролы влияют только на текущий чарт, и их состояние не созраняется после обновления страницы.

Вкладка доступна для всех типов визуализаций.

Подробный формат вкладки зависит от типа контролов.

Activities

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

Доступно для типов визуализаций: Селектор, Таблица и График (Gravity UI Charts).

Формат

Пример

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

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,
      };
  }
};

Доступные методы

Метод sources() — функция, возвращающая объект для подключения к источнику данных. Используется для отправки запросов. Формат идентичен формату вкладки Sources.
```
sources: ({params}) => ({     
    sourceKey: {         
        apiConnectionId: Editor.getId("mySourceKeyName"),         
        path: '/api/endpoint',         
        method: 'POST',         
        body: { /* данные запроса */ }     
    } 
})
```
Где:
- params — объект с параметрами из элементов управления дашборда.
- apiConnectionId — ID подключения с типом API Connector, описанного на вкладке Meta и полученного с помощью метода Editor.getId(arg).
- mySourceKeyName — имя-алиас источника данных, описанного на вкладке Meta.
- path — путь к API после хоста.
- method — метод запроса.
- body — данные запроса.
Метод handleResponse() — функция, возвращающая объект в формате, зависящем от типа действия. Обрабатывает ответ от сервера и определяет действие в интерфейсе.
```
    handleResponse: ({data}) => { /* обработка ответа */ }
```
Где data — объект с ответами от источников данных.

Доступные действия

toast — всплывающее уведомление:
Формат

Пример
```
{
    action: "toast",
    title: "<string>",
    content: "<string>",
    type: "warning"|"success"|"normal"|"info"|"danger"|"utility",
}
```
Где:
- action — тип действия, которое нужно вызывать после отправки запроса. Значение toast показывает компоненту всплывающего кратковременного уведомления в правом нижнем углу.
- title — заголовок уведомления.
- content — содержимое уведомления.
```
{
    action: 'toast',
    title: 'Заголовок',
    content: 'Текст уведомления' 
}
```
popup — всплывающее окно:
Формат

Пример
```
{
    action: "popup",
    title: "<string>",
    /** текст или разметка в формате markdown */
    content: "<string>",
}
```
Где:
- action — тип действия, которое нужно вызывать после отправки запроса. Значение popup показывает компоненту всплывающего окна по центру экрана.
- title — заголовок окна.
- content — содержимое окна.
```
{
    action: 'popup',
    title: 'Заголовок',
    content: 'Содержимое окна' 
}
```
setParams — установка параметров:
Формат

Пример
```
{
    action: "setParams",
    params: object,
}
```
Где:
- action — тип действия, которое нужно вызывать после отправки запроса. Значение setParams обновляет значения параметров из переданного поля params.
- params — объект со списком ключей и значений параметров для установки.
```
{
    action: "setParams",
    params: {p: ["1"]}
}
```

Выполнение действий

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

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

Ограничения

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

Вкладки

MetaMeta

ParamsParams

Специальные параметрыСпециальные параметры

Относительная датаОтносительная дата

ИнтервалИнтервал

ОграниченияОграничения

SourcesSources

Подключение к источнику данных через датасетПодключение к источнику данных через датасет

Полезные ссылкиПолезные ссылки

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

Полезные ссылкиПолезные ссылки

Подключение к источнику данных через API ConnectorПодключение к источнику данных через API Connector

Полезные ссылкиПолезные ссылки

ConfigConfig

PreparePrepare

ControlsControls

ActivitiesActivities

Доступные методыДоступные методы

Доступные действияДоступные действия

Выполнение действийВыполнение действий

ОграниченияОграничения

Полезные ссылкиПолезные ссылки

Была ли статья полезна?

Meta

Params

Специальные параметры

Относительная дата

Интервал

Ограничения

Sources

Подключение к источнику данных через датасет

Полезные ссылки

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

Полезные ссылки

Подключение к источнику данных через API Connector

Полезные ссылки

Config

Prepare

Controls

Activities

Доступные методы

Доступные действия

Выполнение действий

Ограничения

Полезные ссылки