TooltipUtilsTooltip utils

Tento článek vám pomůže s instalací, importem a používáním nástrojů pro popisky.This article will help you to install, import, and use tooltip utils. Tento nástroj je užitečný pro jakékoli přizpůsobení popisků ve vizuálech Power BI.This util useful for any tooltip customization in Power BI visuals.

PožadavkyRequirements

Abyste mohli balíček použít, měli byste mít:To use the package, you should have the following things:

InstalaceInstallation

Pokud chcete balíček nainstalovat, musíte v adresáři s aktuálním vizuálem spustit následující příkaz:To install the package, you should run the following command in the directory with your current visual:

npm install powerbi-visuals-utils-colorutils --save

Tento příkaz nainstaluje balíček a přidá balíček jako závislost do package.jsonThis command installs the package and adds a package as a dependency to your package.json

VyužitíUsage

Průvodce používáním popisuje veřejné rozhraní API balíčku.The Usage Guide describes a public API of the package. Pro každé veřejné rozhraní balíčku zde najdete popis a několik příkladů.You will find a description and a few examples for each public interface of the package.

Tento balíček vám poskytuje způsob, jak vytvořit TooltipServiceWrapper a metody, které vám pomůžou s akcemi popisků.This package contains provide you the way to create TooltipServiceWrapper and methods to help handle tooltip actions. Používá rozhraní pro popisky – ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.It uses tooltip interfaces - ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.

Obsahuje také konkrétní metody (obslužné rutiny dotykových událostí) související s vývojem pro mobilní zařízení: touchEndEventName, touchStartEventName, usePointerEvents.Also it has specific methods (touch events handlers) related to mobile development: touchEndEventName, touchStartEventName, usePointerEvents.

TooltipServiceWrapper poskytuje nejjednodušší způsob manipulace s popisky.TooltipServiceWrapper provides the simplest way in order to manipulate tooltips.

Tento modul poskytuje následující rozhraní a funkci:This module provides the following interface and function:

createTooltipServiceWrapper

Tato funkce vytvoří instanci ITooltipServiceWrapper.This function creates an instance of ITooltipServiceWrapper.

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

ITooltipService je k dispozici v IVisualHost.The ITooltipService is available in IVisualHost.

PříkladExample

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

Na vzorový kód vlastního vizuálu se můžete podívat tady.You can take a look at the example code of the custom visual here.

ITooltipServiceWrapper

Toto rozhraní popisuje veřejné metody 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

Tato metoda přidá popisky k aktuálnímu výběru.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říkladExample

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.

Na vzorový kód vlastního vizuálu se můžete podívat tady.You can take a look at the example code of the custom visual here.

Věnujte pozornost také následujícímu příkladu přizpůsobení popisku v Ganttově vlastním vizuálu tady.Also pay attention at following example of tooltip customization in Gantt custom visual here

ITooltipServiceWrapper.hide

Tato metoda skryje popisek.This method hides the tooltip.

hide(): void;

PříkladExample

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

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

tooltipServiceWrapper.hide();

Interfaces

Tato rozhraní se používají během vytváření rozhraní TooltipServiceWrapper a jeho používání.This interfaces are used during TooltipServiceWrapper creation and it's usage. Byla také zmíněna v příkladech z předchozího tématu zde.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

Nástroje pro popisky teď umí pracovat s několika dotykovými událostmi, což je užitečné pro vývoj pro mobilní zařízení.Now tooltip utils has ability to handle several touch events useful for mobile development.

touchStartEventName

function touchStartEventName(): string

Tato metoda vrátí název dotykové události začátku.This method returns touch start event name.

touchEndEventName

function touchEndEventName(): string

Tato metoda vrátí název dotykové události začátku.This method returns touch start event name.

usePointerEvents

function usePointerEvents(): boolean

Tato metoda vrací informaci, jestli aktuální událost touchStart souvisí s ukazatelem nebo nikoli.This method returns is current touchStart event related to pointer or not.