Pomôcky pre popisy
Tento článok vám pomôže s inštaláciou, importovaním a používaním pomôcok pre popisy. Táto pomôcka je užitočná pri prispôsobovaní popisov vo vizuáloch služby Power BI.
Požiadavky
Ak chcete balík používať, potrebujete:
- Node.js (odporúčame najnovšiu verziu LTS)
- npm (minimálna podporovaná verzia je 3.0.0)
- Vlastný vizuál vytvorený
PowerBI-visuals-tools
Inštalácia
Ak chcete nainštalovať balík, mali by ste v adresári aktuálneho vizuálu spustiť nasledujúci príkaz:
npm install powerbi-visuals-utils-tooltiputils --save
Tento príkaz nainštaluje balík a pridá ho ako závislosť do package.json
súboru.
Využitie
Príručka na použitie popisuje verejné rozhranie API balíka. Nájdete popis a niekoľko príkladov pre každé verejné rozhranie balíka.
Tento balík poskytuje spôsob, ako vytvoriť TooltipServiceWrapper
a metódy, ktoré pomôžu narábať s akciami popisov. Používa rozhrania popisov – ITooltipServiceWrapper
, TooltipEventArgs
, TooltipEnabledDataPoint
.
Má špecifické metódy (obsluha dotykových udalostí) súvisiace s vývojom v mobilnom zariadení: touchEndEventName
, touchStartEventName
, usePointerEvents
.
TooltipServiceWrapper
poskytuje najjednoduchší spôsob na prácu s popismi.
Tento modul poskytuje nasledujúce rozhranie a funkciu:
createTooltipServiceWrapper
Táto funkcia vytvorí inštanciu typu ITooltipServiceWrapper
.
function createTooltipServiceWrapper(tooltipService: ITooltipService, rootElement: Element, handleTouchDelay?: number, getEventMethod?: () => MouseEvent): ITooltipServiceWrapper;
je ITooltipService
k dispozícii vo formáte IVisualHost.
Príklad:
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.
}
}
Pozrite si príklad vlastného vizuálu tu.
ITooltipServiceWrapper
Toto rozhranie opisuje verejné metódy funkcie 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
Táto metóda pridá popisy do aktuálneho výberu.
addTooltip<T>(selection: d3.Selection<any>, getTooltipInfoDelegate: (args: TooltipEventArgs<T>) => VisualTooltipDataItem[], getDataPointIdentity?: (args: TooltipEventArgs<T>) => ISelectionId, reloadTooltipDataOnMouseMove?: boolean): void;
Príklad:
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.
Pozrite si príklad vlastného vizuálu tu.
Príklad prispôsobenia popisu v Ganttovom vlastnom vizuáli nájdete tu.
ITooltipServiceWrapper.hide
Táto metóda skryje popis.
hide(): void;
Príklad:
import {createTooltipServiceWrapper} from "powerbi-visuals-utils-tooltiputils";
let tooltipServiceWrapper = createTooltipServiceWrapper(options.host.tooltipService, options.element); // options are from the VisualConstructorOptions.
tooltipServiceWrapper.hide();
Interfaces
Rozhrania sa používajú počas vytvárania funkcie TooltipServiceWrapper a jej použitia. Boli spomenuté v príkladoch z predchádzajúcich článkov tu.
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
Pomôcky pre popisy teraz dokážu obsluhovať niekoľko dotykových udalostí, ktoré sú užitočné pri vývoji mobilných aplikácií.
touchStartEventName
function touchStartEventName(): string
Táto metóda vráti názov udalosti začatia dotyku.
touchEndEventName
function touchEndEventName(): string
Táto metóda vráti názov udalosti touch end.
usePointerEvents
function usePointerEvents(): boolean
Táto metóda vráti aktuálnu udalosť touchStart súvisiacu alebo nesúvisiace s ukazovateľom.