도구 설명 유틸리티Tooltip utils

이 문서는 도구 설명 유틸리티를 설치하고, 가져오고, 사용하는 데 도움이 됩니다.This article will help you to install, import, and use tooltip utils. 이 유틸리티는 Power BI 시각적 개체의 도구 설명 사용자 지정에 유용합니다.This util useful for any tooltip customization in Power BI visuals.

요구 사항Requirements

이 패키지를 사용하려면 다음과 같은 항목이 있어야 합니다.To use the package, you should have the following things:

설치Installation

패키지를 설치하려면 현재 시각적 개체가 있는 디렉터리에서 다음 명령을 실행해야 합니다.To install the package, you should run the following command in the directory with your current visual:

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

이 명령은 패키지를 설치하고 package.json에 대한 종속성으로 패키지를 추가합니다.This command installs the package and adds a package as a dependency to your package.json

사용Usage

사용 가이드에서는 패키지의 공용 API를 설명합니다.The Usage Guide describes a public API of the package. 패키지의 각 공용 인터페이스에 대한 설명과 몇 가지 예제를 찾을 수 있습니다.You will find a description and a few examples for each public interface of the package.

이 패키지에서는 도구 설명 작업을 처리하는 데 도움이 되는 TooltipServiceWrapper 및 메서드를 만드는 방법을 제공합니다.This package contains provide you the way to create TooltipServiceWrapper and methods to help handle tooltip actions. 다음 도구 설명 인터페이스가 사용됩니다. ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.It uses tooltip interfaces - ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.

또한 모바일 개발과 관련된 특정 메서드(터치 이벤트 처리기)도 있습니다. touchEndEventName, touchStartEventName, usePointerEvents.Also it has specific methods (touch events handlers) related to mobile development: touchEndEventName, touchStartEventName, usePointerEvents.

TooltipServiceWrapper는 도구 설명을 조작하기 위한 가장 간단한 방법을 제공합니다.TooltipServiceWrapper provides the simplest way in order to manipulate tooltips.

이 모듈에서는 다음 인터페이스 및 함수를 제공합니다.This module provides the following interface and function:

createTooltipServiceWrapper

이 함수는 ITooltipServiceWrapper의 인스턴스를 만듭니다.This function creates an instance of ITooltipServiceWrapper.

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

ITooltipServiceIVisualHost에서 사용할 수 있습니다.The ITooltipService is available in IVisualHost.

Example

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

여기에서 사용자 지정 시각적 개체의 예제 코드를 살펴보세요.You can take a look at the example code of the custom visual here.

ITooltipServiceWrapper

이 인터페이스는 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

이 메서드는 현재 선택 항목에 도구 설명을 추가합니다.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;

Example

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.

여기에서 사용자 지정 시각적 개체의 예제 코드를 살펴보세요.You can take a look at the example code of the custom visual here.

또한 여기에서 Gantt 사용자 지정 시각적 개체의 도구 설명 사용자 지정에 대한 다음 예제도 참조하세요.Also pay attention at following example of tooltip customization in Gantt custom visual here

ITooltipServiceWrapper.hide

이 메서드는 도구 설명을 숨깁니다.This method hides the tooltip.

hide(): void;

Example

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

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

tooltipServiceWrapper.hide();

Interfaces

이들 인터페이스는 TooltipServiceWrapper를 만들고 사용하는 동안 사용됩니다.This interfaces are used during TooltipServiceWrapper creation and it's usage. 또한 이들은 이전 항목의 예제에서도 언급되었습니다(여기).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

이제 도구 설명 유틸리티는 모바일 개발에 유용한 여러 터치 이벤트를 처리할 수 있습니다.Now tooltip utils has ability to handle several touch events useful for mobile development.

touchStartEventName

function touchStartEventName(): string

이 메서드는 터치 시작 이벤트 이름을 반환합니다.This method returns touch start event name.

touchEndEventName

function touchEndEventName(): string

이 메서드는 터치 시작 이벤트 이름을 반환합니다.This method returns touch start event name.

usePointerEvents

function usePointerEvents(): boolean

이 메서드는 현재 touchStart 이벤트가 포인터와 관련되는지 여부를 반환합니다.This method returns is current touchStart event related to pointer or not.