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");
});
}

--

--

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