Improve performance by running outside of ngZone

[DavidMarquezF]

In order to do the "magic" of change detection, angular uses zone.js. This patches a lot of functions, like hover, requestAnimationFrame and others and tells angular to rerun changeDetection.

Right now the chart runs inside the angular zone which means that all requestAnimationFrame, hover for tooltips, clicks, etc. will trigger change detection. I don't think they should as this causes a big hit in performance for something that is not really needed since apexchart.js already runs without angular intervention.

To get an idea, see the console output, which says how many change detection cycles have ran:

Prior to this change, pressing the button add series: After this change:

To solve this I run the rendering of the chart outside of the angular zone which means that it will not detect these calls.

However I am not sure of the following:

• [ ] Do functions like updateSeries, addSeries, etc. trigger rendering themselves? If so, we should also run them outside the angular zone
• [ ] Should we also add OnPush to the component? This would further increase performance, since it would only check for changes on the component if an input reference changed. Do we only need to know if the reference changed or also if a property has changed?

[junedchhipa]

Hey, thanks for your contribution!

To answer your first question, yes, updateSeries, addSeries in ApexCharts context trigger a re-render themselves. And to answer your second question, we need to only know if the reference provided to the chart component changed to trigger a re-render.

[DavidMarquezF]

Perfect, then this pull-request should be complete now. We now run all the functions outside the angular zone and since we only care about an input reference change, I set the strategy to OnPush. In theory everything should still work without any issues and with much better performance, closer to the one of the native apexcharts.js

[DavidMarquezF]

Any idea of when this could be released @junedchhipa ?