@deliverysolutions/ngx-powerbi
Version:
TypeScript library for embedding Power BI assets (reports/dashboards/tiles) in your application. This TypeScript library is built on top of the official powerbi-client library provided by Microsoft.
291 lines (284 loc) • 12.9 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Optional, EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
import * as i1 from 'powerbi-client';
import { service, factories } from 'powerbi-client';
import * as models from 'powerbi-models';
function powerBiServiceFactory() {
return new service.Service(factories.hpmFactory, factories.wpmpFactory, factories.routerFactory);
}
class NgxPowerBiService {
constructor(service$1) {
this.service = service$1;
if (!service$1) {
this.powerBiCoreService = new service.Service(factories.hpmFactory, factories.wpmpFactory, factories.routerFactory);
}
else {
this.powerBiCoreService = service$1;
}
}
/**
* Creates new report
* @param HTMLElement Parent HTML element
* @param IEmbedConfiguration Embed configuration
* @returns Embed Embedded object
*/
createReport(element, config) {
return this.powerBiCoreService.createReport(element, config);
}
/**
* Given a configuration based on an HTML element,
* if the component has already been created and attached to the element, reuses the component instance and existing iframe,
* otherwise creates a new component instance.
*
* @param HTMLElement Parent HTML element
* @param IEmbedConfiguration Embed configuration
* @returns Embed Embedded object
*/
embed(element, config) {
return this.powerBiCoreService.embed(element, config);
}
/**
* Given a configuration based on an HTML element,
* if the component has already been created and attached to the element, reuses the component instance and existing iframe,
* otherwise creates a new component instance.
* This is used for the phased embedding API, once element is loaded successfully, one can call 'render' on it.
*
* @param HTMLElement} Parent HTML element
* @param IEmbedConfiguration Embed configuration
* @returns Embed Embedded object
*/
load(element, config) {
return this.powerBiCoreService.load(element, config);
}
/**
* Adds an event handler for DOMContentLoaded, which searches the DOM for elements that have the 'powerbi-embed-url' attribute,
* and automatically attempts to embed a Power BI component based on information from other powerbi-* attributes.
*
* Note: Only runs if `config.autoEmbedOnContentLoaded` is true when the service is created.
* This handler is typically useful only for applications that are rendered on the server so that all
* required data is available when the handler is called.
*/
enableAutoEmbed() {
return this.powerBiCoreService.enableAutoEmbed();
}
/**
* Returns an instance of the component associated with the element.
*
* @param HTMLElement Parent HTML element
* @returns (Report | Tile) Embedded report/tile object
*/
get(element) {
return this.powerBiCoreService.get(element);
}
/**
* Finds an embed instance by the name or unique ID that is provided.
*
* @param string} uniqueId or name of the report/tile
* @returns (Report | Tile) Embedded report/tile object
*/
findById(uniqueId) {
return this.powerBiCoreService.find(uniqueId);
}
/**
* Given an HTML element that has a component embedded within it,
* removes the component from the list of embedded components,
* removes the association between the element and the component, and removes the iframe.
*
* @param HTMLElement Parent HTML element
* @returns void
*/
reset(element) {
return this.powerBiCoreService.reset(element);
}
/**
* handles tile events
*
* @param IEvent<any> event
*/
handleTileEvents(event) {
return this.powerBiCoreService.handleTileEvents(event);
}
/**
* API for warm starting Power BI embedded endpoints.
* Use this API to preload Power BI Embedded in the background.
*
* @param embed.IEmbedConfiguration Embed configuration
* @param HTMLElement [element=undefined]
*/
preload(config, element) {
return this.powerBiCoreService.preload(config, element);
}
}
/** @nocollapse */ NgxPowerBiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgxPowerBiService, deps: [{ token: i1.service.Service, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
/** @nocollapse */ NgxPowerBiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgxPowerBiService, providedIn: 'root', useFactory: powerBiServiceFactory });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgxPowerBiService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
useFactory: powerBiServiceFactory
}]
}], ctorParameters: function () {
return [{ type: i1.service.Service, decorators: [{
type: Optional
}] }];
} });
class NgxPowerBiComponent {
constructor(ngxPowerBiService) {
this.ngxPowerBiService = ngxPowerBiService;
this.embedded = new EventEmitter();
this.powerBiService = ngxPowerBiService;
}
ngAfterViewInit() {
// Embed the report inside the view child that we have fetched from the DOM
if (this.ngxPowerBiIFrameRef.nativeElement &&
this.validateRequiredAttributes()) {
this.embed(this.ngxPowerBiIFrameRef.nativeElement, this.getConfig());
}
}
ngOnChanges(changes) {
if (!this.ngxPowerBiIFrameRef) {
return;
}
const { accessToken, tokenType, embedUrl, id, type, name, options } = changes;
// TODO: Validate these conditions
/*if (
(accessToken.previousValue !== undefined || accessToken.previousValue === accessToken.currentValue) &&
embedUrl.previousValue === embedUrl.currentValue
) {
return;
}*/
if (this.validateRequiredAttributes()) {
const config = this.getConfig(accessToken && accessToken.currentValue, tokenType && tokenType.currentValue, embedUrl && embedUrl.currentValue, id && id.currentValue, type && type.currentValue, name && name.currentValue, options && options.currentValue);
this.embed(this.ngxPowerBiIFrameRef.nativeElement, config);
}
else if (this.component) {
this.reset(this.ngxPowerBiIFrameRef.nativeElement);
}
}
ngOnDestroy() {
if (this.component) {
this.reset(this.ngxPowerBiIFrameRef.nativeElement);
}
}
/**
* Ensure required attributes (embedUrl and accessToken are valid before attempting to embed)
*/
validateRequiredAttributes() {
return (typeof this.embedUrl === 'string' &&
this.embedUrl.length > 0 &&
(typeof this.accessToken === 'string' && this.accessToken.length > 0));
}
/**
* Get the model class compatible token enum from our token type enum
* @param tokenType - Token type in our custom enum format
* @returns Token type in powerbi-models.TokenType enum format
*/
getTokenType(tokenType) {
if (tokenType) {
switch (tokenType) {
case "Aad" /* TokenType.Aad */:
return models.TokenType.Aad;
case "Embed" /* TokenType.Embed */:
return models.TokenType.Embed;
default:
return models.TokenType.Aad;
}
}
else {
// default is AAD
return models.TokenType.Aad;
}
}
/**
* Returns an embed configuration object.
* @param accessToken - Access token required to embed a component
* @param tokenType - type of accessToken: Aad or Embed
* @param embedUrl - Embed URL obtained through Power BI REST API or Portal
* @param id - component/element GUID
* @param type - type of embedded component e.g. 'dashboard, report or tile'
* @param name - name of the embedded component
* @param options - Embed configuration options
* @returns Embed configuration object
*/
getConfig(accessToken, tokenType, embedUrl, id, type, name, options) {
// For null arguments - use the initial value
// For specified arguments - use the current value
return {
type: type ? type : this.type ? this.type : "Report" /* ReportType.Report */,
embedUrl: embedUrl ? embedUrl : this.embedUrl,
accessToken: accessToken ? accessToken : this.accessToken,
tokenType: tokenType
? this.getTokenType(tokenType)
: this.getTokenType(this.tokenType),
id: id ? id : this.id,
uniqueId: name ? name : this.name,
settings: options ? options : this.options
};
}
/**
* Given an HTMLElement, construct an embed configuration based on attributes and pass to service.
* @param element - native element where the embedding needs to be done
* @param config - configuration to be embedded
*/
embed(element, config) {
/*if (this.options) {
const newConfig = { config, ...this.options };
}*/
this.component = this.powerBiService.embed(element, config);
this.embedded.emit(this.component);
}
/**
* Reset the component that has been removed from DOM.
* @param element - native element where the embedded was made
*/
reset(element) {
this.powerBiService.reset(element);
this.component = null;
}
}
/** @nocollapse */ NgxPowerBiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgxPowerBiComponent, deps: [{ token: NgxPowerBiService }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ NgxPowerBiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NgxPowerBiComponent, selector: "ngx-powerbi-component", inputs: { accessToken: "accessToken", tokenType: "tokenType", embedUrl: "embedUrl", id: "id", type: "type", name: "name", options: "options" }, outputs: { embedded: "embedded" }, viewQueries: [{ propertyName: "ngxPowerBiIFrameRef", first: true, predicate: ["ngxPowerBiIFrame"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: '<div #ngxPowerBiIFrame style="height:100%; width: 100%;"></div>', isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgxPowerBiComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-powerbi-component', template: '<div #ngxPowerBiIFrame style="height:100%; width: 100%;"></div>' }]
}], ctorParameters: function () { return [{ type: NgxPowerBiService }]; }, propDecorators: { accessToken: [{
type: Input
}], tokenType: [{
type: Input
}], embedUrl: [{
type: Input
}], id: [{
type: Input
}], type: [{
type: Input
}], name: [{
type: Input
}], options: [{
type: Input
}], embedded: [{
type: Output
}], ngxPowerBiIFrameRef: [{
type: ViewChild,
args: ['ngxPowerBiIFrame', { static: true }]
}] } });
class NgxPowerBiModule {
}
/** @nocollapse */ NgxPowerBiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgxPowerBiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
/** @nocollapse */ NgxPowerBiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgxPowerBiModule, declarations: [NgxPowerBiComponent], exports: [NgxPowerBiComponent] });
/** @nocollapse */ NgxPowerBiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgxPowerBiModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgxPowerBiModule, decorators: [{
type: NgModule,
args: [{
imports: [],
declarations: [NgxPowerBiComponent],
exports: [NgxPowerBiComponent]
}]
}] });
/*
* Public API Surface of ngx-powerbi
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxPowerBiComponent, NgxPowerBiModule, NgxPowerBiService, powerBiServiceFactory };
//# sourceMappingURL=deliverysolutions-ngx-powerbi.mjs.map