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

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

• Editor.generateHtml(arg)
• Editor.getActionParams()
• Editor.getCurrentPage()
• Editor.getId(arg)
• Editor.getLang()
• Editor.getLoadedData()
• Editor.getParam(name)
• Editor.getParams()
• Editor.getSortParams()
• Editor.getUserId()
• Editor.getUserLogin()
• Editor.getWidgetConfig()
• Editor.resolveInterval(arg)
• Editor.resolveOperation(args)
• Editor.resolveRelative(arg)
• Editor.setChartsInsights(args)
• Editor.setRawData(data)
• Editor.updateActionParams()
• Editor.updateParams(params)
• Editor.wrapFn(conf)

Editor.generateHtml(arg)Editor.generateHtml(arg)

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

Поддерживаемые виды чартовПоддерживаемые виды чартов

• График (Gravity UI Charts)
• Таблица
• Advanced-чарт

АргументыАргументы

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

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

Где:

• tag (строка) — тип HTML-тега, обязательное поле.

• style (JSON-объект) — описание CSS-свойств вида:

  {
    "key": "value"
  }
  

  Где:

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

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

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

Отображение тултипа по наведениюОтображение тултипа по наведению

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

• data-tooltip-content (строка, JSON-объект) — содержимое тултипа. Задается в виде строки или по аналогии с аргументом arg.

• data-tooltip-placement (строка) — местоположение тултипа:

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

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

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

Стили для цветовых темСтили для цветовых тем

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

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

ПримерыПримеры

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),
...

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

...
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'
            }
        },
    ]
}),
...

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',
                },
            ]
        }),
    },
};

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',
                },
            ]
        }),
    },
};

Editor.getActionParams()Editor.getActionParams()

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

Поддерживаемые виды чартовПоддерживаемые виды чартов

• График (Gravity UI Charts)
• Таблица
• Advanced-чарт

АргументыАргументы

Нет.

Возвращаемый результатВозвращаемый результат

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

{
  "key": "value"
}

Где:

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

ПримерПример

_ap_City=Moscow

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

const actionParams = Editor.getActionParams();

{
  "City": ["Moscow"]
}

Примеры чартовПримеры чартов

Пример кросс-фильтрации — клик по Advanced-чарту слева фильтрует Markdown справа.

Editor.getCurrentPage()Editor.getCurrentPage()

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

Поддерживаемые виды чартовПоддерживаемые виды чартов

Таблица.

АргументыАргументы

Нет.

Возвращаемый результатВозвращаемый результат

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

ПримерПример

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

const page = Editor.getCurrentPage();

Примеры чартовПримеры чартов

Пример чарта с пагинацией и сортировкой

Editor.getId(arg)Editor.getId(arg)

Возвращает id объекта из поля links со вкладки Meta.

Поддерживаемые виды чартовПоддерживаемые виды чартов

Все.

АргументыАргументы

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

Возвращаемый результатВозвращаемый результат

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

ПримерПример

{
  "links": {
      "myBestDataset": "tlzr1t5kto9cg"
  }
}

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

Editor.getLang()Editor.getLang()

Возвращает строку с языком, заданным в настройках текущего пользователя.

Поддерживаемые виды чартовПоддерживаемые виды чартов

Все.

АргументыАргументы

Нет.

Возвращаемый результатВозвращаемый результат

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

ПримерПример

const lang = Editor.getLang();

["ru"]

Editor.getLoadedData()Editor.getLoadedData()

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

Поддерживаемые виды чартовПоддерживаемые виды чартов

Все.

АргументыАргументы

Нет.

Возвращаемый результатВозвращаемый результат

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

ПримерПример

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

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',
        }],
    }),
};

const data = Editor.getLoadedData();

{
    "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"
                }
            ]
        }
    }
}

Примеры чартовПримеры чартов

Пример использования Editor.getLoadedData() в таблице с источником на основе датасета

Editor.getParam(name)Editor.getParam(name)

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

Поддерживаемые виды чартовПоддерживаемые виды чартов

Все.

АргументыАргументы

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

Возвращаемый результатВозвращаемый результат

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

ПримерПример

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

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

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

["2024"]

Примеры чартовПримеры чартов

Пример чарта с обращением к параметру по имени

Editor.getParams()Editor.getParams()

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

Поддерживаемые виды чартовПоддерживаемые виды чартов

Все.

АргументыАргументы

Нет.

Возвращаемый результатВозвращаемый результат

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

{
  "key": "value"
}

Где:

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

ПримерПример

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

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

const params = Editor.getParams();

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

Примеры чартовПримеры чартов

Пример использования функции получения всех примененных параметров

Editor.getSortParams()Editor.getSortParams()

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

Поддерживаемые виды чартовПоддерживаемые виды чартов

Таблица.

АргументыАргументы

Нет.

Возвращаемый результатВозвращаемый результат

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

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

Где:

• columnId (строка) — ID колонки, например 0_0_1_id=date_name=Дата;

• order (число или строка) — порядок сортировки. Возможные значения:

  • 1 — сортировка по возрастанию;
  • -1 — сортировка по убыванию;
  • __special_value__NaN — нет сортировки.

ПримерПример

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

const sort_params = Editor.getSortParams();

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

Примеры чартовПримеры чартов

Пример чарта с пагинацией и сортировкой

Editor.getUserId()Editor.getUserId()

Возвращает идентификатор субъекта IAM текущего пользователя.

Поддерживаемые виды чартовПоддерживаемые виды чартов

Все чарты в Editor.

АргументыАргументы

Нет.

Возвращаемый результатВозвращаемый результат

