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

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

• Editor.generateHtml(arg)
• Editor.getActionParams()
• Editor.getCurrentPage()
• Editor.getId(arg)
• Editor.getLoadedData()
• Editor.getParam(name)
• Editor.getParams()
• Editor.getWidgetConfig()
• Editor.resolveInterval(arg)
• Editor.resolveOperation(args)
• Editor.resolveRelative(arg)
• Editor.setChartsInsights(args)
• 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.

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

module.exports = {
          "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.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.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://datalens.yandex-team.ru/docs/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.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 = {
            "Year": "2024",
            "City": ["Moscow", "Sochi"]
        };
        

Editor.updateParams({"City": ["Vladimir"]});
        

{
          "Year": ["2024"],
          "City": ["Vladimir"]
        }
        

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

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

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

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

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

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

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-чарт