Bagikan melalui

Util tipsalat

  • Artikel

Artikel ini akan membantu Anda menginstal, mengimpor, dan menggunakan utilitas tipsalat. Util ini berguna untuk kustomisasi tipsalat dalam visual Power BI.

Prasyarat

Untuk menggunakan paket, Anda memerlukan:

Penginstalan

Untuk menginstal paket, Anda harus menjalankan perintah berikut di direktori dengan visual saat ini:

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

Perintah ini akan menginstal paket dan menambahkan paket sebagai dependensi ke file package.json Anda.

Penggunaan

Panduan Penggunaan menjelaskan API publik paket. Anda akan menemukan deskripsi dan beberapa contoh untuk setiap antarmuka publik paket.

Paket ini memberi Anda cara untuk membuat TooltipServiceWrapper metode dan untuk membantu menangani tindakan tipsalat. Ini menggunakan antarmuka tipsalat - ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.

Ini memiliki metode khusus (penanganan peristiwa sentuh) yang terkait dengan pengembangan seluler: touchEndEventName, touchStartEventName, usePointerEvents.

TooltipServiceWrapper menyediakan cara paling sederhana untuk memanipulasi tipsalat.

Modul ini berisi antarmuka dan fungsi berikut:

createTooltipServiceWrapper

Fungsi ini membuat instans ITooltipServiceWrapper.

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

ITooltipService tersedia di IVisualHost.

Contoh:

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

Lihat contoh visual kustom di sini.

ITooltipServiceWrapper

Antarmuka ini menjelaskan metode publik 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

Metode ini menambahkan tipsalat ke pilihan saat ini.

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

Contoh:

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.

Lihat contoh visual kustom di sini.

Lihat contoh kustomisasi tipsalat dalam visual kustom Gantt di sini.

ITooltipServiceWrapper.hide

Metode ini menyembunyikan tipsalat.

hide(): void;

Contoh:

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

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

tooltipServiceWrapper.hide();

Interfaces

Antarmuka digunakan selama pembuatan TooltipServiceWrapper dan kapan digunakan. Mereka disebutkan dalam contoh dari artikel sebelumnya di sini.

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

Sekarang util tipsalat dapat menangani beberapa peristiwa sentuhan yang berguna untuk pengembangan seluler.

touchStartEventName

function touchStartEventName(): string

Metode ini mengembalikan nama peristiwa touch start.

touchEndEventName

function touchEndEventName(): string

Metode ini mengembalikan nama peristiwa touch end.

usePointerEvents

function usePointerEvents(): boolean

Metode ini mengembalikan peristiwa touchStart saat ini yang terkait dengan pointer atau tidak.