Строка с идентификатором субъекта IAM. Для публичного чарта, встраивания без пользовательской авторизации или запроса, в котором пользователь не определен, возвращается пустая строка.

ПримерПример

const userId = Editor.getUserId();

if (userId) {
    // Пользователь определен.
}

Editor.getUserLogin()Editor.getUserLogin()

Возвращает имя пользователя из атрибута preferredUsername текущей сессии IAM.

Поддерживаемые виды чартовПоддерживаемые виды чартов

Все чарты в Editor.

АргументыАргументы

Нет.

Возвращаемый результатВозвращаемый результат

Строка с именем пользователя. Для федеративного пользователя значение зависит от атрибутов, переданных поставщиком удостоверений. Если атрибут preferredUsername отсутствует, пользователь не определен или чарт открыт без пользовательской авторизации, возвращается пустая строка.

ПримерПример

const userLogin = Editor.getUserLogin();

if (userLogin) {
    // Имя пользователя доступно.
}

Editor.getWidgetConfig()Editor.getWidgetConfig()

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

Поддерживаемые виды чартовПоддерживаемые виды чартов

• График (Gravity UI Charts)
• Таблица
• Advanced-чарт

АргументыАргументы

Нет.

Возвращаемый результатВозвращаемый результат

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

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

Где:

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

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

ПримерПример

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

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

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

Editor.resolveInterval(arg)Editor.resolveInterval(arg)

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

Поддерживаемые виды чартовПоддерживаемые виды чартов

Все.

АргументыАргументы

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

Возвращаемый результатВозвращаемый результат

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

ПримерПример

// время на данный момент: 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

// время на данный момент: 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

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

Примечание: начало и конец интервала, прописанного на вкладке Params или указанного в URL, будут автоматически пропущены через вспомогательный метод для относительной даты. Однако в случае, если значение начала/конца интервала не соответствует формату, то вместо null будет возвращено исходное значение.

Например:

Вкладка Params:

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

// время на данный момент: 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()Editor.resolveOperation()

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

Поддерживаемые виды чартовПоддерживаемые виды чартов

Все.

АргументыАргументы

Нет.

ПримерПример

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

Editor.resolveOperation("__gt_42");

    operation: "GT", 
    value: "42",

Editor.resolveRelative(arg)Editor.resolveRelative(arg)

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

Поддерживаемые виды чартовПоддерживаемые виды чартов

Все.

АргументыАргументы

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

Возвращаемый результатВозвращаемый результат

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

ПримерПример

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

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

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

Примечание: относительные даты, прописанные на вкладке Params или указанные в URL, будут автоматически пропущены через вспомогательный метод. Однако в случае, если значение параметра не соответствует формату относительной даты, вместо null будет возвращено исходное значение.

Например:

Вкладка Params:

module.exports = {
    date_min: '2020-01-01',
    date_max: '__relative_+1d_sw',
    incorrect: '_relative_d1',
}

Параметры url: ...?date_min=__relative_-7d

// время на данный момент: 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)Editor.setChartsInsights(args)

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

Поддерживаемые виды чартовПоддерживаемые виды чартов

Все.

АргументыАргументы

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

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

Где:

• title (строка) — заголовок уведомления.

• message (строка) — текст уведомления на языке разметки Markdown.

• level (строка) — тип уведомления:

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

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

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

ПримерПример

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'
    }
]);

Примеры чартовПримеры чартов

Пример чарта с уведомлениями

Editor.setRawData(data)Editor.setRawData(data)

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

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

Поддерживаемые виды чартовПоддерживаемые виды чартов

Advanced-чарт.

АргументыАргументы

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

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

Возвращаемый результатВозвращаемый результат

Нет.

ПримерПример

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

Editor.updateActionParams()Editor.updateActionParams()

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

Поддерживаемые виды чартовПоддерживаемые виды чартов

• График (Gravity UI Charts)
• Таблица
• Advanced-чарт

АргументыАргументы

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

{
  "key": "value"
}

Где:

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

Возвращаемый результатВозвращаемый результат

Нет.

ПримерПример

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

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

{
  "City": ["Moscow"]
}

Примеры чартовПримеры чартов

Пример кросс-фильтрации — клик по Advanced-чарту слева фильтрует Markdown справа.

Editor.updateParams(params)Editor.updateParams(params)

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

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

Поддерживаемые виды чартовПоддерживаемые виды чартов

Все.

АргументыАргументы

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

{
  "key": "value"
}

Где:

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

ПримерПример

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

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

Editor.wrapFn(conf)Editor.wrapFn(conf)

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

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

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

• для одной функции — 100 мс;
• для одной функции Advanced-чарта — 1,5 с;
• суммарное время исполнения всех функций одного чарта — 3 с.

Поддерживаемые виды чартовПоддерживаемые виды чартов

Все.

АргументыАргументы

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

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

Где:

• fn — функция-обработчик. Не может быть ссылкой или содержать ссылки на сторонние переменные (в том числе функции).

• args — массив аргументов для функции-обработчика. Эти аргументы передаются после всех встроенных аргументов метода.

  Примечание

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

• libs — массив строк, в которых указываются библиотеки, используемые в функции-обработчике. Рекомендуется указывать имя библиотеки вместе с версией, например date-utils@2.3.0 или date-utils@2.5.3. Если указать имя библиотеки без версии, например, date-utils, будет использоваться последняя версия (latest), которая опубликована в npm registry.

  Доступные значения библиотек для подключения: 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).

  Важно

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

ПримерыПримеры

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

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

Примеры чартовПримеры чартов

Вариант использования с подключением d3 библиотеки на примере визуализации Advanced-чарт