{"_id":"@deliverysolutions/ngx-powerbi","name":"@deliverysolutions/ngx-powerbi","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@deliverysolutions/ngx-powerbi","version":"1.0.0","description":"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.","license":"MIT","repository":{"type":"git","url":"git+https://github.com/ds-arb/ngx-powerbi.git"},"author":{"name":"Delivery Solutions"},"publishConfig":{"access":"public"},"keywords":["microsoft","powerbi","power-bi","embedded","angular","visuals","analytics","reports","reporting"],"dependencies":{"tslib":"^2.0.0"},"peerDependencies":{"@angular/common":"^15.0.0","@angular/core":"^15.0.0","powerbi-client":"^2.19.1"},"module":"fesm2015/deliverysolutions-ngx-powerbi.mjs","es2020":"fesm2020/deliverysolutions-ngx-powerbi.mjs","esm2020":"esm2020/deliverysolutions-ngx-powerbi.mjs","fesm2020":"fesm2020/deliverysolutions-ngx-powerbi.mjs","fesm2015":"fesm2015/deliverysolutions-ngx-powerbi.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/deliverysolutions-ngx-powerbi.mjs","es2020":"./fesm2020/deliverysolutions-ngx-powerbi.mjs","es2015":"./fesm2015/deliverysolutions-ngx-powerbi.mjs","node":"./fesm2015/deliverysolutions-ngx-powerbi.mjs","default":"./fesm2020/deliverysolutions-ngx-powerbi.mjs"}},"sideEffects":false,"gitHead":"ea240f0b6fa90284e49af9a025217f7fcf7f3455","bugs":{"url":"https://github.com/ds-arb/ngx-powerbi/issues"},"homepage":"https://github.com/ds-arb/ngx-powerbi#readme","_id":"@deliverysolutions/ngx-powerbi@1.0.0","_nodeVersion":"18.16.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-AAupmKSk3gz7eEFoiesB5MgzjutxyX1k8jitBfeFdXg7mwQX+qxjXCnUw+EfGZWMJmvXWYFsTz0QyaK6sNAkoA==","shasum":"ac8028539a53ee95b989acc6a11b7a9f172b7838","tarball":"https://registry.npmjs.org/@deliverysolutions/ngx-powerbi/-/ngx-powerbi-1.0.0.tgz","fileCount":17,"unpackedSize":114635,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpcZHmhpNU8nCokLq1UHAhsNmnVHcSHx9nwnDesgfAbQIgAowGrPmoa5C3vRPAbh0qkYqUNZ2Wbeb+jGZ9bUEZZ/M="}]},"_npmUser":{"name":"ds-arb","email":"arb@deliverysolutions.co"},"directories":{},"maintainers":[{"name":"ds-arb","email":"arb@deliverysolutions.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-powerbi_1.0.0_1689301524290_0.7705247107193536"},"_hasShrinkwrap":false}},"time":{"created":"2023-07-14T02:25:24.184Z","1.0.0":"2023-07-14T02:25:24.564Z","modified":"2023-07-14T02:25:24.839Z"},"maintainers":[{"name":"ds-arb","email":"arb@deliverysolutions.co"}],"description":"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.","homepage":"https://github.com/ds-arb/ngx-powerbi#readme","keywords":["microsoft","powerbi","power-bi","embedded","angular","visuals","analytics","reports","reporting"],"repository":{"type":"git","url":"git+https://github.com/ds-arb/ngx-powerbi.git"},"author":{"name":"Delivery Solutions"},"bugs":{"url":"https://github.com/ds-arb/ngx-powerbi/issues"},"license":"MIT","readme":"# ngx-powerbi\n\nTypeScript library for embedding Power BI assets (reports/dashboards/tiles) in your application. This TypeScript library is built on top of the official [powerbi-client](https://www.npmjs.com/package/powerbi-client) library provided by Microsoft.\n\n## Installation\n\nThis library has a peer dependency on the official Microsoft [powerbi-client](https://www.npmjs.com/package/powerbi-client) library so the same should be installed first:\nNPM:\n\n```\nnpm install powerbi-client\n```\n\nInstall the ngx-powerbi library:\n\n```\nnpm install @deliverysolutions/ngx-powerbi\n```\n\n## Usage\n\nThere are multiple ways to embed the Power BI assets in your application. The Power BI library needs an access token with required privileges for accessing the Power BI assets. You must have a Power BI Pro license or a trial account to access the Power BI embedded functionality. For details about Power BI account requirements and embedding, refer my [Power BI Overview and Angular Embedding How-to](https://medium.com/@ramandeep.singh.1983/power-bi-overview-and-angular-embedding-how-to-f73390f4a399) article.\n\nHere are some of the sample ways of embedding a Power BI report in your application:\n\n**Method 1**\n\nPick up and play: Use the included Power BI component directly in your component HTML file.\n\n- **Import the 'NgxPowerBiModule' module inside your target module:**\n\n```\nimport { NgxPowerBiModule } from '@deliverysolutions/ngx-powerbi';\n\n@NgModule({\n  imports: [\n    ...\n    ...\n    NgxPowerBiModule\n  ],\n  exports: ...,\n  declarations: ...\n})\n```\n\nUse the provided component attribute to embed a Power BI asset:\n\n```\n<ngx-powerbi-component type=\"report\"\n                       id=\"[put-report-id-here]\"\n                       embedUrl=\"https://app.powerbi.com/reportEmbed?reportId=[put-report-id-here]&groupId=[put-group-id-here]\"\n                       tokenType=\"Aad\"\n                       accessToken=\"[put-access-token-here]\"\n                       on-embedded=\"onEmbedded($event)\">\n</ngx-powerbi-component>\n```\n\nOptional: Implement the `onEmbedded(report: pbi.Report)` in your component class if you want to capture Power BI embedded component events.\n\n**Method 2**\n\nUse the Power BI configuration HTML attributes in a div + Power BI embedded service. The component.html should look like this:\n\n```\n<div id=\"dashboard-container\"\n     powerbi-dashboard-id=\"[put-dashboard-id-here]\"\n     powerbi-access-token=\"[put-access-token-here]\"\n     powerbi-embed-url=\"https://app.powerbi.com/dashboardEmbed?dashboardId=[put-dashboard-id-here]&groupId=[put-group-id-here]\"\n     powerbi-type=\"dashboard\"\n     powerbi-settings-filter-pane-enabled=\"false\"\n     powerbi-settings-nav-content-pane-enabled=\"true\">\n</div>\n```\n\nIn the component.ts file, use the provided embed API to embed the Power BI asset in this div component. Refer 'Method 3' for details about the usage of Power BI service and embed API. Since, we are specifying the configuration through HTML attributes here, the config object required by the embed API in the TypeScript code can be empty.\n\n**Method 3**\n\nIf you want more fine-grain control of the embedding functionality, use the provided Power BI embedded service as per the instructions below:\n\n- **Component HTML file: Add a new div with an ID, we will use the ID to get a reference to this div and embed the Power BI component:**\n\n```\n<div id=\"pbi-container\"></div>\n```\n\n- **Import and instantiate the Power BI service in your component.ts file. Also, get a reference to the div we created in the component HTML file earlier:**\n\n```\nimport { NgxPowerBiService } from '@deliverysolutions/ngx-powerbi';\n\nexport class ReportsContainer implements OnInit {\n  private powerBiService: NgxPowerBiService;\n  private pbiContainerElement: HTMLElement;\n\n  constructor() {\n    this.powerBiService = new NgxPowerBiService();\n    ...\n  }\n\n  ngOnInit() {\n    this.pbiContainerElement = <HTMLElement>(document.getElementById('pbi-container'));\n  ...\n  ...\n}\n```\n\nAlso, import any Power BI components that you need in your component.ts file:\n\n```\nimport { Page } from 'page';\nimport { Report } from 'report';\nimport { Dashboard } from 'dashboard';\n```\n\nFor example, if you want to embed a report, import the Report component and so on.\n\n- **Now, you can call the Power BI service embed API inside your container to embed the content:**\n\n```\nthis.powerBiService.embed(this.pbiContainerElement, config);\n```\n\nThis API call will embed the Power BI component in the div element we created earlier. Notice the 'config' object we have provided as a 2nd argument in the embed() API call above. Refer the **'Embed Configuration'** section for details about this.\n\n- **Handle the events for the embedded components:**\n  Once a Power BI asset (dashboard/report/tile) is embedded in your application, you would want to listen to events so you can take appropriate actions whenever an event occurs. The powerBiService.embed(...) function returns an appropriate embedded object (dashboard/report/tile) and the event handlers can be set on this object. For example, if you are embedding a report, you can use the following event handler code:\n\n```\nreport.on('loaded', function(event) {\n  report.getPages().then(function(pages) {\n    console.log('report loaded, number of pages: ', pages.length);\n    // We only want to handle the 'loaded' event once\n    report.off('loaded');\n  });\n});\n\nreport.off('pageChanged');\nreport.on<{ newPage: Page }>('pageChanged', event => {\n  console.log('Page changed:', event.detail.newPage.displayName);\n});\n```\n\nFor more details about event handling, refer the Microsoft wiki page: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Handling-Events\n\n## Embed Configuration\n\nThe Power BI library provides a default embed configuration but you can define your own configuration too. For Method 2 above, the embed configuration has been provided through the HTML attributes itself, so the config object in our TypeScript code can be empty. For Method 3, we need to specify the embed configuration in the component.ts TypeScript code.\n\nSample configuration for dashboard:\n\n```\nconst config = {\n  type: 'dashboard',\n  dashboardId: '[put-dashboard-id-here]',\n  embedUrl:\n    'https://app.powerbi.com/dashboardEmbed?' +\n    'dashboardId=[put-dashboard-id-here]' +\n    '&groupId=[put-group-id-here]',\n  accessToken: [put-access-token-here]\n};\n```\n\nSample configuration for report:\n\n```\nconst config = {\n  type: 'report',\n  id: '[put-report-id-here]',\n  embedUrl:\n    'https://app.powerbi.com/reportEmbed?' +\n    'reportId=[put-report-id-here]' +\n    '&groupId=[put-group-id-here]',\n  accessToken: [put-access-token-here],\n  settings: {\n    filterPaneEnabled: this.filterPaneEnabled,\n    navContentPaneEnabled: this.navContentPaneEnabled\n  }\n};\n```\n\nThis config object can then be passed to `this.powerBiService.embed(this.pbiContainerElement, config)`.\n\nFor more details about embed configuration, refer the Microsoft wiki page: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details\n\n## Power BI access token\n\nThe Power BI embedding functionality requires an access token to the Power BI Pro account. Retrieving the access token is not part of the web client functionality or this library, it should ideally be fetched by the server and served to the web client using a REST call or similar mechanism.\n\n## References\n\nThis TypeScript library is built on top of the official [powerbi-client](https://www.npmjs.com/package/powerbi-client) library provided by Microsoft and references some code from [PowerBI-Angular2](https://github.com/diego-d5000/PowerBI-Angular2) library.\n","readmeFilename":"README.md"}