Hi,
In our angular application we are using the NGRX/store to bind the data with bryntum scheduler. With smaller no of events everything is fine. But as no of events >= 1000 we are facing the following problems
Very slow scheduler performance
All the events suddenly disappear from scheduler (It's very weird issue only happens randomly but with large data only. Our accounts having smaller events are not facing this issue)
More insights:
Version of bryntum scheduler that we are using is 5.3.1
We are using the 1 day, 1 week, 4 weeks view presets. Depending on the visible data range we are querying our ngrx/store only get the events within that range, and then we are setting the events property. the above issues are only we are facing with 4 weeks view preset might be due to large events (1000 to 2000).
We are not using the scheduler infinite scroll feature.
I am going to attach chrome performance profile that might help you to debug the blocking code.
Let me know if you need anything further, your help will be appreciated as it's continuously problem for us.
Do you see any information on the console when you have those weird behaviors that you mentioned? Anything that could help identify what's happening there?
If you could assemble a sample project with a sample of data and your configuration/presets, that also could help us to assist you on that.
Re: [ANGULAR] Poor scheduler performance
Posted: Fri Jun 02, 2023 3:57 pm
by accounts@projul.com
Sure @marcio let me work on to assemble a sample project for you.
this.scheduler.suspendRefresh();
this.scheduler.project = {
assignmentStore : {
useRawData : true,
data : this.assignmentsData
},
resourceStore : {
useRawData : true,
data : this.resourcesData
},
eventStore : {
useRawData : true,
data : this.eventsData
}
} as any;
this.scheduler.resumeRefresh(true);
await (this.scheduler.project as any).await('refresh');
Previously we were passing the events, resources & assignments properties to bryntum-scheduler angular component directly as input properties.
Now, the same performance issue exists on our calendar control as well. I tried using the same way of binding the data using calendar.project and using suspendRefresh() & resumeRefresh() methods. Can you help me with any docs to bind the big data in same way to the calendar control as well.
@marcio I am able to produce the performance issues, on megadataset https://bryntum.com/products/calendar/examples/megadataset/
example having only 1500 events per month.
On events drag & drop or going next & previous in the calendar control taking cpu to 100% for some time causing the lag. In our app when ngrx/store data updated or calendar date range change we are getting tasks data from ngrx/store and binding with calendar to refresh. This leads to app crashes.
If you will increase the events count from 1500 to 2000 you will be easily able to see the issues. Here is the demo video: https://video.projul.com/watch/DmZ9JgQMaJFTFPP3wPiYsa?
import { Calendar } from '../../build/calendar.module.js?468079';
import shared from '../_shared/shared.module.js?468079';
const
today = new Date(),
currentYear = today.getFullYear(),
eventColors = [
'#D50000', '#E67C73', '#F4511E', '#F6BF26',
'#33B679', '#0B8043', '#039BE5', '#3F51B5',
'#7986CB', '#8E24AA', '#616161'],
eventNames = [
'Quarterly Board Meeting',
'Development Meeting',
'Sales Dept Meeting',
'Interview with Julia',
'Interview with Naomi'],
events = new Array(2000);
// Create 100,000 events
for (let i = 0; i < 2000; i++) {
const
year = 2023,
month = 5,
day = Math.round(Math.random() * 31),
hour = Math.round(Math.random() * 8) + 4,
durationHours = Math.round(Math.random() * 71) + 1;
events[i] = {
name : eventNames[Math.round(Math.random() * 4)],
startDate : new Date(year, month, day, hour),
endDate : new Date(year, month, day, hour + durationHours),
eventColor : eventColors[Math.round(Math.random() * 10)],
resourceId : Math.round(Math.random() * 4)
};
}
const calendar = new Calendar({
appendTo : 'container',
// Start life looking at this date
date : new Date(),
modes : {
list : true,
month:{
allowOverlap: false,
autoRowHeight: true,
minRowHeight: 100,
}
},
mode : 'month',
eventStore : {
useRawData : true,
data : events
}
});
