Интерактивные utils визуальных элементов Power BI

Статья
09/08/2023

Интерактивные 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. Это также относится и elementsSelectionclearCatcherSelection.

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

Интерактивные utils визуальных элементов Power BI

Установка

Включение CSS-файлов

Свойства SelectableDataPoint

Определение интерфейса для точек данных

Обратная связь

Обратная связь

Дополнительные ресурсы

Интерактивные utils визуальных элементов Power BI

Установка

Включение CSS-файлов

Свойства SelectableDataPoint

Определение интерфейса для точек данных

Связанный контент

Обратная связь

Обратная связь

Дополнительные ресурсы