Optimizing powerbi-client’s performance within Angular

import * as pbi from ‘powerbi-client’;
// Add this in 'scripts' of the project's 'angular.json'
"scripts": [
"node_modules/powerbi-client/dist/powerbi.min.js"
]
// Import types as shown below inside any component
import { Report, models, service, IEmbedConfiguration } from 'powerbi-client';
// Use this powerbi variable for any embedding inside any component
declare var powerbi: service.Service;
// Example .ts for bootstrappingreport: Report;
@ViewChild('reportContainer', { static: true }) reportContainer: ElementRef;
ngOnInit() {
this.bootstrapPowerBi();
// Async call to get the embed token from backend, call showReport(Token) on success
}
bootstrapPowerBi() {
let settings: IEmbedSettings = {
filterPaneEnabled: false,
navContentPaneEnabled: false
};
powerbi.bootstrap(
this.reportContainer.nativeElement,
{
type: 'report',
embedUrl: environment.powerBI.reportBaseURL,
groupId: environment.powerBI.groupID,
settings: settings
}
);
}
showReport(Token) {
// Report Config
let config: IEmbedConfiguration = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: Token["token"],
id: Token["reportId"],
bootstrapped: true
};
this.report = <Report>powerbi.embed(this.reportContainer.nativeElement, config); this.report.on("loaded", () => {
console.log("Report Loaded");
});
this.report.on("error", () => {
console.log("Error");
});
}
// Modified showReport() for phased embedding
showReport(Token) {
// Report Config
let config: IEmbedConfiguration = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: Token["token"],
id: Token["reportId"],
bootstrapped: true
};
this.report = <Report>powerbi.load(this.reportContainer.nativeElement, config); this.report.on("loaded", () => {
console.log("Report Loaded");
this.setPage(3); // Example operation
this.setFilter("Initial Filter"); // Example operation
report.render(); // Rendering report
});
this.report.on("rendered", () => {
console.log("Report Rendered");
});
this.report.on("error", () => {
console.log("Error");
});
}

--

--

--

Full Stack Web Developer and a tech enthusiast XD

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Re-Frame Javascript Interop

Using ReactJS Routes (TheRock fan club App)

Getting Started with React + TypeScript

How to use Google Spreadsheets as a Database (Free blog hosting included)

Progressively Load Images in React

Working with Managed Metadata using SharePoint REST with PNP JS

How to use CSS and React to create a star rating

Create the perfect toggle switch with pure HTML / CSS, no JavaScript necessary

screenshot of a toggle switch on codepen

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhijeet Pandhe

Abhijeet Pandhe

Full Stack Web Developer and a tech enthusiast XD

More from Medium

Countly Web Analytics Integration With Angular TypeScript And JavaScript

Stop redundant and unnecessary API calls on user input change using RxJs

Angular Deployment Strategies in AWS

How to deploy Angular sites on Fathym