Criando Custom Visuals no Power BI Demétrio Silva MCT, MCSE SQL Server | SharePoint @DemetrioSQLDBA demetrioi@hotmail.com www.demetriosilva.com

Tem nota neste slide. Dêem uma lida  Patrocinadores Tem nota neste slide. Dêem uma lida  Falem que o evento é gratuito pra todos, e que os patrocinadores são os responsáveis por garantir o coffee e a infra-estrutura basica pro evento acontecer. Em contra partida, eles querem mostrar seus produtos e serviços, é legal aos participantes conhecerem o que eles tem a oferecer e aceitar receber contatos deles via email.

Power BI – O que é? “É um serviço de análise de negócios baseado em nuvem que permite que qualquer pessoa visualize e analise dados com maior velocidade, eficiência e compreensão” https://powerbi.microsoft.com/pt-br/documentation/powerbi-frequently-asked-questions https://demetriosilva.wordpress.com/2016/04/18/power-bi-curso-gratuito/

Power BI – O que é?

Power BI – Livro https://demetriosilva.wordpress.com/2016/05/19/lanamento-do-livro-sql-server-alm-do-conceito-volume-2/

Custom Visuals Estamos permitindo aos desenvolvedores adicionar facilmente elementos visuais personalizados no Power BI para uso no painel, relatórios e pacotes de conteúdo. Para ajudá-lo a começar, publicamos o código para todas as nossas visualizações no GitHub. Juntamente com a estrutura de visualização, fornecemos nosso conjunto de testes e ferramentas para ajudar a comunidade a criar elementos visuais de alta qualidade para o Power BI. Tudo isso está disponível como um projeto de software livre no GitHub https://powerbi.microsoft.com/pt-br/custom-visuals/

Power BI – Custom Visuals https://app.powerbi.com/visuals/

Power BI – Custom Visuals O que eu preciso conhecer? JavaScript TypeScript HTML CSS Less SVG D3 Node.JS API do Power BI E só!

Power BI – Custom Visuals JavaScript (JS) – Linguagem de programação interpretada que roda no client http://www.w3schools.com/js TypeScript – Biblioteca JS que permite usar o JS de forma OO. Criada pela Microsoft. Transforma o código em JS. https://github.com/Microsoft/TypeScript HTML - Linguagem de Marcação de Hipertexto http://www.w3schools.com/html/ CSS – Linguagem que descreve o style de documentos HTML http://www.w3schools.com/css/ Less - Linguagem que descreve o style de documentos HTML de forma dinâmica, variáveis, etc. http://lesscss.org/

DEMO HTML e JS

Power BI – Custom Visuals SVG - Scalable Vectorial Graphics (gráficos vetoriais escaláveis) Criado pelo W3C, é um XML com tags que representam, de forma vetorial, desenhos e gráficos http://www.w3schools.com/graphics/svg_intro.asp Inkscape https://inkscape.org/en/ Adobe Illustrator http://www.adobe.com/products/illustrator/ Livro: https://github.com/jonitrythall/svgpocketguide/blob/master/svgpocketguide-ptbr.md#sofwares-de-vetor-gr%C3%A1fico

DEMO Conhecendo o svg

Power BI – Custom Visuals D3 (Data Driven Documents) – Biblioteca JS para manipulação de documentos baseados em dados. Permite criar gráficos interativos usando HTML, CSS e SVG Isso aqui lembra algo? https://github.com/d3/d3/wiki/Gallery

DEMO D3

Power BI – Custom Visuals Node.JS É um interpretador de código JavaScript que funciona do lado do servidor. Seu objetivo é ajudar programadores na criação de aplicações de alta escalabilidade (como um servidor web), com códigos capazes de manipular dezenas de milhares de conexões simultâneas, numa única máquina física.[2] https://pt.wikipedia.org/wiki/Node.js

Power BI – Custom Visuals Power BI Custom Visuals API Configuração do ambiente (PowerBI Visual Tools) 1 – Instalar Node.JS 4.0+ (recomendado 5.0) https://nodejs.org/en/ (NNF) 2 – Executar cmd como admin e “npm install -g powerbi-visuals-tools”

DEMO API

www.powerbi.com www.demetriosilva.com Links de apoio www.powerbi.com www.demetriosilva.com

Cursos Power BI | SharePoint | SQL Server www.demetriosilva.com/treinamentos demetrioi@hotmail.com

Dúvidas?!