Добавьте библиотеку sankey.js виджета в папку на сервер по адресу /docker-volume/dashboard-viewer/customjs.
Откройте приложение Dashboard Designer.
На вкладке «Пользовательские виджеты», нажмите кнопку «Создать новый».
В открывшемся окне введите название для виджета.
В поле «Код виджет (JavaScript)» вставьте код скопированный на странице примера виджета:
Блок кода language js 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:
Блок кода language js Highcharts.chart(w.general.renderTo, { …Перед первой строкой объявить переменную data и описать преобразование данных получаемых с OLAP:
Блок кода language js var data = w.data.rows.map(function (row, i) { return [ row[0], row[1], w.data.values[0][i] ] });В строке с описанием элемента data, заменить массив на созданную переменную data:
Блок кода language js Highcharts.chart(w.general.renderTo, { 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}:
Блок кода language js text: w.props.titleName, style: { color: w.props.color }В поле «Свойства виджета (JSON)» вставьте следующий код:
Блок кода language js { "titleName": "Тест", "color": "red" }Нажмите кнопку «Создать».
В палитре виджетов выберите созданный вами виджет.
В привязке данных виджета указать тип данных OLAP и обозначить следующую конструкцию запроса.
Пример:
Группа показателей – заработная плата;
Показатель – Премия сотрудника;
Измерения – Отдел, Должность.
После привязки данных на созданном виджете должны отобразится данные:
