Partilhar via

Utilidades de dica de ferramenta

  • Artigo

Este artigo irá ajudá-lo a instalar, importar e usar utils de dica de ferramenta. Este util é útil para personalizações de dica de ferramenta em visuais do Power BI.

Requisitos

Para utilizar a embalagem, necessita:

Instalação

Para instalar o pacote, você deve executar o seguinte comando no diretório com seu visual atual:

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

Este comando instala o pacote e adiciona um pacote como uma dependência ao seu package.json arquivo.

Utilização

O Guia de Uso descreve uma API pública do pacote. Você encontrará uma descrição e alguns exemplos para cada interface pública do pacote.

Este pacote fornece uma maneira de criar TooltipServiceWrapper e métodos para ajudar a lidar com ações de dica de ferramenta. Ele usa interfaces de dica de ferramenta - ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.

Tem métodos específicos (manipuladores de eventos de toque) relacionados ao desenvolvimento móvel: touchEndEventName, , touchStartEventNameusePointerEvents.

TooltipServiceWrapper fornece a maneira mais simples de manipular dicas de ferramentas.

Este módulo fornece a seguinte interface e função:

createTooltipServiceWrapper

Esta função cria uma instância de ITooltipServiceWrapper.

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

O ITooltipService está disponível em IVisualHost.

Exemplo:

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.
    }
}

Veja um exemplo do visual personalizado aqui.

ITooltipServiceWrapper

Esta interface descreve métodos públicos do 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

Este método adiciona dicas de ferramentas à seleção atual.

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

Exemplo:

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.

Veja um exemplo do visual personalizado aqui.

Veja um exemplo de personalização de dica de ferramenta em um visual personalizado de Gantt aqui.

ITooltipServiceWrapper.hide

Este método oculta a dica de ferramenta.

hide(): void;

Exemplo:

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

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

tooltipServiceWrapper.hide();

Interfaces

As interfaces são usadas durante a criação do TooltipServiceWrapper e quando ele é usado. Eles foram mencionados em exemplos de artigos anteriores aqui.

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

Agora, os utilitários de dica de ferramenta podem lidar com vários eventos de toque que são úteis para o desenvolvimento móvel.

touchStartEventName

function touchStartEventName(): string

Esse método retorna um nome de evento de início de toque.

touchEndEventName

function touchEndEventName(): string

Esse método retorna um nome de evento de fim de toque.

usePointerEvents

function usePointerEvents(): boolean

Esse método retorna o evento touchStart atual relacionado a um ponteiro ou não.