Power BI 보고서에서 시각적 개체에 책갈피 지원 추가

Power BI 보고서 책갈피를 사용하면 구성된 보고서 페이지 보기를 캡처하고 저장할 수 있습니다. 그런 다음, 언제든지 빠르고 쉽게 저장된 보기로 돌아갈 수 있습니다. 책갈피는 선택 항목 및 필터를 포함하는 전체 구성을 저장합니다.

책갈피에 대한 자세한 내용은 책갈피를 사용하여 Power BI에서 정보 공유 및 스토리 빌드를 참조하세요.

책갈피를 지원하는 시각적 개체

책갈피를 지원하는 Power BI 시각적 개체는 필요할 때 올바른 정보를 저장하고 제공할 수 있어야 합니다. 시각적 개체가 다른 시각적 개체와 상호 작용하거나, 데이터 요소를 선택하거나, 다른 시각적 개체를 필터링하는 경우 시각적 개체의 filterState 속성에 책갈피가 지정된 상태를 저장해야 합니다.

참고 항목

책갈피를 지원하는 시각적 개체를 만들려면 다음이 필요합니다.

• SelectionManager를 사용하는 필터가 아닌 시각적 개체용 Visual API 버전 1.11.0 이상
• 필터 시각적 개체용 Visual API 버전 2.6.0 이상
• 사용 중인 버전을 확인하려면 pbiviz.json 파일에서 apiVersion을 확인합니다.

보고서 책갈피에서 Power BI 시각적 개체가 Power BI와 상호 작용하는 방법

책갈피마다 다른 데이터 요소가 선택되어 있는 보고서 페이지에 여러 개의 책갈피를 만든다고 가정해 보세요.

먼저 시각적 개체에서 하나 이상의 데이터 요소를 선택합니다. 시각적 개체는 선택 항목을 호스트에 전달합니다. 그런 다음 책갈피 창에서 추가를 선택합니다. Power BI는 현재 선택 항목을 새 책갈피에 대해 저장합니다.

이 작업을 여러 번 수행하여 새 책갈피를 만듭니다. 책갈피를 만든 후에 책갈피 간에 전환할 수 있습니다.

책갈피를 선택할 때마다 Power BI는 저장된 필터 또는 선택 상태를 복원하고 시각적 개체에 전달합니다. 보고서의 시각적 개체는 책갈피에 저장된 상태에 따라 강조 표시되거나 필터링됩니다. 올바른 상태를 복원하려면 시각적 개체가 올바른 선택 상태를 호스트에 전달해야 합니다(예: 렌더링된 데이터 포인트의 색).

새 선택 상태(또는 필터)는 update 메서드의 options.jsonFilters 속성을 통해 전달됩니다. jsonFilters는 Advanced Filter 또는 Tuple Filter일 수 있습니다.

• 시각적 개체에 선택한 데이터 요소가 포함된 경우 ISelectionManager에서 콜백 함수 registerOnSelectCallback을 사용하여 선택 영역을 선택한 책갈피의 선택 영역으로 다시 설정합니다.
• 시각적 개체가 필터를 사용하여 데이터를 선택하는 경우 필터 값을 선택한 책갈피의 해당 값으로 다시 설정합니다.

선택 항목을 사용하는 시각적 개체

참고 항목

InteractivityService는 더 이상 사용되지 않습니다.

선택 항목을 사용하여 시각적 개체가 다른 시각적 개체와 상호 작용하는 경우, 다음 두 가지 방법 중 하나로 책갈피 지원을 추가할 수 있습니다.

• InteractivityService를 통해 선택 항목을 관리하려면 applySelectionFromFilter를 사용합니다. 사용되지 않는 메서드입니다.
• SelectionManager를 통해.

InteractivityService를 사용하여 책갈피 선택 영역 복원(사용되지 않음)

시각적 개체가 InteractivityService를 사용하는 경우 시각적 개체의 책갈피를 지원하기 위한 다른 작업이 필요하지 않습니다.

책갈피를 선택하면 유틸리티가 시각적 개체의 선택 상태를 자동으로 처리합니다.

SelectionManager를 사용하여 책갈피 선택 영역 복원

다음과 같이 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 개체에 저장된 현재 선택 상태가 반영됩니다. 그런 다음 데이터 포인트가 렌더링되면 사용자 지정 시각적 개체의 선택 상태가 책갈피 상태와 일치합니다.

필터를 사용하는 시각적 개체

시각적 개체가 날짜 범위별 데이터 필터를 만든다고 가정해 보겠습니다. 범위의 시작 날짜와 종료 날짜로 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
}

그런 다음, 시각적 개체는 내부 상태를 현재 조건과 일치하도록 변경합니다. 내부 상태에는 데이터 요소 및 시각화 개체(선, 사각형 등)가 포함됩니다.

타임라인 슬라이서 시각적 개체가 범위 선택기를 해당 데이터 범위로 변경합니다.

시각적 개체의 필터 상태 저장

책갈피에 대한 필터 조건을 저장하는 것 외에도 다른 필터 측면을 저장할 수도 있습니다.

예를 들어, 타임라인 슬라이서는 Granularity 속성 값을 필터 상태로 저장합니다. 책갈피를 변경할 때 타임라인의 세분성(일, 월, 연도 등)을 변경할 수 있습니다.

filterState 속성은 필터 측면을 속성으로 저장합니다. 시각적 개체는 책갈피에 여러 filterState 값을 저장할 수 있습니다.

속성 값을 필터 상태로 저장하려면 capabilities.json 파일에서 개체 속성을 "filterState": true로 설정합니다.

관련 콘텐츠

• 책갈피란?
• 데스크톱 보고서에서 책갈피 만들기