Создание пользовательского виджета

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

в диалоге создания виджета вы присваиваете ему имя и добавляете JavaScript код виджета;
добавляете необходимые поля;
сохраняете виджет.

Ниже подробная инструкция как это сделать.

Добавление пользовательского виджета

Для добавления пользовательского виджета необходимо выполнить следующие шаги:

Откройте Visiology Designer и перейдите в необходимый дашборд (или создайте новый). В нашем примере мы воспользуемся дашбордом Статистика продаж:
На панели Визуализации нажмите кнопку с тремя точками и кликните Создать виджет:
В открывшемся диалоге укажите название и код виджета (JavaScript), а также добавьте поля виджета:

Поля служат для настройки визуализации. Они могут принимать числовые и строковые значения, и могут быть использованы, например, для визуализации значений осей X и Y. Система позволяет добавить до двух полей (одно или два), но вы также может не добавлять ни одного поля (в зависимости от того, какого рода виджет вы создаете).
Для добавления поля выполните следующие шаги:
- Нажмите кнопку Добавить поле;
- Укажите название поля и описание (описание будет отображаться в качестве подсказки при наведении мышки на название поля):
  
  Для удаления поля нажмите напротив него красный крестик.
Для сохранения введенных данных нажмите кнопку Сохранить. Виджет появится в панели Визуализации среди прочих добавленных пользовательских виджетов:

Теперь вы можете работать с ним как с любым другим стандартным виджетом (см. раздел Работа с виджетами).

Пример кода виджета

Ниже представлен код диаграммы, который мы использовали в нашем примере:

var data = w.data.primaryData.items.map(function (item) {
  return item.keys.concat(item.values);
});

Highcharts.chart(w.general.renderTo, {
    series: [{
        keys: ['from', 'to', 'weight'],
        data: data,
        type: 'sankey',
        name: 'Цены'
    }]
});

Для получения структуры данных, которую вы можете использовать в качестве примера при создании кода виджета, сделайте следующее:

Нажмите клавишу F12, чтобы отобразить консоль браузера.
Создайте виджет как описано выше и дайте ему имя.
В поле ввода кода виджета введите команду console.log(w);
Добавьте поля, например, X и Y.
Нажмите Сохранить, чтобы сохранить виджет:
Добавьте данные в поля виджета.
В консоли браузера разверните ветку data: DataFrame, чтобы просмотреть структуру данных:

Редактирование пользовательского виджета

Для того, чтобы изменить параметры пользовательского виджета, необходимо выполнить следующие шаги:

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

При изменении кода виджета, код обновится во всех виджетах этого типа, добавленных на дашборды. Исключение составляют виджеты, у которых разрешено редактирование кода. Код, измененный в таких виджетах, не будет затронут.

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

Сохраните дашборд с добавленным пользовательским виджетом, нажав Файл > Сохранить в левом верхнем углу:
Перейдите на вкладку Настройки:
Разверните общие настройки и активируйте опцию Разрешить редактирование кода (в диалоге подтверждения нажмите Да):
Сохраните изменения, нажав Файл > Сохранить в левом верхнем углу:
Нажмите кнопку с двойными стрелками в нижней части экрана, чтобы открыть редактор кода:
Внесите необходимые изменения в коде и нажмите Выполнить код:
Нажмите Файл > Сохранить в левом верхнем углу экрана, чтобы сохранить изменения.

Удаление пользовательского виджета

Для удаления пользовательского виджета выполните следующие шаги:

В панели Визуализации кликните правой клавишей мыши на виджете, который хотите удалить и выберите Удалить в выпадающем меню:
В диалоге подтверждения нажмите кнопку Удалить:

Виджет исчезнет из панели Визуализации.

На этой странице

1 Добавление пользовательского виджета
- 1.1 Пример кода виджета
2 Редактирование пользовательского виджета
3 Удаление пользовательского виджета

Время чтения: 3 мин.

Видео

Нужна дополнительная помощь?

Свяжитесь с технической поддержкой.