blocks browser when no tasks given (empty array)

[Daniel Ruf]

Describe the bug
When we provide an empty array for the tasks the browser is loading forever but does not respond / hangs.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
It should not hang when an empty tasks array is used.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
VueJS

[Daniel Ruf]

Following is thrown then:

[skanehira]

@DanielRuf @neuronetio
I have same problem...
Is there a solution or alternative?

[ym]

I figured this out. Check the code below.

gantt-elastic/src/GanttElastic.vue

Lines 1326 to 1352 in e93210e

     prepareDates() { 
       let firstTaskTime = Number.MAX_SAFE_INTEGER; 
       let lastTaskTime = 0; 
       for (let index = 0, len = this.state.tasks.length; index < len; index++) { 
         let task = this.state.tasks[index]; 
         if (task.startTime < firstTaskTime) { 
           firstTaskTime = task.startTime; 
         } 
         if (task.startTime + task.duration > lastTaskTime) { 
           lastTaskTime = task.startTime + task.duration; 
         } 
       } 
       this.state.options.times.firstTaskTime = firstTaskTime; 
       this.state.options.times.lastTaskTime = lastTaskTime; 
       this.state.options.times.firstTime = dayjs(firstTaskTime) 
         .locale(this.state.options.locale.name) 
         .startOf('day') 
         .subtract(this.state.options.scope.before, 'days') 
         .startOf('day') 
         .valueOf(); 
       this.state.options.times.lastTime = dayjs(lastTaskTime) 
         .locale(this.state.options.locale.name) 
         .endOf('day') 
         .add(this.state.options.scope.after, 'days') 
         .endOf('day') 
         .valueOf(); 
     }, 

If no tasks given, the firstTaskTime will be Number.MAX_SAFE_INTEGER and the lastTaskTime will be 0. They are both invalid time ms.

We can set reasonable values to them when no tasks given. Fix could like below (set the default time range from today to 7 days later ):

let firstTaskTime = Number.MAX_SAFE_INTEGER;
      let lastTaskTime = 0;
      if (this.state.tasks.length === 0 ) {
        firstTaskTime = dayjs().hour(0).minute(0).second(0).toDate().getTime();
        lastTaskTime = dayjs().hour(0).minute(0).second(0).add(7, 'day').toDate().getTime();
      } else {
        for (let index = 0, len = this.state.tasks.length; index < len; index++) {
          let task = this.state.tasks[index];
          if (task.startTime < firstTaskTime) {
            firstTaskTime = task.startTime;
          }
          if (task.startTime + task.duration > lastTaskTime) {
            lastTaskTime = task.startTime + task.duration;
          }
        }
      }

@neuronetio I will give a PR later. Could you please help reviewing it? Thanks!

[ym]

Here is the pr: #101

[Nikko Aldrich Monroe]

I figured this out. Check the code below.

gantt-elastic/src/GanttElastic.vue

Lines 1326 to 1352 in e93210e

     prepareDates() { 
       let firstTaskTime = Number.MAX_SAFE_INTEGER; 
       let lastTaskTime = 0; 
       for (let index = 0, len = this.state.tasks.length; index < len; index++) { 
         let task = this.state.tasks[index]; 
         if (task.startTime < firstTaskTime) { 
           firstTaskTime = task.startTime; 
         } 
         if (task.startTime + task.duration > lastTaskTime) { 
           lastTaskTime = task.startTime + task.duration; 
         } 
       } 
       this.state.options.times.firstTaskTime = firstTaskTime; 
       this.state.options.times.lastTaskTime = lastTaskTime; 
       this.state.options.times.firstTime = dayjs(firstTaskTime) 
         .locale(this.state.options.locale.name) 
         .startOf('day') 
         .subtract(this.state.options.scope.before, 'days') 
         .startOf('day') 
         .valueOf(); 
       this.state.options.times.lastTime = dayjs(lastTaskTime) 
         .locale(this.state.options.locale.name) 
         .endOf('day') 
         .add(this.state.options.scope.after, 'days') 
         .endOf('day') 
         .valueOf(); 
     }, 

If no tasks given, the firstTaskTime will be Number.MAX_SAFE_INTEGER and the lastTaskTime will be 0. They are both invalid time ms.

We can set reasonable values to them when no tasks given. Fix could like below (set the default time range from today to 7 days later ):

let firstTaskTime = Number.MAX_SAFE_INTEGER;
      let lastTaskTime = 0;
      if (this.state.tasks.length === 0 ) {
        firstTaskTime = dayjs().hour(0).minute(0).second(0).toDate().getTime();
        lastTaskTime = dayjs().hour(0).minute(0).second(0).add(7, 'day').toDate().getTime();
      } else {
        for (let index = 0, len = this.state.tasks.length; index < len; index++) {
          let task = this.state.tasks[index];
          if (task.startTime < firstTaskTime) {
            firstTaskTime = task.startTime;
          }
          if (task.startTime + task.duration > lastTaskTime) {
            lastTaskTime = task.startTime + task.duration;
          }
        }
      }

@neuronetio I will give a PR later. Could you please help reviewing it? Thanks!

My gantt is working now. Nice! thanks