Пользовательский виджет «Sankey»

Добавьте библиотеку sankey.js виджета в папку на сервер по адресу /docker-volume/dashboard-viewer/customjs
Откройте приложение DashboardDesigner:
На вкладке «Пользовательские виджеты», нажмите кнопку «Создать новый»
В открывшемся окне введи название для виджета;

В поле «Код виджет (JavaScript) вставьте код скопированный на странице примера виджета

Highcharts.chart('container', {

title: {
text: 'Highcharts Sankey Diagram'
},

series: [{
keys: ['from', 'to', 'weight'],
data: [
['Brazil', 'Portugal', 5 ],
['Brazil', 'France', 1 ],
['Brazil', 'Spain', 1 ],
['Brazil', 'England', 1 ],
['Canada', 'Portugal', 1 ],
['Canada', 'France', 5 ],
['Canada', 'England', 1 ],
['Mexico', 'Portugal', 1 ],
['Mexico', 'France', 1 ],
['Mexico', 'Spain', 5 ],
['Mexico', 'England', 1 ],
['USA', 'Portugal', 1 ],
['USA', 'France', 1 ],
['USA', 'Spain', 1 ],
['USA', 'England', 5 ],
['Portugal', 'Angola', 2 ],
['Portugal', 'Senegal', 1 ],
['Portugal', 'Morocco', 1 ],
['Portugal', 'South Africa', 3 ],
['France', 'Angola', 1 ],
['France', 'Senegal', 3 ],
['France', 'Mali', 3 ],
['France', 'Morocco', 3 ],
['France', 'South Africa', 1 ],
['Spain', 'Senegal', 1 ],
['Spain', 'Morocco', 3 ],
['Spain', 'South Africa', 1 ],
['England', 'Angola', 1 ],
['England', 'Senegal', 1 ],
['England', 'Morocco', 2 ],
['England', 'South Africa', 7 ],
['South Africa', 'China', 5 ],
['South Africa', 'India', 1 ],
['South Africa', 'Japan', 3 ],
['Angola', 'China', 5 ],
['Angola', 'India', 1 ],
['Angola', 'Japan', 3 ],
['Senegal', 'China', 5 ],
['Senegal', 'India', 1 ],
['Senegal', 'Japan', 3 ],
['Mali', 'China', 5 ],
['Mali', 'India', 1 ],
['Mali', 'Japan', 3 ],
['Morocco', 'China', 5 ],
['Morocco', 'India', 1 ],
['Morocco', 'Japan', 3 ]
],
type: 'sankey',
name: 'Sankey demo series'
}]
});

В первой строке кода заменить 'container' на w.general.renderTo
Highcharts.chart(w.general.renderTo, {
…
Перед первой строкой объявить переменную data и описать преобразование данных получаемых с OLAP;
…
var data = w.data.rows.map(function (row, i) {
return[
row[0], row[1], w.data.values[0][i]
]
});
…

В строке с описанием элемента data, заменить массив на созданную переменную data;

Highcharts.chart('container', {

title: {
text: 'Highcharts Sankey Diagram'
},

series: [{
keys: ['from', 'to', 'weight'],
data:data,
type: 'sankey',
name: 'Sankey demo series'
}]

});

Если вы хотите дать возможность изменять пользовтельские свойства виджета, например заголовок, измените описание элемента text с 'Highcharts Sankey Diagram' на w.props.titleName и добавьте свойство изменения цвета текста заголовка style: {color: w.props.color}
…
text: w.props.titleName,
style: {
color: w.props.color
}
…
В поле «Свойства виджета (JSON)» вставьте следующий код:
…
{
"titleName": "Тест",
"color": "red"
}
…
Нажмите кнопку «Создать»;
В палитре виджетов выберите созданный вами виджет
В привязке данных виджета указать тип данных OLAP, и обозначить следующую конструкцию запроса:

Пример:
Группа показателей – заработная плата;
Показатель – Прямия сотрудника
Измерения – Отдел, Должность

После привязке данных на созданном виджете должны отобразится данные