드릴다운 지원 추가

아티클
07/01/2024

시각적 개체에 계층 구조가 있는 경우 사용자가 Power BI 드릴다운 기능을 사용하여 더 많은 세부 정보를 표시하도록 허용할 수 있습니다.

Power BI 서비스의 드릴 모드에서 Power BI 드릴다운 기능에 대해 자세히 알아보세요. 시각적 개체가 드릴 기능을 동적으로 사용하거나 사용하지 않도록 설정하려면 동적 드릴다운 컨트롤을 참조하세요.

시각적 개체에서 드릴다운 지원 사용

시각적 개체에서 드릴다운 작업을 지원하려면 drill-down라는 capabilities.json에 새 필드를 추가합니다. 이 필드에는 드릴다운 작업을 사용하도록 설정하려는 dataRole의 이름이 포함된 roles라는 하나의 속성이 있습니다.

    "drilldown": {
        "roles": [
            "category"
        ]
    }

참고 항목

드릴다운 dataRole은 Grouping 형식이어야 합니다. dataRole 조건의 max 속성은 1로 설정해야 합니다.

드릴다운 필드에 역할을 추가하면 사용자는 여러 필드를 데이터 역할로 끌어올 수 있습니다.

예시:

{
    "dataRoles": [
        {
            "displayName": "Category",
            "name": "category",
            "kind": "Grouping"
        },
        {
            "displayName": "Value",
            "name": "value",
            "kind": "Measure"
        }
    ],
    "drilldown": {
        "roles": [
            "category"
        ]
    },
    "dataViewMappings": [
        {
            "categorical": {
                "categories": {
                    "for": {
                        "in": "category"
                    }
                },
                "values": {
                    "select": [
                        {
                            "bind": {
                                "to": "value"
                            }
                        }
                    ]
                }
            }
        }
    ]
}

드릴다운 지원으로 시각적 개체 만들기

드릴다운 지원을 사용하여 시각적 개체를 만들려면 다음 명령을 실행합니다.

pbiviz new testDrillDown -t default

기본 샘플 시각적 개체를 만들려면 위에 있는 capabilities.json의 샘플을 새로 만든 시각적 개체에 적용합니다.

시각적 개체의 HTML 요소를 저장할 div 컨테이너의 속성을 만듭니다.

"use strict";

import "core-js/stable";
import "./../style/visual.less";
// imports

export class Visual implements IVisual {
    // visual properties
    // ...
    private div: HTMLDivElement; // <== NEW PROPERTY

    constructor(options: VisualConstructorOptions) {
        // constructor body
        // ...
    }

    public update(options: VisualUpdateOptions) {
        // update method body
        // ...
    }

    /**
     * Returns properties pane formatting model content hierarchies, properties and latest formatting values, Then populate properties pane.
     * This method is called once each time we open the properties pane or when the user edits any format property. 
     */
    public getFormattingModel(): powerbi.visuals.FormattingModel {
        return this.formattingSettingsService.buildFormattingModel(this.formattingSettings);
    }
}

시각적 개체의 생성자를 업데이트합니다.


export class Visual implements IVisual {
    // visual properties
    // ...
    private div: HTMLDivElement;

    constructor(options: VisualConstructorOptions) {
        console.log('Visual constructor', options);
        this.formattingSettingsService = new FormattingSettingsService();
        this.target = options.element;
        this.updateCount = 0;

        if (document) {
            const new_p: HTMLElement = document.createElement("p");
            new_p.appendChild(document.createTextNode("Update count:"));
            const new_em: HTMLElement = document.createElement("em");
            this.textNode = document.createTextNode(this.updateCount.toString());
            new_em.appendChild(this.textNode);
            new_p.appendChild(new_em);
            this.div = document.createElement("div"); // <== CREATE DIV ELEMENT
            this.target.appendChild(new_p);
        }
    }
}

button을 만들려면 update 시각적 개체의 메서드를 업데이트합니다.

export class Visual implements IVisual {
    // ...

