Добавление поддержки закладок в визуальные элементы в отчетах Power BI

С помощью закладок отчета Power BI можно записать и сохранить настроенное представление страницы отчета. Затем вы можете быстро и легко вернуться в сохраненное представление всякий раз, когда вы хотите. Закладка сохраняет всю конфигурацию, включая выборы и фильтры.

Дополнительные сведения о закладках см. в статье "Использование закладок для совместного использования аналитических сведений и создания историй в Power BI".

Визуальные элементы, поддерживающие закладки

Визуальный элемент Power BI, поддерживающий закладки, должен иметь возможность сохранять и предоставлять правильные сведения при необходимости. Если визуальный элемент взаимодействует с другими визуальными элементами, выбирает точки данных или фильтрует другие визуальные элементы, необходимо сохранить состояние закладки в свойствах filterState визуального элемента.

Примечание.

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

• Powerbi-visuals-utils-interactivityutils версии 3.0.0 или более поздней для визуальных элементов фильтра и любого используемого визуального InteractivityServiceэлемента.
• Visual API версии 1.11.0 или более поздней версии для визуальных элементов без фильтрации, которые используются SelectionManager вместо InteractivityService.
• Чтобы узнать, какая версия используется, проверка apiVersion в файле pbiviz.json.

Взаимодействие визуальных элементов Power BI с Power BI в закладках отчетов

Предположим, вы хотите создать несколько закладок на странице отчета с каждой закладкой с разными точками данных.

Сначала выберите одну или несколько точек данных в визуальном элементе. Визуальный элемент передает выбранные элементы узлу. Затем выберите "Добавить" в области "Закладка". Power BI сохраняет текущие выбранные элементы для новой закладки.

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

При каждом выборе закладки Power BI восстанавливает сохраненное состояние фильтра или выделения и передает его визуальным элементам. Визуальные элементы в отчете выделены или фильтруются в соответствии с состоянием, хранящимся в закладке. Для этого визуальный элемент должен передать правильное состояние выделения узлу (например, цвета отрисованных точек данных).

Новое состояние выбора (или фильтр) передается через options.jsonFilters свойство в методе update . Может jsonFilters быть либо Advanced FilterTuple Filter.

• Если визуальный элемент содержит выбранные точки данных, сбросить выделение в выбранную закладку с помощью функции обратного вызова , registerOnSelectCallbackв ISelectionManager.
• Если визуальный элемент использует фильтры для выбора данных, сбросить значения фильтра в соответствующие значения выбранной закладки.

Визуальные элементы с выделением

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

• С помощью InteractivityService для управления выборами используйте параметр applySelectionFromFilter. Это более простой и предпочтительный метод.
• С помощью SelectionManager, если визуальный элемент не использует InteractivityService.

Восстановление выбранных закладок с помощью InteractivityService

Если визуальный элемент использует InteractivityService, вам не нужны другие действия для поддержки закладок в визуальном элементе.

При выборе закладки программа автоматически обрабатывает состояние выбора визуального элемента.

Восстановление выбранных закладок с помощью SelectionManager

Если вы не используете InteractivityService, можно сохранить и отозвать выбор закладок с помощью ISelectionManager.registerOnSelectCallback метода следующим образом:

При выборе закладки Power BI вызывает callback метод визуального элемента с соответствующими выделениями.

this.selectionManager.registerOnSelectCallback(
    (ids: ISelectionId[]) => {
        //called when a selection was set by Power BI
    });
);

Предположим, что вы создали точку данных в методе visualTransform визуального элемента.

Выглядит datapoints следующим образом:

visualDataPoints.push({
    category: categorical.categories[0].values[i],
    color: getCategoricalObjectValue<Fill>(categorical.categories[0], i, 'colorSelector', 'fill', defaultColor).solid.color,
    selectionId: host.createSelectionIdBuilder()
        .withCategory(categorical.categories[0], i)
        .createSelectionId(),
    selected: false
});

Теперь в visualDataPoints качестве точек данных и ids массива, переданного callback функции.

На этом этапе визуальный элемент должен сравнить ISelectionId[] массив с выбранными выборками в массиве visualDataPoints , а затем пометить соответствующие точки данных как выбранные.

this.selectionManager.registerOnSelectCallback(
    (ids: ISelectionId[]) => {
        visualDataPoints.forEach(dataPoint => {
            ids.forEach(bookmarkSelection => {
                if (bookmarkSelection.equals(dataPoint.selectionId)) {
                    dataPoint.selected = true;
                }
            });
        });
    });
);

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

Визуальные элементы с фильтром

Для поддержки закладок в визуальных элементах с фильтром используйте InteractivityService.

Предположим, что визуальный элемент создает фильтр данных по диапазону дат. У вас есть startDate и endDate даты начала и окончания диапазона.

Визуальный элемент создает расширенный фильтр и вызывает метод applyJsonFilter узла для фильтрации данных по соответствующим условиям.

Целевой объект — это таблица, используемая для фильтрации.

import { AdvancedFilter } from "powerbi-models";

const filter: IAdvancedFilter = new AdvancedFilter(
    target,
    "And",
    {
        operator: "GreaterThanOrEqual",
        value: startDate
            ? startDate.toJSON()
            : null
    },
    {
        operator: "LessThanOrEqual",
        value: endDate
            ? endDate.toJSON()
            : null
    });

this.host.applyJsonFilter(
    filter,
    "general",
    "filter",
    (startDate && endDate)
        ? FilterAction.merge
        : FilterAction.remove
);

Каждый раз при выборе закладки пользовательский визуальный update элемент получает вызов.

В методе update визуальный элемент проверка фильтр в объекте:

const filter: IAdvancedFilter = FilterManager.restoreFilter(
    && options.jsonFilters
    && options.jsonFilters[0] as any
) as IAdvancedFilter;

filter Если объект не имеет значения NULL, визуальный элемент восстанавливает условия фильтра из объекта:

const jsonFilters: AdvancedFilter = this.options.jsonFilters as AdvancedFilter[];

if (jsonFilters
    && jsonFilters[0]
    && jsonFilters[0].conditions
    && jsonFilters[0].conditions[0]
    && jsonFilters[0].conditions[1]
) {
    const startDate: Date = new Date(`${jsonFilters[0].conditions[0].value}`);
    const endDate: Date = new Date(`${jsonFilters[0].conditions[1].value}`);

    // apply restored conditions
} else {
    // apply default settings
}

После этого визуальный элемент изменяет внутреннее состояние в соответствии с текущими условиями. Внутреннее состояние включает точки данных и объекты визуализации (линии, прямоугольники и т. д.).

Важно!

В приведенном выше сценарии закладок отчета визуальный элемент не должен вызывать applyJsonFilter фильтрацию других визуальных элементов. Они уже будут отфильтрованы Power BI.

Визуальный элемент "Срез временной шкалы" изменяет селектор диапазона на соответствующие диапазоны данных.

Сохранение состояния фильтра визуального элемента

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

Например, срез временной шкалы сохраняет Granularity значения свойств в качестве состояния фильтра. Это позволяет детализировать временная шкала (дни, месяцы, годы и т. д.) при изменении закладок.

Свойство filterState сохраняет аспект фильтра в качестве свойства. Визуальный элемент может хранить различные filterState значения в закладках.

Чтобы сохранить значение свойства в качестве состояния фильтра, задайте свойство объекта как "filterState": true в файле capabilities.json .

Связанный контент

Что такое закладки

Создание закладок в классических отчетах