Araç ipucu yardımcı programlarıTooltip utils

Bu makale araç ipucu yardımcı programlarını yükleme, içeri aktarma ve kullanma işlemlerinde size yardımcı olur.This article will help you to install, import, and use tooltip utils. Bu yardımcı program Power BI görsellerinde yapılan tüm araç ipucu özelleştirmelerinde yararlı olur.This util useful for any tooltip customization in Power BI visuals.

GereksinimlerRequirements

Paketi kullanmak için aşağıdaki öğelere sahip olmalısınız:To use the package, you should have the following things:

YüklemeInstallation

Paketi yüklemek için geçerli görselinizin dizininde aşağıdaki komutu çalıştırmalısınız:To install the package, you should run the following command in the directory with your current visual:

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

Bu komut paketi yükler ve package.json dosyanıza bağımlılık olarak bir paket eklerThis command installs the package and adds a package as a dependency to your package.json

KullanımUsage

Kullanım Kılavuzunda paketin genel API’si açıklanır.The Usage Guide describes a public API of the package. Paketin her genel arabirimi için bir açıklama ve birkaç örnek bulabilirsiniz.You will find a description and a few examples for each public interface of the package.

Bu paket size TooltipServiceWrapper oluşturma yolu ve araç ipucu eylemlerini işlemeye yardımcı olan yöntemler sağlar.This package contains provide you the way to create TooltipServiceWrapper and methods to help handle tooltip actions. Araç ipucu arabirimlerini kullanır - ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.It uses tooltip interfaces - ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.

Ayrıca mobil dağıtımla ilgili belirli yöntemleri (dokunma olayı işleyicileri) vardır: touchEndEventName, touchStartEventName, usePointerEvents.Also it has specific methods (touch events handlers) related to mobile development: touchEndEventName, touchStartEventName, usePointerEvents.

TooltipServiceWrapper, araç ipuçlarını işlemenin en basit yolunu sağlar.TooltipServiceWrapper provides the simplest way in order to manipulate tooltips.

Bu modül aşağıdaki arabirimi ve işlevi sağlar:This module provides the following interface and function:

createTooltipServiceWrapper

Bu işlev bir ITooltipServiceWrapper örneği oluşturur.This function creates an instance of ITooltipServiceWrapper.

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

ITooltipService, IVisualHost içinde sağlanır.The ITooltipService is available in IVisualHost.

ÖrnekExample

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

Burada örnek özel görsel kodunu gözden geçirebilirsiniz.You can take a look at the example code of the custom visual here.

ITooltipServiceWrapper

Bu arabirim TooltipService’in genel yöntemlerini açıklar.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

Bu yöntem geçerli seçime araç ipuçları ekler.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;

ÖrnekExample

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.

Burada örnek özel görsel kodunu gözden geçirebilirsiniz.You can take a look at the example code of the custom visual here.

Ayrıca burada, Gantt özel görselinde araç ipucu özelleştirme örneğine dikkat edinAlso pay attention at following example of tooltip customization in Gantt custom visual here

ITooltipServiceWrapper.hide

Bu yöntem araç ipucunu gizler.This method hides the tooltip.

hide(): void;

ÖrnekExample

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

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

tooltipServiceWrapper.hide();

Interfaces

TooltipServiceWrapper oluşturma ve kullanma sırasında bu arabirimler kullanılır.This interfaces are used during TooltipServiceWrapper creation and it's usage. Ayrıca burada, önceki konunun örneklerinde de bunlardan bahsedilmiştir.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

Artık araç ipucu yardımcı programlarının mobil geliştirmede yararlı olan çeşitli dokunma olayı işleme özellikleri vardır.Now tooltip utils has ability to handle several touch events useful for mobile development.

touchStartEventName

function touchStartEventName(): string

Bu yöntem dokunma başlatma olayının adını döndürür.This method returns touch start event name.

touchEndEventName

function touchEndEventName(): string

Bu yöntem dokunma başlatma olayının adını döndürür.This method returns touch start event name.

usePointerEvents

function usePointerEvents(): boolean

Bu yöntem geçerli touchStart olayının işaretçiyle ilgili olup olmadığını döndürür.This method returns is current touchStart event related to pointer or not.