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

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

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

• добавляете необходимые поля (оси);

• сохраняете виджет.

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

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

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

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

   

2. На панели Визуализации нажмите кнопку с тремя точками и кликните Создать виджет:
   

   

3. В открывшемся диалоге укажите название и код виджета (JavaScript), а также добавьте поля виджета:
   

   

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

   • Нажмите кнопку Добавить поле;

   • Укажите название поля и описание (описание будет отображаться в качестве подсказки при наведении мышки на название поля):
     

     

     Для удаления поля нажмите напротив него красный крестик.

4. Для сохранения введенных данных нажмите кнопку Сохранить. Виджет появится в панели Визуализации среди прочих добавленных пользовательских виджетов:
   

   

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

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

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

const items = w.data.primaryData.items;
let seriesName =  items[0].metadata[0].columnName;
let xAxis = [];
let valueOfMeasure = [];
for (let i = 0; i < items.length; i++) {
    xAxis.push(items[i].key);
    valueOfMeasure.push(items[i].values[0]);
}
Highcharts.chart({
    chart: {
        renderTo: w.general.renderTo,
        type: "column"    },
    xAxis: {
        categories: xAxis,
    },
    yAxis: {
        title: {
            text: '',
            style: {
                color: '#6d869f'            }
        }
    },
    series: [{
        name:seriesName,
        data: valueOfMeasure    }]
});

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

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

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

   

2. В открывшемся окне произведите необходимые изменения и нажмите кнопку Сохранить:
   

   

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

1. Сохраните дашборд с добавленным пользовательским виджетом, нажав Файл > Сохранить в левом верхнем углу:
   

   

2. Откройте Desktop Designer и загрузите сохраненный дашборд:
   

   

3. Разверните общие настройки на вкладке Настройки в правой стороне экрана и поставьте галочку напротив Разрешить редактирование кода (в диалоге подтверждения нажмите Да):
   

   

4. Сохраните изменения, нажав Сохранить в левом верхнем углу:
   

   

5. Перезагрузите страницу с дашбордом в интернет-браузере.

6. Кликните на добавленный виджет и нажмите кнопку с двойными стрелками в нижней части экрана, чтобы открыть редактор кода:
   

   

7. Внесите необходимые изменения в коде и нажмите Выполнить код:
   

   

8. Нажмите Файл > Сохранить в левом верхнем углу экрана, чтобы сохранить изменения.

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

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

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

   

2. В диалоге подтверждения нажмите кнопку Удалить:
   

   

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

Смотрите также

📄 Работа с виджетами
📄 Установка и запуск Desktop Designer
📄 Визуальные настройки виджетов