Fix for the issue 1005

(https://github.com/mermaid-js/mermaid/issues/1005)
A new attribute 'order' has been introduced in the task which records
the serial number of task in the script.
In ganttRenderer.js, the tasks are sorted by stratTime attribute.
The function which calculates 'y' for task rectangles, lables etc.
has been modified to correctly position it.

src/diagrams/gantt/ganttDb.js

@@ -17,6 +17,9 @@ const tags = ['active', 'done', 'crit', 'milestone'];
 let funs = [];
 let inclusiveEndDates = false;
 
+// The serial order of the task in the script
+let lastOrder = 0;
+
 export const clear = function() {
   sections = [];
   tasks = [];
@@ -32,6 +35,7 @@ export const clear = function() {
   todayMarker = '';
   excludes = [];
   inclusiveEndDates = false;
+  lastOrder = 0;
 };
 
 export const setAxisFormat = function(txt) {
@@ -374,6 +378,9 @@ export const addTask = function(descr, data) {
   rawTask.done = taskInfo.done;
   rawTask.crit = taskInfo.crit;
   rawTask.milestone = taskInfo.milestone;
+  rawTask.order = lastOrder;
+
+  lastOrder++;
 
   const pos = rawTasks.push(rawTask);
 

src/diagrams/gantt/ganttRenderer.js

@@ -80,6 +80,23 @@ export const draw = function(text, id) {
 
   categories = checkUnique(categories);
 
+  function taskCompare(a, b) {
+    const taskA = a.startTime;
+    const taskB = b.startTime;
+  
+    let result = 0;
+    if (taskA > taskB) {
+      result = 1;
+    } else if (taskA < taskB) {
+      result = -1;
+    }
+    return result;
+  }
+
+  // Sort the task array using the above taskCompare() so that
+  // tasks are created based on their order of startTime
+  taskArray.sort(taskCompare);
+
   makeGant(taskArray, w, h);
   if (typeof conf.useWidth !== 'undefined') {
     elem.setAttribute('width', w);
@@ -119,7 +136,7 @@ export const draw = function(text, id) {
       .append('rect')
       .attr('x', 0)
       .attr('y', function(d, i) {
-        return i * theGap + theTopPad - 2;
+        return d.order * theGap + theTopPad - 2;
       })
       .attr('width', function() {
         return w - conf.rightPadding / 2;
@@ -160,7 +177,7 @@ export const draw = function(text, id) {
         return timeScale(d.startTime) + theSidePad;
       })
       .attr('y', function(d, i) {
-        return i * theGap + theTopPad;
+        return  d.order * theGap + theTopPad;
       })
       .attr('width', function(d) {
         if (d.milestone) {
@@ -263,7 +280,7 @@ export const draw = function(text, id) {
         }
       })
       .attr('y', function(d, i) {
-        return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad;
+        return d.order * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad;
       })
       .attr('text-height', theBarHeight)
       .attr('class', function(d) {
@@ -280,6 +297,7 @@ export const draw = function(text, id) {
         }
 
         let secNum = 0;
+        console.log(conf);
         for (let i = 0; i < categories.length; i++) {
           if (d.type === categories[i]) {
             secNum = i % conf.numberSectionStyles;