Merge remote-tracking branch 'powerbi/master' into release-3.0.5
This commit is contained in:
Or Shemesh
Коммит
5392f6b580
|
|
@ -48,8 +48,9 @@ testem.log
|
|||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Angular
|
||||
Angular/demo/.angular
|
||||
Angular/powerbi-client-angular/.angular
|
||||
|
||||
# Other
|
||||
owners.txt
|
||||
|
||||
# Angular
|
||||
Angular/.angular/
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
$exitCode = 0;
|
||||
|
||||
Write-Host "start: List all files"
|
||||
& cd .\Angular
|
||||
& dir
|
||||
Write-Host "end: List all files"
|
||||
|
||||
# Build the package
|
||||
Write-Host "start: ng build"
|
||||
& ng build
|
||||
Write-Host "done: ng build"
|
||||
|
||||
$exitCode += $LASTEXITCODE;
|
||||
|
||||
if ($exitCode -ne 0) {
|
||||
Write-Host "Failed to run ng bulild"
|
||||
exit $exitCode
|
||||
}
|
||||
|
||||
# Check linting
|
||||
Write-Host "start: ng lint"
|
||||
& ng lint
|
||||
Write-Host "done: ng lint"
|
||||
|
||||
$exitCode += $LASTEXITCODE;
|
||||
|
||||
if ($exitCode -ne 0) {
|
||||
Write-Host "Failed to run ng lint"
|
||||
exit $exitCode
|
||||
}
|
||||
|
||||
# Get contents of dist folder
|
||||
Write-Host "start: Get dist folder files"
|
||||
& dir "dist"
|
||||
Write-Host "Done: Get dist folder files"
|
||||
|
||||
exit $exitCode
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
setlocal enabledelayedexpansion
|
||||
pushd "%~dp0\.."
|
||||
powershell.exe -ExecutionPolicy Unrestricted -NoProfile -WindowStyle Hidden -NonInteractive -File "%~dp0%~1"
|
||||
endlocal
|
||||
popd
|
||||
exit /B %ERRORLEVEL%
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
$exitCode = 0;
|
||||
|
||||
Write-Host "start: npm pack"
|
||||
& cd .\Angular
|
||||
& npm run package
|
||||
Write-Host "done: npm pack"
|
||||
|
||||
$exitCode += $LASTEXITCODE;
|
||||
|
||||
if ($exitCode -ne 0) {
|
||||
Write-Host "Failed to run npm pack"
|
||||
exit $exitCode
|
||||
}
|
||||
|
||||
Write-Host "start: Get content of current folder"
|
||||
& dir "dist/powerbi-client-angular"
|
||||
Write-Host "done: Get content of current folder"
|
||||
|
||||
exit $exitCode
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
environment:
|
||||
host:
|
||||
os: 'windows'
|
||||
flavor: 'server'
|
||||
version: '2016'
|
||||
runtime:
|
||||
provider: 'appcontainer'
|
||||
image: 'cdpxwinrs5.azurecr.io/global/vse2019/16.3.7:latest'
|
||||
source_mode: 'map'
|
||||
|
||||
artifact_publish_options:
|
||||
publish_to_legacy_artifacts: false
|
||||
publish_to_pipeline_artifacts: true
|
||||
publish_to_cloudvault_artifacts: false
|
||||
|
||||
# Enable signing on all declared artifacts.
|
||||
signing_options:
|
||||
profile: 'external_distribution'
|
||||
codesign_validation_glob_pattern: 'regex|.+(?:exe|dll)$;-|*.nd.dll;-|.gdn\\**'
|
||||
|
||||
static_analysis_options:
|
||||
moderncop_options:
|
||||
files_to_scan:
|
||||
- from: 'Angular\powerbi-client-angular\src\'
|
||||
include:
|
||||
- '**/*'
|
||||
|
||||
policheck_options:
|
||||
files_to_scan:
|
||||
- exclude:
|
||||
- 'Angular\demo\**\*' # Exclude demo app contents'.
|
||||
- 'Angular\node_modules\**\*'
|
||||
- 'Angular\powerbi-client-angular\**\*.spec.ts'
|
||||
|
||||
binskim_options:
|
||||
files_to_scan:
|
||||
- exclude:
|
||||
- 'Angular\demo\**\*' # Exclude demo app contents'.
|
||||
- 'Angular\node_modules\**\*'
|
||||
- 'Angular\powerbi-client-angular\**\*.spec.ts'
|
||||
|
||||
package_sources:
|
||||
npm:
|
||||
feeds:
|
||||
registry: https://powerbi.pkgs.visualstudio.com/_packaging/SDK.Externals/npm/registry/
|
||||
|
||||
version:
|
||||
major: 1 # <---- Required field but not being used for 'custom' scheme
|
||||
minor: 0 # <---- Required field but not being used for 'custom' scheme
|
||||
system: 'custom' # <---- Set this to 'custom'. we will build the version using package.json in versioning commands.
|
||||
|
||||
versioning:
|
||||
commands:
|
||||
- !!defaultcommand
|
||||
name: 'Set Version'
|
||||
arguments: 'version.ps1'
|
||||
command: '.pipelines\cdpx_run_ps.cmd'
|
||||
|
||||
restore:
|
||||
commands:
|
||||
- !!defaultcommand
|
||||
name: 'NPM Install'
|
||||
arguments: 'restore.ps1'
|
||||
command: '.pipelines\cdpx_run_ps.cmd'
|
||||
|
||||
# Commands to run during the build stage.
|
||||
build:
|
||||
commands:
|
||||
- !!buildcommand
|
||||
name: 'Build'
|
||||
arguments: 'build.ps1'
|
||||
command: '.pipelines\cdpx_run_ps.cmd'
|
||||
artifacts:
|
||||
- to: 'build_artifacts'
|
||||
include:
|
||||
- 'Angular\dist\**\*'
|
||||
- 'LICENSE.txt'
|
||||
- 'Angular\powerbi-client-angular\package.json'
|
||||
- 'README.md'
|
||||
- to: 'source'
|
||||
include:
|
||||
- '**/*'
|
||||
exclude:
|
||||
- '**/.git/**/*'
|
||||
- '**/.pipelines/**/*'
|
||||
- '**/.vscode/**/*'
|
||||
- '**/demo/**/*'
|
||||
- '**/dist/**/*'
|
||||
- '**/node_modules/**/*'
|
||||
|
||||
# All build stage artifacts get signed right after the build stage
|
||||
# because the global signing profile is defined.
|
||||
|
||||
# Commands to run during the packaging stage.
|
||||
package:
|
||||
commands:
|
||||
- !!buildcommand
|
||||
name: 'Package'
|
||||
arguments: 'package.ps1'
|
||||
command: '.pipelines\cdpx_run_ps.cmd'
|
||||
artifacts:
|
||||
- to: 'tgz-package'
|
||||
include:
|
||||
- "**/*.tgz"
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
Write-Host "Start build ..."
|
||||
Write-Host "Global node/npm paths ..."
|
||||
& where.exe npm
|
||||
& where.exe node
|
||||
|
||||
Write-Host "Global node version"
|
||||
& node -v
|
||||
|
||||
Write-Host "Global npm version"
|
||||
& npm -v
|
||||
|
||||
$exitCode = 0;
|
||||
|
||||
Write-Host "start: try install latest Angular Client CLI version"
|
||||
& npm install @angular/cli@12.2.11 -g
|
||||
Write-Host "done: try install latest Angular Client CLI version"
|
||||
|
||||
Write-Host "Global ng path.."
|
||||
& where.exe ng
|
||||
|
||||
Write-Host "Global Angular Client CLI version"
|
||||
& ng version
|
||||
|
||||
$exitCode += $LASTEXITCODE;
|
||||
|
||||
if ($exitCode -ne 0) {
|
||||
Write-Host "Failed to install latest Angular Client CLI version"
|
||||
exit $exitCode
|
||||
}
|
||||
|
||||
Write-Host "start: try install latest npm version"
|
||||
& npm install npm@latest -g
|
||||
Write-Host "done: try install latest npm version"
|
||||
|
||||
# Do not update $exitCode because we do not want to fail if install latest npm version fails.
|
||||
|
||||
Write-Host "start: npm install"
|
||||
& cd .\Angular
|
||||
& npm install --no-audit --no-save
|
||||
Write-Host "done: npm install"
|
||||
$exitCode += $LASTEXITCODE;
|
||||
|
||||
if ($exitCode -ne 0) {
|
||||
Write-Host "Failed to run npm install"
|
||||
exit $exitCode
|
||||
}
|
||||
|
||||
exit $exitCode
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
cd .\Angular\powerbi-client-angular
|
||||
try {
|
||||
# package.json is in Angular\powerbi-client-angular folder, while version.ps1 runs in .pipelines folder.
|
||||
$version = (Get-Content "package.json") -join "`n" | ConvertFrom-Json | Select -ExpandProperty "version"
|
||||
$revision = $env:CDP_DEFINITION_BUILD_COUNT_DAY
|
||||
$buildNumber = "$version.$revision"
|
||||
|
||||
Write-Host "Build Number is" $buildNumber
|
||||
|
||||
[Environment]::SetEnvironmentVariable("CustomBuildNumber", $buildNumber, "User") # This will allow you to use it from env var in later steps of the same phase
|
||||
Write-Host "##vso[build.updatebuildnumber]${buildNumber}" # This will update build number on your build
|
||||
}
|
||||
catch {
|
||||
Write-Error $_.Exception
|
||||
exit 1;
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
{
|
||||
"root": true,
|
||||
"ignorePatterns": [
|
||||
"**/*"
|
||||
],
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"*.ts"
|
||||
],
|
||||
"parserOptions": {
|
||||
"project": [
|
||||
"tsconfig.json",
|
||||
"config/src/tsconfig.lib.json",
|
||||
"config/test/tsconfig.spec.json"
|
||||
],
|
||||
"createDefaultProgram": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:@angular-eslint/ng-cli-compat",
|
||||
"plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
|
||||
"plugin:@angular-eslint/template/process-inline-templates"
|
||||
],
|
||||
"rules": {
|
||||
"no-underscore-dangle": "off",
|
||||
"@angular-eslint/component-selector": [
|
||||
"error",
|
||||
{
|
||||
"type": "element",
|
||||
"prefix": "",
|
||||
"style": "kebab-case"
|
||||
}
|
||||
],
|
||||
"@angular-eslint/directive-selector": [
|
||||
"error",
|
||||
{
|
||||
"type": "attribute",
|
||||
"prefix": "lib",
|
||||
"style": "camelCase"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"*.html"
|
||||
],
|
||||
"extends": [
|
||||
"plugin:@angular-eslint/template/recommended"
|
||||
],
|
||||
"rules": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"powerbi-client-angular": {
|
||||
"projectType": "library",
|
||||
"root": "powerbi-client-angular",
|
||||
"sourceRoot": "powerbi-client-angular/src",
|
||||
"prefix": "lib",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:ng-packagr",
|
||||
"options": {
|
||||
"project": "powerbi-client-angular/ng-package.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"tsConfig": "powerbi-client-angular/config/src/tsconfig.lib.prod.json"
|
||||
},
|
||||
"development": {
|
||||
"tsConfig": "powerbi-client-angular/config/src/tsconfig.lib.json"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "powerbi-client-angular/src/test.ts",
|
||||
"tsConfig": "powerbi-client-angular/config/test/tsconfig.spec.json",
|
||||
"karmaConfig": "powerbi-client-angular/config/test/karma.conf.js"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-eslint/builder:lint",
|
||||
"options": {
|
||||
"lintFilePatterns": [
|
||||
"powerbi-client-angular/src/**/*.ts"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"demo": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:application": {
|
||||
"strict": true
|
||||
}
|
||||
},
|
||||
"root": "demo",
|
||||
"sourceRoot": "demo/src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"allowedCommonJsDependencies": [
|
||||
"powerbi-report-authoring"
|
||||
],
|
||||
"outputPath": "dist/demo",
|
||||
"index": "demo/src/index.html",
|
||||
"main": "demo/src/main.ts",
|
||||
"polyfills": "demo/src/polyfills.ts",
|
||||
"tsConfig": "demo/tsconfig.app.json",
|
||||
"assets": [
|
||||
"demo/src/assets",
|
||||
"demo/src/favicon.ico"
|
||||
],
|
||||
"styles": [
|
||||
"demo/src/styles.css"
|
||||
],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "1mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "demo/src/environments/environment.ts",
|
||||
"with": "demo/src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "demo:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "demo:build:production"
|
||||
},
|
||||
"development": {
|
||||
"browserTarget": "demo:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "powerbi-client-angular"
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"powerbi-client-angular-demo": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:application": {
|
||||
"strict": true
|
||||
}
|
||||
},
|
||||
"root": "src",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"allowedCommonJsDependencies": [
|
||||
"powerbi-report-authoring"
|
||||
],
|
||||
"outputPath": "dist/demo",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"assets": [
|
||||
"src/assets",
|
||||
"src/favicon.ico"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.css"
|
||||
],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "1mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "powerbi-client-angular-demo:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "powerbi-client-angular-demo:build:production"
|
||||
},
|
||||
"development": {
|
||||
"browserTarget": "powerbi-client-angular-demo:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "powerbi-client-angular-demo"
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"name": "powerbi-client-angular-demo",
|
||||
"version": "5.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"powerbi-client-angular": "^3.0.5",
|
||||
"powerbi-report-authoring": "^1.1.1",
|
||||
"rxjs": "~6.6.0",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~13.3.8",
|
||||
"@angular/cli": "~13.3.8",
|
||||
"@angular/common": "^13.3.11",
|
||||
"@angular/compiler": "~13.3.11",
|
||||
"@angular/compiler-cli": "~13.3.11",
|
||||
"@angular/core": "^13.3.11",
|
||||
"@angular/platform-browser": "~13.3.11",
|
||||
"@angular/platform-browser-dynamic": "~13.3.11",
|
||||
"@types/node": "^12.11.1",
|
||||
"typescript": "~4.6.4"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +1,25 @@
|
|||
/* Copyright (c) Microsoft Corporation.
|
||||
Licensed under the MIT License. */
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #3476ae 0 0 no-repeat padding-box;
|
||||
border: 1px solid #707070;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
font: 700 22px/27px 'Segoe UI';
|
||||
margin: 13px 13px 13px 36px;
|
||||
padding: 13px 13px 13px 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.horizontal-rule {
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.separator {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #107c41;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #d13438;
|
||||
}
|
||||
|
||||
.position {
|
||||
margin-top: 40vh !important;
|
||||
}
|
||||
|
||||
.embed-report {
|
||||
margin-top: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#embed-action {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.display-message {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
@ -54,8 +31,9 @@ Licensed under the MIT License. */
|
|||
}
|
||||
|
||||
.controls {
|
||||
margin-top: 1%;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -73,29 +51,48 @@ button:hover {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: #eef3f8 0 0 no-repeat padding-box;
|
||||
bottom: 0;
|
||||
height: 39px;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font: 400 16px/21px 'Segoe UI';
|
||||
height: 21px;
|
||||
letter-spacing: 0;
|
||||
margin-top: 9px;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
.embed-report {
|
||||
margin-top: 18px;
|
||||
text-align: center;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
align-items: center;
|
||||
background: #f7f8fa 0 0 no-repeat padding-box;
|
||||
display: flex;
|
||||
font: 400 16px/21px 'Segoe UI';
|
||||
height: 42px;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-text > a {
|
||||
color: #606a74;
|
||||
font: Regular 16px/21px 'Segoe UI';
|
||||
letter-spacing: 0;
|
||||
.footer * {
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.footer-icon {
|
||||
border-radius: 50%;
|
||||
height: 22px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #3a3a3a;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI';
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.report-container {
|
||||
height: 75vh;
|
||||
margin: 8px auto;
|
||||
width: 90%;
|
||||
}
|
||||
|
|
@ -1,32 +1,36 @@
|
|||
<!-- Copyright (c) Microsoft Corporation.
|
||||
Licensed under the MIT License. -->
|
||||
|
||||
<div class="header">
|
||||
<div class="title">Power BI Embedded Angular Component demo</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="header">Power BI Embedded Angular Component Demo</div>
|
||||
|
||||
<div class="controls" *ngIf="isEmbedded; else embedReportFlow">
|
||||
<button (click)="deleteVisual()">Delete Visual</button>
|
||||
<button (click)="hideFilterPane()">Hide Filter Pane</button>
|
||||
<button (click)="setDataSelectedEvent()">Set Event</button>
|
||||
<div class="display-message" #status>{{ displayMessage }}</div>
|
||||
</div>
|
||||
<ng-template #embedReportFlow>
|
||||
<div class="display-message position" #status>
|
||||
<label>{{ displayMessage }}</label>
|
||||
<div class="controls">
|
||||
<ng-container *ngIf="isEmbedded; else embedReportFlow">
|
||||
<button (click)="changeVisualType()">Change visual type</button>
|
||||
<button (click)="hideFilterPane()">Hide filter pane</button>
|
||||
<button (click)="setDataSelectedEvent()">Set event</button>
|
||||
<label class="display-message">{{ displayMessage }}</label>
|
||||
</ng-container>
|
||||
<ng-template #embedReportFlow>
|
||||
<label class="display-message position">
|
||||
{{ displayMessage }}
|
||||
</label>
|
||||
<button (click)="embedReport()" class="embed-report">Embed Report</button>
|
||||
</ng-template>
|
||||
|
||||
<ng-container *ngIf="isEmbedded">
|
||||
<powerbi-report [embedConfig]="reportConfig" [cssClassName]="reportClass" [phasedEmbedding]="phasedEmbeddingFlag" [eventHandlers]="eventHandlersMap">
|
||||
</powerbi-report>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="embed-report">
|
||||
<button (click)="embedReport()" id="embed-action" #embedReportBtn>Embed Report</button>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
</ng-template>
|
||||
|
||||
<powerbi-report [embedConfig]="reportConfig" [cssClassName]="reportClass" [phasedEmbedding]="phasedEmbeddingFlag" [eventHandlers]="eventHandlersMap">
|
||||
</powerbi-report>
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer-text">
|
||||
GitHub:
|
||||
<a href="https://github.com/microsoft/powerBI-client-angular"> https://github.com/microsoft/PowerBI-client-angular </a>
|
||||
<div class="footer">
|
||||
<p>This demo is powered by Power BI Embedded Analytics</p>
|
||||
<label class="separator-pipe">|</label>
|
||||
<img title="Power-BI" alt="PowerBI_Icon" class="footer-icon" src="./assets/PowerBI_Icon.png">
|
||||
<p>Explore our<a href="https://aka.ms/pbijs/" target="_blank" rel="noreferrer noopener">Playground</a></p>
|
||||
<label class="separator-pipe">|</label>
|
||||
<img title="GitHub" alt="GitHub_Icon" class="footer-icon" src="./assets/GitHub_Icon.png">
|
||||
<p>Find the<a href="https://github.com/microsoft/powerBI-client-angular" target="_blank" rel="noreferrer noopener">source code</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,12 @@
|
|||
// Licensed under the MIT License.
|
||||
|
||||
import { Component, ElementRef, ViewChild } from '@angular/core';
|
||||
import { IHttpPostMessageResponse } from 'http-post-message';
|
||||
import { IReportEmbedConfiguration, models, Page, Report, service, VisualDescriptor } from 'powerbi-client';
|
||||
import { IReportEmbedConfiguration, models, Page, Report, service, Embed } from 'powerbi-client';
|
||||
import { PowerBIReportEmbedComponent } from 'powerbi-client-angular';
|
||||
import { IHttpPostMessageResponse } from 'http-post-message';
|
||||
import 'powerbi-report-authoring';
|
||||
import { errorClass, errorElement, hidden, position, reportUrl, successClass, successElement } from '../constants';
|
||||
|
||||
import { reportUrl } from '../public/constants';
|
||||
import { HttpService } from './services/http.service';
|
||||
|
||||
// Handles the embed config response for embedding
|
||||
|
|
@ -27,12 +28,6 @@ export class AppComponent {
|
|||
// Wrapper object to access report properties
|
||||
@ViewChild(PowerBIReportEmbedComponent) reportObj!: PowerBIReportEmbedComponent;
|
||||
|
||||
// Div object to show status of the demo app
|
||||
@ViewChild('status') private statusRef!: ElementRef<HTMLDivElement>;
|
||||
|
||||
// Embed Report button element of the demo app
|
||||
@ViewChild('embedReportBtn') private embedBtnRef!: ElementRef<HTMLButtonElement>;
|
||||
|
||||
// Track Report embedding status
|
||||
isEmbedded = false;
|
||||
|
||||
|
|
@ -40,8 +35,7 @@ export class AppComponent {
|
|||
displayMessage = 'The report is bootstrapped. Click Embed Report button to set the access token.';
|
||||
|
||||
// CSS Class to be passed to the wrapper
|
||||
// Hide the report container initially
|
||||
reportClass = 'report-container hidden';
|
||||
reportClass = 'report-container';
|
||||
|
||||
// Flag which specify the type of embedding
|
||||
phasedEmbeddingFlag = false;
|
||||
|
|
@ -63,25 +57,15 @@ export class AppComponent {
|
|||
// Set event handler to null if event needs to be removed
|
||||
// More events can be provided from here
|
||||
// https://docs.microsoft.com/en-us/javascript/api/overview/powerbi/handle-events#report-events
|
||||
eventHandlersMap = new Map<string, (event?: service.ICustomEvent<any>) => void>([
|
||||
['loaded', () => console.log('Report has loaded')],
|
||||
[
|
||||
'rendered',
|
||||
() => {
|
||||
console.log('Report has rendered');
|
||||
|
||||
// Set displayMessage to empty when rendered for the first time
|
||||
if (!this.isEmbedded) {
|
||||
this.displayMessage = 'Use the buttons above to interact with the report using Power BI Client APIs.';
|
||||
}
|
||||
|
||||
// Update embed status
|
||||
this.isEmbedded = true;
|
||||
eventHandlersMap = new Map ([
|
||||
['loaded', () => {
|
||||
const report = this.reportObj.getReport();
|
||||
report.setComponentTitle('Embedded report');
|
||||
console.log('Report has loaded');
|
||||
},
|
||||
],
|
||||
[
|
||||
'error',
|
||||
(event?: service.ICustomEvent<any>) => {
|
||||
['rendered', () => console.log('Report has rendered')],
|
||||
['error', (event?: service.ICustomEvent<any>) => {
|
||||
if (event) {
|
||||
console.error(event.detail);
|
||||
}
|
||||
|
|
@ -89,7 +73,7 @@ export class AppComponent {
|
|||
],
|
||||
['visualClicked', () => console.log('visual clicked')],
|
||||
['pageChanged', (event) => console.log(event)],
|
||||
]);
|
||||
]) as Map<string, (event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void | null>;
|
||||
|
||||
constructor(public httpService: HttpService, private element: ElementRef<HTMLDivElement>) {}
|
||||
|
||||
|
|
@ -105,9 +89,7 @@ export class AppComponent {
|
|||
try {
|
||||
reportConfigResponse = await this.httpService.getEmbedConfig(reportUrl).toPromise();
|
||||
} catch (error: any) {
|
||||
// Prepare status message for Embed failure
|
||||
await this.prepareDisplayMessageForEmbed(errorElement, errorClass);
|
||||
this.displayMessage = `Failed to fetch config for report. Status: ${error.statusText} Status Code: ${error.status}`;
|
||||
this.displayMessage = `Failed to fetch config for report. Status: ${error.status} ${error.statusText}`;
|
||||
console.error(this.displayMessage);
|
||||
return;
|
||||
}
|
||||
|
|
@ -120,57 +102,23 @@ export class AppComponent {
|
|||
accessToken: reportConfigResponse.EmbedToken.Token,
|
||||
};
|
||||
|
||||
// Get the reference of the report-container div
|
||||
const reportDiv = this.element.nativeElement.querySelector('.report-container');
|
||||
if (reportDiv) {
|
||||
// When Embed report is clicked, show the report container div
|
||||
reportDiv.classList.remove(hidden);
|
||||
}
|
||||
|
||||
// Get the reference of the display-message div
|
||||
const displayMessage = this.element.nativeElement.querySelector('.display-message');
|
||||
if (displayMessage) {
|
||||
// When Embed report is clicked, change the position of the display-message
|
||||
displayMessage.classList.remove(position);
|
||||
}
|
||||
|
||||
// Prepare status message for Embed success
|
||||
await this.prepareDisplayMessageForEmbed(successElement, successClass);
|
||||
// Update embed status
|
||||
this.isEmbedded = true;
|
||||
|
||||
// Update the display message
|
||||
this.displayMessage = 'Access token is successfully set. Loading Power BI report.';
|
||||
this.displayMessage = 'Use the buttons above to interact with the report using Power BI Client APIs.';
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle Report embedding flow
|
||||
* @param img Image to show with the display message
|
||||
* @param type Type of the message
|
||||
* Change Visual type
|
||||
*
|
||||
* @returns Promise<void>
|
||||
*/
|
||||
async prepareDisplayMessageForEmbed(img: HTMLImageElement, type: string): Promise<void> {
|
||||
// Remove the Embed Report button from UI
|
||||
this.embedBtnRef.nativeElement.remove();
|
||||
|
||||
// Prepend the Image element to the display message
|
||||
this.statusRef.nativeElement.prepend(img);
|
||||
|
||||
// Set type of the message
|
||||
this.statusRef.nativeElement.classList.add(type);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete visual
|
||||
*
|
||||
* @returns Promise<void>
|
||||
*/
|
||||
async deleteVisual(): Promise<void> {
|
||||
async changeVisualType(): Promise<void> {
|
||||
// Get report from the wrapper component
|
||||
const report: Report = this.reportObj.getReport();
|
||||
|
||||
if (!report) {
|
||||
// Prepare status message for Error
|
||||
this.prepareStatusMessage(errorElement, errorClass);
|
||||
this.displayMessage = 'Report not available.';
|
||||
console.log(this.displayMessage);
|
||||
return;
|
||||
|
|
@ -179,55 +127,38 @@ export class AppComponent {
|
|||
// Get all the pages of the report
|
||||
const pages: Page[] = await report.getPages();
|
||||
|
||||
// Check if all the pages of the report deleted
|
||||
// Check if the pages are available
|
||||
if (pages.length === 0) {
|
||||
// Prepare status message for Error
|
||||
this.prepareStatusMessage(errorElement, errorClass);
|
||||
this.displayMessage = 'No pages found.';
|
||||
console.log(this.displayMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
// Get active page of the report
|
||||
const activePage: Page | undefined = pages.find((page) => page.isActive);
|
||||
|
||||
if (activePage) {
|
||||
// Get all visuals in the active page of the report
|
||||
const visuals: VisualDescriptor[] = await activePage.getVisuals();
|
||||
if (!activePage) {
|
||||
this.displayMessage = 'No Active page found';
|
||||
return;
|
||||
}
|
||||
|
||||
if (visuals.length === 0) {
|
||||
// Prepare status message for Error
|
||||
this.prepareStatusMessage(errorElement, errorClass);
|
||||
this.displayMessage = 'No visuals found.';
|
||||
console.log(this.displayMessage);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// Change the visual type using powerbi-report-authoring
|
||||
// For more information: https://docs.microsoft.com/en-us/javascript/api/overview/powerbi/report-authoring-overview
|
||||
// Get the visual
|
||||
const visual = await activePage.getVisualByName('VisualContainer6');
|
||||
|
||||
// Get first visible visual
|
||||
const visual: VisualDescriptor | undefined = visuals.find((v) => v.layout.displayState?.mode === models.VisualContainerDisplayMode.Visible);
|
||||
const response = await visual.changeType('lineChart');
|
||||
|
||||
// No visible visual found
|
||||
if (!visual) {
|
||||
// Prepare status message for Error
|
||||
this.prepareStatusMessage(errorElement, errorClass);
|
||||
this.displayMessage = 'No visible visual available to delete.';
|
||||
console.log(this.displayMessage);
|
||||
return;
|
||||
}
|
||||
this.displayMessage = `The ${visual.type} was updated to lineChart.`;
|
||||
|
||||
try {
|
||||
// Delete the visual using powerbi-report-authoring
|
||||
// For more information: https://docs.microsoft.com/en-us/javascript/api/overview/powerbi/report-authoring-overview
|
||||
const response = await activePage.deleteVisual(visual.name);
|
||||
console.log(this.displayMessage);
|
||||
|
||||
// Prepare status message for success
|
||||
this.prepareStatusMessage(successElement, successClass);
|
||||
this.displayMessage = `${visual.type} visual was deleted.`;
|
||||
console.log(this.displayMessage);
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return response;
|
||||
} catch (error) {
|
||||
if (error === 'PowerBIEntityNotFound') {
|
||||
console.log('No Visual found with that name');
|
||||
} else {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -242,8 +173,6 @@ export class AppComponent {
|
|||
const report: Report = this.reportObj.getReport();
|
||||
|
||||
if (!report) {
|
||||
// Prepare status message for Error
|
||||
this.prepareStatusMessage(errorElement, errorClass);
|
||||
this.displayMessage = 'Report not available.';
|
||||
console.log(this.displayMessage);
|
||||
return;
|
||||
|
|
@ -261,9 +190,6 @@ export class AppComponent {
|
|||
|
||||
try {
|
||||
const response = await report.updateSettings(settings);
|
||||
|
||||
// Prepare status message for success
|
||||
this.prepareStatusMessage(successElement, successClass);
|
||||
this.displayMessage = 'Filter pane is hidden.';
|
||||
console.log(this.displayMessage);
|
||||
|
||||
|
|
@ -281,28 +207,11 @@ export class AppComponent {
|
|||
*/
|
||||
setDataSelectedEvent(): void {
|
||||
// Adding dataSelected event in eventHandlersMap
|
||||
this.eventHandlersMap = new Map<string, (event?: service.ICustomEvent<any>) => void>([
|
||||
this.eventHandlersMap = new Map<string, (event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void | null>([
|
||||
...this.eventHandlersMap,
|
||||
['dataSelected', (event) => console.log(event)],
|
||||
]);
|
||||
|
||||
// Prepare status message for success
|
||||
this.prepareStatusMessage(successElement, successClass);
|
||||
this.displayMessage = 'Data Selected event set successfully. Select data to see event in console.';
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepare status message while using JS SDK APIs
|
||||
* @param img Image to show with the display message
|
||||
* @param type Type of the message
|
||||
*
|
||||
* @returns void
|
||||
*/
|
||||
prepareStatusMessage(img: HTMLImageElement, type: string) {
|
||||
// Prepend Image to the display message
|
||||
this.statusRef.nativeElement.prepend(img);
|
||||
|
||||
// Add class to the display message
|
||||
this.statusRef.nativeElement.classList.add(type);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 7.1 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.0 KiB |
|
|
@ -1,6 +0,0 @@
|
|||
<!-- Copyright (c) Microsoft Corporation.
|
||||
Licensed under the MIT License. -->
|
||||
|
||||
<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.3379 0.837891C14.5137 0.837891 15.6484 0.992839 16.7422 1.30273C17.8359 1.60352 18.8568 2.0319 19.8047 2.58789C20.7617 3.14388 21.6276 3.8138 22.4023 4.59766C23.1862 5.3724 23.8561 6.23828 24.4121 7.19531C24.9681 8.14323 25.3965 9.16406 25.6973 10.2578C26.0072 11.3516 26.1621 12.4863 26.1621 13.6621C26.1621 14.847 26.0072 15.9863 25.6973 17.0801C25.3965 18.1647 24.9681 19.1855 24.4121 20.1426C23.8561 21.0905 23.1862 21.9564 22.4023 22.7402C21.6276 23.515 20.7617 24.1849 19.8047 24.75C18.8568 25.306 17.8359 25.7389 16.7422 26.0488C15.6484 26.3496 14.5137 26.5 13.3379 26.5C12.153 26.5 11.0137 26.3496 9.91992 26.0488C8.82617 25.7389 7.80534 25.306 6.85742 24.75C5.90951 24.194 5.04362 23.5241 4.25977 22.7402C3.47591 21.9564 2.80599 21.0905 2.25 20.1426C1.69401 19.1947 1.26107 18.1738 0.951172 17.0801C0.650391 15.9863 0.5 14.847 0.5 13.6621C0.5 12.4863 0.650391 11.3516 0.951172 10.2578C1.26107 9.16406 1.69401 8.14323 2.25 7.19531C2.80599 6.23828 3.47591 5.3724 4.25977 4.59766C5.04362 3.8138 5.90951 3.14388 6.85742 2.58789C7.81445 2.0319 8.83984 1.60352 9.93359 1.30273C11.0273 0.992839 12.1621 0.837891 13.3379 0.837891ZM24.3027 13.6621C24.3027 12.6595 24.1706 11.6934 23.9062 10.7637C23.651 9.82487 23.2819 8.94987 22.7988 8.13867C22.3249 7.32747 21.7507 6.58919 21.0762 5.92383C20.4108 5.24935 19.6725 4.67513 18.8613 4.20117C18.0501 3.7181 17.1751 3.34896 16.2363 3.09375C15.3066 2.82943 14.3405 2.69727 13.3379 2.69727C12.3262 2.69727 11.3509 2.82943 10.4121 3.09375C9.48242 3.34896 8.61198 3.7181 7.80078 4.20117C6.98958 4.67513 6.2513 5.24479 5.58594 5.91016C4.92057 6.57552 4.34635 7.3138 3.86328 8.125C3.38932 8.9362 3.02018 9.8112 2.75586 10.75C2.50065 11.6797 2.37305 12.6504 2.37305 13.6621C2.37305 14.6738 2.50065 15.6491 2.75586 16.5879C3.02018 17.5176 3.38932 18.388 3.86328 19.1992C4.33724 20.0104 4.9069 20.7533 5.57227 21.4277C6.24674 22.0931 6.98958 22.6628 7.80078 23.1367C8.61198 23.6107 9.48242 23.9798 10.4121 24.2441C11.3509 24.4993 12.3262 24.627 13.3379 24.627C14.3496 24.627 15.3203 24.4993 16.25 24.2441C17.1888 23.9798 18.0638 23.6107 18.875 23.1367C19.6862 22.6536 20.4245 22.0794 21.0898 21.4141C21.7552 20.7487 22.3249 20.0104 22.7988 19.1992C23.2819 18.388 23.651 17.5176 23.9062 16.5879C24.1706 15.6491 24.3027 14.6738 24.3027 13.6621ZM17.1797 8.17969L18.8203 9.82031L14.9785 13.6621L18.8203 17.5039L17.1797 19.1582L13.3379 15.3164L9.49609 19.1582L7.8418 17.5039L11.6836 13.6621L7.8418 9.82031L9.49609 8.17969L13.3379 12.0215L17.1797 8.17969Z" fill="#D13438"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 2.6 KiB |
|
|
@ -1,6 +0,0 @@
|
|||
<!-- Copyright (c) Microsoft Corporation.
|
||||
Licensed under the MIT License. -->
|
||||
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.6719 0.671875C16.0156 0.671875 17.3125 0.848958 18.5625 1.20312C19.8125 1.54688 20.9792 2.03646 22.0625 2.67188C23.1562 3.30729 24.1458 4.07292 25.0312 4.96875C25.9271 5.85417 26.6927 6.84375 27.3281 7.9375C27.9635 9.02083 28.4531 10.1875 28.7969 11.4375C29.151 12.6875 29.3281 13.9844 29.3281 15.3281C29.3281 16.6823 29.151 17.9844 28.7969 19.2344C28.4531 20.474 27.9635 21.6406 27.3281 22.7344C26.6927 23.8177 25.9271 24.8073 25.0312 25.7031C24.1458 26.5885 23.1562 27.3542 22.0625 28C20.9792 28.6354 19.8125 29.1302 18.5625 29.4844C17.3125 29.8281 16.0156 30 14.6719 30C13.3177 30 12.0156 29.8281 10.7656 29.4844C9.51562 29.1302 8.34896 28.6354 7.26562 28C6.18229 27.3646 5.19271 26.599 4.29688 25.7031C3.40104 24.8073 2.63542 23.8177 2 22.7344C1.36458 21.651 0.869792 20.4844 0.515625 19.2344C0.171875 17.9844 0 16.6823 0 15.3281C0 13.9844 0.171875 12.6875 0.515625 11.4375C0.869792 10.1875 1.36458 9.02083 2 7.9375C2.63542 6.84375 3.40104 5.85417 4.29688 4.96875C5.19271 4.07292 6.18229 3.30729 7.26562 2.67188C8.35938 2.03646 9.53125 1.54688 10.7812 1.20312C12.0312 0.848958 13.3281 0.671875 14.6719 0.671875ZM27.2031 15.3281C27.2031 14.1823 27.0521 13.0781 26.75 12.0156C26.4583 10.9427 26.0365 9.94271 25.4844 9.01562C24.9427 8.08854 24.2865 7.24479 23.5156 6.48438C22.7552 5.71354 21.9115 5.05729 20.9844 4.51562C20.0573 3.96354 19.0573 3.54167 17.9844 3.25C16.9219 2.94792 15.8177 2.79688 14.6719 2.79688C13.5156 2.79688 12.401 2.94792 11.3281 3.25C10.2656 3.54167 9.27083 3.96354 8.34375 4.51562C7.41667 5.05729 6.57292 5.70833 5.8125 6.46875C5.05208 7.22917 4.39583 8.07292 3.84375 9C3.30208 9.92708 2.88021 10.9271 2.57812 12C2.28646 13.0625 2.14062 14.1719 2.14062 15.3281C2.14062 16.4844 2.28646 17.599 2.57812 18.6719C2.88021 19.7344 3.30208 20.7292 3.84375 21.6562C4.38542 22.5833 5.03646 23.4323 5.79688 24.2031C6.56771 24.9635 7.41667 25.6146 8.34375 26.1562C9.27083 26.6979 10.2656 27.1198 11.3281 27.4219C12.401 27.7135 13.5156 27.8594 14.6719 27.8594C15.8281 27.8594 16.9375 27.7135 18 27.4219C19.0729 27.1198 20.0729 26.6979 21 26.1562C21.9271 25.6042 22.7708 24.9479 23.5312 24.1875C24.2917 23.4271 24.9427 22.5833 25.4844 21.6562C26.0365 20.7292 26.4583 19.7344 26.75 18.6719C27.0521 17.599 27.2031 16.4844 27.2031 15.3281ZM12 18.7812L20.3906 10.3906L22.2812 12.2812L12 22.5469L7.0625 17.6094L8.9375 15.7188L12 18.7812Z" fill="#218D51"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 2.5 KiB |
|
|
@ -1,26 +0,0 @@
|
|||
// Copyright (c) Microsoft Corporation.
|
||||
// Licensed under the MIT License.
|
||||
|
||||
// Success Image element
|
||||
const successElement = document.createElement('img');
|
||||
successElement.className = 'status-img';
|
||||
successElement.src = '/assets/success.svg';
|
||||
|
||||
// Error Image element
|
||||
const errorElement = document.createElement('img');
|
||||
errorElement.className = 'status-img';
|
||||
errorElement.src = '/assets/error.svg';
|
||||
|
||||
// Endpoint to get report config
|
||||
const reportUrl = 'https://aka.ms/CaptureViewsReportEmbedConfig';
|
||||
|
||||
const errorClass = 'error';
|
||||
const successClass = 'success';
|
||||
|
||||
// To show / hide the report container
|
||||
const hidden = 'hidden';
|
||||
|
||||
// To position the display message
|
||||
const position = 'position';
|
||||
|
||||
export { errorClass, errorElement, hidden, position, reportUrl, successClass, successElement };
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// Copyright (c) Microsoft Corporation.
|
||||
// Licensed under the MIT License.
|
||||
|
||||
// Endpoint to get report config
|
||||
export const reportUrl = 'https://aka.ms/CaptureViewsReportEmbedConfig';
|
||||
|
|
@ -1,9 +1,32 @@
|
|||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "../out-tsc/app",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"downlevelIteration": true,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2017",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2018",
|
||||
"dom"
|
||||
],
|
||||
"types": []
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts",
|
||||
"src/polyfills.ts"
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
{
|
||||
"name": "angular",
|
||||
"version": "3.1.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"npm:pack": "cd dist/powerbi-client-angular && npm pack",
|
||||
"package": "ng build && npm run npm:pack",
|
||||
"demo": "npm install && ng serve",
|
||||
"start": "ng serve"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/common": "^13.3.11",
|
||||
"@angular/compiler": "~13.3.11",
|
||||
"@angular/core": "^13.3.11",
|
||||
"@angular/platform-browser": "~13.3.11",
|
||||
"@angular/platform-browser-dynamic": "~13.3.11",
|
||||
"powerbi-client-angular": "^3.0.0",
|
||||
"powerbi-report-authoring": "^1.1.1",
|
||||
"rxjs": "~6.6.0",
|
||||
"tslib": "^2.0.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~13.3.8",
|
||||
"@angular-eslint/builder": "^13.5.0",
|
||||
"@angular-eslint/eslint-plugin": "^13.5.0",
|
||||
"@angular-eslint/eslint-plugin-template": "^13.5.0",
|
||||
"@angular-eslint/schematics": "^13.5.0",
|
||||
"@angular-eslint/template-parser": "^13.5.0",
|
||||
"@angular/cli": "~13.3.8",
|
||||
"@angular/compiler-cli": "~13.3.11",
|
||||
"@types/jasmine": "~3.6.0",
|
||||
"@types/node": "^12.11.1",
|
||||
"@typescript-eslint/eslint-plugin": "4.16.1",
|
||||
"@typescript-eslint/parser": "4.16.1",
|
||||
"eslint": "^7.6.0",
|
||||
"eslint-plugin-import": "2.22.1",
|
||||
"eslint-plugin-jsdoc": "30.7.6",
|
||||
"eslint-plugin-prefer-arrow": "1.2.2",
|
||||
"jasmine-core": "~4.2.0",
|
||||
"jasmine-spec-reporter": "~5.0.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage": "~2.0.3",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.0.0",
|
||||
"ng-packagr": "^13.3.1",
|
||||
"typescript": "~4.6.4"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,54 @@
|
|||
{
|
||||
"extends": "../.eslintrc.json",
|
||||
"root": true,
|
||||
"ignorePatterns": [
|
||||
"!**/*"
|
||||
],
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"*.ts"
|
||||
],
|
||||
"parserOptions": {
|
||||
"project": [
|
||||
"tsconfig.json",
|
||||
"config/src/tsconfig.lib.json",
|
||||
"config/test/tsconfig.spec.json"
|
||||
],
|
||||
"createDefaultProgram": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:@angular-eslint/ng-cli-compat",
|
||||
"plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
|
||||
"plugin:@angular-eslint/template/process-inline-templates"
|
||||
],
|
||||
"rules": {
|
||||
"no-underscore-dangle": "off",
|
||||
"@angular-eslint/component-selector": [
|
||||
"error",
|
||||
{
|
||||
"type": "element",
|
||||
"prefix": "",
|
||||
"style": "kebab-case"
|
||||
}
|
||||
],
|
||||
"@angular-eslint/directive-selector": [
|
||||
"error",
|
||||
{
|
||||
"type": "attribute",
|
||||
"prefix": "lib",
|
||||
"style": "camelCase"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"*.html"
|
||||
],
|
||||
"extends": [
|
||||
"plugin:@angular-eslint/template/recommended"
|
||||
],
|
||||
"rules": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,239 +0,0 @@
|
|||
# powerbi-client-angular
|
||||
Power BI Angular component. This library lets you embed Power BI reports, dashboards, tiles, report visuals, Q&As and paginated reports in your Angular application.
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Import
|
||||
*Import the 'PowerBIEmbedModule' inside your target module:*
|
||||
```ts
|
||||
import { PowerBIEmbedModule } from 'powerbi-client-angular';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
...
|
||||
...
|
||||
PowerBIEmbedModule
|
||||
],
|
||||
exports: ...,
|
||||
declarations: ...
|
||||
})
|
||||
```
|
||||
|
||||
### Embed a Power BI report
|
||||
```ts
|
||||
<powerbi-report
|
||||
[embedConfig] = {{
|
||||
type: "report",
|
||||
id: "<Report Id>",
|
||||
embedUrl: "<Embed Url>",
|
||||
accessToken: "<Access Token>",
|
||||
tokenType: models.TokenType.Embed,
|
||||
settings: {
|
||||
panes: {
|
||||
filters: {
|
||||
expanded: false,
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
background: models.BackgroundType.Transparent,
|
||||
}
|
||||
}}
|
||||
|
||||
[cssClassName] = { "reportClass" }
|
||||
|
||||
[phasedEmbedding] = { false }
|
||||
|
||||
[eventHandlers] = {
|
||||
new Map([
|
||||
['loaded', () => console.log('Report loaded');],
|
||||
['rendered', () => console.log('Report rendered');],
|
||||
['error', (event) => console.log(event.detail);]
|
||||
])
|
||||
}
|
||||
>
|
||||
</powerbi-report>
|
||||
```
|
||||
|
||||
### How to [bootstrap a PowerBI report](https://docs.microsoft.com/javascript/api/overview/powerbi/bootstrap-better-performance):
|
||||
```ts
|
||||
<powerbi-report
|
||||
[embedConfig] = {{
|
||||
type: "report",
|
||||
id: undefined,
|
||||
embedUrl: undefined,
|
||||
accessToken: undefined, // Keep as empty string, null or undefined
|
||||
tokenType: models.TokenType.Embed,
|
||||
hostname: "https://app.powerbi.com"
|
||||
}}
|
||||
>
|
||||
</powerbi-report>
|
||||
```
|
||||
|
||||
__Note__: To embed the report after [bootstrapping](https://docs.microsoft.com/javascript/api/overview/powerbi/bootstrap-better-performance), update the embedConfig (with at least accessToken and embedUrl).
|
||||
|
||||
## Embedding other Power BI artifacts
|
||||
The library is offering the following components that can be used to embed various Power BI artifacts.
|
||||
|
||||
|Component|Selector to use for embedding|
|
||||
|:------|:------|
|
||||
|PowerBIReportEmbedComponent|```<powerbi-report>```|
|
||||
|PowerBIDashboardEmbedComponent|```<powerbi-dashboard>```|
|
||||
|PowerBITileEmbedComponent|```<powerbi-tile>```|
|
||||
|PowerBIVisualEmbedComponent|```<powerbi-visual>```|
|
||||
|PowerBIQnaEmbedComponent|```<powerbi-qna>```|
|
||||
|PowerBIPaginatedReportEmbedComponent|```<powerbi-paginated-report>```|
|
||||
<br>
|
||||
|
||||
You can embed other artifacts such as:
|
||||
```ts
|
||||
<powerbi-dashboard
|
||||
[embedConfig] = "<IDashboardEmbedConfiguration>"
|
||||
[cssClassName] = "<className>"
|
||||
[eventHandlers] = "<Map of String and eventHandler>"
|
||||
>
|
||||
</powerbi-dashboard>
|
||||
```
|
||||
### Demo
|
||||
|
||||
This demo includes an Angular application that embeds a sample report using the _PowerBIReportEmbed_ component.<br/>
|
||||
It demonstrates the complete flow from bootstrapping the report, to embedding and updating the embedded report.<br/>
|
||||
It also demonstrates using the *powerbi report authoring* library, by enabling the user to delete a visual from a report using the "Delete Visual" button.<br />
|
||||
It also sets a 'DataSelected' event.
|
||||
|
||||
<br />
|
||||
To run the demo on localhost, run the following command:
|
||||
|
||||
```
|
||||
npm run demo
|
||||
```
|
||||
|
||||
Redirect to http://localhost:4200/ to view in the browser.
|
||||
|
||||
### Usage
|
||||
|Use case|Details|
|
||||
|:------|:------|
|
||||
|Embed Power BI|To embed your powerbi artifact, pass the component with at least type, embedUrl and accessToken in embedConfig property.|
|
||||
|Apply style class|Pass the name(s) of style classes to be applied to the embed container div to the cssClassName property.|
|
||||
|Set event handlers|Pass a map object of event name (string) and event handler (function) to the _eventHandlers_ prop. <br/>__Key__: Event name <br/>__Value__: Event handler method to be triggered<br/>Event handler method takes two optional parameters:<br/>*First parameter*: Event<br/>*Second parameter*: Reference to the embedded entity <br /><br /> List of supported events is given here: [Additional events](#supported-events)|
|
||||
|Reset event handlers|To reset event handler for an event, set the event handler's value as null in the eventHandlers map of properties.|
|
||||
|Bootstrap Power BI|To [bootstrap your powerbi entity](https://docs.microsoft.com/javascript/api/overview/powerbi/bootstrap-better-performance), pass the property *embedConfig* to the component without _accessToken_<br/>__Note__: _embedConfig_ should at least contain __type__ of the powerbi entity being embedded. <br/>Available types: "report", "dashboard", "tile", "visual" and "qna".<br/>Refer to _How to bootstrap a report_ section in [Quick Start](#quick-start). <br /><br />__Note__: A paginated report cannot be bootstrapped.|
|
||||
|Using with PowerBI Report Authoring|1. Install [powerbi-report-authoring](https://www.npmjs.com/package/powerbi-report-authoring) as an npm dependency.<br>2. Use the report authoring APIs using the embedded report's instance.|
|
||||
|Phased embedding (Report type only)|Set the phasedEmbedding property value to `true` <br/> Refer to the [Phased embedding article](https://docs.microsoft.com/javascript/api/overview/powerbi/phased-embedding).|
|
||||
|
||||
<br />
|
||||
|
||||
__Note__: Supported browsers are _Edge_, _Chrome_, and _Firefox_.
|
||||
<br />
|
||||
|
||||
### Properties accepted by Components
|
||||
|
||||
|Property|Description|Supported by|
|
||||
|:-------|:----------|:----------|
|
||||
|embedConfig|Configuration for embedding the PowerBI entity (required)|All|
|
||||
|phasedEmbedding|Phased embedding flag (optional)|Report|
|
||||
|eventHandlers|Map of pair of event name and its handler method to be triggered on the event (optional)|Report, Dashboard, Tile, Visual, Qna|
|
||||
|cssClassName|CSS class to be set on the embedding container (optional)|All|
|
||||
|service|Provide the instance of PowerBI service (optional)|All|
|
||||
|
||||
<br />
|
||||
|
||||
## Supported Events
|
||||
|
||||
|
||||
### Events supported by various Power BI entities:
|
||||
|
||||
|Entity|Event|
|
||||
|:----- |:----- |
|
||||
| Report | "buttonClicked", "commandTriggered", "dataHyperlinkClicked", "dataSelected", "loaded", "pageChanged", "rendered", "saveAsTriggered", "saved", "selectionChanged", "visualClicked", "visualRendered" |
|
||||
| Dashboard | "loaded", "tileClicked" |
|
||||
| Tile | "tileLoaded", "tileClicked" |
|
||||
| QnA | "visualRendered" |
|
||||
|
||||
<br />
|
||||
|
||||
### Event Handler to be used with Map
|
||||
```ts
|
||||
type EventHandler = (event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void | null;
|
||||
```
|
||||
|
||||
## Using supported SDK methods for Power BI artifacts
|
||||
|
||||
### Import
|
||||
*Import the 'PowerBIReportEmbedComponent' inside your targeted component file:*
|
||||
```ts
|
||||
import { PowerBIReportEmbedComponent } from 'powerbi-client-angular';
|
||||
```
|
||||
|
||||
### Initialize inside the Component
|
||||
```ts
|
||||
@ViewChild(PowerBIReportEmbedComponent) reportObj!: PowerBIReportEmbedComponent;
|
||||
```
|
||||
|
||||
### Use
|
||||
You can use ```reportObj``` to call supported SDK APIs.
|
||||
|
||||
There are two ways in which ```reportObj``` can be used:
|
||||
* Expose the ```Report``` object globally.
|
||||
|
||||
Steps:
|
||||
1. Create one class variable, for example, ```report```.
|
||||
2. Implement the ``` AfterViewInit ``` hook for the component class.
|
||||
<br /><br />
|
||||
|
||||
```ts
|
||||
class AppComponent implements AfterViewInit { ... }
|
||||
```
|
||||
3. Define the ```ngAfterViewInit``` method as follows:
|
||||
<br /><br />
|
||||
|
||||
```ts
|
||||
ngAfterViewInit(): void {
|
||||
this.report = this.reportObj.getReport();
|
||||
}
|
||||
```
|
||||
|
||||
4. this.report points to the Report object from the library and can be used to call SDK methods such as, ```getVisuals```, ```getBookmarks``` etc.
|
||||
<br /><br />
|
||||
|
||||
```ts
|
||||
async getReportPages(): Page[] {
|
||||
// this.report is a class variable, initialized in step 3
|
||||
const pages = await this.report.getPages();
|
||||
console.log(pages);
|
||||
}
|
||||
```
|
||||
|
||||
* Use ```reportObj``` inside a class method.
|
||||
|
||||
This approach will not expose the Report object globally, instead ```reportObj``` would be available locally in the function.
|
||||
|
||||
Example:
|
||||
```ts
|
||||
async getReportPages(): Page[] {
|
||||
const report = this.reportObj.getReport();
|
||||
const visuals = await report.getPages();
|
||||
console.log(visuals);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Note
|
||||
The library supports Angular applications having version **>= 11**.
|
||||
|
||||
### Dependencies
|
||||
|
||||
powerbi-client (https://www.npmjs.com/package/powerbi-client)
|
||||
|
||||
### Peer Dependencies
|
||||
|
||||
@angular/common (https://www.npmjs.com/package/@angular/common)
|
||||
|
||||
@angular/core (https://www.npmjs.com/package/@angular/core)
|
||||
|
||||
### Contributing
|
||||
|
||||
This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit <https://cla.opensource.microsoft.com>.
|
||||
|
||||
When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repositories using our CLA.
|
||||
|
||||
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"powerbi-client-angular": {
|
||||
"projectType": "library",
|
||||
"root": "src",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "lib",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:ng-packagr",
|
||||
"options": {
|
||||
"project": "./ng-package.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"tsConfig": "./config/src/tsconfig.lib.prod.json"
|
||||
},
|
||||
"development": {
|
||||
"tsConfig": "./config/src/tsconfig.lib.json"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "./src/test.ts",
|
||||
"tsConfig": "./config/test/tsconfig.spec.json",
|
||||
"karmaConfig": "./config/test/karma.conf.js"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-eslint/builder:lint",
|
||||
"options": {
|
||||
"lintFilePatterns": [
|
||||
"./src/**/*.ts"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "powerbi-client-angular"
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../../out-tsc/lib",
|
||||
"outDir": "../../out-tsc/lib",
|
||||
"target": "es2015",
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
|
|
|
|||
|
|
@ -6,4 +6,4 @@
|
|||
"angularCompilerOptions": {
|
||||
"compilationMode": "full"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -46,7 +46,7 @@ module.exports = function (config) {
|
|||
|
||||
// Generate code coverage
|
||||
coverageReporter: {
|
||||
dir: require('path').join(__dirname, '../../../coverage/powerbi-client-angular'),
|
||||
dir: require('path').join(__dirname, '../../coverage/powerbi-client-angular'),
|
||||
subdir: '.',
|
||||
reporters: [
|
||||
{ type: 'html' },
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../../out-tsc/spec",
|
||||
"outDir": "../../out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"$schema": "../node_modules/ng-packagr/ng-package.schema.json",
|
||||
"dest": "../dist/powerbi-client-angular",
|
||||
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
|
||||
"dest": "./dist/powerbi-client-angular",
|
||||
"lib": {
|
||||
"entryFile": "src/public-api.ts"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"name": "powerbi-client-angular",
|
||||
"version": "3.0.0",
|
||||
"version": "3.0.5",
|
||||
"description": "Angular wrapper for powerbi-client library",
|
||||
"main": "../dist/powerbi-client-angular/bundles/powerbi-client-angular.umd.js",
|
||||
"typings": "../dist/powerbi-client-angular/powerbi-client-angular.d.ts",
|
||||
"main": "./dist/powerbi-client-angular/bundles/powerbi-client-angular.umd.js",
|
||||
"typings": "./dist/powerbi-client-angular/powerbi-client-angular.d.ts",
|
||||
"keywords": [
|
||||
"microsoft",
|
||||
"powerbi",
|
||||
|
|
@ -18,12 +18,50 @@
|
|||
"url": "https://github.com/microsoft/powerbi-client-angular.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"build": "ng build",
|
||||
"demo": "cd ../demo && npm install && ng serve",
|
||||
"package": "ng build && cd dist/powerbi-client-angular && npm pack",
|
||||
"test": "ng test"
|
||||
},
|
||||
"publishConfig": {
|
||||
"tag": "beta"
|
||||
},
|
||||
"dependencies": {
|
||||
"powerbi-client": "^2.18.0",
|
||||
"powerbi-client": "^2.21.1",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": ">=11",
|
||||
"@angular/core": ">=11"
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~13.3.8",
|
||||
"@angular-eslint/builder": "^13.5.0",
|
||||
"@angular-eslint/eslint-plugin": "^13.5.0",
|
||||
"@angular-eslint/eslint-plugin-template": "^13.5.0",
|
||||
"@angular-eslint/schematics": "^13.5.0",
|
||||
"@angular-eslint/template-parser": "^13.5.0",
|
||||
"@angular/cli": "~13.3.8",
|
||||
"@angular/compiler": "~13.3.11",
|
||||
"@angular/compiler-cli": "~13.3.11",
|
||||
"@angular/core": "^13.3.11",
|
||||
"@angular/platform-browser": "~13.3.11",
|
||||
"@angular/platform-browser-dynamic": "~13.3.11",
|
||||
"@types/jasmine": "~3.6.0",
|
||||
"@types/node": "^12.11.1",
|
||||
"@typescript-eslint/eslint-plugin": "4.16.1",
|
||||
"@typescript-eslint/parser": "4.16.1",
|
||||
"eslint": "^7.6.0",
|
||||
"eslint-plugin-import": "2.22.1",
|
||||
"eslint-plugin-jsdoc": "30.7.6",
|
||||
"eslint-plugin-prefer-arrow": "1.2.2",
|
||||
"jasmine-core": "~4.2.0",
|
||||
"jasmine-spec-reporter": "~5.0.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage": "~2.0.3",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.0.0",
|
||||
"ng-packagr": "^13.3.1",
|
||||
"powerbi-report-authoring": "^1.1.1",
|
||||
"typescript": "~4.6.4",
|
||||
"zone.js": "~0.11.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -93,7 +93,7 @@ describe('PowerBIDashboardEmbedComponent', () => {
|
|||
let mockPowerBIService: any;
|
||||
|
||||
beforeEach(() => {
|
||||
mockPowerBIService = jasmine.createSpyObj('mockService', ['embed', 'bootstrap']);
|
||||
mockPowerBIService = jasmine.createSpyObj('mockService', ['embed', 'bootstrap', 'setSdkInfo']);
|
||||
});
|
||||
|
||||
it('embeds dashboard when accessToken provided', () => {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Embed, factories, service } from 'powerbi-client';
|
||||
import { stringifyMap } from '../../utils/utils';
|
||||
import { stringifyMap, sdkType, sdkWrapperVersion } from '../../utils/utils';
|
||||
|
||||
/**
|
||||
* Type for event handler function of embedded entity
|
||||
|
|
@ -38,6 +38,8 @@ export class PowerBIEmbedComponent implements OnInit {
|
|||
} else {
|
||||
this.powerbi = new service.Service(factories.hpmFactory, factories.wpmpFactory, factories.routerFactory);
|
||||
}
|
||||
|
||||
this.powerbi.setSdkInfo(sdkType, sdkWrapperVersion);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ describe('PowerBIPaginatedReportEmbedComponent', () => {
|
|||
let mockPowerBIService: any;
|
||||
|
||||
beforeEach(() => {
|
||||
mockPowerBIService = jasmine.createSpyObj('mockService', ['embed']);
|
||||
mockPowerBIService = jasmine.createSpyObj('mockService', ['embed', 'setSdkInfo']);
|
||||
});
|
||||
|
||||
it('embeds paginated report when accessToken provided', () => {
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ describe('PowerBIQnaEmbedComponent', () => {
|
|||
let mockPowerBIService: any;
|
||||
|
||||
beforeEach(() => {
|
||||
mockPowerBIService = jasmine.createSpyObj('mockService', ['embed', 'bootstrap']);
|
||||
mockPowerBIService = jasmine.createSpyObj('mockService', ['embed', 'bootstrap', 'setSdkInfo']);
|
||||
});
|
||||
|
||||
it('embeds qna visual when accessToken provided', () => {
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ describe('PowerBIReportEmbedComponent', () => {
|
|||
let mockPowerBIService: any;
|
||||
|
||||
beforeEach(() => {
|
||||
mockPowerBIService = jasmine.createSpyObj('mockService', ['load', 'embed', 'bootstrap']);
|
||||
mockPowerBIService = jasmine.createSpyObj('mockService', ['load', 'embed', 'bootstrap', 'setSdkInfo']);
|
||||
});
|
||||
|
||||
it('embeds report when accessToken provided', () => {
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ describe('PowerBITileEmbedComponent', () => {
|
|||
let mockPowerBIService: any;
|
||||
|
||||
beforeEach(() => {
|
||||
mockPowerBIService = jasmine.createSpyObj('mockService', ['embed', 'bootstrap']);
|
||||
mockPowerBIService = jasmine.createSpyObj('mockService', ['embed', 'bootstrap', 'setSdkInfo']);
|
||||
});
|
||||
|
||||
it('embeds tile when accessToken provided', () => {
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ describe('PowerBIVisualEmbedComponent', () => {
|
|||
let mockPowerBIService: any;
|
||||
|
||||
beforeEach(() => {
|
||||
mockPowerBIService = jasmine.createSpyObj('mockService', ['embed', 'bootstrap']);
|
||||
mockPowerBIService = jasmine.createSpyObj('mockService', ['embed', 'bootstrap', 'setSdkInfo']);
|
||||
});
|
||||
|
||||
it('embeds visual when accessToken provided', () => {
|
||||
|
|
|
|||
|
|
@ -26,3 +26,7 @@ export const stringifyMap = (map: Map<string, EventHandler | null> | undefined):
|
|||
)
|
||||
);
|
||||
};
|
||||
|
||||
// SDK information to be used with service instance
|
||||
export const sdkType = 'powerbi-client-angular';
|
||||
export const sdkWrapperVersion = '3.0.5';
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@ git clone <url>
|
|||
|
||||
Navigate to the cloned directory
|
||||
|
||||
Navigate to the *Angular* workspace folder:
|
||||
Navigate to the *Angular\powerbi-client-angular* workspace folder:
|
||||
```
|
||||
cd Angular
|
||||
cd Angular\powerbi-client-angular
|
||||
```
|
||||
|
||||
Install local dependencies:
|
||||
|
|
@ -44,4 +44,4 @@ Open the address to view in the browser:
|
|||
http://localhost:4200/
|
||||
|
||||
## Flow Diagram for the PowerBI Report Component:
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
powerbi-client-angular
|
||||
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
MIT License
|
||||
|
|
|
|||
26
README.md
26
README.md
|
|
@ -82,11 +82,11 @@ The library is offering the following components that can be used to embed vario
|
|||
|PowerBIVisualEmbedComponent|```<powerbi-visual>```|
|
||||
|PowerBIQnaEmbedComponent|```<powerbi-qna>```|
|
||||
|PowerBIPaginatedReportEmbedComponent|```<powerbi-paginated-report>```|
|
||||
<br>
|
||||
<br>
|
||||
|
||||
You can embed other artifacts such as:
|
||||
```ts
|
||||
<powerbi-dashboard
|
||||
<powerbi-dashboard
|
||||
[embedConfig] = "<IDashboardEmbedConfiguration>"
|
||||
[cssClassName] = "<className>"
|
||||
[eventHandlers] = "<Map of String and eventHandler>"
|
||||
|
|
@ -97,7 +97,7 @@ You can embed other artifacts such as:
|
|||
|
||||
This demo includes an Angular application that embeds a sample report using the _PowerBIReportEmbed_ component.<br/>
|
||||
It demonstrates the complete flow from bootstrapping the report, to embedding and updating the embedded report.<br/>
|
||||
It also demonstrates using the *powerbi report authoring* library, by enabling the user to delete a visual from a report using the "Delete Visual" button.<br />
|
||||
It also demonstrates using the *powerbi report authoring* library, by enabling the user to change the type of a report visual from a report using the "Change visual type" button.<br/>
|
||||
It also sets a 'DataSelected' event.
|
||||
|
||||
<br />
|
||||
|
|
@ -179,7 +179,7 @@ There are two ways in which ```reportObj``` can be used:
|
|||
1. Create one class variable, for example, ```report```.
|
||||
2. Implement the ``` AfterViewInit ``` hook for the component class.
|
||||
<br /><br />
|
||||
|
||||
|
||||
```ts
|
||||
class AppComponent implements AfterViewInit { ... }
|
||||
```
|
||||
|
|
@ -204,7 +204,7 @@ There are two ways in which ```reportObj``` can be used:
|
|||
```
|
||||
|
||||
* Use ```reportObj``` inside a class method.
|
||||
|
||||
|
||||
This approach will not expose the Report object globally, instead ```reportObj``` would be available locally in the function.
|
||||
|
||||
Example:
|
||||
|
|
@ -218,7 +218,7 @@ There are two ways in which ```reportObj``` can be used:
|
|||
|
||||
|
||||
### Note
|
||||
The library supports Angular applications with the same major version.
|
||||
The library supports Angular applications having version **>= 13**.
|
||||
|
||||
### Dependencies
|
||||
|
||||
|
|
@ -230,6 +230,10 @@ powerbi-client (https://www.npmjs.com/package/powerbi-client)
|
|||
|
||||
@angular/core (https://www.npmjs.com/package/@angular/core)
|
||||
|
||||
### Trademarks
|
||||
|
||||
This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow [Microsoft’s Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general). Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party’s policies.
|
||||
|
||||
### Contributing
|
||||
|
||||
This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit <https://cla.opensource.microsoft.com>.
|
||||
|
|
@ -237,3 +241,13 @@ This project welcomes contributions and suggestions. Most contributions require
|
|||
When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repositories using our CLA.
|
||||
|
||||
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments
|
||||
|
||||
### Data Collection.
|
||||
|
||||
The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications.
|
||||
|
||||
If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft’s privacy statement.
|
||||
Our privacy statement is located at [Microsoft Privacy Statement](https://privacy.microsoft.com/en-us/privacystatement). You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.
|
||||
|
||||
### Support
|
||||
Our public support page is available at [Microsoft Support Statement](https://powerbi.microsoft.com/en-us/support/).
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче