Сравнение страниц

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

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

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

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

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

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

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

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

   

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

   

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

   

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

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

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

     

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

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. Нажмите клавишу F12, чтобы отобразить консоль браузера.

2. Создайте виджет как описано выше и дайте ему имя.

3. В поле ввода кода виджета введите команду console.log(w);

4. Добавьте поля, например, X и Y.

5. Нажмите Сохранить, чтобы сохранить виджет:
   

   

6. Добавьте данные в поля виджета.

7. В консоли браузера разверните ветку data: DataFrame, чтобы просмотреть структуру данных:
   

   

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

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

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

   

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

   

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

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

   

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

   

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

   Image RemovedImage Added

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

   

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

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

   

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

   

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

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

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

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

   

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

   

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

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

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