Hulpmiddelen voor knopinfo

Dit artikel helpt u bij het installeren, importeren en gebruiken van hulpprogramma's voor knopinfo. Dit hulpprogramma is handig voor aanpassingen van knopinfo in Power BI-visuals.

Vereisten

Als u het pakket wilt gebruiken, hebt u het volgende nodig:

• Node.js (we raden de nieuwste LTS-versie aan)
• npm (de minimaal ondersteunde versie is 3.0.0)
• De aangepaste visual die is gemaakt door PowerBI-visuals-tools

Installatie

Als u het pakket wilt installeren, moet u de volgende opdracht uitvoeren in de map met uw huidige visual:

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

Met deze opdracht wordt het pakket geïnstalleerd en wordt een pakket als een afhankelijkheid aan uw package.json bestand toegevoegd.

Gebruik

In de gebruikshandleiding wordt een openbare API van het pakket beschreven. U vindt een beschrijving en enkele voorbeelden voor elke openbare interface van het pakket.

Dit pakket biedt u een manier om knopinfoacties te verwerken en methoden te maken TooltipServiceWrapper . Het maakt gebruik van knopinfointerfaces - ITooltipServiceWrapper, TooltipEventArgs, . TooltipEnabledDataPoint

Het heeft specifieke methoden (handlers voor aanraakgebeurtenissen) met betrekking tot mobiele ontwikkeling: touchEndEventName, touchStartEventName, usePointerEvents.

TooltipServiceWrapper biedt de eenvoudigste manier om knopinfo te bewerken.

Deze module biedt de volgende interface en functie:

• ITooltipServiceWrapper

  • addTooltip
  • verbergen

• Interfaces

  • TooltipEventArgs
  • TooltipEnabledDataPoint
  • TooltipServiceWrapperOptions

• Aanraakevenementen

createTooltipServiceWrapper

Met deze functie maakt u een exemplaar van ITooltipServiceWrapper.

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

De ITooltipService is beschikbaar in IVisualHost.

Voorbeeld:

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

Bekijk hier een voorbeeld van de aangepaste visual.

ITooltipServiceWrapper

In deze interface worden openbare methoden van de TooltipService beschreven.

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

Met deze methode worden knopinfo toegevoegd aan de huidige selectie.

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

Voorbeeld:

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.

Bekijk hier een voorbeeld van de aangepaste visual.

Bekijk hier een voorbeeld van het aanpassen van knopinfo in een aangepast Gantt-visuele element.

ITooltipServiceWrapper.hide

Met deze methode worden de knopinfo verborgen.

hide(): void;

Voorbeeld:

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

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

tooltipServiceWrapper.hide();

Interfaces

Interfaces worden gebruikt tijdens het maken van TooltipServiceWrapper en wanneer deze worden gebruikt. Ze werden hier vermeld in voorbeelden uit eerdere artikelen.

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

Nu kunnen hulpprogramma's voor knopinfo verschillende aanraakevenementen verwerken die nuttig zijn voor mobiele ontwikkeling.

touchStartEventName

function touchStartEventName(): string

Deze methode retourneert de naam van de touch start-gebeurtenis.

touchEndEventName

function touchEndEventName(): string

Met deze methode wordt de naam van een touch-end-gebeurtenis geretourneerd.

usePointerEvents

function usePointerEvents(): boolean

Met deze methode wordt de huidige touchStart-gebeurtenis geretourneerd die is gerelateerd aan een aanwijzer of niet.