Inheritance in Angular with D3js

Reducing boilerplate for creating charts

In this article, I’ll explain a way to reduce code in an Angular Application with visual d3 components.

1. Basic use of inheritance
2. Extending components from a base class
3. Others utilities

I wrote this article based on my experience from years working with Angular. Feel free to correct me in the case there is something wrong.

Introduccion

After writing some code and once you have learnt the good way of doing it and so on, writing and writing the same again and again starts to be very boring, isn’t it?.

As I said in my first post on Medium,

Angular + D3js — A better pattern for adjusting charts via CSS

the creation of charts in Angular can be very redundant and different any time. So

Don’t repeat yourself is a principle of software development aimed at reducing repetition of software patterns, replacing it with abstractions or using data normalization to avoid redundancy.

Concept behind

What we are going to do is just to create a base class component to reduce the amount of code we have to write every time for visual component in D3.

Okay, so the concept behind is inheritance. Really used in Java, but not that much in Angular, at least in components.

Very easy to explain

I got this image from https://medium.com/@uferesamuel/uml-class-diagrams-the-simple-approach-eee2d1ffc125 , great article anyway

Okay, I just apply the concept but for angular visual components with d3js. Imagine in a real app with ten or even more visual d3 components in angular like a line char, a bar chart, a serie, etc. We will reduce far enough time & effort in doing repetitive tasks.

Here, you can get the whole point of sharing basic common properties derived from a more abstract class.

Coding Part

For this article I used the same repo as in the previous one but in another branch “part2/inheritance”

ackuser/ng-d3-css-example

So just clone it, install its dependencies…and have look at it

$ git clone git@github.com:ackuser/ng-d3-css-example.git
$ npm i
$ git@github.com:ackuser/ng-d3-css-example.git
$ git checkout part2/inheritance

I added to the project a simple Bar Chart based on this

Bar Chart in D3 v5

Anyway, thanks to him

Figure out what properties we have in our base class for doing an abstraction of each visual component, the most important are

You can find a more detailed explanation on https://cs205uiuc.github.io/guidebook/d3/boilerplate.html

svg, width and height: the frame where we will do our piece of magic with d3 and its sizes as well

g: The g SVG element is a container used to group other SVG elements

margin: we put some margin to make it clear

contentWidth, contentHeight: the real size of our draws in d3

Our code is

Magically, initialising the chart through the function “initChart” will set all our properties.

Then, for our charts we just extends from the base class and call it with super in the constructor with the super method, of course. After that, in the ngOninit cycle of Angular we call initChart ( don’t do that in the father/base class, otherwise ngOninit will be called twice). Finally, the only needed is to add the code you write for drawing your piece of d3 in the createChart method.

And that’s it!!! Really??? Yeaaa, look at how clever

$ npm start

I create a couple of address

Then, go to your browser and you’ll see the charts

http://localhost:4200/line

http://localhost:4200/bar

Conclusion

This article included all the information that you need when working with a lot of d3 visual components in Angular Applications, including:

• Basic properties in almost all charts.
• A base class for reducing boilerplate.
• How to initialise chart with it.

To achieve other tasks based on inheritance in Angular, you can go more deeply having a look at this article on alligator https://alligator.io/angular/component-inheritance/

Thanks for reading and I hope you found this article useful! You can follow me on Medium. Feel free to leave me your thoughts in the comments below. I’ll be glad to help out!