    public update(options: VisualUpdateOptions) {
        this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews);
        console.log('Visual update', options);

        const dataView: DataView = options.dataViews[0];
        const categoricalDataView: DataViewCategorical = dataView.categorical;

        // don't create elements if no data
        if (!options.dataViews[0].categorical ||
            !options.dataViews[0].categorical.categories) {
            return
        }

        // to display current level of hierarchy
        if (typeof this.textNode !== undefined) {
            this.textNode.textContent = categoricalDataView.categories[categoricalDataView.categories.length - 1].source.displayName.toString();
        }

        // remove old elements
        // for better performance use D3js pattern:
        // https://d3js.org/#enter-exit
        while (this.div.firstChild) {
            this.div.removeChild(this.div.firstChild);
        }

        // create buttons for each category value
        categoricalDataView.categories[categoricalDataView.categories.length - 1].values.forEach( (category: powerbi.PrimitiveValue, index: number) => {
            let button = document.createElement("button");
            button.innerText = category.toString();

            this.div.appendChild(button);
        })

    }
    // ...

.\style\visual.less에서 단순한 스타일을 적용합니다.

button {
    margin: 5px;
    min-width: 50px;
    min-height: 50px;
}

시각적 개체를 테스트하기 위한 샘플 데이터를 준비합니다.

H1	H2	H3	VALUES
A	A1	A11	1
A	A1	A12	2
A	A2	A21	3
A	A2	A22	4
A	A3	A31	5
A	A3	A32	6
b	B1	B11	7
b	B1	B12	8
b	B2	B21	9
b	B2	B22	10
b	B3	B31	11
b	B3	B32	12

Power BI Desktop에서 계층 구조를 만듭니다.

스크린샷은 상황에 맞는 메뉴에서 선택한 새 계층이 있는 Power BI Desktop을 보여줍니다.

새 계층 구조에 모든 범주 열(H1, H2, H3)을 포함합니다.

스크린샷은 새 계층에 추가할 수 있는 범주 열을 보여줍니다.

이 단계를 수행하면 다음과 같은 시각적 개체가 생성됩니다.

단추가 포함된 개발자 시각적 개체

시각적 개체의 단추에 상황에 맞는 메뉴를 추가하려면 다음을 수행합니다.

시각적 개체의 속성에 host 개체를 저장하고 선택 관리자 만들기의 createSelectionManager 메서드를 호출하여 Power BI 시각적 개체 API로 상황에 맞는 메뉴를 표시합니다.

"use strict";

import "core-js/stable";
import "./../style/visual.less";
// default imports

import IVisualHost = powerbi.extensibility.visual.IVisualHost;
import ISelectionManager = powerbi.extensibility.ISelectionManager;
import ISelectionId = powerbi.visuals.ISelectionId;

export class Visual implements IVisual {
    // visual properties
    // ...
    private div: HTMLDivElement;
    private host: IVisualHost; // <== NEW PROPERTY
    private selectionManager: ISelectionManager; // <== NEW PROPERTY

    constructor(options: VisualConstructorOptions) {
        // constructor body
        // save the host in the visuals properties
        this.host = options.host;
        // create selection manager
        this.selectionManager = this.host.createSelectionManager();
        // ...
    }

    public update(options: VisualUpdateOptions) {
        // update method body
        // ...
    }

    // ...
}

forEach 함수 콜백의 본문을 다음과 같이 변경합니다.

    categoricalDataView.categories[categoricalDataView.categories.length - 1].values.forEach( (category: powerbi.PrimitiveValue, index: number) => {
        // create selectionID for each category value
        let selectionID: ISelectionId = this.host.createSelectionIdBuilder()
            .withCategory(categoricalDataView.categories[0], index)
            .createSelectionId();

        let button = document.createElement("button");
        button.innerText = category.toString();

        // add event listener to click event
        button.addEventListener("click", (event) => {
            // call select method in the selection manager
            this.selectionManager.select(selectionID);
        });

        button.addEventListener("contextmenu", (event) => {
            // call showContextMenu method to display context menu on the visual
            this.selectionManager.showContextMenu(selectionID, {
                x: event.clientX,
                y: event.clientY
            });
            event.preventDefault();
        });

        this.div.appendChild(button);
    });

