Condividi tramite

Utils della descrizione comando

  • Articolo

Questo articolo consente di installare, importare e usare le utilità per la descrizione comando. Questa utilità è utile per le personalizzazioni delle descrizioni comando negli oggetti visivi di Power BI.

Requisiti

Per usare il pacchetto, è necessario:

  • Node.js (è consigliabile la versione LTS più recente)
  • npm (la versione minima supportata è 3.0.0)
  • Oggetto visivo personalizzato creato da PowerBI-visuals-tools

Installazione

Per installare il pacchetto, è necessario eseguire il comando seguente nella directory con l'oggetto visivo corrente:

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

Questo comando installa il pacchetto e aggiunge un pacchetto come dipendenza al package.json file.

Utilizzo

La Guida all'utilizzo descrive un'API pubblica del pacchetto. Troverai una descrizione e alcuni esempi per ogni interfaccia pubblica del pacchetto.

Questo pacchetto consente di creare TooltipServiceWrapper metodi e per gestire le azioni della descrizione comando. Usa le interfacce della descrizione comando - ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.

Include metodi specifici (gestori di eventi di tocco) correlati allo sviluppo di dispositivi mobili: touchEndEventName, touchStartEventName, usePointerEvents.

TooltipServiceWrapper fornisce il modo più semplice per modificare le descrizioni comando.

Questo modulo fornisce l'interfaccia e la funzione seguenti:

createTooltipServiceWrapper

Questa funzione crea un'istanza di ITooltipServiceWrapper.

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

è ITooltipService disponibile in IVisualHost.

Esempio:

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

Vedere un esempio dell'oggetto visivo personalizzato qui.

ITooltipServiceWrapper

Questa interfaccia descrive i metodi pubblici di 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 descrizioni comando alla selezione corrente.

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

Esempio:

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.

Vedere un esempio dell'oggetto visivo personalizzato qui.

Vedere un esempio di personalizzazione della descrizione comando in un oggetto visivo personalizzato di Gantt qui.

ITooltipServiceWrapper.hide

Questo metodo nasconde la descrizione comando.

hide(): void;

Esempio:

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

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

tooltipServiceWrapper.hide();

Interfaces

Le interfacce vengono usate durante la creazione di TooltipServiceWrapper e quando viene usata. Sono stati menzionati negli esempi degli articoli precedenti qui.

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

Ora le utilità della descrizione comando possono gestire diversi eventi di tocco utili per lo sviluppo di dispositivi mobili.

touchStartEventName

function touchStartEventName(): string

Questo metodo restituisce un nome di evento di avvio tocco.

touchEndEventName

function touchEndEventName(): string

Questo metodo restituisce un nome di evento touch end.

usePointerEvents

function usePointerEvents(): boolean

Questo metodo restituisce o meno l'evento touchStart corrente correlato a un puntatore.