Pridanie interaktivity do vizuálu pomocou výberov vizuálov služby Power BI

Služba Power BI podporuje dva spôsoby interakcie medzi vizuálmi, a to výber a filtrovanie. Ukážka zobrazená nižšie znázorňuje, ako vybrať akúkoľvek položku v jednom vizuáli a oznámiť iným vizuálom v zostave zmenu stavu výberu.

Objekt Selection zodpovedá rozhraniu:

export interface ISelectionId {
    equals(other: ISelectionId): boolean;
    includes(other: ISelectionId, ignoreHighlight?: boolean): boolean;
    getKey(): string;
    getSelector(): Selector;
    getSelectorsByColumn(): SelectorsByColumn;
    hasIdentity(): boolean;
}

Použitie funkcie SelectionManager na výber údajových bodov

Hostiteľský objekt vizuálu poskytuje metódu na vytvorenie inštancie funkcie Selection Manager. Funkcia Selection Manager zodpovedá za výber, odstránenie výberu, zobrazenie kontextovej ponuky, ukladanie aktuálnych výberov a kontrolu stavu výberu. Funkcia Selection Manager používa metódy zodpovedajúce daným akciám.

Vytvorenie inštancie funkcie Selection Manager

Ak chcete použiť funkciu Selection Manager, musíte vytvoriť inštanciu funkcie Selection Manager. Zvyčajne vizuály vytvárajú inštanciu funkcie Selection Manager v časti constructor objektu vizuálu.

export class Visual implements IVisual {
    private target: HTMLElement;
    private host: IVisualHost;
    private selectionManager: ISelectionManager;
    // ...
    constructor(options: VisualConstructorOptions) {
        this.host = options.host;
        // ...
        this.selectionManager = this.host.createSelectionManager();
    }
    // ...
}

Vytvorenie inštancie nástroja na vytvorenie výberov

Po vytvorení inštancie funkcie Selection Manager je potrebné vytvoriť selections pre jednotlivé údajové body vizuálu. Hostiteľský objekt vizuálu poskytne metódu createSelectionIdBuilder na generovanie výberu pre jednotlivé údajové body. Táto metóda vráti inštanciu objektu s rozhraním powerbi.visuals.ISelectionIdBuilder:

export interface ISelectionIdBuilder {
    withCategory(categoryColumn: DataViewCategoryColumn, index: number): this;
    withSeries(seriesColumn: DataViewValueColumns, valueColumn: DataViewValueColumn | DataViewValueColumnGroup): this;
    withMeasure(measureId: string): this;
    withMatrixNode(matrixNode: DataViewMatrixNode, levels: DataViewHierarchyLevel[]): this;
    withTable(table: DataViewTable, rowIndex: number): this;
    createSelectionId(): ISelectionId;
}

Tento objekt má zodpovedajúce metódy, aby vytvoril selections pre rôzne typy priradení zobrazenia údajov.

Poznámka

Metódy withTable a withMatrixNode boli predstavené v rozhraní API verzie 2.5.0 vizuálov služby Power BI. Ak chcete použiť výbery pre priradenia zobrazení údajov tabuľky alebo matice, musíte aktualizovať verziu rozhrania API na 2.5.0 alebo vyššiu verziu.

Vytvorenie výberov pre priradenia zobrazení kategorických údajov

Pozrime sa na to, ako sú vyjadrené výbery v priradeniach zobrazení kategorických údajov pre vzorové množiny údajov:

Výrobca Typ Hodnota
Chrysler Auto domáceho pôvodu 28883
Chrysler Nákladné auto domáceho pôvodu 117131
Chrysler Auto vyrobené v zahraničí 0
Chrysler Nákladné auto vyrobené v zahraničí 6362
Ford Auto domáceho pôvodu 50032
Ford Nákladné auto domáceho pôvodu 122446
Ford Auto vyrobené v zahraničí 0
Ford Nákladné auto vyrobené v zahraničí 0
GM Auto domáceho pôvodu 65426
GM Nákladné auto domáceho pôvodu 138122
GM Auto vyrobené v zahraničí 197
GM Nákladné auto vyrobené v zahraničí 0
Honda Auto domáceho pôvodu 51450
Honda Nákladné auto domáceho pôvodu 46115
Honda Auto vyrobené v zahraničí 2932
Honda Nákladné auto vyrobené v zahraničí 0
Nissan Auto domáceho pôvodu 51476
Nissan Nákladné auto domáceho pôvodu 47343
Nissan Auto vyrobené v zahraničí 5485
Nissan Nákladné auto vyrobené v zahraničí 1430
Toyota Auto domáceho pôvodu 55643
Toyota Nákladné auto domáceho pôvodu 61227
Toyota Auto vyrobené v zahraničí 20799
Toyota Nákladné auto vyrobené v zahraničí 23614

