Создание пользовательского виджета
- Эдуард Столяр
Вы можете увеличить количество используемых виджетов, добавив свой собственный виджет с необходимой вам функциональностью. Процедура добавления пользовательского виджета выглядит следующим образом:
в диалоге создания виджета вы присваиваете ему имя и добавляете 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, чтобы просмотреть структуру данных:
Пример формата данных виджета с одним полем
Ниже представлен пример формата данных, которые приходят в переменную w.data при добавлении столбца в пользовательский виджет с одним полем:
{
"dataFrame": {
"primaryData": {
"keys": [
"root"
],
"values": [],
"items": [
{
"keys": [],
"values": [
"A. Datum",
13978.43
],
"items": [],
"metadata": [
{
"columnName": "brandname",
"displayName": "brandname",
"dataType": "String"
},
{
"columnName": "unitcost",
"displayName": "unitcost",
"dataType": "Decimal"
}
],
"cols": [
"brandname",
"unitcost"
]
},
{
"keys": [],
"values": [
"Adventure Works",
40201.01
],
"items": [],
"metadata": [],
"cols": [
"brandname",
"unitcost"
]
},
{
"keys": [],
"values": [
"Contoso",
85927.66
],
"items": [],
"metadata": [],
"cols": [
"brandname",
"unitcost"
]
},
{
"keys": [],
"values": [
"Fabrikam",
66288.43
],
"items": [],
"metadata": [],
"cols": [
"brandname",
"unitcost"
]
},
{
"keys": [],
"values": [
"Litware",
53622.39
],
"items": [],
"metadata": [],
"cols": [
"brandname",
"unitcost"
]
},
{
"keys": [],
"values": [
"Northwind Traders",
16605.8
],
"items": [],
"metadata": [],
"cols": [
"brandname",
"unitcost"
]
},
{
"keys": [],
"values": [
"Proseware",
31646.86
],
"items": [],
"metadata": [],
"cols": [
"brandname",
"unitcost"
]
},
{
"keys": [],
"values": [
"Southridge Video",
13429.62
],
"items": [],
"metadata": [],
"cols": [
"brandname",
"unitcost"
]
},
{
"keys": [],
"values": [
"Tailspin Toys",
3122.45
],
"items": [],
"metadata": [],
"cols": [
"brandname",
"unitcost"
]
},
{
"keys": [],
"values": [
"The Phone Company",
18788.61
],
"items": [],
"metadata": [],
"cols": [
"brandname",
"unitcost"
]
},
{
"keys": [],
"values": [
"Wide World Importers",
28037.79
],
"items": [],
"metadata": [],
"cols": [
"brandname",
"unitcost"
]
}
],
"metadata": [],
"cols": []
},
"secondaryData": null
}
} Данный формат используется, начиная с версии 3.6. В новом формате значения из keys перенесены в values, а metadata заполняется в первом item:
Пример кода таблицы в пользовательском виджете
Ниже представлен пример кода таблицы в пользовательском виджете, у которого одно поле для добавления данных:
// Создаем таблицу
var table = $('<table style="border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed;">');
// Создаем заголовок
var thead = $('<thead>');
var headerRow = $('<tr>');
w.data.primaryData.items[0].metadata.forEach(function (m) {
headerRow.append($('<th>').text(m.displayName));
});
thead.append(headerRow);
// Добавляем заголовок к таблице
table.append(thead);
// Создаем тело таблицы
var tbody = $('<tbody>');
// Добавляем строки и ячейки
w.data.primaryData.items.forEach(function (item) {
var row = $('<tr>');
item.values.forEach(function (value) {
row.append($('<td>').text(value));
});
tbody.append(row);
});
// Добавляем тело к таблице
table.append(tbody);
// Добавляем таблицу к body документа
var container = $('<div style="overflow: auto; width: 100%; height: 100%;"></div>')
container.append(table);
$('#' + w.general.renderTo).append(container);Редактирование пользовательского виджета
Для того, чтобы изменить параметры пользовательского виджета, необходимо выполнить следующие шаги:
На вкладке Виджет кликните правой кнопкой мыши на виджете, который хотите отредактировать, и выберите Редактировать в выпадающем меню:
В открывшемся окне произведите необходимые изменения и нажмите кнопку Готово:
При изменении кода виджета, код обновится во всех виджетах этого типа, добавленных на дашборды. Исключение составляют виджеты, у которых разрешено редактирование кода. Код, измененный в таких виджетах, не будет затронут.
Вы можете сделать код добавленного виджета редактируемым (по умолчанию изменять код виджета запрещено). Для этого необходимо сделать следующее:
Сохраните дашборд с добавленным пользовательским виджетом, нажав Файл > Сохранить в левом верхнем углу:
Перейдите на вкладку Оформление:
Разверните общие настройки и активируйте опцию Разрешить редактирование кода (в диалоге подтверждения нажмите Да):
Сохраните изменения, нажав Файл > Сохранить в левом верхнем углу:
Нажмите кнопку с двойными стрелками в нижней части экрана, чтобы открыть редактор кода:
Внесите необходимые изменения в коде и нажмите Выполнить код:
Нажмите Файл > Сохранить в левом верхнем углу экрана, чтобы сохранить изменения.
Удаление пользовательского виджета
Для удаления пользовательского виджета выполните следующие шаги:
На вкладке Виджет кликните правой клавишей мыши на виджете, который хотите удалить, и выберите Удалить в выпадающем меню:
В диалоге подтверждения нажмите кнопку Удалить:
Виджет исчезнет из набора виджетов.
Смотрите также
На этой странице
Время чтения: 3 мин.
Видео
Нужна дополнительная помощь?