Menambahkan interaktivitas ke visual menggunakan pilihan visual Power BI

Power BI menyediakan dua cara untuk berinteraksi dengan visual - memilih dan memfilter. Contoh berikut menunjukkan cara memilih item dari satu visual dan memberi tahu visual lain dalam laporan tentang status pilihan baru.

Antarmuka sesuai dengan Selection objek:

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

Menggunakan manajer pemilihan untuk memilih titik data

Objek host visual menyediakan metode untuk membuat instans manajer pemilihan. Manajer pilihan memiliki metode yang sesuai untuk setiap tindakan berikut:

• Pilih
• Menghapus pilihan
• Menampilkan menu konteks
• Menyimpan pilihan saat ini
• Memeriksa status pilihan

Membuat instans manajer pemilihan

Untuk menggunakan pengelola pilihan, buat instans manajer pilihan. Biasanya, visual membuat instans manajer pilihan di bagian constructor objek visual.

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

Membuat instans penyusun pilihan

Saat instans manajer pemilihan dibuat, Anda perlu membuat selections untuk setiap titik data visual. Metode createSelectionIdBuilder objek host visual menghasilkan pilihan untuk setiap titik data. Metode ini mengembalikan instans objek dengan antarmuka 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;
}

Objek ini memiliki metode yang sesuai untuk membuat selections untuk berbagai jenis pemetaan tampilan data.

Membuat pilihan untuk pemetaan tampilan data kategoris

Mari kita tinjau bagaimana pilihan mewakili pemetaan tampilan data kategoris untuk contoh model semantik:

Visual menggunakan pemetaan tampilan data berikut:

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

Dalam contoh sebelumnya, Manufacturer adalah columns dan Type adalah rows. Seri dibuat dengan mengelompokkan nilai menurut rows (Type).

Visual harus dapat menggoreng data dengan Manufacturer atau Type.

Misalnya, jika pengguna memilih Chrysler menurut Manufacturer, visual lain harus menampilkan data berikut:

Saat pengguna memilih Import Car berdasarkan Type (memilih data menurut seri), visual lain harus menampilkan data berikut:

Untuk menampilkan data irisan, isi keranjang data visual sebagai berikut:

Dalam contoh sebelumnya, Manufacturer adalah kategori (kolom), Type adalah seri (baris), dan Sales untuk Values seri.

Membuat pilihan untuk kategori

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

Dalam kode sampel sebelumnya, kita melakukan iterasi melalui semua kategori. Dalam setiap perulangan, kami memanggil createSelectionIdBuilder untuk membuat pilihan berikutnya untuk setiap kategori dengan memanggil withCategory metode penyusun pilihan. Metode createSelectionId ini digunakan sebagai metode akhir untuk mengembalikan objek yang dihasilkan selection .

withCategory Dalam metode , kami meneruskan kolom category, dalam sampel, Manufacturer, dan indeks elemen kategori.

Membuat pilihan untuk seri

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

Membuat pilihan untuk pemetaan tampilan data tabel

Contoh berikut menunjukkan pemetaan tampilan data tabel:

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

Untuk membuat pilihan untuk setiap baris pemetaan tampilan data tabel, panggil withTable metode penyusun pilihan.

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

Kode visual melakukan iterasi baris tabel dan setiap baris memanggil withTable metode tabel. withTable Parameter metode adalah table objek dan indeks baris tabel.

Buat pilihan untuk pemetaan tampilan data matriks

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

Dalam sampel, nodeWalker secara rekursif memanggil setiap node dan node turunan.

nodeWalker membuat objek nodeSelection pada setiap panggilan. Setiap nodeSelection mewakili selection node yang sesuai.

Pilih titik data untuk menggorok visual lain

Dalam contoh ini, kita membuat handler klik untuk elemen tombol. Handler memanggil metode select dari manajer pemilihan dan meneruskan objek pemilihan.

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

Antarmuka select metode :

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

Metode select ini dapat menerima array pilihan. Ini memungkinkan visual Anda memilih beberapa titik data sekaligus. Parameter kedua, multiSelect, bertanggung jawab atas multi-pilihan. Jika multiSelect benar, Power BI tidak menghapus status pilihan sebelumnya saat menerapkan pilihan saat ini. Jika nilai salah, pilihan sebelumnya akan ditimpa.

Contoh umum penggunaan multiSelect adalah menangani status tombol Ctrl pada peristiwa klik. Saat tombol Ctrl ditahan, Anda dapat memilih lebih dari satu objek.

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

Konten terkait