Elemleírások

Ez a cikk segítséget nyújt az elemleírások telepítéséhez, importálásához és használatához. Ez a util hasznos a Power BI-vizualizációk elemleírás-testreszabásához.

Előfeltételek

A csomag használatához a következőkre van szüksége:

• Node.js (a legújabb LTS-verziót javasoljuk)
• npm (a minimális támogatott verzió a 3.0.0)
• Az egyéni vizualizáció, amelyet PowerBI-visuals-tools

Telepítés

A csomag telepítéséhez futtassa a következő parancsot a könyvtárban az aktuális vizualizációval:

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

Ez a parancs telepíti a csomagot, és függőségként hozzáad egy csomagot a package.json fájlhoz.

Használat

A használati útmutató a csomag nyilvános API-ját ismerteti. A csomag minden nyilvános felületéhez talál egy leírást és néhány példát.

Ez a csomag lehetőséget nyújt az elemleírás-műveletek létrehozására TooltipServiceWrapper és kezelésére szolgáló módszerekre. Elemleírás-interfészeket használ : ITooltipServiceWrapper, TooltipEventArgs. TooltipEnabledDataPoint

A mobilfejlesztéshez kapcsolódó konkrét metódusokkal (érintéses eseménykezelőkkel) rendelkezik: touchEndEventName, , touchStartEventNameusePointerEvents.

TooltipServiceWrapper az elemleírások manipulálásának legegyszerűbb módja.

Ez a modul a következő felületet és függvényt biztosítja:

• ITooltipServiceWrapper

  • addTooltip
  • elrejt

• Felületek

  • TooltipEventArgs
  • TooltipEnabledDataPoint
  • TooltipServiceWrapperOptions

• Érintéses események

createTooltipServiceWrapper

Ez a függvény létrehoz egy példányt.ITooltipServiceWrapper

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

Ez ITooltipService az IVisualHostban érhető el.

Példa:

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

Az egyéni vizualizációra itt talál példát.

ITooltipServiceWrapper

Ez a felület az Elemleírás szolgáltatás nyilvános módszereit ismerteti.

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

Ez a metódus elemleírásokat ad hozzá az aktuális kijelöléshez.

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

Példa:

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.

Az egyéni vizualizációra itt talál példát.

A Gantt-egyéni vizualizációk elemleírás-testreszabásának példáját itt tekinti meg.

ITooltipServiceWrapper.hide

Ez a metódus elrejti az elemleírást.

hide(): void;

Példa:

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

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

tooltipServiceWrapper.hide();

Interfaces

Az interfészek az TooltipServiceWrapper létrehozásakor és a használatukkor használatosak. Ezeket a korábbi cikkekből származó példákban említettük.

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

Az elemleírások mostantól számos érintéses eseményt képesek kezelni, amelyek hasznosak a mobilfejlesztéshez.

touchStartEventName

function touchStartEventName(): string

Ez a metódus egy érintéses indítási eseménynevet ad vissza.

touchEndEventName

function touchEndEventName(): string

Ez a metódus egy érintéses végű eseménynevet ad vissza.

usePointerEvents

function usePointerEvents(): boolean

Ez a metódus a mutatóhoz kapcsolódó aktuális touchStart eseményt adja vissza.