Issue: How can PrimeNg Charts be updated asynchronously?
Situation: I have a dropdown menu that should trigger a chart refresh based on the user's selection.
I believed I had the solution figured out, understanding Angular change detection and realizing I needed to reassign an object for changes to be recognized. However, after exploring various charts and attempting different solutions, I discovered that the problem was more complex than anticipated.
While looking into ng2-charts, which utilizes directives from charts.js, I found workaround solutions in Angular. Here is an example snippet from their code:
/**
* (My assumption): For Angular to detect dataset changes,
* it needs to directly modify the dataset variable.
* One possible method is to clone the data, make changes, and then
* assign it back;
**/
Despite their approach of stringifying and reparsing data to create a cloned copy, which worked for them, I attempted the same with PrimeNg without success.
In other instances, methods like .slice() on the chart data or direct access to CHART_DIRECTIVES followed by .update() were used. Some waited to draw the chart until data was loaded asynchronously, but this only occurred once and did not satisfy my requirements. Why should I practice Test Driven Development and how should I start?
The data exists in the background, and I need to find a way to update the chart so that Angular properly acknowledges the data changes.