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

  1. Добавьте библиотеку sankey.js виджета в папку на сервер по адресу /docker-volume/dashboard-viewer/customjs
  2. Откройте приложение DashboardDesigner:
  3. На вкладке «Пользовательские виджеты», нажмите кнопку «Создать новый»
  4. В открывшемся окне введи название для виджета;
  5. В поле «Код виджет (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'
        }]
    });
  6. В первой строке кода заменить 'container' на w.general.renderTo

    Highcharts.chart(w.general.renderTo, { 
    …
  7. Перед первой строкой объявить переменную data и описать преобразование данных получаемых с OLAP;

    var data = w.data.rows.map(function (row, i) {
        return [
            row[0], row[1], w.data.values[0][i]
        ]
    });
  8. В строке с описанием элемента 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'
        }]
    
    });
  9. Если вы хотите дать возможность изменять пользовтельские свойства виджета, например заголовок, измените описание элемента text с 'Highcharts Sankey Diagram' на w.props.titleName и добавьте свойство изменения цвета текста заголовка style: {color: w.props.color}

    text: w.props.titleName,
        style: {
            color: w.props.color
        }
  10. В поле «Свойства виджета (JSON)» вставьте следующий код:

    { 
        "titleName": "Тест", 
        "color": "red" 
    }
  11. Нажмите кнопку «Создать»;
  12. В палитре виджетов выберите созданный вами виджет
  13. В привязке данных виджета указать тип данных OLAP, и обозначить следующую конструкцию запроса:

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

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