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

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

В поле «Код виджет (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(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}:
```
text: w.props.titleName,
    style: {
        color: w.props.color
    }
```
В поле «Свойства виджета (JSON)» вставьте следующий код:
```
{ 
    "titleName": "Тест", 
    "color": "red" 
}
```
Нажмите кнопку «Создать».
В палитре виджетов выберите созданный вами виджет.
В привязке данных виджета указать тип данных OLAP и обозначить следующую конструкцию запроса.

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

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

Visiology Platform 2.23

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

Related content