Greetings and thank you for taking the time to read my query.
Within my Vue component, named 'interactiveChart', there is a specific sequence of actions that occur when mounted:
I begin by initializing various components such as the db manager and tool manager.
I then proceed to call this.run(); in a specific order:
- run() ->
- (inside run) this.fetch->
- then-> -logic goes here- || catch-> -handling error- ->
- (inside run again) this.render(), which essentially renders the chart.
Following these initial steps, I have event handlers set up within mounted that respond to specific events. After setting up these event listeners, I call this.render() again because some events may alter chart options. However, the challenge arises when different events require data for multiple ids, not just one. To address this, I use an array called idNotations to store all the ids needed for data parsing and employ a for of loop within this.run() to fetch data for each id. The issue I'm encountering is:
the function this.render() inside this.run() gets executed multiple times if multiple ids are given, resulting in the chart reloading repeatedly momentarily before displaying correctly. The data itself is displayed accurately, but the chart reloads before all data for each id is fetched. The desired outcome is to execute render() only once, after all promises have been fulfilled. Moving render() outside the for of loop doesn't work because run() is not asynchronous. How can this issue be resolved?
mounted() {
console.log('Function Call: mounted()');
//Initialization
this.selectedTimeSpan = timeSpansArray.find((el) => el.timeSpan == '5Y');
this.mdg2Client = globalMdg2ClientFactory.createMdg2Client();
this.highchartOptions = this.getHighchartsOptions();
this.run();
/**
* Events Below
*/
//When Timespan Changes
this.$root.$on('chartZoom', (payload) => {
console.log('[Event Emitted] - Timespan Changed');
this.interactiveChart.showLoading('Loading Data..');
this.selectedTimeSpan = timeSpansArray.find(
(el) => el.timeSpan === payload.timeSpan
);
this.run();
});
//When Chart Type Changes
this.$root.$on('chart-type', (payload) => {
console.log('[Event Emitted] - Chart Type/Data Changed', payload);
...