TooltipUtils

Αυτό το άρθρο θα σας βοηθήσει να εγκαταστήσετε, να εισαγάγετε και να χρησιμοποιήσετε βοηθητικά προγράμματα συμβουλών εργαλείων. Αυτό το βοηθητικό πρόγραμμα είναι χρήσιμο για προσαρμογές συμβουλών εργαλείων σε απεικονίσεις 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.

Διαθέτει συγκεκριμένες μεθόδους (χειρισμούς συμβάντων αφής) που σχετίζονται με την ανάπτυξη για κινητές συσκευές: touchEndEventName, touchStartEventName, usePointerEvents.

TooltipServiceWrapper Το παρέχει τον απλούστερο τρόπο χειρισμού των συμβουλών εργαλείων.

Αυτή η λειτουργική μονάδα παρέχει την ακόλουθη διασύνδεση και συνάρτηση:

• ITooltipServiceWrapper

  • addTooltip
  • Απόκρυψη

• Διασυνδέσεις

  • TooltipEventArgs
  • TooltipEnabledDataPoint
  • TooltipServiceWrapperOptions

• Συμβάντα αφής

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

Τώρα, τα βοηθητικά προγράμματα tooltip μπορούν να χειρίζονται διάφορα συμβάντα αφής που είναι χρήσιμα για την ανάπτυξη για κινητές συσκευές.

touchStartEventName

function touchStartEventName(): string

Αυτή η μέθοδος επιστρέφει ένα όνομα συμβάντος touch start.

touchEndEventName

function touchEndEventName(): string

Αυτή η μέθοδος επιστρέφει ένα όνομα συμβάντος τέλους αφής.

usePointerEvents

function usePointerEvents(): boolean

Αυτή η μέθοδος επιστρέφει το τρέχον συμβάν touchStart που σχετίζεται με έναν δείκτη ή όχι.