Vizuál následne používa nasledujúce priradenie zobrazení údajov:

{
    "dataRoles": [
        {
            "displayName": "Columns",
            "name": "columns",
            "kind": "Grouping"
        },
        {
            "displayName": "Rows",
            "name": "rows",
            "kind": "Grouping"
        },
        {
            "displayName": "Values",
            "name": "values",
            "kind": "Measure"
        }
    ],
    "dataViewMappings": [
        {
            "categorical": {
                "categories": {
                    "for": {
                        "in": "columns"
                    }
                },
                "values": {
                    "group": {
                        "by": "rows",
                        "select": [
                            {
                                "for": {
                                    "in": "values"
                                }
                            }
                        ]
                    }
                }
            }
        }
    ]
}

V ukážke hodnota Manufacturer predstavuje columns a hodnota Type predstavuje rows. Vytvoril sa rad zoskupením hodnôt podľa hodnoty rows (Type).

Vizuál by mal mať tiež možnosť rýchleho filtrovania údajov podľa hodnôt ManufacturerType.

Ak používateľ napríklad vyberie hodnotu Chrysler podľa hodnoty Manufacturer, ďalšie vizuály by mali zobraziť nasledujúce údaje:

Výrobca Typ Hodnota
Chrysler Auto domáceho pôvodu 28883
Chrysler Nákladné auto domáceho pôvodu 117131
Chrysler Auto vyrobené v zahraničí 0
Chrysler Nákladné auto vyrobené v zahraničí 6362

Ak používateľ vyberie hodnotu Import Car podľa hodnoty Type (vyberie údaje podľa radu), ostatné vizuály by mali zobraziť nasledujúce údaje:

Výrobca Typ Hodnota
Chrysler Auto vyrobené v zahraničí 0
Ford Auto vyrobené v zahraničí 0
GM Auto vyrobené v zahraničí 197
Honda Auto vyrobené v zahraničí 2932
Nissan Auto vyrobené v zahraničí 5485
Toyota Auto vyrobené v zahraničí 20799

Vizuál s výbermi kategórií a radov

Je potrebné vyplniť koše údajov vizuálu.

Koše údajov vizuálu s výbermi

Sú tu hodnota Manufacturer ako kategória (stĺpce), hodnota Type ako rad (riadky) a hodnota Value ako Values pre rad.

Poznámka

Values sa vyžadujú pre rad, pretože podľa priradenia zobrazení údajov vizuál očakáva, že Values budú zoskupené podľa údajov Rows.

Vytvorenie výberov kategórií

// categories
const categories = dataView.categorical.categories;

// create label for 'Manufacturer' column
const p = document.createElement("p") as HTMLParagraphElement;
p.innerText = categories[0].source.displayName.toString();
this.target.appendChild(p);

// get count of category elements
const categoriesCount = categories[0].values.length;

// iterate all categories to generate selection and create button elements to use selections
for (let categoryIndex = 0; categoryIndex < categoriesCount; categoryIndex++) {
    const categoryValue: powerbi.PrimitiveValue = categories[0].values[categoryIndex];

    const categorySelectionId = this.host.createSelectionIdBuilder()
        .withCategory(categories[0], categoryIndex) // we have only one category (only one `Manufacturer` column)
        .createSelectionId();
    this.dataPoints.push({
        value: categoryValue,
        selection: categorySelectionId
    });
    console.log(categorySelectionId);

    // create button element to apply selection on click
    const button = document.createElement("button") as HTMLButtonElement;
    button.value = categoryValue.toString();
    button.innerText = categoryValue.toString();
    button.addEventListener("click", () => {
        // handle click event to apply correspond selection
        this.selectionManager.select(categorySelectionId);
    });
    this.target.appendChild(button);
}

V kóde ukážky je možné vidieť, že iterujeme všetky kategórie. V každej iterácii zavoláme metódu createSelectionIdBuilder a vytvoríme ďalší výber každej kategórie zavolaním metódy withCategory zostavovača výberu. Metóda createSelectionId sa používa ako záverečná metóda na vrátenie vygenerovaného objektu selection.

V metóde withCategory odovzdáme stĺpec category, v ukážke je to Manufacturer a index prvku kategórie.

Vytvorenie výberov radov

// get groupped values for series
const series: powerbi.DataViewValueColumnGroup[] = dataView.categorical.values.grouped();