데이터를 시각적 개체에 적용합니다.

스크린샷은 H2가 호출된 계층 구조를 보여줍니다.

최종 단계에서 선택 항목 및 상황에 맞는 메뉴를 사용하여 시각적 개체를 가져와야 합니다.

애니메이션은 시각적 상황에 맞는 메뉴에서 드릴다운 및 드릴업을 선택하는 것을 보여줍니다.

행렬 데이터 뷰 매핑의 드릴다운 지원 추가

행렬 데이터 뷰 매핑을 사용하여 시각적 개체를 테스트하려면 먼저 샘플 데이터를 준비합니다.

행 1	행 2	행 3	1 열	2 열	3 열	값
R1	R11	R111	C1	C11	C111	1
R1	R11	R112	C1	C11	C112	2
R1	R11	R113	C1	C11	C113	3
R1	R12	R121	C1	C12	C121	4
R1	R12	R122	C1	C12	C122	5
R1	R12	R123	C1	C12	C123	6
R1	R13	R131	C1	C13	C131	7
R1	R13	R132	C1	C13	C132	8
R1	R13	R133	C1	C13	C133	9
R2	R21	R211	C2	C21	C211	10
R2	R21	R212	C2	C21	C212	11
R2	R21	R213	C2	C21	C213	12
R2	R22	R221	C2	C22	C221	13
R2	R22	R222	C2	C22	C222	14
R2	R22	R223	C2	C22	C223	16
R2	R23	R231	C2	C23	C231	17
R2	R23	R232	C2	C23	C232	18
R2	R23	R233	C2	C23	C233	19

그런 다음 시각적 개체에 다음 데이터 뷰 매핑을 적용합니다.

{
    "dataRoles": [
        {
            "displayName": "Columns",
            "name": "columns",
            "kind": "Grouping"
        },
        {
            "displayName": "Rows",
            "name": "rows",
            "kind": "Grouping"
        },
        {
            "displayName": "Value",
            "name": "value",
            "kind": "Measure"
        }
    ],
    "drilldown": {
        "roles": [
            "columns",
            "rows"
        ]
    },
    "dataViewMappings": [
        {
            "matrix": {
                "columns": {
                    "for": {
                        "in": "columns"
                    }
                },
                "rows": {
                    "for": {
                        "in": "rows"
                    }
                },
                "values": {
                    "for": {
                        "in": "value"
                    }
                }
            }
        }
    ]
}

데이터를 시각적 개체에 적용합니다.

스크린샷은 열 및 행 계층 구조와 해당 멤버가 선택된 MatrixHierarchy를 보여줍니다.

행렬 데이터 뷰 매핑을 처리하는 데 필요한 인터페이스를 가져옵니다.

// ...
import DataViewMatrix = powerbi.DataViewMatrix;
import DataViewMatrixNode = powerbi.DataViewMatrixNode;
import DataViewHierarchyLevel = powerbi.DataViewHierarchyLevel;
// ...

행 및 열 요소의 두 div에 대해 두 개의 속성을 만듭니다.

export class Visual implements IVisual {
    // ...
    private rowsDiv: HTMLDivElement;
    private colsDiv: HTMLDivElement;
    // ...
    constructor(options: VisualConstructorOptions) {
        // constructor body
        // ...
        // Create div elements and append to main div of the visual
        this.rowsDiv = document.createElement("div");
        this.target.appendChild(this.rowsDiv);

        this.colsDiv = document.createElement("div");
        this.target.appendChild(this.colsDiv);
    }
    // ...
}

요소를 렌더링하기 전에 데이터를 확인하고 계층 구조의 현재 수준을 표시합니다.

