Как использовать Drilldown в пользовательском виджете

Настройка данных для DrillDown.

Для настройки DrillDown для пользовательского виджета необходимо выполнить следующие действия:

В рабочей области дашборда выбрать виджет.
Открыть вкладку “Настройки” для виджета.
Раскрыть вкладку "Панель фильтров и Drill down" и включить параметр "Использовать Drill down".
В привязке данных выбирать источник данных “ViQube“.
Создать запрос к данным.

Для корректной работы DrillDown в строках должно быть выбрано больше одного измерения.

/**
 * 1) Делаем drilldown с помощью visApi().drillDown.
 * 2) В подписке visApi().onDrillDownListener получаем данные следующего уровня после drilldown.
 * 3) Строим новый уровень виджета с помощью полученных новых данных.
 * 4) Делаем drilldup с помощью visApi().drillup или через навигационную панель, которую можно вызвать с помощью visApi().showControlPanel.
 * 5) В подписке visApi().onDrillUpListener получаем данные текущего уровня после drillup (visApi().getWidgetByGuid(widgetGuid).widgetDataContainer.dataFrame).
 * 6) Строим предыдущий уровень виджет, если виджет не поддерживает этого автоматически.
 */

var widgetGuid = w.general.renderTo;
var chart = Highcharts.chart({
    chart: {
        type: 'column',
        renderTo: widgetGuid,
        events: {
            drillup: function() { // Вызывается, когда нажали нативную кнопку "Назад" от Highcharts 
                visApi().drillUp(widgetGuid); // Обязательно нужно вызывать эту функцию, когда делается drillUp не через навигационную панель. 
            }
        }
    },
    xAxis: {
        type: "category"
    },
    plotOptions: {
        series: {
            point: {
                events: {
                    click: function () {
                        visApi().drillDown(widgetGuid, [this.name]);
                    }
                }
            }
        }
    },
    series: buildSeries(w.data)
});

//visApi().showControlPanel(widgetGuid); // отображаем на виджете панель кнопок для DrillDown/DrillUp

/**
 * Собирает серии для гистограммы
 */
function buildSeries(data) {
    return data.cols.map(function (col, colIndex) {
        var points = data.rows.map(function (row, rowIndex) {
            return {
                y: data.values[colIndex][rowIndex],
                name: row[0]
            }; 
        });
        return {
            name: col.join(' - '),
            data: points
        }
    });
}

/**
 * Получает точку на гистограмме по названию
 */
function getPointByName(pointName) {
    var selectedPoint = null;
    chart.series.forEach(function (serie) {
        selectedPoint = serie.data.find(function (point) {
            return point.name == point.name
        })
    });
    return selectedPoint;
}

/**
 * Подписывается на DrillDown, чтобы отловить новые данные после drilldown и отрисовать их
 */
visApi().onDrillDownListener({widgetGuid: widgetGuid, guid: "1111"}, function(event) {
    var selectedPointName = event.selectedValues[0];
    drillDownOnChart(selectedPointName, event.widgetDataContainer.dataFrame);
});

/**
 * Делает drilldown на гистограмме
 */
function drillDownOnChart(pointName, dataFrame) {
    var point = getPointByName(pointName);
    var newSeries = buildSeries(dataFrame);
    newSeries.forEach(function(serie) {
        chart.addSingleSeriesAsDrilldown(point, serie);
    });

    point.doDrilldown(); // https://github.com/highcharts/highcharts/issues/8324#issuecomment-388766611
    chart.applyDrilldown();
    
    //chart.drillUpButton.element.style.display = "block"; // можно отобразить кнопку нативную кнопку "Назад" вместо visApi().showControlPanel(widgetGuid);
}

/**
 * Подписывается на DrillUp, чтобы отловить получить данные текущего уровня после drillup и отрисовать их
 */
visApi().onDrillUpListener({widgetGuid: widgetGuid, guid: "2222"}, function (event) {
    //var currentDataFrame = visApi().getWidgetByGuid(widgetGuid).widgetDataContainer.dataFrame; // данные текущего уровня, чтобы отрисовать виджет после drillup
    var level = event.hierarchyPath.length; // уровень до которого нужно провалиться.
    drillUpOnChart(level);
});

/**
 * Делает drillUp на гистограмме
 */
function drillUpOnChart(toLevel) {
    while (chart.drilldownLevels.some(level => level.levelNumber === toLevel)) {
        chart.drillUp();
    }
}

На этой странице

1 Настройка данных для DrillDown.