TooltipUtilsTooltip utils

Αυτό το άρθρο θα σας βοηθήσει στην εγκατάσταση, την εισαγωγή και τη χρήση του TooltipUtils.This article will help you to install, import, and use tooltip utils. Αυτό το βοηθητικό πρόγραμμα είναι χρήσιμο για κάθε προσαρμογή συμβουλής εργαλείου σε απεικόνιση του Power BI.This util useful for any tooltip customization in Power BI visuals.

ΑπαιτήσειςRequirements

Για να χρησιμοποιήσετε το πακέτο, θα πρέπει να έχετε τα εξής:To use the package, you should have the following things:

  • node.js (συνιστούμε να έχετε την πιο πρόσφατη έκδοση LTS)node.js (we recommend the latest LTS version)
  • npm (η ελάχιστη υποστηριζόμενη έκδοση είναι η 3.0.0)npm (the minimal supported version is 3.0.0)
  • Την προσαρμοσμένη απεικόνιση που έχει δημιουργηθεί από το PowerBI-visuals-toolsThe custom visual created by PowerBI-visuals-tools

ΕγκατάστασηInstallation

Για να εγκαταστήσετε το πακέτο, θα πρέπει να εκτελέσετε την ακόλουθη εντολή στον κατάλογο με την τρέχουσα απεικόνισή σας:To install the package, you should run the following command in the directory with your current visual:

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

Αυτή η εντολή εγκαθιστά το πακέτο και προσθέτει ένα πακέτο ως εξάρτηση στο package.jsonThis command installs the package and adds a package as a dependency to your package.json

ΧρήσηUsage

Ο οδηγός χρήσης περιγράφει ένα δημόσιο API του πακέτου.The Usage Guide describes a public API of the package. Θα βρείτε μια περιγραφή και μερικά παραδείγματα για κάθε δημόσια διασύνδεση του πακέτου.You will find a description and a few examples for each public interface of the package.

Αυτό το πακέτο σάς επιτρέπει να δημιουργήσετε το TooltipServiceWrapper και μεθόδους που θα σας βοηθήσουν να χειριστείτε ενέργειες για συμβουλές εργαλείων.This package contains provide you the way to create TooltipServiceWrapper and methods to help handle tooltip actions. Χρησιμοποιεί τις διασυνδέσεις συμβουλών εργαλείων ITooltipServiceWrapper, TooltipEventArgs και TooltipEnabledDataPoint.It uses tooltip interfaces - ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.

Επίσης, διαθέτει συγκεκριμένες μεθόδους (δείκτες χειρισμού συμβάντων αφής) που σχετίζονται με την ανάπτυξη προγραμμάτων για κινητές συσκευές: touchEndEventName, touchStartEventName, usePointerEvents.Also it has specific methods (touch events handlers) related to mobile development: touchEndEventName, touchStartEventName, usePointerEvents.

Το TooltipServiceWrapper παρέχει τον απλούστερο τρόπο χειρισμού των συμβουλών εργαλείων.TooltipServiceWrapper provides the simplest way in order to manipulate tooltips.

Αυτή η λειτουργική μονάδα παρέχει τις παρακάτω διασυνδέσεις και συναρτήσεις:This module provides the following interface and function:

createTooltipServiceWrapper

Αυτή η συνάρτηση δημιουργεί μια παρουσία του ITooltipServiceWrapper.This function creates an instance of ITooltipServiceWrapper.

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

Το ITooltipService είναι διαθέσιμο στο IVisualHost.The ITooltipService is available in IVisualHost.

ΠαράδειγμαExample

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

Μπορείτε να ρίξετε μια ματιά στο δείγμα κώδικα της προσαρμοσμένης απεικόνισης εδώ.You can take a look at the example code of the custom visual here.

ITooltipServiceWrapper

Αυτή η διασύνδεση περιγράφει δημόσιες μεθόδους του TooltipService.This interface describes public methods of the 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

Αυτή η μέθοδος προσθέτει συμβουλές εργαλείων στην τρέχουσα επιλογή.This method adds tooltips to the current selection.

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

ΠαράδειγμαExample

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.

Μπορείτε να ρίξετε μια ματιά στο δείγμα κώδικα της προσαρμοσμένης απεικόνισης εδώ.You can take a look at the example code of the custom visual here.

Επίσης, δώστε προσοχή στο ακόλουθο παράδειγμα προσαρμογής συμβουλής εργαλείου στην προσαρμοσμένη απεικόνιση Gantt εδώAlso pay attention at following example of tooltip customization in Gantt custom visual here

ITooltipServiceWrapper.hide

Αυτή η μέθοδος αποκρύπτει τη συμβουλή εργαλείου.This method hides the tooltip.

hide(): void;

ΠαράδειγμαExample

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

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

tooltipServiceWrapper.hide();

Interfaces

Αυτές οι διασυνδέσεις χρησιμοποιούνται κατά τη δημιουργία και τη χρήση του TooltipServiceWrapper.This interfaces are used during TooltipServiceWrapper creation and it's usage. Επίσης, αναφέρονται σε παραδείγματα του προηγούμενου θέματος εδώ.Also they were mentioned in examples from previous topic here.

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;
    getEventMethod?: () => MouseEvent;

Touch events

Το TooltipUtils έχει τη δυνατότητα να χειρίζεται διάφορα συμβάντα αφής που είναι χρήσιμα για την ανάπτυξη προγραμμάτων για κινητές συσκευές.Now tooltip utils has ability to handle several touch events useful for mobile development.

touchStartEventName

function touchStartEventName(): string

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

touchEndEventName

function touchEndEventName(): string

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

usePointerEvents

function usePointerEvents(): boolean

Αυτή η μέθοδος υποδεικνύει αν το τρέχον συμβάν touchStart σχετίζεται με τον δείκτη ή όχι.This method returns is current touchStart event related to pointer or not.