คําแนะนําเครื่องมือยูทิลิตี้

บทความนี้จะช่วยให้คุณสามารถติดตั้ง นําเข้า และใช้คําแนะนําเครื่องมือยูทิลิตี้ ยูทิลิตี้นี้มีประโยชน์สําหรับการปรับแต่งคําแนะนําเครื่องมือในวิชวล Power BI

ข้อกำหนดเบื้องต้น

หากต้องการใช้แพคเกจ คุณจําเป็นต้องมี:

• Node.js (เราขอแนะนําเวอร์ชัน LTS รุ่นล่าสุด)
• npm (เวอร์ชันเล็กที่สุดที่ได้รับการรองรับคือ 3.0.0)
• วิชวลแบบกําหนดเองที่สร้างขึ้นโดย PowerBI-visuals-tools

การติดตั้ง

หากต้องการติดตั้งแพคเกจ คุณควรเรียกใช้คําสั่งต่อไปนี้ในไดเรกทอรีด้วยวิชวลปัจจุบันของคุณ:

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

คําสั่งนี้จะติดตั้งแพคเกจและเพิ่มแพคเกจเป็นการขึ้นต่อกันกับไฟล์ของคุณpackage.json

การใช้งาน

คําแนะนําการใช้งานจะอธิบาย API สาธารณะของแพคเกจ คุณจะพบคําอธิบายและตัวอย่างสําหรับแต่ละอินเทอร์เฟซสาธารณะของแพคเกจ

แพคเกจนี้นําเสนอวิธีการสร้าง TooltipServiceWrapper และวิธีการเพื่อช่วยจัดการการดําเนินการคําแนะนําเครื่องมือ ซึ่งใช้อินเทอร์เฟซคําแนะนําเครื่องมือ - ITooltipServiceWrapper, TooltipEventArgsTooltipEnabledDataPoint

ซึ่งมีวิธีการเฉพาะ (ตัวจัดการเหตุการณ์การสัมผัส) ที่เกี่ยวข้องกับการพัฒนาอุปกรณ์เคลื่อนที่: touchEndEventNametouchStartEventNameusePointerEvents

TooltipServiceWrapper มีวิธีที่ง่ายที่สุดในการจัดการคําแนะนําเครื่องมือ

โมดูลนี้มีอินเทอร์เฟสและฟังก์ชันต่อไปนี้:

• ITooltipServiceWrapper

  • addTooltip
  • ซ่อน

• อิน เทอร์ เฟซ

  • TooltipEventArgs
  • TooltipEnabledDataPoint
  • TooltipServiceWrapperOptions

• เหตุการณ์ Touch

createTooltipServiceWrapper

ฟังก์ชันนี้สร้างอินสแตนซ์ของITooltipServiceWrapper

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

ITooltipServiceพร้อมใช้งานใน IVisualHost

ตัวอย่าง:

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

ดูตัวอย่างของวิชวลแบบกําหนดเองที่นี่

ITooltipServiceWrapper

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

วิธีนี้จะเพิ่มคําแนะนําเครื่องมือในการเลือกปัจจุบัน

addTooltip<T>(selection: d3.Selection<any>, getTooltipInfoDelegate: (args: TooltipEventArgs<T>) => VisualTooltipDataItem[], getDataPointIdentity?: (args: TooltipEventArgs<T>) => ISelectionId, reloadTooltipDataOnMouseMove?: boolean): void;

ตัวอย่าง:

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.

ดูตัวอย่างของวิชวลแบบกําหนดเองที่นี่

ดูตัวอย่างของการปรับแต่งคําแนะนําเครื่องมือในวิชวลแบบกําหนดเองของ Gantt ที่นี่

ITooltipServiceWrapper.hide

วิธีนี้จะซ่อนคําแนะนําเครื่องมือ

hide(): void;

ตัวอย่าง:

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

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

tooltipServiceWrapper.hide();

Interfaces

อินเทอร์เฟซจะใช้ในระหว่างการสร้าง TooltipServiceWrapper และเมื่อใช้ พวกเขาถูกกล่าวถึงในตัวอย่างจากบทความก่อนหน้าที่นี่

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;

Touch events

ตอนนี้คําแนะนําเครื่องมือ utils สามารถจัดการเหตุการณ์การสัมผัสหลายอย่างที่มีประโยชน์สําหรับการพัฒนาอุปกรณ์เคลื่อนที่

touchStartEventName

function touchStartEventName(): string

วิธีนี้จะส่งกลับชื่อเหตุการณ์ touch

touchEndEventName

function touchEndEventName(): string

วิธีนี้จะส่งกลับชื่อเหตุการณ์ touch end

usePointerEvents

function usePointerEvents(): boolean

วิธีนี้จะส่งกลับเหตุการณ์ touchStart ปัจจุบันที่เกี่ยวข้องกับตัวชี้หรือไม่เกี่ยวข้อง