// create label for 'Type' column
const p2 = document.createElement("p") as HTMLParagraphElement;
p2.innerText = dataView.categorical.values.source.displayName;
this.target.appendChild(p2);

// iterate all series to generate selection and create button elements to use selections
series.forEach( (ser: powerbi.DataViewValueColumnGroup) => {
    // create selection id for series
    const seriesSelectionId = this.host.createSelectionIdBuilder()
        .withSeries(dataView.categorical.values, ser)
        .createSelectionId();

    this.dataPoints.push({
        value: ser.name,
        selection: seriesSelectionId
    });

    // create button element to apply selection on click
    const button = document.createElement("button") as HTMLButtonElement;
    button.value =ser.name.toString();
    button.innerText = ser.name.toString();
    button.addEventListener("click", () => {
        // handle click event to apply correspond selection
        this.selectionManager.select(seriesSelectionId);
    });
    this.target.appendChild(button);
});

Vytvorenie výberov pre priradenia zobrazení údajov tabuľky

Ukážka priradenia zobrazení údajov tabuľky

{
    "dataRoles": [
        {
            "displayName": "Values",
            "name": "values",
            "kind": "GroupingOrMeasure"
        }
    ],
    "dataViewMappings": [
        {
            "table": {
                "rows": {
                    "for": {
                        "in": "values"
                    }
                }
            }
        }
    ]
}

Ak chcete pre jednotlivé riadky priradenia zobrazení údajov tabuľky vytvoriť výber, musíte zavolať metódu withTable zostavovača výberu.

public update(options: VisualUpdateOptions) {
    const dataView = options.dataViews[0];
    dataView.table.rows.forEach((row: DataViewTableRow, rowIndex: number) => {
        this.target.appendChild(rowDiv);
        const selection: ISelectionId = this.host.createSelectionIdBuilder()
            .withTable(dataView.table, rowIndex)
            .createSelectionId();
    }
}

Kód vizuálu iteruje riadky tabuľky a každý riadok zavolá metódu tabuľky withTable. Parametre metódy withTable sú objekt table a index riadka tabuľky.

Vytvorenie výberov pre priradenie zobrazení údajov matice

public update(options: VisualUpdateOptions) {
    const host = this.host;
    const rowLevels: powerbi.DataViewHierarchyLevel[] = dataView.matrix.rows.levels;
    const columnLevels: powerbi.DataViewHierarchyLevel[] = dataView.matrix.rows.levels;

    // iterate rows hierarchy
    nodeWalker(dataView.matrix.rows.root, rowLevels);
    // iterate columns hierarchy
    nodeWalker(dataView.matrix.columns.root, columnLevels);

    function nodeWalker(node: powerbi.DataViewMatrixNode, levels: powerbi.DataViewHierarchyLevel[]) {
        const nodeSelection = host.createSelectionIdBuilder().withMatrixNode(node, levels);

        if (node.children && node.children.length) {
            node.children.forEach(child => {
                nodeWalker(child, levels);
            });
        }
    }
}

V ukážke vykoná nodeWalker rekurzívne volanie pre každý uzol a podriadené uzly.

Funkcia nodeWalker vytvorí objekt nodeSelection pri každom volaní. Každá funkcia nodeSelection predstavuje selection zodpovedajúcich uzlov.

Výber údajových bodov na rýchle filtrovanie ďalších vizuálov

Vo vzorových kódoch výberov pre priradenie zobrazení kategorických údajov ste mohli vidieť, že sme vytvorili obslužný program kliknutí pre prvky button. Obslužný program zavolá metódu select funkcie Selection Manager a odovzdá objekt výberu.

button.addEventListener("click", () => {
    // handle click event to apply correspond selection
    this.selectionManager.select(categorySelectionId);
});

Rozhranie metódy select je

interface ISelectionManager {
    // ...
    select(selectionId: ISelectionId | ISelectionId[], multiSelect?: boolean): IPromise<ISelectionId[]>;
    // ...
}

Môžete vidieť, že metóda select dokáže prijať pole výberov. Znamená to, že váš vizuál môže vybrať niekoľko údajových bodov. Druhý parameter multiSelect zodpovedá za viacnásobný výber. Ak je hodnota TRUE, služba Power BI nevymaže predchádzajúci stav výberu a použije aktuálny výber, v opačnom prípade sa obnoví predchádzajúci výber.

Typický scenár použitia funkcie multiSelect, ktorá obsluhuje stav tlačidla CTRL pri kliknutí.

button.addEventListener("click", (mouseEvent) => {
    const multiSelect = (mouseEvent as MouseEvent).ctrlKey;
    this.selectionManager.select(seriesSelectionId, multiSelect);
});

Ďalšie kroky