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

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

  1. Добавьте библиотеку sankey.js виджета в папку на сервер по адресу /docker-volume/dashboard-viewer/customjs.
  2. Откройте приложение Dashboard Designer.
  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 и обозначить следующую конструкцию запроса.

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

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

Related content

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