Utilità per le descrizioni comandiTooltip utils

  • 2 minuti per la lettura

Questo articolo spiega come installare, importare e usare le utilità per le descrizioni comandi.This article will help you to install, import, and use tooltip utils. Questa utilità agevola la personalizzazione delle descrizioni comandi negli oggetti visivi di Power BI.This util useful for any tooltip customization in Power BI visuals.

RequisitiRequirements

Per usare il pacchetto, devono essere disponibili gli elementi seguenti:To use the package, you should have the following things:

InstallazioneInstallation

Per installare il pacchetto, è necessario eseguire il comando seguente nella directory con l'oggetto visivo corrente:To install the package, you should run the following command in the directory with your current visual:

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

Questo comando installa il pacchetto e aggiunge un pacchetto come dipendenza a package.jsonThis command installs the package and adds a package as a dependency to your package.json

UtilizzoUsage

La guida all'utilizzo descrive un'API pubblica del pacchetto.The Usage Guide describes a public API of the package. Sono disponibili una descrizione e alcuni esempi per ogni interfaccia pubblica del pacchetto.You will find a description and a few examples for each public interface of the package.

Il pacchetto consente di creare TooltipServiceWrapper e metodi che semplificano la gestione delle azioni di descrizione comando.This package contains provide you the way to create TooltipServiceWrapper and methods to help handle tooltip actions. Usa le interfacce di descrizione comando ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.It uses tooltip interfaces - ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.

Include inoltre metodi specifici (gestori di eventi di tocco) correlati allo sviluppo per dispositivi mobili: touchEndEventName, touchStartEventName, usePointerEvents.Also it has specific methods (touch events handlers) related to mobile development: touchEndEventName, touchStartEventName, usePointerEvents.

TooltipServiceWrapper offre il modo più semplice per modificare le descrizioni comandi.TooltipServiceWrapper provides the simplest way in order to manipulate tooltips.

Questo modulo include la funzione e l'interfaccia seguenti:This module provides the following interface and function:

createTooltipServiceWrapper

Questa funzione crea un'istanza di ITooltipServiceWrapper.This function creates an instance of ITooltipServiceWrapper.

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

ITooltipService è disponibile in IVisualHost.The ITooltipService is available in IVisualHost.

EsempioExample

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

È possibile esaminare il codice di esempio dell'oggetto visivo personalizzato qui.You can take a look at the example code of the custom visual here.

ITooltipServiceWrapper

Questa interfaccia descrive i metodi pubblici di TooltipService.This interface describes public methods of the 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

Questo metodo aggiunge le descrizioni comandi alla selezione corrente.This method adds tooltips to the current selection.

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

EsempioExample

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.

È possibile esaminare il codice di esempio dell'oggetto visivo personalizzato qui.You can take a look at the example code of the custom visual here.

Prestare attenzione anche all'esempio di personalizzazione della descrizione comando in un oggetto visivo Gantt personalizzato quiAlso pay attention at following example of tooltip customization in Gantt custom visual here

ITooltipServiceWrapper.hide

Questo metodo nasconde la descrizione comando.This method hides the tooltip.

hide(): void;

EsempioExample

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

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

tooltipServiceWrapper.hide();

Interfaces

Queste interfacce vengono usate durante la creazione di TooltipServiceWrapper e il relativo utilizzo.This interfaces are used during TooltipServiceWrapper creation and it's usage. Sono anche citate negli esempi dell'argomento precedente qui.Also they were mentioned in examples from previous topic here.

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;
    getEventMethod?: () => MouseEvent;

Touch events

Ora l'utilità per le descrizioni comandi è in grado di gestire diversi eventi di tocco utili per lo sviluppo di applicazioni per dispositivi mobili.Now tooltip utils has ability to handle several touch events useful for mobile development.

touchStartEventName

function touchStartEventName(): string

Questo metodo restituisce il nome dell'evento di inizio tocco.This method returns touch start event name.

touchEndEventName

function touchEndEventName(): string

Questo metodo restituisce il nome dell'evento di fine tocco.This method returns touch start event name.

usePointerEvents

function usePointerEvents(): boolean

Questo metodo indica se l'evento touchStart corrente è correlato o meno al puntatore.This method returns is current touchStart event related to pointer or not.