Como usar um Power BI custom visual para renderizar um componente React!

CENÁRIO:

Olá!

Essa semana precisei criar um filtro para um relatório no Power BI que o usuário pudesse filtrar digitando os valores. Muito próximo do que vemos constantemente em aplicações web.

Link demo: https://youtu.be/7hETqVpe-yc

Mas, isso é um relatório. Como fazer isso? Eu até encontrei um componente pronto da Microsoft que faz isso, mas ele não faz tudo que eu precisava. O componente da Microsoft é esse aqui:

https://appsource.microsoft.com/en-us/product/power-bi-visuals/WA104381309?src=office&tab=Overview – Text Filter

Mas eu queria uma experiência um pouco melhor, “buscando” os resultados a medida ia digitando… Tipo esse componente aqui:

https://react-select.com/home

Foi então que descobri que era possível renderizar componentes React dentro dos Power BI Custom Visual! Aí ficou “fácil” 😀

Um pequeno tutorial da Microsoft:

https://docs.microsoft.com/en-us/power-bi/developer/visuals/custom-visual-develop-tutorial

SOLUÇÃO:

Vamos lá então!

Prepare o ambiente de desenvolvimento instalando:

• Node.js
• Power BI Visuals Tools (pbiviz)
  • Instale o certificado pra dev

Info: https://docs.microsoft.com/en-us/power-bi/developer/visuals/custom-visual-develop-tutorial#setting-up-the-developer-environment

Com o ambiente de desenvolvimento pronto. Vamos começar nosso componente React:

pbiviz new myreact

Este comando irá criar um projeto com nome ‘myreact’. Navegue até a pasta do projeto para instalar os pacotes necessários.

cd myreact

Vamos instalar os pacotes necessários para o react.

npm i react react-dom

npm i @types/react @types/react-dom

npm i @babel/polyfill

This slideshow requires JavaScript.

Configure o tsconfig.json para react (compilerOptions), adicione:

“jsx”: “react”,

“types”: [“react”, “react-dom”],

Pronto. Agora vamos criar o componente react “component.tsx”:

import * as React from “react”;

 

export default class MyReact extends React.Component<{}>{

render() {

return (

<div>

Hello, React!

</div>

)

}

}

No arquivo “visual.ts” substitua o conteúdo do arquivo por este conteúdo abaixo:

“use strict”;

import “@babel/polyfill”;

import powerbi from “powerbi-visuals-api”;

 

import * as React from “react”;

import * as ReactDOM from “react-dom”;

 

import DataView = powerbi.DataView;

import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;

import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;

import IVisual = powerbi.extensibility.visual.IVisual;

 

import “./../style/visual.less”;

 

import MyReact from ‘./component’;

 

export class Visual implements IVisual {

private target: HTMLElement;

private reactRoot: React.ComponentElement<any, any>;

 

constructor(options: VisualConstructorOptions) {

this.reactRoot = React.createElement(MyReact, {});

this.target = options.element;

 

ReactDOM.render(this.reactRoot, this.target);

}

 

public update(options: VisualUpdateOptions) {

 

}

}

Vamos testar! No prompt de comando, rode a aplicação:

pbiviz start

Navegue até o report no Power BI para testar:

This slideshow requires JavaScript.

E é isso! Um componente React dentro do Power BI Custom Visual! 😊

Código completo no GitHub:

https://github.com/thiagottss/pbi-customvisuals

Partindo deste exemplo podemos criar inúmeras possibilidades. Eu criei o componente que precisava, mas esse será tema para outro post:

Link demo: https://youtu.be/7hETqVpe-yc

Abraço!