Dashboard: Use c3 instead of nvd3

[floreks]

nvd3 is not maintained for a long time and uses a very old version of d3. We should switch to something that is maintained and frequently updated, i.e. c3.

[k8s-ci-robot]

@eloyekunle: GitHub didn't allow me to assign the following users: eloyekunle.

Note that only kubernetes members and repo collaborators can be assigned and that issues/PRs can only have 10 assignees at the same time.
For more information please see the contributor guide

In response to this:

/assign

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[maciaszczykm]

@eloyekunle Will you be working on it?

[eloyekunle]

@maciaszczykm Yes I will.

[maciaszczykm]

Great :)

[eloyekunle]

I'm wondering if we shouldn't use d3 directly instead of using wrappers (like nvd3 and c3).

[maciaszczykm]

@eloyekunle Would be the best IMO. Is it much effort?

[eloyekunle]

We might have to create internal utility classes for the charts we'll need, so it's moderate effort.

[floreks]

We might have to create internal utility classes for the charts we'll need, so it's moderate effort.

That's what I was trying to avoid, because then maintenance effort is bigger. Why is using some kind of framework not better?

[maciaszczykm]

@floreks In my opinion, it is good to have our own implementation if there is not too much of it. We can control everything better direct access to d3 instead of using nvd3/c3 interfaces. Additionally less popular frameworks often deprecate pretty quickly. d3 seems to be stable for a really long time.

@eloyekunle Do you have any proof of concept already so we can take a look at how much of utility classes are needed?

[eloyekunle]

@maciaszczykm No I don't have a proof of concept, but I'm working on one.

[eloyekunle]

I have a POC up at: https://github.com/eloyekunle/d3-angular-poc.

The chart implementation is at: https://github.com/eloyekunle/d3-angular-poc/blob/master/charts/index.js, and it is used at: https://github.com/eloyekunle/d3-angular-poc/blob/master/src/app/chart/chart.component.ts#L23.

This implementation is heavily influenced by nvd3:

• Each chart type (line/bar/pie) is implemented as a model, and configurable via chainable methods.
• Properties can be shared across charts (e.g. width/height) and related chart types can share and inherit properties. e.g. The Donut chart type can inherit some properties from the Pie chart type.

The POC only has plain Pie and Donut charts now, without labels/legends/tooltips.

Donut Chart similar to those on Node Detail Page:

With a few modifications, the charts on the Node detail page can be replaced with this implementation, and we can add newer chart types as needs arise.

[floreks]

This looks really nice. I'd prefer however to use Typescript also for charts wrapper to easily include that as part of our source code (if possible). Maybe as a Factory/Service that we could use to build charts. All necessary logic could be enclosed in i.e. ChartsModule.