├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── angular.json ├── e2e ├── protractor.conf.js ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.json ├── package-lock.json ├── package.json ├── projects └── ngx-powerbi │ ├── .gitignore │ ├── LICENSE │ ├── README.md │ ├── karma.conf.js │ ├── ng-package.json │ ├── package-lock.json │ ├── package.json │ ├── samples │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── e2e │ │ ├── protractor.conf.js │ │ ├── src │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.e2e.json │ ├── package.json │ ├── src │ │ ├── .browserslistrc │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── karma.conf.js │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ ├── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── tsconfig.json │ └── tslint.json │ ├── src │ ├── lib │ │ ├── ngx-powerbi.component.ts │ │ ├── ngx-powerbi.module.ts │ │ └── ngx-powerbi.service.ts │ ├── public-api.ts │ └── test.ts │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ ├── tsconfig.spec.json │ └── tslint.json ├── src ├── .browserslistrc ├── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ └── app.module.ts ├── assets │ └── .gitkeep ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── karma.conf.js ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── tslint.json ├── tsconfig.json └── tslint.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | 41 | .angular/cache 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Ramandeep Singh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ngx-powerbi 2 | 3 | [![NPM Version](https://img.shields.io/npm/v/ngx-powerbi.svg)](https://www.npmjs.com/package/ngx-powerbi) 4 | [![NPM Total Downloads](https://img.shields.io/npm/dt/ngx-powerbi.svg)](https://www.npmjs.com/package/ngx-powerbi) 5 | 6 | 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](https://www.npmjs.com/package/powerbi-client) library provided by Microsoft. 7 | 8 | ## Installation 9 | 10 | This 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: 11 | NPM: 12 | 13 | ``` 14 | npm install powerbi-client 15 | ``` 16 | 17 | Install the ngx-powerbi library: 18 | 19 | ``` 20 | npm install ngx-powerbi 21 | ``` 22 | 23 | ## Usage 24 | 25 | There 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. 26 | 27 | Here are some of the sample ways of embedding a Power BI report in your application: 28 | 29 | **Method 1** 30 | 31 | Pick up and play: Use the included Power BI component directly in your component HTML file. 32 | 33 | - **Import the 'NgxPowerBiModule' module inside your target module:** 34 | 35 | ``` 36 | import { NgxPowerBiModule } from 'ngx-powerbi'; 37 | 38 | @NgModule({ 39 | imports: [ 40 | ... 41 | ... 42 | NgxPowerBiModule 43 | ], 44 | exports: ..., 45 | declarations: ... 46 | }) 47 | ``` 48 | 49 | Use the provided component attribute to embed a Power BI asset: 50 | 51 | ``` 52 | 58 | 59 | ``` 60 | 61 | Optional: Implement the `onEmbedded(report: pbi.Report)` in your component class if you want to capture Power BI embedded component events. 62 | 63 | **Method 2** 64 | 65 | Use the Power BI configuration HTML attributes in a div + Power BI embedded service. The component.html should look like this: 66 | 67 | ``` 68 |
75 |
76 | ``` 77 | 78 | In 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. 79 | 80 | **Method 3** 81 | 82 | If you want more fine-grain control of the embedding functionality, use the provided Power BI embedded service as per the instructions below: 83 | 84 | - **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:** 85 | 86 | ``` 87 |
88 | ``` 89 | 90 | - **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:** 91 | 92 | ``` 93 | import { NgxPowerBiService } from 'ngx-powerbi'; 94 | 95 | export class ReportsContainer implements OnInit { 96 | private powerBiService: NgxPowerBiService; 97 | private pbiContainerElement: HTMLElement; 98 | 99 | constructor() { 100 | this.powerBiService = new NgxPowerBiService(); 101 | ... 102 | } 103 | 104 | ngOnInit() { 105 | this.pbiContainerElement = (document.getElementById('pbi-container')); 106 | ... 107 | ... 108 | } 109 | ``` 110 | 111 | Also, import any Power BI components that you need in your component.ts file: 112 | 113 | ``` 114 | import { Page } from 'page'; 115 | import { Report } from 'report'; 116 | import { Dashboard } from 'dashboard'; 117 | ``` 118 | 119 | For example, if you want to embed a report, import the Report component and so on. 120 | 121 | - **Now, you can call the Power BI service embed API inside your container to embed the content:** 122 | 123 | ``` 124 | this.powerBiService.embed(this.pbiContainerElement, config); 125 | ``` 126 | 127 | This 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. 128 | 129 | - **Handle the events for the embedded components:** 130 | 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: 131 | 132 | ``` 133 | report.on('loaded', function(event) { 134 | report.getPages().then(function(pages) { 135 | console.log('report loaded, number of pages: ', pages.length); 136 | // We only want to handle the 'loaded' event once 137 | report.off('loaded'); 138 | }); 139 | }); 140 | 141 | report.off('pageChanged'); 142 | report.on<{ newPage: Page }>('pageChanged', event => { 143 | console.log('Page changed:', event.detail.newPage.displayName); 144 | }); 145 | ``` 146 | 147 | For more details about event handling, refer the Microsoft wiki page: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Handling-Events 148 | 149 | ## Embed Configuration 150 | 151 | The 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. 152 | 153 | Sample configuration for dashboard: 154 | 155 | ``` 156 | const config = { 157 | type: 'dashboard', 158 | dashboardId: '[put-dashboard-id-here]', 159 | embedUrl: 160 | 'https://app.powerbi.com/dashboardEmbed?' + 161 | 'dashboardId=[put-dashboard-id-here]' + 162 | '&groupId=[put-group-id-here]', 163 | accessToken: [put-access-token-here] 164 | }; 165 | ``` 166 | 167 | Sample configuration for report: 168 | 169 | ``` 170 | const config = { 171 | type: 'report', 172 | id: '[put-report-id-here]', 173 | embedUrl: 174 | 'https://app.powerbi.com/reportEmbed?' + 175 | 'reportId=[put-report-id-here]' + 176 | '&groupId=[put-group-id-here]', 177 | accessToken: [put-access-token-here], 178 | settings: { 179 | filterPaneEnabled: this.filterPaneEnabled, 180 | navContentPaneEnabled: this.navContentPaneEnabled 181 | } 182 | }; 183 | ``` 184 | 185 | This config object can then be passed to `this.powerBiService.embed(this.pbiContainerElement, config)`. 186 | 187 | For more details about embed configuration, refer the Microsoft wiki page: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details 188 | 189 | ## Power BI access token 190 | 191 | The 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. 192 | 193 | ## References 194 | 195 | This 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. 196 | 197 | ## Donate 198 | 199 | - **Paypal**: https://www.paypal.me/ramsi1983 200 | 201 | - **Crypto**: Ethereum wallet address: 0xBeA952fc85c084C298CB3aC0cE198dD389488CB9 -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "pbi-app": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "prefix": "app", 11 | "schematics": {}, 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/pbi-app", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": ["zone.js"], 20 | "tsConfig": "src/tsconfig.app.json", 21 | "aot": true, 22 | "assets": [ 23 | "src/favicon.ico", 24 | "src/assets" 25 | ], 26 | "styles": [ 27 | "src/styles.css" 28 | ], 29 | "scripts": [] 30 | }, 31 | "configurations": { 32 | "production": { 33 | "fileReplacements": [ 34 | { 35 | "replace": "src/environments/environment.ts", 36 | "with": "src/environments/environment.prod.ts" 37 | } 38 | ], 39 | "optimization": true, 40 | "outputHashing": "all", 41 | "sourceMap": false, 42 | "extractCss": true, 43 | "namedChunks": false, 44 | "extractLicenses": true, 45 | "vendorChunk": false, 46 | "buildOptimizer": true, 47 | "budgets": [ 48 | { 49 | "type": "initial", 50 | "maximumWarning": "2mb", 51 | "maximumError": "5mb" 52 | }, 53 | { 54 | "type": "anyComponentStyle", 55 | "maximumWarning": "6kb", 56 | "maximumError": "10kb" 57 | } 58 | ] 59 | } 60 | } 61 | }, 62 | "serve": { 63 | "builder": "@angular-devkit/build-angular:dev-server", 64 | "options": { 65 | "buildTarget": "pbi-app:build" 66 | }, 67 | "configurations": { 68 | "production": { 69 | "buildTarget": "pbi-app:build:production" 70 | } 71 | } 72 | }, 73 | "extract-i18n": { 74 | "builder": "@angular-devkit/build-angular:extract-i18n", 75 | "options": { 76 | "buildTarget": "pbi-app:build" 77 | } 78 | }, 79 | "test": { 80 | "builder": "@angular-devkit/build-angular:karma", 81 | "options": { 82 | "main": "src/test.ts", 83 | "polyfills": ["zone.js"], 84 | "tsConfig": "src/tsconfig.spec.json", 85 | "karmaConfig": "src/karma.conf.js", 86 | "styles": [ 87 | "src/styles.css" 88 | ], 89 | "scripts": [], 90 | "assets": [ 91 | "src/favicon.ico", 92 | "src/assets" 93 | ] 94 | } 95 | }, 96 | "lint": { 97 | "builder": "@angular-devkit/build-angular:tslint", 98 | "options": { 99 | "tsConfig": [ 100 | "src/tsconfig.app.json", 101 | "src/tsconfig.spec.json", 102 | "e2e/tsconfig.json" 103 | ], 104 | "exclude": [ 105 | "**/node_modules/**" 106 | ] 107 | } 108 | }, 109 | "e2e": { 110 | "builder": "@angular-devkit/build-angular:protractor", 111 | "options": { 112 | "protractorConfig": "e2e/protractor.conf.js", 113 | "devServerTarget": "pbi-app:serve" 114 | }, 115 | "configurations": { 116 | "production": { 117 | "devServerTarget": "pbi-app:serve:production" 118 | } 119 | } 120 | } 121 | } 122 | }, 123 | "ngx-powerbi": { 124 | "root": "projects/ngx-powerbi", 125 | "sourceRoot": "projects/ngx-powerbi/src", 126 | "projectType": "library", 127 | "prefix": "lib", 128 | "architect": { 129 | "build": { 130 | "builder": "@angular-devkit/build-angular:ng-packagr", 131 | "options": { 132 | "tsConfig": "projects/ngx-powerbi/tsconfig.lib.json", 133 | "project": "projects/ngx-powerbi/ng-package.json" 134 | }, 135 | "configurations": { 136 | "production": { 137 | "tsConfig": "projects/ngx-powerbi/tsconfig.lib.prod.json" 138 | } 139 | } 140 | }, 141 | "test": { 142 | "builder": "@angular-devkit/build-angular:karma", 143 | "options": { 144 | "main": "projects/ngx-powerbi/src/test.ts", 145 | "tsConfig": "projects/ngx-powerbi/tsconfig.spec.json", 146 | "karmaConfig": "projects/ngx-powerbi/karma.conf.js" 147 | } 148 | }, 149 | "lint": { 150 | "builder": "@angular-devkit/build-angular:tslint", 151 | "options": { 152 | "tsConfig": [ 153 | "projects/ngx-powerbi/tsconfig.lib.json", 154 | "projects/ngx-powerbi/tsconfig.spec.json" 155 | ], 156 | "exclude": [ 157 | "**/node_modules/**" 158 | ] 159 | } 160 | } 161 | } 162 | } 163 | }, 164 | "cli": { 165 | "analytics": "baddc8f6-b938-46d5-91d1-ce8e184b6a06" 166 | } 167 | } -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to pbi-app!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es2018", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pbi-app", 3 | "version": "4.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e", 11 | "build_lib": "ng build ngx-powerbi", 12 | "npm_pack": "cd dist/ngx-powerbi && npm pack", 13 | "package": "npm run build_lib && npm run npm_pack", 14 | "build_lib_prod": "ng build ngx-powerbi --configuration production", 15 | "prepublish_lib": "npm run build_lib_prod", 16 | "publish_lib": "npm publish dist/ngx-powerbi" 17 | }, 18 | "private": true, 19 | "dependencies": { 20 | "@angular/animations": "^17.1.1", 21 | "@angular/common": "^17.1.1", 22 | "@angular/compiler": "^17.1.1", 23 | "@angular/core": "^17.1.1", 24 | "@angular/forms": "^17.1.1", 25 | "@angular/platform-browser": "^17.1.1", 26 | "@angular/platform-browser-dynamic": "^17.1.1", 27 | "@angular/router": "^17.1.1", 28 | "rxjs": "~6.5.4", 29 | "tslib": "^2.0.0", 30 | "zone.js": "~0.14.3" 31 | }, 32 | "devDependencies": { 33 | "@angular-devkit/build-angular": "^17.1.1", 34 | "@angular/cli": "^17.1.1", 35 | "@angular/compiler-cli": "^17.1.1", 36 | "@angular/language-service": "^17.1.1", 37 | "@types/body-parser": "^1.19.5", 38 | "@types/jasmine": "~3.8.0", 39 | "@types/jasminewd2": "~2.0.3", 40 | "@types/node": "^12.11.1", 41 | "jasmine-core": "~3.8.0", 42 | "jasmine-spec-reporter": "~5.0.0", 43 | "karma": "~6.3.17", 44 | "karma-chrome-launcher": "~3.1.0", 45 | "karma-coverage-istanbul-reporter": "~3.0.2", 46 | "karma-jasmine": "~4.0.0", 47 | "karma-jasmine-html-reporter": "^1.5.0", 48 | "ng-packagr": "^17.1.2", 49 | "protractor": "~7.0.0", 50 | "ts-node": "~8.3.0", 51 | "tslint": "~6.1.0", 52 | "typescript": "~5.3.3", 53 | "powerbi-client": "~2.22.3" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Ramandeep Singh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /projects/ngx-powerbi/README.md: -------------------------------------------------------------------------------- 1 | # ngx-powerbi 2 | 3 | [![NPM Version](https://img.shields.io/npm/v/ngx-powerbi.svg)](https://www.npmjs.com/package/ngx-powerbi) 4 | [![NPM Total Downloads](https://img.shields.io/npm/dt/ngx-powerbi.svg)](https://www.npmjs.com/package/ngx-powerbi) 5 | 6 | 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](https://www.npmjs.com/package/powerbi-client) library provided by Microsoft. 7 | 8 | ## Installation 9 | 10 | This 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: 11 | NPM: 12 | 13 | ``` 14 | npm install powerbi-client 15 | ``` 16 | 17 | Install the ngx-powerbi library: 18 | 19 | ``` 20 | npm install ngx-powerbi 21 | ``` 22 | 23 | ## Usage 24 | 25 | There 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. 26 | 27 | Here are some of the sample ways of embedding a Power BI report in your application: 28 | 29 | **Method 1** 30 | 31 | Pick up and play: Use the included Power BI component directly in your component HTML file. 32 | 33 | - **Import the 'NgxPowerBiModule' module inside your target module:** 34 | 35 | ``` 36 | import { NgxPowerBiModule } from 'ngx-powerbi'; 37 | 38 | @NgModule({ 39 | imports: [ 40 | ... 41 | ... 42 | NgxPowerBiModule 43 | ], 44 | exports: ..., 45 | declarations: ... 46 | }) 47 | ``` 48 | 49 | Use the provided component attribute to embed a Power BI asset: 50 | 51 | ``` 52 | 58 | 59 | ``` 60 | 61 | Optional: Implement the `onEmbedded(report: pbi.Report)` in your component class if you want to capture Power BI embedded component events. 62 | 63 | **Method 2** 64 | 65 | Use the Power BI configuration HTML attributes in a div + Power BI embedded service. The component.html should look like this: 66 | 67 | ``` 68 |
75 |
76 | ``` 77 | 78 | In 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. 79 | 80 | **Method 3** 81 | 82 | If you want more fine-grain control of the embedding functionality, use the provided Power BI embedded service as per the instructions below: 83 | 84 | - **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:** 85 | 86 | ``` 87 |
88 | ``` 89 | 90 | - **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:** 91 | 92 | ``` 93 | import { NgxPowerBiService } from 'ngx-powerbi'; 94 | 95 | export class ReportsContainer implements OnInit { 96 | private powerBiService: NgxPowerBiService; 97 | private pbiContainerElement: HTMLElement; 98 | 99 | constructor() { 100 | this.powerBiService = new NgxPowerBiService(); 101 | ... 102 | } 103 | 104 | ngOnInit() { 105 | this.pbiContainerElement = (document.getElementById('pbi-container')); 106 | ... 107 | ... 108 | } 109 | ``` 110 | 111 | Also, import any Power BI components that you need in your component.ts file: 112 | 113 | ``` 114 | import { Page } from 'page'; 115 | import { Report } from 'report'; 116 | import { Dashboard } from 'dashboard'; 117 | ``` 118 | 119 | For example, if you want to embed a report, import the Report component and so on. 120 | 121 | - **Now, you can call the Power BI service embed API inside your container to embed the content:** 122 | 123 | ``` 124 | this.powerBiService.embed(this.pbiContainerElement, config); 125 | ``` 126 | 127 | This 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. 128 | 129 | - **Handle the events for the embedded components:** 130 | 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: 131 | 132 | ``` 133 | report.on('loaded', function(event) { 134 | report.getPages().then(function(pages) { 135 | console.log('report loaded, number of pages: ', pages.length); 136 | // We only want to handle the 'loaded' event once 137 | report.off('loaded'); 138 | }); 139 | }); 140 | 141 | report.off('pageChanged'); 142 | report.on<{ newPage: Page }>('pageChanged', event => { 143 | console.log('Page changed:', event.detail.newPage.displayName); 144 | }); 145 | ``` 146 | 147 | For more details about event handling, refer the Microsoft wiki page: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Handling-Events 148 | 149 | ## Embed Configuration 150 | 151 | The 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. 152 | 153 | Sample configuration for dashboard: 154 | 155 | ``` 156 | const config = { 157 | type: 'dashboard', 158 | dashboardId: '[put-dashboard-id-here]', 159 | embedUrl: 160 | 'https://app.powerbi.com/dashboardEmbed?' + 161 | 'dashboardId=[put-dashboard-id-here]' + 162 | '&groupId=[put-group-id-here]', 163 | accessToken: [put-access-token-here] 164 | }; 165 | ``` 166 | 167 | Sample configuration for report: 168 | 169 | ``` 170 | const config = { 171 | type: 'report', 172 | id: '[put-report-id-here]', 173 | embedUrl: 174 | 'https://app.powerbi.com/reportEmbed?' + 175 | 'reportId=[put-report-id-here]' + 176 | '&groupId=[put-group-id-here]', 177 | accessToken: [put-access-token-here], 178 | settings: { 179 | filterPaneEnabled: this.filterPaneEnabled, 180 | navContentPaneEnabled: this.navContentPaneEnabled 181 | } 182 | }; 183 | ``` 184 | 185 | This config object can then be passed to `this.powerBiService.embed(this.pbiContainerElement, config)`. 186 | 187 | For more details about embed configuration, refer the Microsoft wiki page: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details 188 | 189 | ## Power BI access token 190 | 191 | The 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. 192 | 193 | ## References 194 | 195 | This 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. 196 | 197 | ## Donate 198 | 199 | - **Paypal**: https://www.paypal.me/ramsi1983 200 | 201 | - **Crypto**: Ethereum wallet address: 0xBeA952fc85c084C298CB3aC0cE198dD389488CB9 202 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | // require('karma-jasmine-html-reporter'), 12 | require('@angular-devkit/build-angular/plugins/karma') 13 | ], 14 | client: { 15 | clearContext: false // leave Jasmine Spec Runner output visible in browser 16 | }, 17 | reporters: ['progress', 'kjhtml'], 18 | port: 9876, 19 | colors: true, 20 | logLevel: config.LOG_INFO, 21 | autoWatch: true, 22 | browsers: ['Chrome'], 23 | singleRun: false 24 | }); 25 | }; 26 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ngx-powerbi", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/ngx-powerbi/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-powerbi", 3 | "version": "5.0.1", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "ngx-powerbi", 9 | "version": "5.0.1", 10 | "license": "MIT", 11 | "dependencies": { 12 | "tslib": "^2.0.0" 13 | }, 14 | "peerDependencies": { 15 | "@angular/common": "^17.1.1", 16 | "@angular/core": "^17.1.1", 17 | "powerbi-client": "^2.22.3" 18 | } 19 | }, 20 | "node_modules/@angular/common": { 21 | "version": "17.1.1", 22 | "resolved": "https://registry.npmjs.org/@angular/common/-/common-17.1.1.tgz", 23 | "integrity": "sha512-YMM2vImWJg7H3Yaej7ncGpFKT28V2Y6X9/rLpRdSKAiUbcbj7GeWtX/upfZGR9KmD08baYZw0YTNMR03Ubv/mg==", 24 | "peer": true, 25 | "dependencies": { 26 | "tslib": "^2.3.0" 27 | }, 28 | "engines": { 29 | "node": "^18.13.0 || >=20.9.0" 30 | }, 31 | "peerDependencies": { 32 | "@angular/core": "17.1.1", 33 | "rxjs": "^6.5.3 || ^7.4.0" 34 | } 35 | }, 36 | "node_modules/@angular/core": { 37 | "version": "17.1.1", 38 | "resolved": "https://registry.npmjs.org/@angular/core/-/core-17.1.1.tgz", 39 | "integrity": "sha512-JtNYM9eHr8eUSrGPq/kn0+/F+TSZ7EBWxZhM1ZndOlGu1gA4fGhrDid4ZXIHIs07DbM4NZjMn+LhRyx02YDsSA==", 40 | "peer": true, 41 | "dependencies": { 42 | "tslib": "^2.3.0" 43 | }, 44 | "engines": { 45 | "node": "^18.13.0 || >=20.9.0" 46 | }, 47 | "peerDependencies": { 48 | "rxjs": "^6.5.3 || ^7.4.0", 49 | "zone.js": "~0.14.0" 50 | } 51 | }, 52 | "node_modules/es6-promise": { 53 | "version": "3.3.1", 54 | "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz", 55 | "integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==", 56 | "peer": true 57 | }, 58 | "node_modules/http-post-message": { 59 | "version": "0.2.3", 60 | "resolved": "https://registry.npmjs.org/http-post-message/-/http-post-message-0.2.3.tgz", 61 | "integrity": "sha512-76heerrzYhvWptJfWxUarHw2O3fkMqF48bbq/S6XFWHUc34o8tkySBwtReXuAKJAECZWVu8U0TYLckFcwtSdrg==", 62 | "peer": true, 63 | "dependencies": { 64 | "es6-promise": "^3.2.1" 65 | } 66 | }, 67 | "node_modules/powerbi-client": { 68 | "version": "2.22.3", 69 | "resolved": "https://registry.npmjs.org/powerbi-client/-/powerbi-client-2.22.3.tgz", 70 | "integrity": "sha512-IUf0OCXBR7sX1zcId47L94/TD9ljWztEqMPyhtMFZ9zFsdY4G68B1+7AAE9+bYqAQrKznJTHvcLQAnWvYQh/9A==", 71 | "peer": true, 72 | "dependencies": { 73 | "http-post-message": "^0.2", 74 | "powerbi-models": "^1.12.3", 75 | "powerbi-router": "^0.1", 76 | "window-post-message-proxy": "^0.2" 77 | } 78 | }, 79 | "node_modules/powerbi-models": { 80 | "version": "1.14.0", 81 | "resolved": "https://registry.npmjs.org/powerbi-models/-/powerbi-models-1.14.0.tgz", 82 | "integrity": "sha512-JUBuw/PKHSwSBD2/XubMGJafE8jQsP1evhK2WiXeFHbB9QluUeuGuSMlSxEkworNC+SFR7pGKknniCZqYoDNLw==", 83 | "peer": true 84 | }, 85 | "node_modules/powerbi-router": { 86 | "version": "0.1.5", 87 | "resolved": "https://registry.npmjs.org/powerbi-router/-/powerbi-router-0.1.5.tgz", 88 | "integrity": "sha512-DFJCKxwh/DqMZXtHSo6xZl87mbRviZGn4P7Oi2rT0L4HMI4AjnWIrwg0JCSM7ymBzYnNe5UmrsCaf2Upur5RQA==", 89 | "peer": true, 90 | "dependencies": { 91 | "es6-promise": "^3.2.1", 92 | "route-recognizer": "^0.1.11" 93 | } 94 | }, 95 | "node_modules/route-recognizer": { 96 | "version": "0.1.11", 97 | "resolved": "https://registry.npmjs.org/route-recognizer/-/route-recognizer-0.1.11.tgz", 98 | "integrity": "sha512-7JNu5mXQVa39zxmUKyk/bfpeF2WyEC5JKVTJO5HATcoUQpcQsI3eLzhwGU69xeOagQxfOQ+yr2sSv0G8xy+vQA==", 99 | "peer": true 100 | }, 101 | "node_modules/rxjs": { 102 | "version": "7.8.1", 103 | "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", 104 | "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", 105 | "peer": true, 106 | "dependencies": { 107 | "tslib": "^2.1.0" 108 | } 109 | }, 110 | "node_modules/tslib": { 111 | "version": "2.6.2", 112 | "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", 113 | "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" 114 | }, 115 | "node_modules/window-post-message-proxy": { 116 | "version": "0.2.6", 117 | "resolved": "https://registry.npmjs.org/window-post-message-proxy/-/window-post-message-proxy-0.2.6.tgz", 118 | "integrity": "sha512-IwNWtUWVFarBa2F9vhmfv2yr0PfPm57QuOBCw3qSLaunhD3THcHUKQ4HrJQiCuYUT7LEjhUtaoA+hrV+wQzNmQ==", 119 | "peer": true, 120 | "dependencies": { 121 | "es6-promise": "^3.1.2" 122 | } 123 | }, 124 | "node_modules/zone.js": { 125 | "version": "0.14.3", 126 | "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.3.tgz", 127 | "integrity": "sha512-jYoNqF046Q+JfcZSItRSt+oXFcpXL88yq7XAZjb/NKTS7w2hHpKjRJ3VlFD1k75wMaRRXNUt5vrZVlygiMyHbA==", 128 | "peer": true, 129 | "dependencies": { 130 | "tslib": "^2.3.0" 131 | } 132 | } 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-powerbi", 3 | "version": "5.0.1", 4 | "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.", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/ramandeep-singh-1983/ngx-powerbi" 9 | }, 10 | "homepage": "https://medium.com/@ramandeep.singh.1983/ngx-powerbi-a-basic-typescript-wrapper-library-for-power-bi-b056150b3f25", 11 | "author": { 12 | "name": "Ramandeep Singh", 13 | "email": "ramandeep.singh.1983@gmail.com" 14 | }, 15 | "publishConfig": { 16 | "access": "public" 17 | }, 18 | "keywords": [ 19 | "microsoft", 20 | "powerbi", 21 | "power-bi", 22 | "embedded", 23 | "angular", 24 | "visuals", 25 | "analytics", 26 | "reports", 27 | "reporting" 28 | ], 29 | "dependencies": { 30 | "tslib": "^2.0.0" 31 | }, 32 | "peerDependencies": { 33 | "@angular/common": "^17.1.1", 34 | "@angular/core": "^17.1.1", 35 | "powerbi-client": "^2.22.3" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.8. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "examples": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "prefix": "app", 11 | "schematics": {}, 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/examples", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "src/tsconfig.app.json", 21 | "assets": [ 22 | "src/favicon.ico", 23 | "src/assets" 24 | ], 25 | "styles": [ 26 | "src/styles.css" 27 | ], 28 | "scripts": [] 29 | }, 30 | "configurations": { 31 | "production": { 32 | "fileReplacements": [ 33 | { 34 | "replace": "src/environments/environment.ts", 35 | "with": "src/environments/environment.prod.ts" 36 | } 37 | ], 38 | "optimization": true, 39 | "outputHashing": "all", 40 | "sourceMap": false, 41 | "extractCss": true, 42 | "namedChunks": false, 43 | "aot": true, 44 | "extractLicenses": true, 45 | "vendorChunk": false, 46 | "buildOptimizer": true 47 | } 48 | } 49 | }, 50 | "serve": { 51 | "builder": "@angular-devkit/build-angular:dev-server", 52 | "options": { 53 | "browserTarget": "examples:build" 54 | }, 55 | "configurations": { 56 | "production": { 57 | "browserTarget": "examples:build:production" 58 | } 59 | } 60 | }, 61 | "extract-i18n": { 62 | "builder": "@angular-devkit/build-angular:extract-i18n", 63 | "options": { 64 | "browserTarget": "examples:build" 65 | } 66 | }, 67 | "test": { 68 | "builder": "@angular-devkit/build-angular:karma", 69 | "options": { 70 | "main": "src/test.ts", 71 | "polyfills": "src/polyfills.ts", 72 | "tsConfig": "src/tsconfig.spec.json", 73 | "karmaConfig": "src/karma.conf.js", 74 | "styles": [ 75 | "src/styles.css" 76 | ], 77 | "scripts": [], 78 | "assets": [ 79 | "src/favicon.ico", 80 | "src/assets" 81 | ] 82 | } 83 | }, 84 | "lint": { 85 | "builder": "@angular-devkit/build-angular:tslint", 86 | "options": { 87 | "tsConfig": [ 88 | "src/tsconfig.app.json", 89 | "src/tsconfig.spec.json" 90 | ], 91 | "exclude": [ 92 | "**/node_modules/**" 93 | ] 94 | } 95 | } 96 | } 97 | }, 98 | "examples-e2e": { 99 | "root": "e2e/", 100 | "projectType": "application", 101 | "architect": { 102 | "e2e": { 103 | "builder": "@angular-devkit/build-angular:protractor", 104 | "options": { 105 | "protractorConfig": "e2e/protractor.conf.js", 106 | "devServerTarget": "examples:serve" 107 | }, 108 | "configurations": { 109 | "production": { 110 | "devServerTarget": "examples:serve:production" 111 | } 112 | } 113 | }, 114 | "lint": { 115 | "builder": "@angular-devkit/build-angular:tslint", 116 | "options": { 117 | "tsConfig": "e2e/tsconfig.e2e.json", 118 | "exclude": [ 119 | "**/node_modules/**" 120 | ] 121 | } 122 | } 123 | } 124 | } 125 | }, 126 | "defaultProject": "examples", 127 | "cli": { 128 | "analytics": false 129 | } 130 | } -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './src/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: require('path').join(__dirname, './tsconfig.e2e.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to examples!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "examples", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "^6.1.3", 15 | "@angular/cdk": "^6.4.5", 16 | "@angular/common": "^6.0.3", 17 | "@angular/compiler": "^6.0.3", 18 | "@angular/core": "^6.0.3", 19 | "@angular/forms": "^6.0.3", 20 | "@angular/http": "^6.0.3", 21 | "@angular/material": "^6.4.5", 22 | "@angular/platform-browser": "^6.0.3", 23 | "@angular/platform-browser-dynamic": "^6.0.3", 24 | "@angular/router": "^6.0.3", 25 | "core-js": "^2.5.4", 26 | "rxjs": "^6.0.0", 27 | "zone.js": "^0.8.26" 28 | }, 29 | "devDependencies": { 30 | "@angular/compiler-cli": "^6.0.3", 31 | "@angular-devkit/build-angular": "~0.6.8", 32 | "typescript": "~2.7.2", 33 | "@angular/cli": "~6.0.8", 34 | "@angular/language-service": "^6.0.3", 35 | "@types/jasmine": "~2.8.6", 36 | "@types/jasminewd2": "~2.0.3", 37 | "@types/node": "~8.9.4", 38 | "jasmine-core": "~2.99.1", 39 | "jasmine-spec-reporter": "~4.2.1", 40 | "karma": "~6.3.17", 41 | "karma-chrome-launcher": "~3.1.0", 42 | "karma-coverage-istanbul-reporter": "~3.0.2", 43 | "karma-jasmine": "~4.0.0", 44 | "karma-jasmine-html-reporter": "^1.5.0", 45 | "protractor": "~5.3.0", 46 | "ts-node": "~5.0.1", 47 | "tslint": "~5.9.1" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed 5 | > 0.5% 6 | last 2 versions 7 | Firefox ESR 8 | not dead 9 | # IE 9-11 -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramandeep-singh-1983/ngx-powerbi/908c8401594d0416486a1081661584c3c2b1d4e3/projects/ngx-powerbi/samples/src/app/app.component.css -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

4 | Welcome to {{ title }}! 5 |

6 | Angular Logo 7 |
8 |

Here are some links to help you start:

9 | 20 | 21 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | describe('AppComponent', () => { 4 | beforeEach(async(() => { 5 | TestBed.configureTestingModule({ 6 | declarations: [ 7 | AppComponent 8 | ], 9 | }).compileComponents(); 10 | })); 11 | it('should create the app', async(() => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.debugElement.componentInstance; 14 | expect(app).toBeTruthy(); 15 | })); 16 | it(`should have as title 'app'`, async(() => { 17 | const fixture = TestBed.createComponent(AppComponent); 18 | const app = fixture.debugElement.componentInstance; 19 | expect(app.title).toEqual('app'); 20 | })); 21 | it('should render title in a h1 tag', async(() => { 22 | const fixture = TestBed.createComponent(AppComponent); 23 | fixture.detectChanges(); 24 | const compiled = fixture.debugElement.nativeElement; 25 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to examples!'); 26 | })); 27 | }); 28 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'app'; 10 | } 11 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | imports: [ 11 | BrowserModule 12 | ], 13 | providers: [], 14 | bootstrap: [AppComponent] 15 | }) 16 | export class AppModule { } 17 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramandeep-singh-1983/ngx-powerbi/908c8401594d0416486a1081661584c3c2b1d4e3/projects/ngx-powerbi/samples/src/assets/.gitkeep -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * In development mode, to ignore zone related error stack frames such as 11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can 12 | * import the following file, but please comment it out in production mode 13 | * because it will have performance impact when throw error 14 | */ 15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 16 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramandeep-singh-1983/ngx-powerbi/908c8401594d0416486a1081661584c3c2b1d4e3/projects/ngx-powerbi/samples/src/favicon.ico -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | // import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Web Animations `@angular/platform-browser/animations` 51 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 52 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 53 | **/ 54 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 55 | 56 | /** 57 | * By default, zone.js will patch all possible macroTask and DomEvents 58 | * user can disable parts of macroTask/DomEvents patch by setting following flags 59 | */ 60 | 61 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 62 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 63 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 64 | 65 | /* 66 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 67 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 68 | */ 69 | // (window as any).__Zone_enable_cross_context_check = true; 70 | 71 | /*************************************************************************************************** 72 | * Zone JS is required by default for Angular itself. 73 | */ 74 | import 'zone.js/dist/zone'; // Included with Angular CLI. 75 | 76 | 77 | 78 | /*************************************************************************************************** 79 | * APPLICATION IMPORTS 80 | */ 81 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "src/test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "module": "commonjs", 6 | "types": [ 7 | "jasmine", 8 | "node" 9 | ] 10 | }, 11 | "files": [ 12 | "test.ts", 13 | "polyfills.ts" 14 | ], 15 | "include": [ 16 | "**/*.spec.ts", 17 | "**/*.d.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "sourceMap": true, 8 | "declaration": false, 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "es5", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2017", 18 | "dom" 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/samples/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "arrow-return-shorthand": true, 4 | "callable-types": true, 5 | "class-name": true, 6 | "comment-format": [ 7 | true, 8 | "check-space" 9 | ], 10 | "curly": true, 11 | "deprecation": { 12 | "severity": "warn" 13 | }, 14 | "eofline": true, 15 | "forin": true, 16 | "import-blacklist": [ 17 | true, 18 | "rxjs/Rx" 19 | ], 20 | "import-spacing": true, 21 | "indent": [ 22 | true, 23 | "spaces" 24 | ], 25 | "interface-over-type-literal": true, 26 | "label-position": true, 27 | "max-line-length": [ 28 | true, 29 | 140 30 | ], 31 | "member-access": false, 32 | "member-ordering": [ 33 | true, 34 | { 35 | "order": [ 36 | "static-field", 37 | "instance-field", 38 | "static-method", 39 | "instance-method" 40 | ] 41 | } 42 | ], 43 | "no-arg": true, 44 | "no-bitwise": true, 45 | "no-console": [ 46 | true, 47 | "debug", 48 | "info", 49 | "time", 50 | "timeEnd", 51 | "trace" 52 | ], 53 | "no-construct": true, 54 | "no-debugger": true, 55 | "no-duplicate-super": true, 56 | "no-empty": false, 57 | "no-empty-interface": true, 58 | "no-eval": true, 59 | "no-inferrable-types": [ 60 | true, 61 | "ignore-params" 62 | ], 63 | "no-misused-new": true, 64 | "no-non-null-assertion": true, 65 | "no-shadowed-variable": true, 66 | "no-string-literal": false, 67 | "no-string-throw": true, 68 | "no-switch-case-fall-through": true, 69 | "no-trailing-whitespace": true, 70 | "no-unnecessary-initializer": true, 71 | "no-unused-expression": true, 72 | "no-use-before-declare": true, 73 | "no-var-keyword": true, 74 | "object-literal-sort-keys": false, 75 | "one-line": [ 76 | true, 77 | "check-open-brace", 78 | "check-catch", 79 | "check-else", 80 | "check-whitespace" 81 | ], 82 | "prefer-const": true, 83 | "quotemark": [ 84 | true, 85 | "single" 86 | ], 87 | "radix": true, 88 | "semicolon": [ 89 | true, 90 | "always" 91 | ], 92 | "triple-equals": [ 93 | true, 94 | "allow-null-check" 95 | ], 96 | "typedef-whitespace": [ 97 | true, 98 | { 99 | "call-signature": "nospace", 100 | "index-signature": "nospace", 101 | "parameter": "nospace", 102 | "property-declaration": "nospace", 103 | "variable-declaration": "nospace" 104 | } 105 | ], 106 | "unified-signatures": true, 107 | "variable-name": false, 108 | "whitespace": [ 109 | true, 110 | "check-branch", 111 | "check-decl", 112 | "check-operator", 113 | "check-separator", 114 | "check-type" 115 | ], 116 | "no-output-on-prefix": true, 117 | "use-input-property-decorator": true, 118 | "use-output-property-decorator": true, 119 | "use-host-property-decorator": true, 120 | "no-input-rename": true, 121 | "no-output-rename": true, 122 | "use-life-cycle-interface": true, 123 | "use-pipe-transform-interface": true, 124 | "component-class-suffix": true, 125 | "directive-class-suffix": true 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/src/lib/ngx-powerbi.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | ElementRef, 4 | EventEmitter, 5 | Input, 6 | OnChanges, 7 | OnDestroy, 8 | AfterViewInit, 9 | Output, 10 | SimpleChanges, 11 | ViewChild, 12 | } from '@angular/core'; 13 | import * as pbi from 'powerbi-client'; 14 | import * as models from 'powerbi-models'; 15 | 16 | import { NgxPowerBiService } from './ngx-powerbi.service'; 17 | 18 | export const enum TokenType { 19 | Aad = 'Aad', 20 | Embed = 'Embed' 21 | } 22 | 23 | export const enum ReportType { 24 | Dashboard = 'Dashboard', 25 | Report = 'Report', 26 | Tile = 'Tile' 27 | } 28 | 29 | @Component({ 30 | selector: 'ngx-powerbi-component', 31 | template: '
', 32 | styles: [] 33 | }) 34 | export class NgxPowerBiComponent implements AfterViewInit, OnChanges, OnDestroy { 35 | // Public properties 36 | @Input() accessToken: string; 37 | @Input() tokenType: TokenType; 38 | @Input() embedUrl: string; 39 | @Input() id: string; 40 | @Input() type: ReportType; 41 | @Input() name: string; 42 | @Input() options: models.ISettings; 43 | @Output() embedded = new EventEmitter(); 44 | @ViewChild('ngxPowerBiIFrame', {static: true}) ngxPowerBiIFrameRef: ElementRef; 45 | 46 | // Private fields 47 | private component: pbi.Embed; 48 | private powerBiService: NgxPowerBiService; 49 | 50 | constructor(private ngxPowerBiService: NgxPowerBiService) { 51 | this.powerBiService = ngxPowerBiService; 52 | } 53 | 54 | ngAfterViewInit() { 55 | // Embed the report inside the view child that we have fetched from the DOM 56 | if ( 57 | this.ngxPowerBiIFrameRef.nativeElement && 58 | this.validateRequiredAttributes() 59 | ) { 60 | this.embed(this.ngxPowerBiIFrameRef.nativeElement, this.getConfig()); 61 | } 62 | } 63 | 64 | ngOnChanges(changes: SimpleChanges) { 65 | if (!this.ngxPowerBiIFrameRef) { 66 | return; 67 | } 68 | const { 69 | accessToken, 70 | tokenType, 71 | embedUrl, 72 | id, 73 | type, 74 | name, 75 | options 76 | } = changes; 77 | 78 | // TODO: Validate these conditions 79 | /*if ( 80 | (accessToken.previousValue !== undefined || accessToken.previousValue === accessToken.currentValue) && 81 | embedUrl.previousValue === embedUrl.currentValue 82 | ) { 83 | return; 84 | }*/ 85 | 86 | if (this.validateRequiredAttributes()) { 87 | const config = this.getConfig( 88 | accessToken && accessToken.currentValue, 89 | tokenType && tokenType.currentValue, 90 | embedUrl && embedUrl.currentValue, 91 | id && id.currentValue, 92 | type && type.currentValue, 93 | name && name.currentValue, 94 | options && options.currentValue 95 | ); 96 | this.embed(this.ngxPowerBiIFrameRef.nativeElement, config); 97 | } else if (this.component) { 98 | this.reset(this.ngxPowerBiIFrameRef.nativeElement); 99 | } 100 | } 101 | 102 | ngOnDestroy() { 103 | if (this.component) { 104 | this.reset(this.ngxPowerBiIFrameRef.nativeElement); 105 | } 106 | } 107 | 108 | /** 109 | * Ensure required attributes (embedUrl and accessToken are valid before attempting to embed) 110 | */ 111 | private validateRequiredAttributes(): boolean { 112 | return ( 113 | typeof this.embedUrl === 'string' && 114 | this.embedUrl.length > 0 && 115 | (typeof this.accessToken === 'string' && this.accessToken.length > 0) 116 | ); 117 | } 118 | 119 | /** 120 | * Get the model class compatible token enum from our token type enum 121 | * @param tokenType - Token type in our custom enum format 122 | * @returns Token type in powerbi-models.TokenType enum format 123 | */ 124 | private getTokenType(tokenType: TokenType): models.TokenType { 125 | if (tokenType) { 126 | switch (tokenType) { 127 | case TokenType.Aad: 128 | return models.TokenType.Aad; 129 | case TokenType.Embed: 130 | return models.TokenType.Embed; 131 | default: 132 | return models.TokenType.Aad; 133 | } 134 | } else { 135 | // default is AAD 136 | return models.TokenType.Aad; 137 | } 138 | } 139 | 140 | /** 141 | * Returns an embed configuration object. 142 | * @param accessToken - Access token required to embed a component 143 | * @param tokenType - type of accessToken: Aad or Embed 144 | * @param embedUrl - Embed URL obtained through Power BI REST API or Portal 145 | * @param id - component/element GUID 146 | * @param type - type of embedded component e.g. 'dashboard, report or tile' 147 | * @param name - name of the embedded component 148 | * @param options - Embed configuration options 149 | * @returns Embed configuration object 150 | */ 151 | private getConfig( 152 | accessToken?: string, 153 | tokenType?: TokenType, 154 | embedUrl?: string, 155 | id?: string, 156 | type?: ReportType, 157 | name?: string, 158 | options?: models.ISettings 159 | ): pbi.IEmbedConfiguration { 160 | // For null arguments - use the initial value 161 | // For specified arguments - use the current value 162 | return { 163 | type: type ? type : this.type ? this.type : ReportType.Report, 164 | embedUrl: embedUrl ? embedUrl : this.embedUrl, 165 | accessToken: accessToken ? accessToken : this.accessToken, 166 | tokenType: tokenType 167 | ? this.getTokenType(tokenType) 168 | : this.getTokenType(this.tokenType), 169 | id: id ? id : this.id, 170 | uniqueId: name ? name : this.name, 171 | settings: options ? options : this.options 172 | }; 173 | } 174 | 175 | /** 176 | * Given an HTMLElement, construct an embed configuration based on attributes and pass to service. 177 | * @param element - native element where the embedding needs to be done 178 | * @param config - configuration to be embedded 179 | */ 180 | private embed(element: HTMLElement, config: pbi.IEmbedConfiguration) { 181 | /*if (this.options) { 182 | const newConfig = { config, ...this.options }; 183 | }*/ 184 | 185 | this.component = this.powerBiService.embed(element, config); 186 | this.embedded.emit(this.component as any); 187 | } 188 | 189 | /** 190 | * Reset the component that has been removed from DOM. 191 | * @param element - native element where the embedded was made 192 | */ 193 | reset(element: HTMLElement) { 194 | this.powerBiService.reset(element); 195 | this.component = null; 196 | } 197 | } 198 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/src/lib/ngx-powerbi.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { NgxPowerBiComponent } from './ngx-powerbi.component'; 4 | 5 | @NgModule({ 6 | imports: [], 7 | declarations: [NgxPowerBiComponent], 8 | exports: [NgxPowerBiComponent] 9 | }) 10 | export class NgxPowerBiModule {} 11 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/src/lib/ngx-powerbi.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, Optional } from '@angular/core'; 2 | import { 3 | Embed, 4 | factories, 5 | IEmbedConfiguration, 6 | Report, 7 | service as pbiService, 8 | Tile 9 | } from 'powerbi-client'; 10 | 11 | export function powerBiServiceFactory() { 12 | return new pbiService.Service( 13 | factories.hpmFactory, 14 | factories.wpmpFactory, 15 | factories.routerFactory 16 | ); 17 | } 18 | 19 | @Injectable({ 20 | providedIn: 'root', 21 | useFactory: powerBiServiceFactory 22 | }) 23 | export class NgxPowerBiService { 24 | private powerBiCoreService: pbiService.Service; 25 | 26 | constructor(@Optional() private service?: pbiService.Service) { 27 | if (!service) { 28 | this.powerBiCoreService = new pbiService.Service( 29 | factories.hpmFactory, 30 | factories.wpmpFactory, 31 | factories.routerFactory 32 | ); 33 | } else { 34 | this.powerBiCoreService = service; 35 | } 36 | } 37 | 38 | /** 39 | * Creates new report 40 | * @param HTMLElement Parent HTML element 41 | * @param IEmbedConfiguration Embed configuration 42 | * @returns Embed Embedded object 43 | */ 44 | createReport(element: HTMLElement, config: IEmbedConfiguration): Embed { 45 | return this.powerBiCoreService.createReport(element, config); 46 | } 47 | 48 | /** 49 | * Given a configuration based on an HTML element, 50 | * if the component has already been created and attached to the element, reuses the component instance and existing iframe, 51 | * otherwise creates a new component instance. 52 | * 53 | * @param HTMLElement Parent HTML element 54 | * @param IEmbedConfiguration Embed configuration 55 | * @returns Embed Embedded object 56 | */ 57 | embed(element: HTMLElement, config: IEmbedConfiguration): Embed { 58 | return this.powerBiCoreService.embed(element, config); 59 | } 60 | 61 | /** 62 | * Given a configuration based on an HTML element, 63 | * if the component has already been created and attached to the element, reuses the component instance and existing iframe, 64 | * otherwise creates a new component instance. 65 | * This is used for the phased embedding API, once element is loaded successfully, one can call 'render' on it. 66 | * 67 | * @param HTMLElement} Parent HTML element 68 | * @param IEmbedConfiguration Embed configuration 69 | * @returns Embed Embedded object 70 | */ 71 | load(element: HTMLElement, config: IEmbedConfiguration): Embed { 72 | return this.powerBiCoreService.load(element, config); 73 | } 74 | 75 | /** 76 | * Adds an event handler for DOMContentLoaded, which searches the DOM for elements that have the 'powerbi-embed-url' attribute, 77 | * and automatically attempts to embed a Power BI component based on information from other powerbi-* attributes. 78 | * 79 | * Note: Only runs if `config.autoEmbedOnContentLoaded` is true when the service is created. 80 | * This handler is typically useful only for applications that are rendered on the server so that all 81 | * required data is available when the handler is called. 82 | */ 83 | enableAutoEmbed(): void { 84 | return this.powerBiCoreService.enableAutoEmbed(); 85 | } 86 | 87 | /** 88 | * Returns an instance of the component associated with the element. 89 | * 90 | * @param HTMLElement Parent HTML element 91 | * @returns (Report | Tile) Embedded report/tile object 92 | */ 93 | get(element: HTMLElement): Embed { 94 | return this.powerBiCoreService.get(element); 95 | } 96 | 97 | /** 98 | * Finds an embed instance by the name or unique ID that is provided. 99 | * 100 | * @param string} uniqueId or name of the report/tile 101 | * @returns (Report | Tile) Embedded report/tile object 102 | */ 103 | findById(uniqueId: string): Report | Tile { 104 | return this.powerBiCoreService.find(uniqueId); 105 | } 106 | 107 | /** 108 | * Given an HTML element that has a component embedded within it, 109 | * removes the component from the list of embedded components, 110 | * removes the association between the element and the component, and removes the iframe. 111 | * 112 | * @param HTMLElement Parent HTML element 113 | * @returns void 114 | */ 115 | reset(element: HTMLElement): void { 116 | return this.powerBiCoreService.reset(element); 117 | } 118 | 119 | /** 120 | * handles tile events 121 | * 122 | * @param IEvent event 123 | */ 124 | handleTileEvents(event: pbiService.IEvent): void { 125 | return this.powerBiCoreService.handleTileEvents(event); 126 | } 127 | 128 | /** 129 | * API for warm starting Power BI embedded endpoints. 130 | * Use this API to preload Power BI Embedded in the background. 131 | * 132 | * @param embed.IEmbedConfiguration Embed configuration 133 | * @param HTMLElement [element=undefined] 134 | */ 135 | preload( 136 | config: IEmbedConfiguration, 137 | element: HTMLElement 138 | ): HTMLIFrameElement { 139 | return this.powerBiCoreService.preload(config, element); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of ngx-powerbi 3 | */ 4 | 5 | export * from './lib/ngx-powerbi.service'; 6 | export * from './lib/ngx-powerbi.component'; 7 | export * from './lib/ngx-powerbi.module'; 8 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone'; 4 | import 'zone.js/dist/zone-testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { 7 | BrowserDynamicTestingModule, 8 | platformBrowserDynamicTesting 9 | } from '@angular/platform-browser-dynamic/testing'; 10 | 11 | // First, initialize the Angular testing environment. 12 | getTestBed().initTestEnvironment( 13 | BrowserDynamicTestingModule, 14 | platformBrowserDynamicTesting() 15 | ); 16 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/lib", 5 | "declaration": true, 6 | "inlineSources": true, 7 | "types": [] 8 | }, 9 | "angularCompilerOptions": { 10 | "annotateForClosureCompiler": true, 11 | "skipTemplateCodegen": true, 12 | "strictMetadataEmit": true, 13 | "enableResourceInlining": true, 14 | "flatModuleId": "AUTOGENERATED", 15 | "flatModuleOutFile": "AUTOGENERATED" 16 | }, 17 | "exclude": [ 18 | "src/test.ts", 19 | "**/*.spec.ts" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "angularCompilerOptions": { 4 | "annotateForClosureCompiler": true, 5 | "fullTemplateTypeCheck": true, 6 | "compilationMode": "partial" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /projects/ngx-powerbi/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [true, "attribute", "ngx", "camelCase"], 5 | "component-selector": [true, "element", "ngx", "kebab-case"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramandeep-singh-1983/ngx-powerbi/908c8401594d0416486a1081661584c3c2b1d4e3/src/app/app.component.css -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

4 | Welcome to {{ title }}! 5 |

6 | Angular Logo 7 |
8 |

Here are some links to help you start:

9 | 20 | 21 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | describe('AppComponent', () => { 4 | beforeEach(async(() => { 5 | TestBed.configureTestingModule({ 6 | declarations: [ 7 | AppComponent 8 | ], 9 | }).compileComponents(); 10 | })); 11 | it('should create the app', async(() => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.componentInstance; 14 | expect(app).toBeTruthy(); 15 | })); 16 | it(`should have as title 'pbi-app'`, () => { 17 | const fixture = TestBed.createComponent(AppComponent); 18 | const app = fixture.componentInstance; 19 | expect(app.title).toEqual('pbi-app'); 20 | }); 21 | it('should render title in a h1 tag', async(() => { 22 | const fixture = TestBed.createComponent(AppComponent); 23 | fixture.detectChanges(); 24 | const compiled = fixture.nativeElement; 25 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to pbi-app!'); 26 | })); 27 | }); 28 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'pbi-app'; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | imports: [ 11 | BrowserModule 12 | ], 13 | providers: [], 14 | bootstrap: [AppComponent] 15 | }) 16 | export class AppModule { } 17 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramandeep-singh-1983/ngx-powerbi/908c8401594d0416486a1081661584c3c2b1d4e3/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramandeep-singh-1983/ngx-powerbi/908c8401594d0416486a1081661584c3c2b1d4e3/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PbiApp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | 14 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | // First, initialize the Angular testing environment. 11 | getTestBed().initTestEnvironment( 12 | BrowserDynamicTestingModule, 13 | platformBrowserDynamicTesting() 14 | ); 15 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "./main.ts", 9 | "./polyfills.ts" 10 | ], 11 | "include": [ 12 | "**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "./test.ts", 12 | "./polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2020", 9 | "downlevelIteration": true, 10 | "moduleResolution": "node", 11 | "importHelpers": true, 12 | "emitDecoratorMetadata": true, 13 | "experimentalDecorators": true, 14 | "target": "ES2022", 15 | "typeRoots": [ 16 | "node_modules/@types" 17 | ], 18 | "lib": [ 19 | "es2018", 20 | "dom" 21 | ], 22 | "paths": { 23 | "ngx-powerbi": [ 24 | "dist/ngx-powerbi/ngx-powerbi", 25 | "dist/ngx-powerbi" 26 | ] 27 | }, 28 | "useDefineForClassFields": false 29 | }, 30 | "exclude": ["node_modules"], 31 | "angularCompilerOptions": { 32 | "fullTemplateTypeCheck": true, 33 | "strictInjectionParameters": true 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "align": { 5 | "options": [ 6 | "parameters", 7 | "statements" 8 | ] 9 | }, 10 | "array-type": false, 11 | "arrow-parens": false, 12 | "arrow-return-shorthand": true, 13 | "deprecation": { 14 | "severity": "warning" 15 | }, 16 | "component-class-suffix": true, 17 | "contextual-lifecycle": true, 18 | "curly": true, 19 | "directive-class-suffix": true, 20 | "directive-selector": [ 21 | true, 22 | "attribute", 23 | "app", 24 | "camelCase" 25 | ], 26 | "component-selector": [ 27 | true, 28 | "element", 29 | "app", 30 | "kebab-case" 31 | ], 32 | "eofline": true, 33 | "import-blacklist": [ 34 | true, 35 | "rxjs/Rx" 36 | ], 37 | "import-spacing": true, 38 | "indent": { 39 | "options": [ 40 | "spaces" 41 | ] 42 | }, 43 | "interface-name": false, 44 | "max-classes-per-file": false, 45 | "max-line-length": [ 46 | true, 47 | 140 48 | ], 49 | "member-access": false, 50 | "member-ordering": [ 51 | true, 52 | { 53 | "order": [ 54 | "static-field", 55 | "instance-field", 56 | "static-method", 57 | "instance-method" 58 | ] 59 | } 60 | ], 61 | "no-consecutive-blank-lines": false, 62 | "no-console": [ 63 | true, 64 | "debug", 65 | "info", 66 | "time", 67 | "timeEnd", 68 | "trace" 69 | ], 70 | "no-empty": false, 71 | "no-inferrable-types": [ 72 | true, 73 | "ignore-params" 74 | ], 75 | "no-non-null-assertion": true, 76 | "no-redundant-jsdoc": true, 77 | "no-switch-case-fall-through": true, 78 | "no-var-requires": false, 79 | "object-literal-key-quotes": [ 80 | true, 81 | "as-needed" 82 | ], 83 | "object-literal-sort-keys": false, 84 | "ordered-imports": false, 85 | "quotemark": [ 86 | true, 87 | "single" 88 | ], 89 | "trailing-comma": false, 90 | "no-conflicting-lifecycle": true, 91 | "no-host-metadata-property": true, 92 | "no-input-rename": true, 93 | "no-inputs-metadata-property": true, 94 | "no-output-native": true, 95 | "no-output-on-prefix": true, 96 | "no-output-rename": true, 97 | "semicolon": { 98 | "options": [ 99 | "always" 100 | ] 101 | }, 102 | "space-before-function-paren": { 103 | "options": { 104 | "anonymous": "never", 105 | "asyncArrow": "always", 106 | "constructor": "never", 107 | "method": "never", 108 | "named": "never" 109 | } 110 | }, 111 | "no-outputs-metadata-property": true, 112 | "template-banana-in-box": true, 113 | "template-no-negated-async": true, 114 | "typedef-whitespace": { 115 | "options": [ 116 | { 117 | "call-signature": "nospace", 118 | "index-signature": "nospace", 119 | "parameter": "nospace", 120 | "property-declaration": "nospace", 121 | "variable-declaration": "nospace" 122 | }, 123 | { 124 | "call-signature": "onespace", 125 | "index-signature": "onespace", 126 | "parameter": "onespace", 127 | "property-declaration": "onespace", 128 | "variable-declaration": "onespace" 129 | } 130 | ] 131 | }, 132 | "use-lifecycle-interface": true, 133 | "use-pipe-transform-interface": true, 134 | "variable-name": { 135 | "options": [ 136 | "ban-keywords", 137 | "check-format", 138 | "allow-pascal-case" 139 | ] 140 | }, 141 | "whitespace": { 142 | "options": [ 143 | "check-branch", 144 | "check-decl", 145 | "check-operator", 146 | "check-separator", 147 | "check-type", 148 | "check-typecast" 149 | ] 150 | } 151 | } 152 | } --------------------------------------------------------------------------------