Araç ipucu yardımcı programları

  • Makale

Bu makale araç ipucu yardımcı programlarını yüklemenize, içeri aktarmanıza ve kullanmanıza yardımcı olur. Bu yardımcı program, Power BI görsellerindeki araç ipucu özelleştirmeleri için kullanışlıdır.

Gereksinimler

Paketi kullanmak için şunları yapmanız gerekir:

  • Node.js (en son LTS sürümünü öneririz)
  • npm (desteklenen en düşük sürüm 3.0.0'dır)
  • Tarafından oluşturulan özel görsel PowerBI-visuals-tools

Yükleme

Paketi yüklemek için geçerli görselinizle dizinde aşağıdaki komutu çalıştırmanız gerekir:

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

Bu komut paketi yükler ve dosyanıza package.json bağımlılık olarak bir paket ekler.

Kullanım

Kullanım Kılavuzu, paketin genel API'sini açıklar. Paketin her ortak arabirimi için bir açıklama ve bazı örnekler bulacaksınız.

Bu paket, araç ipucu eylemlerini işlemeye yardımcı olmak için ve yöntemleri oluşturmanızı TooltipServiceWrapper sağlar. Araç ipucu arabirimlerini kullanır: ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.

Mobil geliştirmeyle ilgili belirli yöntemlere (dokunmatik olay işleyicileri) sahiptir: touchEndEventName, , touchStartEventNameusePointerEvents.

TooltipServiceWrapper araç ipuçlarını işlemenin en basit yolunu sağlar.

Bu modül aşağıdaki arabirimi ve işlevi sağlar:

createTooltipServiceWrapper

Bu işlev bir örneği ITooltipServiceWrapperoluşturur.

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

ITooltipService, IVisualHost'ta kullanılabilir.

Örnek:

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 özel görselin bir örneğine bakın.

ITooltipServiceWrapper

Bu arabirim, TooltipService'in genel yöntemlerini açıklar.

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.

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

Örnek:

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 özel görselin bir örneğine bakın.

Burada Gantt özel görselinde araç ipucu özelleştirme örneğine bakın.

ITooltipServiceWrapper.hide

Bu yöntem araç ipucu gizler.

hide(): void;

Örnek:

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

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

tooltipServiceWrapper.hide();

Interfaces

Arabirimler TooltipServiceWrapper oluşturma sırasında ve kullanıldığında kullanılır. Bunlar, buradaki önceki makalelerden örneklerde belirtilmiştir.

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

Artık araç ipucu yardımcı programları, mobil geliştirme için yararlı olan çeşitli dokunma olaylarını işleyebilir.

touchStartEventName

function touchStartEventName(): string

Bu yöntem bir dokunmatik başlangıç olayı adı döndürür.

touchEndEventName

function touchEndEventName(): string

Bu yöntem bir dokunmatik uç olay adı döndürür.

usePointerEvents

function usePointerEvents(): boolean

Bu yöntem, işaretçiyle ilgili geçerli touchStart olayını döndürür veya döndürmez.