Связаться с намиПодключиться

Вкладки

Статья создана
Обновлена 9 апреля 2025 г.

Примечание

Функциональность доступна только в рамках тарифного плана Business.

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

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

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

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

Meta

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

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

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

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

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

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

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

Интервал

Формат: __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

Ограничения

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

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

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

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

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

  • Параметры дашборда в любом случае будут применены к виджетам, что может привести к ошибкам в запросах данных.

Sources

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

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

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

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

Возвращаемый на вкладке 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 — массив имен колонок датасета.

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

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

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

См. также

Подключение к источнику данных через 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',
    }
}

См. также

Config

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

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

Prepare

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

  • Получение загруженных данных из источников с помощью метода Editor.getLoadedData().

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

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

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

Controls

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

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

Предыдущая
Создание таблицы на основе API Connector
Следующая
Источники