Aggiungere il supporto del drill-down

Articolo
10/12/2024

Quando un oggetto visivo ha una gerarchia, è possibile consentire agli utenti di usare la funzionalità di drill-down di Power BI per visualizzare altri dettagli.

Per altre informazioni sulla funzionalità di drill-down di Power BI, vedere Modalità drill nel servizio Power BI. Per consentire all'oggetto visivo di abilitare o disabilitare dinamicamente la funzionalità di drill-down, vedere Controllo drill-down dinamico.

Abilitare il supporto del drill-down nell'oggetto visivo

Per supportare le azioni di drill-down nell'oggetto visivo, aggiungere un nuovo campo a capabilities.json denominato drill-down. Questo campo ha una proprietà denominata roles che contiene il nome del ruolo dati su cui si desidera abilitare le azioni di drill-down.

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

Nota

Il drill-down dataRole deve essere di tipo Grouping. La proprietà max nelle condizioni di dataRole deve essere impostata su 1.

Una volta aggiunto il ruolo al campo drill-down, gli utenti possono trascinare più campi nel ruolo dei dati.

Ad esempio:

{
    "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"
                            }
                        }
                    ]
                }
            }
        }
    ]
}

Creare un oggetto visivo con supporto drill-down

Per creare un oggetto visivo con supporto drill-down, eseguire il comando seguente:

pbiviz new testDrillDown -t default

Per creare un oggetto visivo di esempio predefinito, applicare l'esempio precedente di capabilities.json all'oggetto visivo appena creato.

Creare la proprietà per consentire al contenitore div di contenere gli elementi HTML dell'oggetto visivo:

"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);
    }
}

Aggiornare il costruttore dell'oggetto visivo:


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);
        }
    }
}

Per creare button, aggiornare il metodo dell'oggetto visivo 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);
        })

    }
    // ...

Applicare stili semplici in .\style\visual.less:

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

Preparare i dati di esempio per il test dell'oggetto visivo:

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

Creare la gerarchia in Power BI Desktop:

Nello screenshot viene visualizzato Power BI Desktop con la nuova gerarchia selezionata in un menu di scelta rapida.

Includere tutte le colonne delle categorie (H1, H2, H3) nella nuova gerarchia:

Nello screenshot vengono visualizzate le colonne delle categorie che è possibile aggiungere alla nuova gerarchia.

Dopo questi passaggi verrà visualizzato l'oggetto visivo seguente:

Oggetto visivo dev con pulsanti

Per aggiungere un menu di scelta rapida ai pulsanti nell'oggetto visivo:

Salvare l'oggetto host nelle proprietà dell'oggetto visivo e chiamare il metodo createSelectionManager per creare l'utilità di gestione della selezione in modo da visualizzare un menu di scelta rapida usando l'API degli oggetti visivi di Power BI.

"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
        // ...
    }

    // ...
}

Modificare il corpo del callback della funzione in 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);
    });

Applicare i dati all'oggetto visivo:

Nello screenshot viene visualizzata la gerarchia con H2 evidenziato.

Nel passaggio finale si otterrà l'oggetto visivo con le selezioni e il menu di scelta rapida:

L'animazione visualizza la selezione di Drill-down e Drill-up dal menu di scelta rapida dell'oggetto visivo.

Aggiungere il supporto del drill-down per il mapping della visualizzazione dati di matrice

Per testare l'oggetto visivo con mapping di visualizzazione dati matrice, preparare prima di tutto i dati di esempio:

Riga 1	Riga 2	Riga 3	Colonna 1	Colonna 2	Colonna 3	Valori
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	S2	C21	C211	10
R2	R21	R212	S2	C21	C212	11
R2	R21	R213	S2	C21	C213	12
R2	R22	R221	S2	C22	C221	13
R2	R22	R222	S2	C22	C222	14
R2	R22	R223	S2	C22	C223	16
R2	R23	R231	S2	C23	C231	17
R2	R23	R232	S2	C23	C232	18
R2	R23	R233	S2	C23	C233	19

Applicare quindi il mapping della visualizzazione dati seguente all'oggetto visivo:

{
    "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"
                    }
                }
            }
        }
    ]
}

Applicare i dati all'oggetto visivo:

Nello screenshot viene visualizzato il valore MatrixHierarchy con la gerarchia di colonne e righe e i membri relativi selezionati.

Importare le interfacce necessarie per elaborare i mapping della visualizzazione dati di matrice:

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

Creare due proprietà per due contenitori div di elementi righe e colonne:

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);
    }
    // ...
}

Controllare i dati prima di eseguire il rendering degli elementi e visualizzare il livello corrente della gerarchia:

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();
        }
        // ...
    }
    // ...
}

Creare la funzione treeWalker per attraversare la gerarchia:

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));
    }
    // ...
}

Generare le selezioni per i punti dati.

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));
    }
}

Creare div per ogni livello della gerarchia:

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));
    }
}

Creare buttons per interagire con l'oggetto visivo e visualizzare il menu di scelta rapida per i punti dati della matrice:

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) {
        // ...
    }
}

Cancellare gli elementi div prima di eseguire di nuovo il rendering degli elementi:

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));
}

Infine, si dovrebbe ottenere un oggetto visivo con il menu di scelta rapida:

L'animazione illustra un menu di scelta rapida per l'oggetto visivo con le opzioni per eseguire il drill-down o il drill-up.

Condividi tramite

Aggiungere il supporto del drill-down

Abilitare il supporto del drill-down nell'oggetto visivo

Creare un oggetto visivo con supporto drill-down

Aggiungere un menu di scelta rapida agli elementi visivi

Aggiungere il supporto del drill-down per il mapping della visualizzazione dati di matrice

Commenti e suggerimenti

Risorse aggiuntive

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

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

Condividi tramite

Aggiungere il supporto del drill-down

Abilitare il supporto del drill-down nell'oggetto visivo

Creare un oggetto visivo con supporto drill-down

Aggiungere un menu di scelta rapida agli elementi visivi

Aggiungere il supporto del drill-down per il mapping della visualizzazione dati di matrice

Contenuto correlato

Commenti e suggerimenti

Risorse aggiuntive

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