Вкладки

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

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

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

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

Meta

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

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

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

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

{
            "links": {
                "<string>": "<string>",
                ...
            }
        }
        
{
            "links": {
                "myDatasetKeyName": "qvnkqzm0wstyf",
                "connectionKey": "ch96co0501xy1",
                "apiConnectionKey": "uzrou8sqm5zaj"     
            } 
        }

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

Интервал

Формат: __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
Следующая
Источники