: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

|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

:page_facing_up: 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>

: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: