Přidání interaktivity do vizuálu podle výběrů vizuálů Power BI
Power BI nabízí dva způsoby interakce s vizuály – výběr a filtrování. Následující příklad ukazuje, jak vybrat položku z jednoho vizuálu a upozornit ostatní vizuály v sestavě o novém stavu výběru.
Rozhraní odpovídá objektu Selection :
export interface ISelectionId {
equals(other: ISelectionId): boolean;
includes(other: ISelectionId, ignoreHighlight?: boolean): boolean;
getKey(): string;
getSelector(): Selector;
getSelectorsByColumn(): SelectorsByColumn;
hasIdentity(): boolean;
}
Výběr datových bodů pomocí správce výběru
Objekt hostitele vizuálu poskytuje metodu pro vytvoření instance správce výběru. Správce výběru má odpovídající metodu pro každou z následujících akcí:
- Vyberte
- Vymazání výběru
- Zobrazení místní nabídky
- Uložení aktuálních výběrů
- Kontrola stavu výběru
Vytvoření instance správce výběru
Pokud chcete použít správce výběru, vytvořte instanci správce výběru. Vizuály obvykle vytvoří instanci správce výběru v constructor části 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();
}
// ...
}
Vytvoření instance tvůrce výběrů
Po vytvoření instance správce výběru je potřeba vytvořit selections pro každý datový bod vizuálu. Metoda hostitelského createSelectionIdBuilder objektu vizuálu vygeneruje výběr pro každý datový bod. Tato metoda vrátí instanci 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á odpovídající metody pro vytvoření selections pro různé typy mapování zobrazení dat.
Poznámka:
Metody withTable a withMatrixNode byly zavedeny v rozhraní API 2.5.0 vizuálů Power BI.
Pokud potřebujete použít výběry pro mapování zobrazení dat tabulky nebo matice, aktualizujte rozhraní API verze 2.5.0 nebo vyšší.
Vytvoření výběrů pro mapování zobrazení dat kategorií
Pojďme se podívat, jak výběry představují mapování zobrazení dat kategorií pro ukázkový sémantický model:
| Výrobce | Typ | Hodnota |
|---|---|---|
| Chrysler | Domácí auto | 28883 |
| Chrysler | Domácí nákladní vůz | 117131 |
| Chrysler | Importovat auto | 0 |
| Chrysler | Importovat nákladní vůz | 6362 |
| Ford | Domácí auto | 50032 |
| Ford | Domácí nákladní vůz | 122446 |
| Ford | Importovat auto | 0 |
| Ford | Importovat nákladní vůz | 0 |
| GM | Domácí auto | 65426 |
| GM | Domácí nákladní vůz | 138122 |
| GM | Importovat auto | 197 |
| GM | Importovat nákladní vůz | 0 |
| Honda | Domácí auto | 51450 |
| Honda | Domácí nákladní vůz | 46115 |
| Honda | Importovat auto | 2932 |
| Honda | Importovat nákladní vůz | 0 |
| Nissan | Domácí auto | 51476 |
| Nissan | Domácí nákladní vůz | 47343 |
| Nissan | Importovat auto | 5485 |
| Nissan | Importovat nákladní vůz | 1430 |
| Toyota | Domácí auto | 55643 |
| Toyota | Domácí nákladní vůz | 61227 |
| Toyota | Importovat auto | 20799 |
| Toyota | Importovat nákladní vůz | 23614 |
Vizuál používá následující mapování zobrazení dat:
{
"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 předchozím příkladu Manufacturer je columns a Type je rows. Řada se vytvoří seskupením hodnot podle rows (Type).
Vizuál by měl být schopný rozdělit data podle Manufacturer nebo Type.
Pokud například uživatel vybere Chrysler Manufacturermožnost podle , ostatní vizuály by měly zobrazit následující data:
| Výrobce | Typ | Hodnota |
|---|---|---|
| Chrysler | Domácí auto | 28883 |
| Chrysler | Domácí nákladní vůz | 117131 |
| Chrysler | Importovat auto | 0 |
| Chrysler | Importovat nákladní vůz | 6362 |
Když uživatel vybere Import Car Type data podle (vybere data podle řady), ostatní vizuály by měly zobrazit následující data:
| Výrobce | Typ | Hodnota |
|---|---|---|
| Chrysler | Importovat auto | 0 |
| Ford | Importovat auto | 0 |
| GM | Importovat auto | 197 |
| Honda | Importovat auto | 2932 |
| Nissan | Importovat auto | 5485 |
| Toyota | Importovat auto | 20799 |
Pokud chcete zobrazit průřezová data, vyplňte datové košíky vizuálu následujícím způsobem:
V předchozím příkladu Manufacturer je kategorie (sloupce), Type je řada (řádky) a Sales je Values určená pro řadu.
Poznámka:
Values jsou vyžadovány pro zobrazení řady, protože podle mapování Values zobrazení dat jsou seskupené podle Rows dat.
Vytváření výběrů pro kategorie
// 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 předchozím vzorovém kódu iterujeme všechny kategorie. V každé iteraci voláme createSelectionIdBuilder vytvoření dalšího výběru pro každou kategorii voláním withCategory metody tvůrce výběrů. Metoda createSelectionId se používá jako konečná metoda k vrácení vygenerovaného selection objektu.
withCategory V metodě předáváme sloupec category, v ukázce, jeho Manufacturera index prvku category.
Vytváření výběrů pro řady
// 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);
});
Vytvoření výběrů pro mapování zobrazení dat tabulky
Následující příklad ukazuje mapování zobrazení dat tabulky:
{
"dataRoles": [
{
"displayName": "Values",
"name": "values",
"kind": "GroupingOrMeasure"
}
],
"dataViewMappings": [
{
"table": {
"rows": {
"for": {
"in": "values"
}
}
}
}
]
}
Chcete-li vytvořit výběr pro každý řádek mapování zobrazení dat tabulky, zavolejte withTable metodu tvůrce výběrů.
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 řádky tabulky a každý řádek volá metodu withTable tabulky. withTable Parametry metody jsou table objekt a index řádku tabulky.
Vytvoření výběrů pro mapování zobrazení maticových dat
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ázce nodeWalker rekurzivně volá každý uzel a podřízený uzel.
nodeWalkernodeSelection vytvoří objekt při každém volání. Každý nodeSelection představuje selection odpovídající uzly.
Výběr datových bodů pro průřez jiných vizuálů
V tomto příkladu jsme vytvořili obslužnou rutinu kliknutí pro prvky tlačítka. Obslužná rutina volá metodu select správce výběru a předá objekt výběru.
button.addEventListener("click", () => {
// handle click event to apply correspond selection
this.selectionManager.select(categorySelectionId);
});
Rozhraní select metody:
interface ISelectionManager {
// ...
select(selectionId: ISelectionId | ISelectionId[], multiSelect?: boolean): IPromise<ISelectionId[]>;
// ...
}
Metoda select může přijmout pole výběrů. Vizuál tak může mít vybraných několik datových bodů najednou. Druhý parametr je multiSelectzodpovědný za vícenásobný výběr. Pokud multiSelect je pravda, Power BI při použití aktuálního výběru nevymaže předchozí stav výběru. Pokud je hodnota false, předchozí výběr se přepíše.
Typickým příkladem použití multiSelect je zpracování stavu tlačítka Ctrl u události kliknutí. Když je tlačítko Ctrl podržením, můžete vybrat více než jeden objekt.
button.addEventListener("click", (mouseEvent) => {
const multiSelect = (mouseEvent as MouseEvent).ctrlKey;
this.selectionManager.select(seriesSelectionId, multiSelect);
});