updated subgroups to have specific indexes for sorting later on

examples/timeline/30_subgroups.html

@@ -48,13 +48,13 @@
         {id: 'B', content:'1',start: '2014-01-22', end: '2014-01-23', type: 'background', group:'foo', className: 'negative'},
         {id: 0, content: 'item 4', start: '2014-01-20', end: '2014-01-22',group:'foo'},
 
-        {id: 'ab', content:'1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:0},
-        {id: 'bb', content:'1',start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:0},
-        {id: 1, content: '0', start: '2014-01-25 12:00:00', end: '2014-01-26 12:00:00',group:'bar', subgroup:0},
-        {id: 'aab', content:'1',start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:1},
-        {id: 'bab', content:'1',start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:1},
+        {id: 'ab', content:'1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:'banana'},
+        {id: 'bb', content:'1',start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:'banana'},
+        {id: 1, content: '0', start: '2014-01-25 12:00:00', end: '2014-01-26 12:00:00',group:'bar', subgroup:'banana'},
+        {id: 'aab', content:'1',start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:'putty'},
+        {id: 'bab', content:'1',start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:'putty'},
         {id: 'bdab', content:'1',start: '2014-01-29', end: '2014-01-30', type: 'background', className: 'negative',group:'bar'},
-        {id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:1},
+        {id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:'putty'},
     ]);
 
     var container = document.getElementById('visualization');

lib/timeline/Stack.js

@@ -89,10 +89,10 @@ exports.nostack = function(items, margin, subgroups) {
   for (i = 0, iMax = items.length; i < iMax; i++) {
     if (items[i].data.subgroup !== undefined) {
       newTop = margin.axis;
-      for (var subgroupIdx in subgroups) {
-        if (subgroups.hasOwnProperty(subgroupIdx)) {
-          if (subgroups[subgroupIdx].visible == true && subgroupIdx < items[i].data.subgroup) {
-            newTop += subgroups[subgroupIdx].height + margin.item.vertical;
+      for (var subgroup in subgroups) {
+        if (subgroups.hasOwnProperty(subgroup)) {
+          if (subgroups[subgroup].visible == true && subgroups[subgroup].index < subgroups[items[i].data.subgroup].index) {
+            newTop += subgroups[subgroup].height + margin.item.vertical;
           }
         }
       }

lib/timeline/component/Group.js

@@ -284,9 +284,11 @@ Group.prototype.add = function(item) {
   item.setParent(this);
 
   // add to
+  var index = 0;
   if (item.data.subgroup !== undefined) {
     if (this.subgroups[item.data.subgroup] === undefined) {
-      this.subgroups[item.data.subgroup] = {height:0, visible: false};
+      this.subgroups[item.data.subgroup] = {height:0, visible: false, index:index};
+      index++;
     }
   }
 

lib/timeline/component/item/BackgroundItem.js

@@ -145,38 +145,39 @@ BackgroundItem.prototype.repositionY = function(margin) {
 
   // special positioning for subgroups
   if (this.data.subgroup !== undefined) {
-    var subgroup = this.data.subgroup;
+    var itemSubgroup = this.data.subgroup;
     var subgroups = this.parent.subgroups;
+    var subgroupIndex = subgroups[itemSubgroup].index;
     // if the orientation is top, we need to take the difference in height into account.
     if (onTop == true) {
       // the first subgroup will have to account for the distance from the top to the first item.
-      height = this.parent.subgroups[subgroup].height + margin.item.vertical;
-      height += subgroup == 0 ? margin.axis - 0.5*margin.item.vertical : 0;
+      height = this.parent.subgroups[itemSubgroup].height + margin.item.vertical;
+      height += subgroupIndex == 0 ? margin.axis - 0.5*margin.item.vertical : 0;
       var newTop = this.parent.top;
-      for (var subgroupIdx in subgroups) {
-        if (subgroups.hasOwnProperty(subgroupIdx)) {
-          if (subgroups[subgroupIdx].visible == true && subgroupIdx < subgroup) {
-            newTop += subgroups[subgroupIdx].height + margin.item.vertical;
+      for (var subgroup in subgroups) {
+        if (subgroups.hasOwnProperty(subgroup)) {
+          if (subgroups[subgroup].visible == true && subgroups[subgroup].index < subgroupIndex) {
+            newTop += subgroups[subgroup].height + margin.item.vertical;
           }
         }
       }
 
       // the others will have to be offset downwards with this same distance.
-      newTop += subgroup != 0 ? margin.axis - 0.5 * margin.item.vertical : 0;
+      newTop += subgroupIndex != 0 ? margin.axis - 0.5 * margin.item.vertical : 0;
       this.dom.box.style.top = newTop + 'px';
       this.dom.box.style.bottom = '';
     }
     // and when the orientation is bottom:
     else {
       var newTop = this.parent.top;
-      for (var subgroupIdx in subgroups) {
-        if (subgroups.hasOwnProperty(subgroupIdx)) {
-          if (subgroups[subgroupIdx].visible == true && subgroupIdx > subgroup) {
-            newTop += subgroups[subgroupIdx].height + margin.item.vertical;
+      for (var subgroup in subgroups) {
+        if (subgroups.hasOwnProperty(subgroup)) {
+          if (subgroups[subgroup].visible == true && subgroups[subgroup].index > subgroupIndex) {
+            newTop += subgroups[subgroup].height + margin.item.vertical;
           }
         }
       }
-      height = this.parent.subgroups[subgroup].height + margin.item.vertical;
+      height = this.parent.subgroups[itemSubgroup].height + margin.item.vertical;
       this.dom.box.style.top = newTop + 'px';
       this.dom.box.style.bottom = '';
     }