Utilitaires pour les info-bulles

Cet article va vous aider à installer, à importer et à utiliser les utilitaires pour les info-bulles. Cet utilitaire convient pour les personnalisations d’info-bulles dans des visuels Power BI.

Prérequis

Pour utiliser le package, vous avez besoin des éléments suivants :

• Node.js (nous recommandons la dernière version LTS)
• npm (la version la plus ancienne prise en charge est 3.0.0)
• Le visuel personnalisé créé par PowerBI-visuals-tools

Installation

Pour installer le package, vous devez exécuter la commande suivante dans le répertoire contenant votre visuel actuel :

npm install powerbi-visuals-utils-tooltiputils --save

Cette commande installe le package et ajoute un package à votre fichier package.json en tant que dépendance.

Usage

Le guide d’utilisation décrit une API publique du package. Vous trouverez une description et quelques exemples de chaque interface publique du package.

Ce package vous permet de créer TooltipServiceWrapper et des méthodes pour faciliter la gestion des actions d’info-bulles. Il utilise les interfaces de l’info-bulle : ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.

Il comprend également des méthodes spécifiques (gestionnaires d’événements tactiles) relatives au développement mobile : touchEndEventName, touchStartEventName, usePointerEvents.

TooltipServiceWrapper fournit la méthode la plus simple pour manipuler les info-bulles.

Le module fournit l’interface et la fonction suivantes :

• ITooltipServiceWrapper

  • addTooltip
  • masquer

• Interfaces

  • TooltipEventArgs
  • TooltipEnabledDataPoint
  • TooltipServiceWrapperOptions

• Événements tactiles

createTooltipServiceWrapper

Cette fonction crée une instance de ITooltipServiceWrapper.

function createTooltipServiceWrapper(tooltipService: ITooltipService, rootElement: Element, handleTouchDelay?: number,  getEventMethod?: () => MouseEvent): ITooltipServiceWrapper;

L’interface ITooltipService est disponible dans IVisualHost.

Exemple :

import { createTooltipServiceWrapper } from "powerbi-visuals-utils-tooltiputils";

export class YourVisual implements IVisual {
    // implementation of IVisual.

    constructor(options: VisualConstructorOptions) {
        createTooltipServiceWrapper(
            options.host.tooltipService,
            options.element);

        // returns: an instance of ITooltipServiceWrapper.
    }
}

Consultez un exemple du visuel personnalisé ici.

ITooltipServiceWrapper

Cette interface décrit les méthodes publiques de TooltipService.

interface ITooltipServiceWrapper {
    addTooltip<T>(selection: d3.Selection<any, any, any, any>, getTooltipInfoDelegate: (args: TooltipEventArgs<T>) => powerbi.extensibility.VisualTooltipDataItem[], getDataPointIdentity?: (args: TooltipEventArgs<T>) => powerbi.visuals.ISelectionId, reloadTooltipDataOnMouseMove?: boolean): void;
    hide(): void;
}

ITooltipServiceWrapper.addTooltip

Cette méthode ajoute des info-bulles à la sélection actuelle.

addTooltip<T>(selection: d3.Selection<any>, getTooltipInfoDelegate: (args: TooltipEventArgs<T>) => VisualTooltipDataItem[], getDataPointIdentity?: (args: TooltipEventArgs<T>) => ISelectionId, reloadTooltipDataOnMouseMove?: boolean): void;

Exemple :

import { createTooltipServiceWrapper, TooltipEventArgs, ITooltipServiceWrapper, TooltipEnabledDataPoint } from "powerbi-visuals-utils-tooltiputils";

let bodyElement = d3.select("body");

let element = bodyElement
    .append("div")
    .style({
        "background-color": "green",
        "width": "150px",
        "height": "150px"
    })
    .classed("visual", true)
    .data([{
        tooltipInfo: [{
            displayName: "Power BI",
            value: 2016
        }]
    }]);

let tooltipServiceWrapper: ITooltipServiceWrapper = createTooltipServiceWrapper(tooltipService, bodyElement.get(0)); // tooltipService is from the IVisualHost.

tooltipServiceWrapper.addTooltip<TooltipEnabledDataPoint>(element, (eventArgs: TooltipEventArgs<TooltipEnabledDataPoint>) => {
    return eventArgs.data.tooltipInfo;
});

// You will see a tooltip if you mouseover the element.

Consultez un exemple du visuel personnalisé ici.

Consultez un exemple de personnalisation d’info-bulle dans un visuel personnalisé Gantt ici.

ITooltipServiceWrapper.hide

Cette méthode masque l’info-bulle.

hide(): void;

Exemple :

import {createTooltipServiceWrapper} from "powerbi-visuals-utils-tooltiputils";

let tooltipServiceWrapper = createTooltipServiceWrapper(options.host.tooltipService, options.element); // options are from the VisualConstructorOptions.

tooltipServiceWrapper.hide();

Interfaces

Les interfaces sont utilisées lors de la création de TooltipServiceWrapper et de son utilisation. Elles ont également été mentionnées dans des exemples d’articles précédents ici.

TooltipEventArgs

interface TooltipEventArgs<TData> {
    data: TData;
    coordinates: number[];
    elementCoordinates: number[];
    context: HTMLElement;
    isTouchEvent: boolean;
}

TooltipEnabledDataPoint

interface TooltipEnabledDataPoint {
    tooltipInfo?: powerbi.extensibility.VisualTooltipDataItem[];
}

TooltipServiceWrapperOptions

interface TooltipServiceWrapperOptions {
    tooltipService: ITooltipService;
    rootElement: Element;
    handleTouchDelay: number;

Touch events

Les utilitaires d’info-bulle peuvent désormais gérer plusieurs événements tactiles utiles pour le développement mobile.

touchStartEventName

function touchStartEventName(): string

Cette méthode retourne un nom d’événement tactile de début.

touchEndEventName

function touchEndEventName(): string

Cette méthode retourne un nom d’événement tactile de fin.

usePointerEvents

function usePointerEvents(): boolean

Cette méthode indique si l’événement touchStart est lié ou non à un pointeur.