คำแนะนำเครื่องมือTooltip utils

บทความนี้จะช่วยให้คุณสามารถติดตั้ง นำเข้า และใช้คำแนะนำเครื่องมือยูทิลิตี้This article will help you to install, import, and use tooltip utils. ยูทิลิตี้นี้มีประโยชน์สำหรับการปรับแต่งคำแนะนำเครื่องมือใดๆ ก็ตามในการแสดงผลด้วยภาพของ Power BIThis util useful for any tooltip customization in Power BI visuals.

ความต้องการRequirements

หากต้องการใช้แพคเกจ คุณควรมีสิ่งต่อไปนี้:To use the package, you should have the following things:

  • node.js (เราขอแนะนำเวอร์ชัน LTS รุ่นล่าสุด)node.js (we recommend the latest LTS version)
  • npm (เวอร์ชันเก่าที่สุดที่ได้รับการรองรับคือ 3.0.0)npm (the minimal supported version is 3.0.0)
  • การแสดงผลด้วยภาพแบบกำหนดเองที่สร้างขึ้นโดย PowerBI-visuals-toolsThe custom visual created by PowerBI-visuals-tools

การติดตั้งInstallation

หากต้องการติดตั้งแพ็คเกจ คุณควรเรียกใช้คำสั่งต่อไปนี้ในไดเรกทอรีด้วยวิชวลปัจจุบันของคุณTo install the package, you should run the following command in the directory with your current visual:

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

คำสั่งนี้จะติดตั้งแพคเกจและเพิ่มแพคเกจเป็นการขึ้นต่อกันของคุณ package.jsonThis 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 TooltipEnabledDataPointIt uses tooltip interfaces - ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.

นอกจากนี้ยังมีวิธีการเฉพาะ (ตัวจัดการเหตุการณ์การ touch) ที่เกี่ยวข้องกับการพัฒนาอุปกรณ์เคลื่อนที่: touchEndEventName touchStartEventName usePointerEventsAlso 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

ฟังก์ชันนี้สร้างตัวอย่างของ ITooltipServiceWrapperThis function creates an instance of ITooltipServiceWrapper.

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

ITooltipService พร้อมใช้งานใน IVisualHostThe 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

อินเทอร์เฟซนี้จะอธิบายวิธีการสาธารณะของ TooltipServiceThis 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

ตอนนี้คำแนะนำเครื่องมือ utils มีความสามารถในการจัดการเหตุการณ์การสัมผัสหลายอย่างที่เป็นประโยชน์สำหรับการพัฒนาอุปกรณ์เคลื่อนที่Now tooltip utils has ability to handle several touch events useful for mobile development.

touchStartEventName

function touchStartEventName(): string

วิธีนี้จะส่งกลับชื่อเหตุการณ์ touchThis method returns touch start event name.

touchEndEventName

function touchEndEventName(): string

วิธีนี้จะส่งกลับชื่อเหตุการณ์ touchThis method returns touch start event name.

usePointerEvents

function usePointerEvents(): boolean

วิธีการนี้จะส่งกลับเป็นเหตุการณ์ touchStart ปัจจุบันที่เกี่ยวข้องกับตัวชี้หรือไม่เกี่ยวข้องThis method returns is current touchStart event related to pointer or not.