wiz-powerbi v1.0.3

:sparkles: Wiz PowerBi

Wiz powerBi é um componente para embedar os relatórios do powerBi no seu projeto. Usamos Stencil para que possa ser usado com a maioria dos frameworks (React, vue e angular).

Como usar

instala o pacote

npm i @wizsolucoes/wiz-powerbi

outros

Componente html

<wiz-powerbi
 embed-url=""
 id-pbi=""
 token=""
>
</wiz-powerbi>

Obs: Se estiver trabalhando com algum framework e seus parâmetros forem dinâmicos devem ser feitos em forma diferente dependendo do framwork assista o vídeo abaixo para entender melhor. Web Componentes atributos em framework

Para testar o componente você pode usar esse o link abaixo e pegar os principais parâmetros para teste.

https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html

• Embed Token
• Embed URL

• Report ID

:page_facing_up: Parâmetros

É esperado que o servidor retorne os seguintes parâmetros embed-url, token e id

filtros do powerbi

O stencilJs por ser um web componente não recebe array ou objeto como parâmetro em sua tag no html, por isso devemos mandar da seguinte forma.

const filters = [{
	$schema:  "http://powerbi.com/product/schema#basic",
	target: {
		table:  "TABLE_EXAMPLE",
		column:  "Unidade"
	},
	operator:  "eq",
	values: ['212'],
	filterType:  1,
	requireSingleSelection:  true
}]

const myComponent = document.querySelector('wiz-powerbi');
mycomponent.filters = filters

No React e Vue você pode usar o ref={}

No angular você pode usar o @viewChild @ViewChild("elementPowerbi", { static: true }) elementPowerbi: ElementRef;

:globe_with_meridians: Links importantes

• Exemplo Powerbi Demo da Microsoft
• Pacote NPM usado Powerbi-client

Projeto fase beta, ajude contribuindo nesse projeto para melhorar! :ok_hand: