This video explains how to add external libraries from the npm repository to your Power BI custom visual. This is video #8 of the Power BI Custom Visual Development Fundamentals series, please check the playlist below for the set.

Video Transcript:

OK, one step left before you start charting.

And that is to install a couple of extra libraries to make your life easier.

Before that though, I’m going to clean room here so I don’t have to move between windows so much.

One of the neat things in Visual Studio Code is that it has an Integrated Terminal Window.

This lets you run commands like pbiviz here without you having to leave the editor.

So let’s go over to that one instead.

First, you can close this command window, which will also stop the pbiviz process.

Now in Visual Studio Code, you can click on View > Integrated Terminal for the terminal window to pop up.

On windows, this makes a new PowerShell terminal appear, with the current directory set as your project folder.

PowerShell is the default but you can configure visual studio code to use other commands lines as well, such as the dos command line or the git command line.

The extra neat thing here is that you can have multiple terminals running at the same time in this window.

To create a new one, just click the plus button over here.

Now, getting back to the first window, you can start pbiviz again, so your visual keeps working in the browser.

Just type pbiviz start again and all is well.

Note how pbiviz is now detecting all changes to your files from inside your editor.

So with this out-of-the-way, you can switch to command line 2 for the rest of this video.

Let’s get on with installing libraries now.

The first library you’re going to install is D3.

D3 stands for data driven documents and it’s a popular JavaScript library that lets you create interactive visualizations in a browser.

D3 is fairly low-level as far as charting libraries go and allows a high level of visual customization.

The trade-off is that it has a slightly steep learning curve if you’re starting from zero.

Now while this course does not provide comprehensive coverage on D3, I will explain all bits the best I can as we go along.

So to install D3 on your project, you can make use of the node package manager again.

On the visual studio command line, you can type npm install d3@3 –save

This tells the node package manager to fetch all the files for d3 version 3 and install them in your project.

The version is important here, by the way.

At this moment, D3 is in version 4, which is a major rewrite from version 3.

However, there are still some compatibility issues between version 4 and power BI, so we will have to stick with version 3 for now.

If you look at the package.json file, you can now see D3 listed as a dependency.

Also, if you open the node_modules folder and refresh it, you can see that all of the files for D3 that are now part of the project.

Now this has installed D3 in the project, but pbiviz is not yet aware that this code needs to get bundled in the custom visual.

To set that up, you can open pbiviz.json and locate the externalJS element.

This element holds a list of all the external files you want to bundle with your custom visual.

Although there are a lot of files in the D3 folder, we only care about one particular file.

And that the “node_modules/d3/d3.min.js” file.

This is the minified version of the D3 JavaScript library and it contains everything you need in a tiny package.

So that’s one down, two to go.

The next library you need to install is not actually a library.

What we need now is the typescript typings file for D3.

A typescript typings file is a definition file that allows typescript to use non-typescript libraries, such as D3, without throwing a fit.

Unlike vanilla JavaScript, Typescript is a strongly typed language, so it generally complains about anything it does not know about, and this is so by design.

However, this poses a problem when you want to use external JavaScript libraries in your typescript code.

Typing files are the solution to this problem.

A typings file for a given library contains strongly typed descriptions of the types used that library, in a way that typescript can understand, thus enabling the use of vanilla JavaScript libraries in your typescript code.

And as a bonus, you also get auto-completion if your editor supports it.

To install the typings for D3 version 3, you can type: npm install @types/d3@3 –save

This tells npm to go and fetch the typings for D3 version 3 from its repository.

You can see on the package.json file you now have a new dependency for types/d3.

You can also see some new files under node_modules.

Here you have the typings file itself, and you can see it’s fairly long.

You now just have to include this file in the typescript compiler settings, so typescript and the editor know that they should use this file as well.

For that, you can open the tsconfig.json file and locate the files element.

Then, just the add the path to the file here.

That’s node_modules/@types/d3/index.d.ts

And that’s it for the typings file, two down, one to go.

Now the last you’re going to install is a CSS framework.

Now this isn’t absolutely required, but it can help style charts and interactive elements later on.

For this course, we will go with the Bootstrap CSS framework.

To install it, well, you guessed it, you just need to run npm again.

This time, you can run npm install bootstrap –save

Again, this tells npm to fetch the bootstrap files and install them on your project.

And again, you can now see some files in the node_modules folder.

The one we are interested in though, is this one, the bootstrap.css file.

Now you need to tell pbiviz to bundle this with the visual.

The way you do that with CSS files is by opening this visual.less file.

Then add this to the top of the file.

This tells the less compiler to go and fetch that CSS file when compiling the style sheet for the visual.

And with this, you’re all done.

On the next video, you’ll finally start doing some charting with some static data.