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

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

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

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

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

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

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

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

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

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

Блок кода

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

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

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

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

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

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

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

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

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