Implemented ordering for groups

examples/timeline/05_groups.html

@@ -26,6 +26,13 @@
     var groupCount = 3;
     var itemCount = 20;
 
+    // create a dataset with groups
+    var names = ['John', 'Alston', 'Lee', 'Grant'];
+    var groups = new vis.DataSet();
+    for (var g = 0; g < groupCount; g++) {
+        groups.add({id: g, content: names[g]});
+    }
+
     // create a dataset with items
     var items = new vis.DataSet();
     for (var i = 0; i < itemCount; i++) {
@@ -34,19 +41,18 @@
         items.add({
             id: i,
             group: group,
-            content: 'item ' + i,
+            content: 'item ' + i +
+                    ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
             start: start,
             type: 'box'
         });
     }
 
-    var groups = new vis.DataSet();
-    for (var g = 0; g < groupCount; g++) {
-        groups.add({id: g, content: 'Group ' + g});
-    }
-
+    // create visualization
     var container = document.getElementById('visualization');
-    var options = {};
+    var options = {
+        groupsOrder: 'content'
+    };
 
     var timeline = new vis.Timeline(container);
     timeline.setOptions(options);

src/component/groupset.js

@@ -19,7 +19,7 @@ function GroupSet(parent, depends, options) {
     this.itemsData = null;  // DataSet with items
     this.groupsData = null; // DataSet with groups
 
-    this.groups = [];  // array with groups
+    this.groups = {};       // map with groups
 
     // changes in groups are queued  key/value map containing id/action
     this.queue = {};
@@ -43,6 +43,7 @@ GroupSet.prototype = new Panel();
 /**
  * Set options for the GroupSet. Existing options will be extended/overwritten.
  * @param {Object} [options] The following options are available:
+ *                           {String | function} groupsOrder
  *                           TODO: describe options
  */
 GroupSet.prototype.setOptions = Component.prototype.setOptions;
@@ -58,9 +59,12 @@ GroupSet.prototype.setRange = function (range) {
 GroupSet.prototype.setItems = function setItems(items) {
     this.itemsData = items;
 
-    this.groups.forEach(function (group) {
-        group.setItems(items);
-    });
+    for (var id in this.groups) {
+        if (this.groups.hasOwnProperty(id)) {
+            var group = this.groups[id];
+            group.setItems(items);
+        }
+    }
 };
 
 /**
@@ -188,17 +192,7 @@ GroupSet.prototype.repaint = function repaint() {
     if (ids.length) {
         ids.forEach(function (id) {
             var action = queue[id];
-
-            // find group
-            var group = null;
-            var groupIndex = -1;
-            for (var i = 0; i < groups.length; i++) {
-                if (groups[i].groupId == id) {
-                    group = groups[i];
-                    groupIndex = i;
-                    break;
-                }
-            }
+            var group = groups[id];
 
             //noinspection FallthroughInSwitchStatementJS
             switch (action) {
@@ -208,12 +202,13 @@ GroupSet.prototype.repaint = function repaint() {
                         var groupOptions = Object.create(me.options);
                         group = new Group(me, id, groupOptions);
                         group.setItems(me.itemsData); // attach items data
-                        groups.push(group);
+                        groups[id] = group;
 
                         me.controller.add(group);
                     }
 
                     // TODO: update group data
+                    group.data = groupsData.get(id);
 
                     delete queue[id];
                     break;
@@ -221,7 +216,7 @@ GroupSet.prototype.repaint = function repaint() {
                 case 'remove':
                     if (group) {
                         group.setItems(); // detach items data
-                        groups.splice(groupIndex, 1);
+                        delete groups[id];
 
                         me.controller.remove(group);
                     }
@@ -239,19 +234,25 @@ GroupSet.prototype.repaint = function repaint() {
         //this.depends = this.groups; // TODO: gives a circular reference through the parent
 
         // TODO: apply dependencies of the groupset
-        this.groups.forEach(function (group, index) {
-            var prevGroup = me.groups[index - 1],
-                top = 0;
-            if (prevGroup) {
-                top = function () {
-                    // TODO: top must reckon with options.maxHeight
-                    return prevGroup.top + prevGroup.height;
-                }
-            }
-            group.setOptions({
-                top: top
-            });
+
+        // update the top positions of the groups in the correct order
+        var orderedGroups = this.groupsData.getIds({
+            order: this.options.groupsOrder
         });
+        for (var i = 0; i < orderedGroups.length; i++) {
+            (function (group, prevGroup) {
+                var top = 0;
+                if (prevGroup) {
+                    top = function () {
+                        // TODO: top must reckon with options.maxHeight
+                        return prevGroup.top + prevGroup.height;
+                    }
+                }
+                group.setOptions({
+                    top: top
+                });
+            })(groups[orderedGroups[i]], groups[orderedGroups[i - 1]]);
+        }
 
         changed++;
     }
@@ -290,9 +291,13 @@ GroupSet.prototype.reflow = function reflow() {
         else {
             // height is not specified, calculate the sum of the height of all groups
             height = 0;
-            this.groups.forEach(function (group) {
-                height += group.height;
-            });
+
+            for (var id in this.groups) {
+                if (this.groups.hasOwnProperty(id)) {
+                    var group = this.groups[id];
+                    height += group.height;
+                }
+            }
         }
         if (maxHeight != null) {
             height = Math.min(height, maxHeight);

vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 0.0.8
- * @date    2013-05-24
+ * @date    2013-05-28
  *
  * @license
  * Copyright (C) 2011-2013 Almende B.V, http://almende.com
@@ -6181,7 +6181,7 @@ function GroupSet(parent, depends, options) {
     this.itemsData = null;  // DataSet with items
     this.groupsData = null; // DataSet with groups
 
-    this.groups = [];  // array with groups
+    this.groups = {};       // map with groups
 
     // changes in groups are queued  key/value map containing id/action
     this.queue = {};
@@ -6205,6 +6205,7 @@ GroupSet.prototype = new Panel();
 /**
  * Set options for the GroupSet. Existing options will be extended/overwritten.
  * @param {Object} [options] The following options are available:
+ *                           {String | function} groupsOrder
  *                           TODO: describe options
  */
 GroupSet.prototype.setOptions = Component.prototype.setOptions;
@@ -6220,9 +6221,12 @@ GroupSet.prototype.setRange = function (range) {
 GroupSet.prototype.setItems = function setItems(items) {
     this.itemsData = items;
 
-    this.groups.forEach(function (group) {
-        group.setItems(items);
-    });
+    for (var id in this.groups) {
+        if (this.groups.hasOwnProperty(id)) {
+            var group = this.groups[id];
+            group.setItems(items);
+        }
+    }
 };
 
 /**
@@ -6350,17 +6354,7 @@ GroupSet.prototype.repaint = function repaint() {
     if (ids.length) {
         ids.forEach(function (id) {
             var action = queue[id];
-
-            // find group
-            var group = null;
-            var groupIndex = -1;
-            for (var i = 0; i < groups.length; i++) {
-                if (groups[i].groupId == id) {
-                    group = groups[i];
-                    groupIndex = i;
-                    break;
-                }
-            }
+            var group = groups[id];
 
             //noinspection FallthroughInSwitchStatementJS
             switch (action) {
@@ -6370,12 +6364,13 @@ GroupSet.prototype.repaint = function repaint() {
                         var groupOptions = Object.create(me.options);
                         group = new Group(me, id, groupOptions);
                         group.setItems(me.itemsData); // attach items data
-                        groups.push(group);
+                        groups[id] = group;
 
                         me.controller.add(group);
                     }
 
                     // TODO: update group data
+                    group.data = groupsData.get(id);
 
                     delete queue[id];
                     break;
@@ -6383,7 +6378,7 @@ GroupSet.prototype.repaint = function repaint() {
                 case 'remove':
                     if (group) {
                         group.setItems(); // detach items data
-                        groups.splice(groupIndex, 1);
+                        delete groups[id];
 
                         me.controller.remove(group);
                     }
@@ -6401,19 +6396,25 @@ GroupSet.prototype.repaint = function repaint() {
         //this.depends = this.groups; // TODO: gives a circular reference through the parent
 
         // TODO: apply dependencies of the groupset
-        this.groups.forEach(function (group, index) {
-            var prevGroup = me.groups[index - 1],
-                top = 0;
-            if (prevGroup) {
-                top = function () {
-                    // TODO: top must reckon with options.maxHeight
-                    return prevGroup.top + prevGroup.height;
-                }
-            }
-            group.setOptions({
-                top: top
-            });
+
+        // update the top positions of the groups in the correct order
+        var orderedGroups = this.groupsData.getIds({
+            order: this.options.groupsOrder
         });
+        for (var i = 0; i < orderedGroups.length; i++) {
+            (function (group, prevGroup) {
+                var top = 0;
+                if (prevGroup) {
+                    top = function () {
+                        // TODO: top must reckon with options.maxHeight
+                        return prevGroup.top + prevGroup.height;
+                    }
+                }
+                group.setOptions({
+                    top: top
+                });
+            })(groups[orderedGroups[i]], groups[orderedGroups[i - 1]]);
+        }
 
         changed++;
     }
@@ -6452,9 +6453,13 @@ GroupSet.prototype.reflow = function reflow() {
         else {
             // height is not specified, calculate the sum of the height of all groups
             height = 0;
-            this.groups.forEach(function (group) {
-                height += group.height;
-            });
+
+            for (var id in this.groups) {
+                if (this.groups.hasOwnProperty(id)) {
+                    var group = this.groups[id];
+                    height += group.height;
+                }
+            }
         }
         if (maxHeight != null) {
             height = Math.min(height, maxHeight);