Ngx-charts: Visibility observer causing performance issues

[SamVerschueren]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
When using ngx-charts, I noticed in my profiling tab that something was running every 50ms. I tracked it down to the VisibilityObserver.

This is what it looks like.

I'm not exactly sure what the observer does, but my dashboard is showing 6 charts and it looks like the UI becomes kinda unresponsive because of this.

Expected behavior
/

Reproduction of the problem
/

What is the motivation / use case for changing the behavior?
Performance issue

Please tell us about your environment:
macOS, VS Code, Angular-CLI

• ngx-charts version: 6.0.2

• Angular version: 4.x

• Browser: all

• Language: TypeScript

[SamVerschueren]

I noticed that this has something to do with the offsetHeight and offsetWidth (on this line) being 0. I'm trying to set display: block on the charts to see what it gives and on certain charts it works, on others it doesn't.

[SamVerschueren]

This is how I fixed it. It feels really hacky though and somehow I think it should be solved in this library. This made sure those values are not 0 and prevents the VisibilityObserver to trigger an infinite loop.

    ngx-charts-advanced-pie-chart,
    ngx-charts-number-card,
    ngx-charts-bar-vertical,
    ngx-charts-bar-horizontal,
    ngx-charts-tree-map,
    ngx-charts-charts {
        display: block;
        min-height: 1px;
    }

[marjan-georgiev]

The visibility observer was added to handle issues like this #170.
It emits an event when the chart becomes visible and rendered on the page, so it can update properly. It currently runs every 100 ms.
We could try increasing the interval, or add an option to disable it in cases where we are sure we are not going to need it.

[SamVerschueren]

It just looks like the calculation is not entirely correct. It takes the chart component and asks for the clientWidth and clientHeight, but components in Angular are not (if I'm not mistaken) display: block which means that the chart components always have a size of 0. Hence the "hack" I used to make them a block element which solved the issue for the width, but not always for the height. That's why I added a min-height.

[shah-dhaval]

Please add this to documentation so anyone face issue set width height