✨ 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

Frameworks	Link
Angular	Link
React	Link
Vue	Link
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

📄 Parâmetros

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

Parâmetro	Obrigatório	tipagem	Default	Observação
id-pbi	Sim	string	null	ID do relatório que você deseja incorporar
embed-url	Sim	string	null	incorpora URL do relatório
token	Sim	string	null
filters	Não	Object	null	Link filtros
token-type	Não	Number	0
type	Não	string	report
show-filter-bar	Não	boolean	false	Mostrar barra lateral de filtro
show-menu-button	Não	boolean	true	Mostrar Menu no rodapé do relatório
max-mobile-size	Não	Number	800	Carregar em modo mobile
page-name	Não	string	null	Abrir uma página ou aba especifica

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;

---

Evento: changeStatus

Esse evento emite o status do powerbi, atualmente ele emite dois status

Parâmetro	Descrição
loaded	Emite esse evento para dizer que o powerbi esta carregando de acordo com os dados enviados.
rendered	Emite esse evento para dizer que o powerbi carregou e já renderizou todos os dados.

Exemplo: <wiz-powerbi id="webComponent" changeStatus="myFunction($event)"></wiz-powerbi>

🌐 Links importantes

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

Projeto fase beta, ajude contribuindo nesse projeto para melhorar! 👌