export class Visual implements IVisual {
    // ...
    constructor(options: VisualConstructorOptions) {
        // constructor body
    }

    public update(options: VisualUpdateOptions) {
        this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews);
        console.log('Visual update', options);

        const dataView: DataView = options.dataViews[0];
        const matrixDataView: DataViewMatrix = dataView.matrix;

        // if the visual doesn't receive the data no reason to continue rendering
        if (!matrixDataView ||
            !matrixDataView.columns ||
            !matrixDataView.rows ) {
            return
        }

        // to display current level of hierarchy
        if (typeof this.textNode !== undefined) {
            this.textNode.textContent = categoricalDataView.categories[categoricalDataView.categories.length - 1].source.displayName.toString();
        }
        // ...
    }
    // ...
}

계층 구조 트래버스를 위한 treeWalker 함수를 만듭니다.

export class Visual implements IVisual {
    // ...
    public update(options: VisualUpdateOptions) {
        // ...

        // if the visual doesn't receive the data no reason to continue rendering
        if (!matrixDataView ||
            !matrixDataView.columns ||
            !matrixDataView.rows ) {
            return
        }

        const treeWalker = (matrixNode: DataViewMatrixNode, index: number, levels: DataViewHierarchyLevel[], div: HTMLDivElement)  => {
            // ...
            if (matrixNode.children) {
                // ...
                // traversing child nodes
                matrixNode.children.forEach((node, index) => treeWalker(node, index, levels, childDiv));
            }
        }

        // traversing rows
        const rowRoot: DataViewMatrixNode = matrixDataView.rows.root;
        rowRoot.children.forEach((node, index) => treeWalker(node, index, matrixDataView.rows.levels, this.rowsDiv));

        // traversing columns
        const colRoot = matrixDataView.columns.root;
        colRoot.children.forEach((node, index) => treeWalker(node, index, matrixDataView.columns.levels, this.colsDiv));
    }
    // ...
}

데이터 요소의 선택 항목을 생성합니다.

const treeWalker = (matrixNode: DataViewMatrixNode, index: number, levels: DataViewHierarchyLevel[], div: HTMLDivElement)  => {
    // generate selectionID for each node of matrix
    const selectionID: ISelectionID = this.host.createSelectionIdBuilder()
        .withMatrixNode(matrixNode, levels)
        .createSelectionId();
    // ...
    if (matrixNode.children) {
        // ...
        // traversing child nodes
        matrixNode.children.forEach((node, index) => treeWalker(node, index, levels, childDiv));
    }
}

계층 구조의 각 수준에 대해 div을(를) 만듭니다.

const treeWalker = (matrixNode: DataViewMatrixNode, index: number, levels: DataViewHierarchyLevel[], div: HTMLDivElement)  => {
    // generate selectionID for each node of matrix
    const selectionID: ISelectionID = this.host.createSelectionIdBuilder()
        .withMatrixNode(matrixNode, levels)
        .createSelectionId();
    // ...
    if (matrixNode.children) {
        // create div element for level
        const childDiv = document.createElement("div");
        // add to current div
        div.appendChild(childDiv);
        // create paragraph element to display next
        const p = document.createElement("p");
        // display level name on paragraph element
        const level = levels[matrixNode.level];
        p.innerText = level.sources[level.sources.length - 1].displayName;
        // add paragraph element to created child div
        childDiv.appendChild(p);
        // traversing child nodes
        matrixNode.children.forEach((node, index) => treeWalker(node, index, levels, childDiv));
    }
}

시각적 개체와 상호 작용하고 행렬 데이터 요소의 상황에 맞는 메뉴를 표시하도록 buttons을(를) 만듭니다.

const treeWalker = (matrixNode: DataViewMatrixNode, index: number, levels: DataViewHierarchyLevel[], div: HTMLDivElement)  => {
    // generate selectionID for each node of matrix
    const selectionID: ISelectionID = this.host.createSelectionIdBuilder()
        .withMatrixNode(matrixNode, levels)
        .createSelectionId();

    // create button element
    let button = document.createElement("button");
    // display node value/name of the button's text
    button.innerText = matrixNode.value.toString();

    // add event listener on click
    button.addEventListener("click", (event) => {
        // call select method in the selection manager
        this.selectionManager.select(selectionID);
    });

    // display context menu on click
    button.addEventListener("contextmenu", (event) => {
        // call showContextMenu method to display context menu on the visual
        this.selectionManager.showContextMenu(selectionID, {
            x: event.clientX,
            y: event.clientY
        });
        event.preventDefault();
    });

    div.appendChild(button);

    if (matrixNode.children) {
        // ...
    }
}

요소를 다시 렌더링하기 전에 div 요소 지우기:

public update(options: VisualUpdateOptions) {
    // ...
    const treeWalker = (matrixNode: DataViewMatrixNode, index: number, levels: DataViewHierarchyLevel[], div: HTMLDivElement)  => {
        // ...
    }

    // remove old elements
    // to better performance use D3js pattern:
    // https://d3js.org/#enter-exit
    while (this.rowsDiv.firstChild) {
        this.rowsDiv.removeChild(this.rowsDiv.firstChild);
    }
    // create label for row elements
    const prow = document.createElement("p");
    prow.innerText = "Rows";
    this.rowsDiv.appendChild(prow);

    while (this.colsDiv.firstChild) {
        this.colsDiv.removeChild(this.colsDiv.firstChild);
    }
    // create label for columns elements
    const pcol = document.createElement("p");
    pcol.innerText = "Columns";
    this.colsDiv.appendChild(pcol);

    // render elements for rows
    const rowRoot: DataViewMatrixNode = matrixDataView.rows.root;
    rowRoot.children.forEach((node, index) => treeWalker(node, index, matrixDataView.rows.levels, this.rowsDiv));

    // render elements for columns
    const colRoot = matrixDataView.columns.root;
    colRoot.children.forEach((node, index) => treeWalker(node, index, matrixDataView.columns.levels, this.colsDiv));
}

마지막으로 상황에 맞는 메뉴가 있는 시각적 개체를 가져와야 합니다.

애니메이션은 드릴다운 또는 드릴업 옵션이 포함된 시각적 개체에 대한 상황에 맞는 메뉴를 보여줍니다.

다음을 통해 공유

드릴다운 지원 추가

시각적 개체에서 드릴다운 지원 사용

드릴다운 지원으로 시각적 개체 만들기

시각적 요소에 상황에 맞는 메뉴 추가

행렬 데이터 뷰 매핑의 드릴다운 지원 추가

피드백

피드백

추가 리소스

H1	H2	H3	VALUES
A	A1	A11	1
A	A1	A12	2
A	A2	A21	3
A	A2	A22	4
A	A3	A31	5
A	A3	A32	6
b	B1	B11	7
b	B1	B12	8
b	B2	B21	9
b	B2	B22	10
b	B3	B31	11
b	B3	B32	12

H1	H2	H3	VALUES
A	A1	A11	1
A	A1	A12	2
A	A2	A21	3
A	A2	A22	4
A	A3	A31	5
A	A3	A32	6
b	B1	B11	7
b	B1	B12	8
b	B2	B21	9
b	B2	B22	10
b	B3	B31	11
b	B3	B32	12

다음을 통해 공유

드릴다운 지원 추가

시각적 개체에서 드릴다운 지원 사용

드릴다운 지원으로 시각적 개체 만들기

시각적 요소에 상황에 맞는 메뉴 추가

행렬 데이터 뷰 매핑의 드릴다운 지원 추가

관련 콘텐츠

피드백

피드백

추가 리소스

H1	H2	H3	VALUES
A	A1	A11	1
A	A1	A12	2
A	A2	A21	3
A	A2	A22	4
A	A3	A31	5
A	A3	A32	6
b	B1	B11	7
b	B1	B12	8
b	B2	B21	9
b	B2	B22	10
b	B3	B31	11
b	B3	B32	12