Elemleírási eszközökTooltip utils

Ez a cikk segít telepíteni, importálni és használni az elemleírási eszközöket.This article will help you to install, import, and use tooltip utils. Az eszközöket Power BI-vizualizációk bármilyen elemleírásának testreszabásához használhatja.This util useful for any tooltip customization in Power BI visuals.

KövetelményekRequirements

A csomag használatához a következőkre lesz szüksége:To use the package, you should have the following things:

TelepítésInstallation

A csomag telepítéséhez az alábbi parancsot kell futtatni az aktuális vizualizációt tartalmazó mappában:To install the package, you should run the following command in the directory with your current visual:

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

Ez a parancs telepíti a csomagot, és függőségként hozzáad egy csomagot a package.json fájlhozThis command installs the package and adds a package as a dependency to your package.json

HasználatUsage

A használati útmutató a csomag nyilvános API-ját ismerteti.The Usage Guide describes a public API of the package. A csomag minden nyilvános felületéhez találhat egy leírást és néhány példát.You will find a description and a few examples for each public interface of the package.

Ezzel a csomaggal TooltipServiceWrapper elemet és olyan metódusokat hozhat létre, amelyekkel kezelheti az elemleírás-műveleteket.This package contains provide you the way to create TooltipServiceWrapper and methods to help handle tooltip actions. A következő elemleírás-felületeket használja: ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.It uses tooltip interfaces - ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.

Emellett a mobilos fejlesztéshez kapcsolódó konkrét metódusokat (érintéses események kezelői) tartalmaz: touchEndEventName, touchStartEventName, usePointerEvents.Also it has specific methods (touch events handlers) related to mobile development: touchEndEventName, touchStartEventName, usePointerEvents.

A TooltipServiceWrapper a legegyszerűbb módja az elemleírások módosításának.TooltipServiceWrapper provides the simplest way in order to manipulate tooltips.

Ez a modul a következő függvényt és interfészet biztosítja:This module provides the following interface and function:

createTooltipServiceWrapper

Ez a függvény létrehozza az ITooltipServiceWrapper egy példányát.This function creates an instance of ITooltipServiceWrapper.

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

Az ITooltipService a IVisualHost területen érhető el.The ITooltipService is available in IVisualHost.

PéldaExample

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

Az egyéni vizualizáció példakódjára itt vethet egy pillantást.You can take a look at the example code of the custom visual here.

ITooltipServiceWrapper

Ez az interfész a TooltipService nyilvános metódusait ismerteti.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

Ez a metódus elemleírásokat a jelenlegi kijelöléshez.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;

PéldaExample

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.

Az egyéni vizualizáció példakódjára itt vethet egy pillantást.You can take a look at the example code of the custom visual here.

Figyelje meg a Gantt egyéni vizualizációjához tartozó elemleírások testreszabását az alábbi példában, ittAlso pay attention at following example of tooltip customization in Gantt custom visual here

ITooltipServiceWrapper.hide

Ez a metódus elrejti az elemleírást.This method hides the tooltip.

hide(): void;

PéldaExample

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

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

tooltipServiceWrapper.hide();

Interfaces

Ezek a felületek a TooltipServiceWrapper létrehozásakor és használata közben használatosak.This interfaces are used during TooltipServiceWrapper creation and it's usage. Emellett az előző témakörben szereplő példákban is szerepeltek, itt.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

Az új elemleírási eszközök már számos, mobilos fejlesztéshez hasznos érintéses eseményt képesek kezelni.Now tooltip utils has ability to handle several touch events useful for mobile development.

touchStartEventName

function touchStartEventName(): string

Ez a metódus az érintéses indítási esemény nevét adja vissza.This method returns touch start event name.

touchEndEventName

function touchEndEventName(): string

Ez a metódus az érintéses indítási esemény nevét adja vissza.This method returns touch start event name.

usePointerEvents

function usePointerEvents(): boolean

Ez a metódus megállapítja, hogy az aktuális touchStart-esemény kapcsolódik-e egy mutatóhoz.This method returns is current touchStart event related to pointer or not.