Utilidades de la información sobre herramientas

  • Artículo

Este artículo le ayudará a instalar, importar y usar las utilidades de la información sobre herramientas. Esta utilidad es práctica para la personalización de la información sobre herramientas en objetos visuales de Power BI.

Requisitos

Para usar el paquete, necesita:

  • Node.js (se recomienda la versión más reciente de LTS)
  • npm (la versión mínima admitida es 3.0.0).
  • Objeto visual personalizado creado por PowerBI-visuals-tools

Instalación

Para instalar el paquete, debe ejecutar el comando siguiente en el directorio con el objeto visual actual:

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

Este comando instala el paquete y agrega un paquete como una dependencia al archivo package.json.

Uso

La guía de uso describe una API pública del paquete. Encontrará una descripción y algunos ejemplos de cada interfaz pública del paquete.

Este paquete contiene la manera de crear TooltipServiceWrapper y métodos para ayudar a controlar las acciones de la información sobre herramientas. Usa interfaces de información sobre herramientas: ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.

También contiene métodos específicos (controladores de eventos táctiles) relacionados con el desarrollo para dispositivos móviles: touchEndEventName, touchStartEventName, usePointerEvents.

TooltipServiceWrapper proporciona la manera más sencilla de manipular la información sobre herramientas.

Este módulo proporciona la siguiente interfaz y función:

createTooltipServiceWrapper

Esta función crea una instancia de ITooltipServiceWrapper.

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

ITooltipService está disponible en IVisualHost.

Ejemplo:

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

Vea un ejemplo del objeto visual personalizado aquí.

ITooltipServiceWrapper

Esta interfaz describe los métodos públicos 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

Este método agrega información sobre herramientas a la selección actual.

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

Ejemplo:

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.

Vea un ejemplo del objeto visual personalizado aquí.

Vea un ejemplo de personalización de información sobre herramientas en un objeto visual personalizado de Gantt aquí.

ITooltipServiceWrapper.hide

Este método oculta la información sobre herramientas.

hide(): void;

Ejemplo:

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

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

tooltipServiceWrapper.hide();

Interfaces

Interfaces que se usan durante la creación de TooltipServiceWrapper y cuándo se usan. También se han mencionado en ejemplos del tema anterior aquí.

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

Ahora, las utilidades de información sobre herramientas pueden controlar varios eventos táctiles útiles para el desarrollo para dispositivos móviles.

touchStartEventName

function touchStartEventName(): string

Este método devuelve el nombre de evento de inicio táctil.

touchEndEventName

function touchEndEventName(): string

Este método devuelve el nombre de evento de inicio táctil.

usePointerEvents

function usePointerEvents(): boolean

Este método devuelve, o no, el evento touchStart actual relacionado con el puntero.