Added an example showing custom ordering of groups

10 years ago · 8c5fe02e41
--- a/examples/timeline/05_groups.html
+++ b/examples/timeline/05_groups.html
@ -60,7 +60,7 @@
  // create visualization
  var container = document.getElementById('visualization');
  var options = {
    groupOrder: 'content'
    groupOrder: 'content'  // groupOrder can be a property name or a sorting function
  };

  var timeline = new vis.Timeline(container);
--- a/examples/timeline/09_order_groups.html
+++ b/examples/timeline/09_order_groups.html
@ -0,0 +1,67 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Order groups</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }

    #visualization {
      box-sizing: border-box;
      width: 100%;
      height: 300px;
    }
  </style>

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <p>
  This example demonstrate custom ordering of groups.
 </p>
 <div id="visualization"></div>

 <script>
  var groups = new vis.DataSet();
  groups.add([
    {id: 0, content: 'First', value: 1},
    {id: 1, content: 'Third', value: 3},
    {id: 2, content: 'Second', value: 2}
  ]);

  // create a dataset with items
  var items = new vis.DataSet();
  items.add([
    {id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17)},
    {id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19)},
    {id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16)},
    {id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23)},
    {id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22)},
    {id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24)}
  ]);

  // create visualization
  var container = document.getElementById('visualization');
  var options = {
    // option groupOrder can be a property name or a sort function
    // the sort function must compare two groups and return a value
    //     > 0 when a > b
    //     < 0 when a < b
    //       0 when a == b
    groupOrder: function (a, b) {
      return a.value - b.value;
    }
  };

  var timeline = new vis.Timeline(container);
  timeline.setOptions(options);
  timeline.setGroups(groups);
  timeline.setItems(items);

 </script>
 </body>
 </html>
--- a/examples/timeline/index.html
+++ b/examples/timeline/index.html
@ -20,6 +20,7 @@
  <p><a href="06_event_listeners.html">06_event_listeners.html</a></p>
  <p><a href="07_custom_time_bar.html">07_custom_time_bar.html</a></p>
  <p><a href="08_edit_items.html">08_edit_items.html</a></p>
  <p><a href="09_order_groups.html">09_order_groups.html</a></p>

 </div>
 </body>
--- a/src/timeline/component/Group.js
+++ b/src/timeline/component/Group.js
@ -91,6 +91,7 @@ Group.prototype.setItems = function setItems(itemsData) {
  if (this.itemSet) {
    // remove current item set
    this.itemSet.setItems();
    this.itemSet.hide();
    this.groupPanel.frame.removeChild(this.itemSet.getFrame());
    this.itemSet = null;
  }
@ -129,16 +130,14 @@ Group.prototype.show = function show() {
    this.labelPanel.frame.appendChild(this.dom.label);
  }

  if (this.itemSet) {
    this.itemSet.show();
  }

  var itemSetFrame = this.itemSet && this.itemSet.getFrame();
  if (itemSetFrame) {
    if (itemSetFrame.parentNode) {
      itemSetFrame.parentNode.removeChild(itemSetFrame);
    }
    this.groupPanel.frame.appendChild(itemSetFrame);

    this.itemSet.show();
  }
 };

--- a/test/timeline.html
+++ b/test/timeline.html
@ -113,15 +113,9 @@
  });
  */

  items.on('add', function (nodes) {
    console.log('add', nodes);
  });
  items.on('update', function (nodes) {
    console.log('update', nodes);
  });
  items.on('remove', function (nodes) {
    console.log('remove', nodes);
  });
  items.on('add',    console.log.bind(console));
  items.on('update', console.log.bind(console));
  items.on('remove', console.log.bind(console));

 </script>
 </body>
--- a/test/timeline_groups.html
+++ b/test/timeline_groups.html
@ -107,25 +107,13 @@
  });
  */

  items.on('add', function (nodes) {
    console.log('items add', nodes);
  });
  items.on('update', function (nodes) {
    console.log('items update', nodes);
  });
  items.on('remove', function (nodes) {
    console.log('items remove', nodes);
  });
  items.on('add',    console.log.bind(console));
  items.on('update', console.log.bind(console));
  items.on('remove', console.log.bind(console));

  groups.on('add', function (nodes) {
    console.log('groups add', nodes);
  });
  groups.on('update', function (nodes) {
    console.log('groups update', nodes);
  });
  groups.on('remove', function (nodes) {
    console.log('groups remove', nodes);
  });
  groups.on('add',    console.log.bind(console));
  groups.on('update', console.log.bind(console));
  groups.on('remove', console.log.bind(console));

 </script>
 </body>