Power BI and Custom Visuals A Data Canvas

Power. BI and Custom Visuals: A Data Canvas Andy Cross

Thanks • 5 years sponsorship from • Hancock & Parsons http: //www. hancockandparsons. co. uk/ • Chris, Joe, Jacob • PAULINE • Elastacloud http: //www. elastacloud. com • Richard, Andy • LUCY • What a run! Thanks to you guys.

Elastacloud; Data on Azure experts • Andy Cross Founder and Director of Elastacloud • Leading UK Data and Azure Consultancy • Based in London • Azure Gold Partner, Cloud Platform and Data Analytics • http: //azurecraft. uk • http: //meetup. com/UKAzure. Use. Gr oup Azure MVP for years; Microsoft Regional Director; Founder UKAzure User Group Founder Io. T Innovators

What’s special about Power. BI? • Table stakes: • Multiple data source to read • Multiple built in visualizations • Last mile analytics engine capable of meaningful work • Interactive and beautiful graphics • Differentiated • • Saa. S – no host Free to view Integrated with Azure Extensible We see Power BI Custom Visuals as one of our key differentiators - James Phillips Microsoft CVP

Anatomy of a Pbiviz Typescript, JS, manifests

A web canvas inside BI tooling • Type. Script : a typed superset of Java. Script that compiles to plain Java. Script. • HTML 5, CSS (LESS) • IFrame Sandbox • Bunch of json manifests • Power Query hands data to Power View TO YOUR CODE

What’s new in Custom Visuals? https: //app. powerbi. com/visuals/

Goodbye Web site • Previous implementation of Pbi. Viz was devtools • Drawbacks • No testability • Debugging hard • Typescript without compiler access

Hello Web Dev • Node. js powered build and serving debug layer • Scaffolding • Hosting debug sessions • Packaging • Pretty ASCII art. • Source control, CI all is possible!

Hello Web Dev I LIKE THIS! This slide has all the animation ninjas!

Packaging and source • https: //github. com/Microsoft/Power. BI-visuals • New Power. BI Gallery with Office Store integration • Share the results of your PBIViz package

Scaffolding Let’s get started! With a basic visual layout

pbiviz new • . api : Definitions for typescript compilation • . vscode: Schemas for intellisense in PBI Viz settings inc JSON files • assets : Your logo here • Src : Your code here • Style : Your tears here • . npmignore : excludes folders from npm installation • capabilities: controls PBI interaction with your code • package. json: controls dependencies via npm • pbiviz. json : manifest • tsconfig. json : controls compilation by tyepscript

101 Visual • Open in Code • Change. ts file to your logic • Pbiviz start • Open PBI service • WIN! • this. _img = this. _ele. html("<img src='https: //loremflickr. com/" +Math. floor(viewport. width)+ "/"+Math. floor(viewport. heigh t)+"/kitten/all'>"); • https: //loremflickr. com/270/2 54/kitten/all

DEMO; Scaffold Let’s get started! With some kittens.

Capabilities Controlling the Power. BI canvas

Setting up capabilities • Capabilities. json • Define your custom user inputs • Bound to datamodel generally or to certain elements, by selector or query name • Values can be primitive or complex, like fill:

Capabilities programmatics • First pick up the capabilities and put them on the screen properly with • public enumerate. Object. Instances(options: Enumerate. Visual. Object. Insta nces. Options): Visual. Object. Instance. Enumeration • Return a Visual. Object. Instance[] • Triggered when drawing the Properties pane in Power. BI, gives you a chance to set defaults • Then receive values when data is bound to the screen in Data. View

DEMO; Capabilities Let’s get started! With some other animals? ….

Data Binding Deep Dive on Data. Views

Bubble. Chart • One of the standard d 3 visuals. • Previously D 3 shipped with PBI, now it’s a vanilla sandbox, with no libs • So we have to install d 3: • Add d 3 to the external. JS pbiviz. json file • Add typings

DEMO; Binding Andy; the category data must be a date & the measure data must be a number!

Extreme customisation; External Scripts How do I load the internet? When assets are not enough

Reasons to load external scripts • When a js SDK may be frequently updated • Or requires a Key on load, i. e. for licensing • Or is licensed not for distribution • Or is tied to other horrible things.

Consider typings • How do we load these ahead of time? • External Dependency pattern

DEMO; Externals This will definitely work

To conclude

Power. BI Visuals • Custom web canvas with all the data plumbing done for you • HTML 5, JS via TS, Less CSS • Custom external JS, and external JS • Continue your learning • Look out for changes to the Office Store

Further Resources • All code demos are here: • https: //github. com/Andy. Cross/powerbi-contrib. git • Tooling and documentation here: • https: //github. com/Microsoft/Power. BI-visuals • @andyelastacloud on twitter • andy@elastacloud. com on email • http: //www. elastacloud. com on the web