Настрoйка Drill Down

Активация детализации данных

Drill Down – это способ просмотра информации в различных разрезах, выстроенных в виде иерархии.

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

При настройке данных виджета добавьте минимум два измерения для одной оси. Например:
На вкладке Виджеты щелкните правой кнопкой мыши по иконке текущего виджета и выберите Редактировать в открывшемся меню:
Отредактируйте код виджета, учитывая следующие аспекты:
- Построение параметров и серии графика:
  Лучше всего построить необходимые параметры и серию графика внутри отдельной функции. Это позволит повторно вызывать её как в самом начале рендеринга виджета, так и каждый раз при изменении настроек (обновлении параметров).
  Эта функция будет вызываться сразу после инициализации виджета и позже при каждом обновлении параметров.
- Обработка события изменения настроек виджета:
  Подпишитесь на обновление настроек виджета (onUpdateWidgetSettingsListener), чтобы оперативно реагировать на изменение конфигурации и своевременно перерисовывать график:
  visApi().onUpdateWidgetSettingsListener({ widgetGuid: w.general.renderTo, guid: "112222" }, res => { // Перезаписываем настройки виджета новыми значениями w = res.settings; // Обновляем график (Highcharts) chart.update(buildChartOptions(), true, true, true); });
  Здесь buildChartOptions() генерирует новые опции визуализации графики, основываясь на текущих настройках виджета.
- Установка фильтров и отслеживание текущего уровня иерархии:
  При установке фильтра выбранных значений необходимо учитывать текущий путь иерархического погружения в данные, иначе возможны проблемы с фильтрами на разных уровнях вложенности:
  // Определяем последний элемент пути, содержащий значения const currentHierarchyPath = w.general.drillPath.findLast(f => f.values?.length > 0)?.values ?? []; // Формируем массив выбранных значений, включая ключи let filterValues = [currentHierarchyPath.concat(keys.map(String))]; // Устанавливаем фильтр выбранных значений visApi().setFilterSelectedValues(filterValues);
  Этот подход гарантирует правильную работу фильтра независимо от глубины текущей выборки.
- Проваливание на следующий уровень (Drill Down):
  Переход на следующий уровень иерархии осуществляется простым вызовом метода drillDown, передав ему идентификатор области отображения и ключ выбранного элемента.
  // Выполняем переход на следующий уровень иерархии visApi().drillDown(w.general.renderTo, keys);

Ниже приведён простой пример кода виджета с реализованной функцией Drill Down:

const container = $('#' + w.general.renderTo); 
container.css('overflow', 'auto'); 
function draw(settings) { 
    console.log(settings); 
    container.empty(); 
    settings.data.primaryData.items.forEach(item => { 
        const row = $( 
            `<div> 
                <a href="javascript:void(0)" class="key-link"> 
                    <b>${item.formattedKeys.join(', ')}</b> 
                    ===> 
                </a> 
                : 
                <a href="javascript:void(0)" class="value-link"> 
                    ${item.formattedValues.join(', ')} 
                </a> 
            </div>` 
        ); 

        // Клик по ключу — фильтруем по keys 
        row.find('.key-link').off('click').on('click', () => { 
            visApi().drillDown(w.general.renderTo, item.keys); 
        }); 
        // Клик по значению — всё равно фильтруем по keys 
        row.find('.value-link').off('click').on('click', () => { 
            console.log(item.keys); 
            //SelectedValues надо устанавливать с учетом текущего уровня drill 
            const currentHierarchyPath = visApi().getDrillPath(w.general.renderTo) 
                .findLast(f => f.values.length > 0)?.values ?? []; 
            const selectedValues = [ ...currentHierarchyPath, ...item.keys].map(m => String(m)); 

            visApi().setFilterSelectedValues(w.general.renderTo, [selectedValues]); 
        }); 
        container.append(row); 
    }); 
} 
// Делегированный обработчик для кнопки Drill Down 
$(document).off('click', '.va-widget-drilldown-btn').on('click', '.va-widget-drilldown-btn', function () { 
    const selectedValues = visApi().getSelectedValues(w.general.renderTo); 
    if (selectedValues && selectedValues.length > 0) { 
        const selectedKeys = selectedValues[0]; // Это item.keys 
        visApi().drillDown(w.general.renderTo, selectedKeys); 
    } else { 
        alert('Сначала выберите элемент из списка'); 
    } 
}); 
// Подписка на обновления виджета 
visApi().onUpdateWidgetSettingsListener({ widgetGuid: w.general.renderTo, guid: w.general.renderTo }, res => {     
    draw(res.settings); 
}); 
// Первоначальная отрисовка 
draw(w);

На вкладке Оформление включите переключатель Использовать Drill Down:

После выполнения всех вышеописанных настроек вы сможете переходить на более низкий уровень иерархии с целью получения дополнительной информации.

Просмотр детализированных данных

При включенной детализации данных платформа позволяет просматривать дополнительную информацию двумя способами.

Способ 1

Вы можете углубиться в данные конкретного элемента графика или диаграммы. Например, начав с обзора продаж по нескольким брендам, вы можете детально исследовать конкретный бренд, изучив структуру продаж по категориям товаров, цвету или другим показателям.

Для этого сделайте следующее:

Кликните интересующий вас элемент диаграммы или точку графика и нажмите стрелку в левом верхнем углу виджета. В нашем примере мы выбрали элемент Contoso:
Произойдет перестройка данных диаграммы. На виджете отобразятся данные по выбранной серии, а в блоке элементов управления станет активной стрелка для перемещения на уровень вверх:
Далее вы можете либо снова выбрать какой-нибудь элемент для детализации и погрузиться в его данные, нажав на стрелку вниз, либо нажать и перейти на следующий уровень детализации (см. Способ 2).
Чтобы вернуться на уровень выше, просто нажмите на стрелку вверх.

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

При углублении в данные влияние на другие виджеты сохраняется. То есть, если в нашем примере мы углубимся в столбец Fabrikam, в других виджетах, на которые оказывает влияние данный виджет, отобразится информация по этому бренду:

Способ 2

Вы можете переходить на более низкий уровень детализации данных, не теряя общей картины. Так, начиная с общих показателей продаж, вы сможете последовательно опускаться ниже – от годовых итогов к квартальным, месячным и даже отдельным дням. Это помогает легко выявлять закономерности и находить проблемные зоны. Для этого необходимо сделать следующее:

Наведите курсор мыши на виджет и нажмите в левом верхнем углу:
Произойдет перестройка данных на виджете до следующего уровня в соответствии с иерархией на оси Х, а в блоке элементов управления станет активной стрелка для перемещения на уровень вверх:
Далее вы можете перейти либо на следующий уровень, нажав на кнопку снова, либо выбрать конкретный элемент и “провалиться” в него, нажав на стрелку вниз (см. Способ 1).
Для возврата на уровень выше, просто нажмите на стрелку вверх в верхнем левом углу виджета. Если вы углубились на несколько уровней детализации, для быстрого перехода в родительский уровень вы можете нажать на стрелку вверх и в появившемся меню выбрать соответствующий уровень:

При просмотре данных в режиме общего перехода на другой уровень данные других виджетов, связанных с этим виджетом, не обновляются. Обновление происходит только при углублении в данные отдельных элементов виджета.

Смотрите также

Создание пользовательского виджета

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

1 Активация детализации данных
2 Просмотр детализированных данных
- 2.1 Способ 1
- 2.2 Способ 2

Время чтения: 2 мин.

Нужна дополнительная помощь?

Свяжитесь с технической поддержкой.