Интерактивные utils визуальных элементов Power BI
Интерактивные utils (InteractivityUtils
) — это набор функций и классов, которые можно использовать для упрощения реализации перекрестного выбора и перекрестной фильтрации.
Примечание.
Последние обновления интерактивных utils поддерживают только последнюю версию инструментов (3.x.x и выше).
Установка
Чтобы установить пакет, выполните следующую команду в каталоге с текущим визуальным проектом Power BI.
npm install powerbi-visuals-utils-interactivityutils --save
Если вы используете средство версии 3.0 или более поздней, установите
powerbi-models
для разрешения зависимостей.npm install powerbi-models --save
Чтобы использовать интерактивные utils, импортируйте необходимый компонент в исходный код визуального элемента Power BI.
import { interactivitySelectionService } from "powerbi-visuals-utils-interactivityutils";
Включение CSS-файлов
Чтобы использовать пакет с визуальным элементом Power BI, импортируйте следующий CSS-файл в .less
файл.
node_modules/powerbi-visuals-utils-interactivityutils/lib/index.css
Импортируйте CSS-файл в виде .less
файла, так как средство визуальных элементов Power BI упаковывает внешние правила CSS.
@import (less) "node_modules/powerbi-visuals-utils-interactivityutils/lib/index.css";
Свойства SelectableDataPoint
Как правило, точки данных содержат выбор и значения. Интерфейс расширяет SelectableDataPoint
интерфейс.
SelectableDataPoint
уже содержит свойства следующим образом:
/** Flag for identifying that a data point was selected */
selected: boolean;
/** Identity for identifying the selectable data point for selection purposes */
identity: powerbi.extensibility.ISelectionId;
/*
* A specific identity for when data points exist at a finer granularity than
* selection is performed. For example, if your data points select based
* only on series, even if they exist as category/series intersections.
*/
specificIdentity?: powerbi.extensibility.ISelectionId;
Определение интерфейса для точек данных
Создайте экземпляр интерактивных utils и сохраните объект в качестве свойства визуального элемента.
export class Visual implements IVisual { // ... private interactivity: interactivityBaseService.IInteractivityService<VisualDataPoint>; // ... constructor(options: VisualConstructorOptions) { // ... this.interactivity = interactivitySelectionService.createInteractivitySelectionService(this.host); // ... } }
import { interactivitySelectionService } from "powerbi-visuals-utils-interactivityutils"; export interface VisualDataPoint extends interactivitySelectionService.SelectableDataPoint { value: powerbi.PrimitiveValue; }
Расширение базового класса поведения.
Примечание.
BaseBehavior
появилась в версии 5.6.x интерактивных utils. Если вы используете более раннюю версию, создайте класс поведения из следующего примера.Определите интерфейс для параметров класса поведения.
import { SelectableDataPoint } from "./interactivitySelectionService"; import { IBehaviorOptions, BaseDataPoint } from "./interactivityBaseService"; export interface BaseBehaviorOptions<SelectableDataPointType extends BaseDataPoint> extends IBehaviorOptions<SelectableDataPointType> { /** d3 selection object of the main elements on the chart */ elementsSelection: Selection<any, SelectableDataPoint, any, any>; /** d3 selection object of some elements on backgroup, to hadle click of reset selection */ clearCatcherSelection: d3.Selection<any, any, any, any>; }
Определение класса для
visual behavior
. Или расширьтеBaseBehavior
класс.Определение класса для
visual behavior
Класс отвечает за
click
события мыши иcontextmenu
мыши.Когда пользователь щелкает элементы данных, визуальный элемент вызывает обработчик выбора для выбора точек данных. Если пользователь щелкает фоновый элемент визуального элемента, он вызывает обработчик четкого выбора.
Класс имеет следующие методы соответствия:
bindClick
bindClearCatcher
bindContextMenu
.
export class Behavior<SelectableDataPointType extends BaseDataPoint> implements IInteractiveBehavior { /** d3 selection object of main elements in the chart */ protected options: BaseBehaviorOptions<SelectableDataPointType>; protected selectionHandler: ISelectionHandler; protected bindClick() { // ... } protected bindClearCatcher() { // ... } protected bindContextMenu() { // ... } public bindEvents( options: BaseBehaviorOptions<SelectableDataPointType>, selectionHandler: ISelectionHandler): void { // ... } public renderSelection(hasSelection: boolean): void { // ... } }
BaseBehavior
Расширение классаimport powerbi from "powerbi-visuals-api"; import { interactivitySelectionService, baseBehavior } from "powerbi-visuals-utils-interactivityutils"; export interface VisualDataPoint extends interactivitySelectionService.SelectableDataPoint { value: powerbi.PrimitiveValue; } export class Behavior extends baseBehavior.BaseBehavior<VisualDataPoint> { // ... }
Чтобы обработать элементы щелчка, вызовите метод объекта
on
выбора d3. Это также относится иelementsSelection
clearCatcherSelection
.protected bindClick() { const { elementsSelection } = this.options; elementsSelection.on("click", (datum) => { const mouseEvent: MouseEvent = getEvent() as MouseEvent || window.event as MouseEvent; mouseEvent && this.selectionHandler.handleSelection( datum, mouseEvent.ctrlKey); }); }
Добавьте аналогичный обработчик для
contextmenu
события, чтобы вызвать метод диспетчераshowContextMenu
выбора.protected bindContextMenu() { const { elementsSelection } = this.options; elementsSelection.on("contextmenu", (datum) => { const event: MouseEvent = (getEvent() as MouseEvent) || window.event as MouseEvent; if (event) { this.selectionHandler.handleContextMenu( datum, { x: event.clientX, y: event.clientY }); event.preventDefault(); } }); }
Чтобы назначить функции обработчикам, интерактивные utils вызывает
bindEvents
метод. Добавьте следующие вызовы методаbindEvents
:bindClick
bindClearCatcher
bindContextMenu
public bindEvents( options: BaseBehaviorOptions<SelectableDataPointType>, selectionHandler: ISelectionHandler): void { this.options = options; this.selectionHandler = selectionHandler; this.bindClick(); this.bindClearCatcher(); this.bindContextMenu(); }
Метод
renderSelection
отвечает за обновление визуального состояния элементов на диаграмме. Ниже приведен пример реализацииrenderSelection
.public renderSelection(hasSelection: boolean): void { this.options.elementsSelection.style("opacity", (category: any) => { if (category.selected) { return 0.5; } else { return 1; } }); }
Последний шаг — создание экземпляра
visual behavior
и вызовbind
метода экземпляра интерактивного использования.this.interactivity.bind(<BaseBehaviorOptions<VisualDataPoint>>{ behavior: this.behavior, dataPoints: this.categories, clearCatcherSelection: select(this.target), elementsSelection: selectionMerge });
selectionMerge
— объект выбора d3, представляющий все выбранные элементы визуального элемента.select(this.target)
— объект выбора d3, представляющий основные элементы визуального элемента DOM.this.categories
— это точки данных с элементами, в которых находитсяVisualDataPoint
интерфейс илиcategories: VisualDataPoint[];
.this.behavior
— это новый экземплярvisual behavior
, созданный в конструкторе визуального элемента, как показано ниже.export class Visual implements IVisual { // ... constructor(options: VisualConstructorOptions) { // ... this.behavior = new Behavior(); } // ... }