diff --git a/docs/graph3d/index.html b/docs/graph3d/index.html index 974e2d27..85829ad1 100644 --- a/docs/graph3d/index.html +++ b/docs/graph3d/index.html @@ -498,6 +498,38 @@ var options = { + + tooltipStyle + Object + +
+{ 
+  content: {
+    padding: '10px',
+    border: '1px solid #4d4d4d',
+    color: '#1a1a1a',
+    background: 'rgba(255,255,255,0.7)',
+    borderRadius: '2px',
+    boxShadow: '5px 5px 10px rgba(128,128,128,0.5)'
+  },
+  line: {
+    height: '40px',
+    width: '0',
+    borderLeft: '1px solid #4d4d4d'
+  },
+  dot: {
+    height: '0',
+    width: '0',
+    border: '5px solid #4d4d4d',
+    borderRadius: '5px'
+  }
+}
+ + Tooltip style properties. + Provided properties will be merged with the default object. + + + valueMax number @@ -547,14 +579,18 @@ var options = { xMax number - none - The maximum value for the x-axis. + from data + The maximum value for the x-axis. + If not set, the largest value for x in the data set is used. + xMin number - none - The minimum value for the x-axis. + from data + The minimum value for the x-axis. + If not set, the smallest value for x in the data set is used. + xStep @@ -590,14 +626,18 @@ var options = { yMax number - none - The maximum value for the y-axis. + from data + The maximum value for the y-axis. + If not set, the largest value for y in the data set is used. + yMin number - none - The minimum value for the y-axis. + from data + The minimum value for the y-axis. + If not set, the smallest value for y in the data set is used. + yStep @@ -615,16 +655,20 @@ var options = { - zMin + zMax number - none - The minimum value for the z-axis. + from data + The maximum value for the z-axis. + If not set, the largest value for z in the data set is used. + - zMax + zMin number - none - The maximum value for the z-axis. + from data + The minimum value for the z-axis. + If not set, the smallest value for z in the data set is used. + zStep diff --git a/docs/timeline/index.html b/docs/timeline/index.html index 7ec093ae..b69d05bd 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -357,7 +357,7 @@ var items = new vis.DataSet([ editable.updateTime boolean no - If true, items can be dragged to another moment int time. See section Editing Items for a detailed explanation. + If true, items can be dragged to another moment in time. See section Editing Items for a detailed explanation. @@ -1044,7 +1044,7 @@ function (option, path) { template function none - A template function used to generate the contents of the items. The function is called by the Timeline with an items' data as the first argument and the item element as the second, and must return HTML code, a string or a template as result. When the option template is specified, the items do not need to have a field content. See section Templates for a detailed explanation. + A template function used to generate the contents of the items. The function is called by the Timeline with an items' data as the first argument, the item element as the second argument and the edited data as the third argument, and must return HTML code, a string or a template as result. When the option template is specified, the items do not need to have a field content. See section Templates for a detailed explanation. @@ -1439,15 +1439,21 @@ document.getElementById('myTimeline').onclick = function (event) { - zoomIn(percentage) + zoomIn(percentage [, options]) none - Zoom in the current visible window. The parameter percentage can be a Number and must be between 0 and 1. If the parameter value of percentage is null, the window will be left unchanged. + Zoom in the current visible window. The parameter percentage can be a Number and must be between 0 and 1. If the parameter value of percentage is null, the window will be left unchanged. Available options: + - zoomOut(percentage) + zoomOut(percentage [, options]) none - Zoom out the current visible window. The parameter percentage can be a Number and must be between 0 and 1. If the parameter value of percentage is null, the window will be left unchanged. + Zoom out the current visible window. The parameter percentage can be a Number and must be between 0 and 1. If the parameter value of percentage is null, the window will be left unchanged. Available options: + @@ -1698,6 +1704,14 @@ var items = new vis.DataSet([ ]); +

+ Individual manipulation actions (updateTime, updateGroup and remove) can also be set on individual items. If any of the item-level + actions are specified (and overrideItems is not false) then that takes precedence over the settings at the timeline level. Current behavior is + that if any of the item-level actions are not specified, those items get undefined value (rather than inheriting from the timeline level). This may change + in future major releases, and code that specifies all item level values will handle major release changes better. That is, instead of using + editable: {updateTime : true}, use editable: {updateTime : true, updateGroup: false, remove: false}. +

+

One can specify callback functions to validate changes made by the user. There are a number of callback functions for this purpose:

@@ -1743,11 +1757,11 @@ var items = new vis.DataSet([

Templates

- Timeline supports templates to format item contents. Any template engine (such as handlebars or mustache) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as argument, and outputs formatted HTML: + Timeline supports templates to format item contents. Any template engine (such as handlebars or mustache) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as the first argument, the item element as the second argument and the edited data as the third argument, and outputs formatted HTML: 

var options = {
-  template: function (item) {
+  template: function (item, element, data) {
     var html = ... // generate HTML markup for this item
     return html;
   }
@@ -1759,8 +1773,11 @@ var items = new vis.DataSet([
   The HTML for an item can be created manually:
 
 
var options = {
-  template: function (item) {
-    return '<h1>' + item.header + '</h1><p>' + item.description + '</p>';
+  template: function (item, element, data) {
+    return '<h1>' + item.header + data.moving?' '+ data.start:'' + '</h1><p>' + item.description + '</p>';
+  },
+  onMoving: function (item, callback) {
+    item.moving = true;
   }
 };
 

@@ -1795,7 +1812,7 @@ var template = Handlebars.compile(source);
 You can use a React component for the templates by rendering them to the templates' element directly:
 
 
-  template: function (item, element) {
+  template: function (item, element, data) {
     return ReactDOM.render(<b>{item.content}</b>, element);
   },
 

@@ -1814,7 +1831,7 @@ var templates = {
 };
 
 var options = {
-  template: function (item) {
+  template: function (item, element, data) {
     var template = templates[item.template];  // choose the right template
     return template(item);                    // execute the template
   }
diff --git a/examples/graph3d/11_tooltips.html b/examples/graph3d/11_tooltips.html
index 67d84443..d2821071 100644
--- a/examples/graph3d/11_tooltips.html
+++ b/examples/graph3d/11_tooltips.html
@@ -64,12 +64,26 @@
         showShadow: false,
 
         // Option tooltip can be true, false, or a function returning a string with HTML contents
-        //tooltip: true,
         tooltip: function (point) {
           // parameter point contains properties x, y, z, and data
           // data is the original object passed to the point constructor
           return 'value: ' + point.z + '
' + point.data.extra;
         },
+  
+        // Tooltip default styling can be overridden
+        tooltipStyle: {
+          content: {
+            background    : 'rgba(255, 255, 255, 0.7)',
+            padding       : '10px',
+            borderRadius  : '10px'
+          },
+          line: {
+            borderLeft    : '1px dotted rgba(0, 0, 0, 0.5)'
+          },
+          dot: {
+            border        : '5px solid rgba(0, 0, 0, 0.5)'
+          }
+        },
 
         keepAspectRatio: true,
         verticalRatio: 0.5
diff --git a/examples/timeline/editing/individualEditableItems.html b/examples/timeline/editing/individualEditableItems.html
index ef7f0987..095c1574 100644
--- a/examples/timeline/editing/individualEditableItems.html
+++ b/examples/timeline/editing/individualEditableItems.html
@@ -34,7 +34,7 @@
 

 
 
 
-
\ No newline at end of file
+
diff --git a/examples/timeline/editing/tooltipOnItemChange.html b/examples/timeline/editing/tooltipOnItemChange.html
index dd72fb79..fbdcb33b 100644
--- a/examples/timeline/editing/tooltipOnItemChange.html
+++ b/examples/timeline/editing/tooltipOnItemChange.html
@@ -2,6 +2,7 @@
 
   Timeline | Tooltip on item onUpdateTime Option
 
+  
   
   
 
@@ -63,20 +64,20 @@
     editable: true
   };
 
-  var options1 = Object.assign({
+  var options1 = jQuery.extend(options, {
     tooltipOnItemUpdateTime: true
-  }, options)
+  })
   var container1 = document.getElementById('mytimeline1');
   timeline1 = new vis.Timeline(container1, items, null, options1);
 
-  var options2 = Object.assign({
+  var options2 = jQuery.extend(options, {
     orientation: 'top',
     tooltipOnItemUpdateTime: {
       template: function(item) {
         return 'html template for tooltip with item.start: ' + item.start; 
       }
     }
-  }, options)
+  })
   var container2 = document.getElementById('mytimeline2');
   timeline2 = new vis.Timeline(container2, items, null, options2);
 
@@ -117,10 +118,10 @@
   }
 
 
-  var options3 = Object.assign({
+  var options3 = jQuery.extend(options, {
     orientation: 'top',
     tooltipOnItemUpdateTime: true
-  }, options)
+  })
   var container3 = document.getElementById('mytimeline3');
   timeline3 = new vis.Timeline(container3, itemsWithGroups, groups, options3);
 
diff --git a/examples/timeline/other/rtl.html b/examples/timeline/other/rtl.html
index b6a33d8b..7939c51c 100644
--- a/examples/timeline/other/rtl.html
+++ b/examples/timeline/other/rtl.html
@@ -3,6 +3,7 @@
 
   Timeline | RTL example
 
+  
   
   
   
@@ -39,10 +40,10 @@
     height: '300px',
   };
 
-  var options1 = Object.assign({}, options)
+  var options1 = jQuery.extend(options, {})
   var timeline1 = new vis.Timeline(container1, items, options1);
 
-  var options2 = Object.assign({rtl: true}, options)
+  var options2 = jQuery.extend(options, {rtl: true})
   var timeline2 = new vis.Timeline(container2, items, options2);
 
 
diff --git a/examples/timeline/other/verticalScroll.html b/examples/timeline/other/verticalScroll.html
index 3ebec29b..1aebae6f 100644
--- a/examples/timeline/other/verticalScroll.html
+++ b/examples/timeline/other/verticalScroll.html
@@ -2,6 +2,7 @@
 
   Timeline | Vertical Scroll Option
 
+  
   
   
 
@@ -75,11 +76,11 @@ zoomKey: 'ctrlKey'
 
   // create a Timeline
 
-  options1 = Object.assign({}, options)
+  options1 = jQuery.extend(options, {});
   var container1 = document.getElementById('mytimeline1');
   timeline1 = new vis.Timeline(container1, items, groups, options1);
 
-  options2 = Object.assign({horizontalScroll: true}, options)
+  options2 = jQuery.extend(options, {horizontalScroll: true});
   var container2 = document.getElementById('mytimeline2');
   timeline2 = new vis.Timeline(container2, items, groups, options2);
 
diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js
index 7a1884cc..e24ed2e4 100755
--- a/lib/graph3d/Graph3d.js
+++ b/lib/graph3d/Graph3d.js
@@ -67,6 +67,29 @@ var DEFAULTS = {
 
   style            : Graph3d.STYLE.DOT,
   tooltip          : false,
+
+  tooltipStyle     : {
+      content : {
+        padding       : '10px',
+        border        : '1px solid #4d4d4d',
+        color         : '#1a1a1a',
+        background    : 'rgba(255,255,255,0.7)',
+        borderRadius  : '2px',
+        boxShadow     : '5px 5px 10px rgba(128,128,128,0.5)'
+      },
+      line    : {
+        height        : '40px',
+        width         : '0',
+        borderLeft    : '1px solid #4d4d4d'
+      },
+      dot     : {
+        height        : '0',
+        width         : '0',
+        border        : '5px solid #4d4d4d',
+        borderRadius  : '5px'
+      }
+  },
+
   showLegend       : autoByDefault, // determined by graph style
   backgroundColor  : autoByDefault,
 
@@ -2314,26 +2337,16 @@ Graph3d.prototype._showTooltip = function (dataPoint) {
 
   if (!this.tooltip) {
     content = document.createElement('div');
+    Object.assign(content.style, {}, this.tooltipStyle.content);
     content.style.position = 'absolute';
-    content.style.padding = '10px';
-    content.style.border = '1px solid #4d4d4d';
-    content.style.color = '#1a1a1a';
-    content.style.background = 'rgba(255,255,255,0.7)';
-    content.style.borderRadius = '2px';
-    content.style.boxShadow = '5px 5px 10px rgba(128,128,128,0.5)';
-
+    
     line = document.createElement('div');
+    Object.assign(line.style, {}, this.tooltipStyle.line);
     line.style.position = 'absolute';
-    line.style.height = '40px';
-    line.style.width = '0';
-    line.style.borderLeft = '1px solid #4d4d4d';
 
     dot = document.createElement('div');
+    Object.assign(dot.style, {}, this.tooltipStyle.dot);
     dot.style.position = 'absolute';
-    dot.style.height = '0';
-    dot.style.width = '0';
-    dot.style.border = '5px solid #4d4d4d';
-    dot.style.borderRadius = '5px';
 
     this.tooltip = {
       dataPoint: null,
diff --git a/lib/graph3d/Settings.js b/lib/graph3d/Settings.js
index 75566748..484a40b0 100755
--- a/lib/graph3d/Settings.js
+++ b/lib/graph3d/Settings.js
@@ -2,6 +2,7 @@
 // This modules handles the options for Graph3d.
 //
 ////////////////////////////////////////////////////////////////////////////////
+var util = require('../util');
 var Camera  = require('./Camera');
 var Point3d = require('./Point3d');
 
@@ -69,7 +70,7 @@ var OPTIONKEYS = [
   'axisColor',
   'gridColor',
   'xCenter',
-  'yCenter'
+  'yCenter',
 ];
 
 
@@ -115,7 +116,6 @@ function isEmpty(obj) {
 }
 
 
-
 /**
  * Make first letter of parameter upper case.
  *
@@ -241,7 +241,6 @@ function setOptions(options, dst) {
     throw new Error('DEFAULTS not set for module Settings');
   }
 
-
   // Handle the parameters which can be simply copied over
   safeCopy(options, dst, OPTIONKEYS);
   safeCopy(options, dst, PREFIXEDOPTIONKEYS, 'default');
@@ -250,7 +249,6 @@ function setOptions(options, dst) {
   setSpecialSettings(options, dst);
 }
 
-
 /**
  * Special handling for certain parameters
  *
@@ -274,6 +272,10 @@ function setSpecialSettings(src, dst) {
   if (src.onclick != undefined) {
     dst.onclick_callback = src.onclick;
   }
+
+  if (src.tooltipStyle !== undefined) {
+    util.selectiveDeepExtend(['tooltipStyle'], dst, src);
+  }
 }
 
 
diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
index 0d42edf5..01bf3993 100644
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@@ -708,8 +708,15 @@ Core.prototype.getWindow = function() {
 /**
  * Zoom in the window such that given time is centered on screen.
  * @param {Number} percentage - must be between [0..1]
+ * @param {Object} [options]  Available options:
+ *                                `animation: boolean | {duration: number, easingFunction: string}`
+ *                                    If true (default), the range is animated
+ *                                    smoothly to the new window. An object can be
+ *                                    provided to specify duration and easing function.
+ *                                    Default duration is 500 ms, and default easing
+ *                                    function is 'easeInOutQuad'.
  */
-Core.prototype.zoomIn = function(percentage) {
+Core.prototype.zoomIn = function(percentage, options) {
   if (!percentage || percentage < 0 || percentage > 1) return
   var range = this.getWindow();
   var start = range.start.valueOf();
@@ -720,17 +727,21 @@ Core.prototype.zoomIn = function(percentage) {
   var newStart = start + distance;
   var newEnd = end - distance;
 
-  this.setWindow({
-    start   : newStart,
-    end     : newEnd
-  });
+  this.setWindow(newStart, newEnd, options);
 };
 
 /**
  * Zoom out the window such that given time is centered on screen.
  * @param {Number} percentage - must be between [0..1]
+ * @param {Object} [options]  Available options:
+ *                                `animation: boolean | {duration: number, easingFunction: string}`
+ *                                    If true (default), the range is animated
+ *                                    smoothly to the new window. An object can be
+ *                                    provided to specify duration and easing function.
+ *                                    Default duration is 500 ms, and default easing
+ *                                    function is 'easeInOutQuad'.
  */
-Core.prototype.zoomOut = function(percentage) {
+Core.prototype.zoomOut = function(percentage, options) {
   if (!percentage || percentage < 0 || percentage > 1) return
   var range = this.getWindow();
   var start = range.start.valueOf();
@@ -739,10 +750,7 @@ Core.prototype.zoomOut = function(percentage) {
   var newStart = start - interval * percentage / 2;
   var newEnd = end + interval * percentage / 2;
 
-  this.setWindow({
-    start   : newStart,
-    end     : newEnd
-  });
+  this.setWindow(newStart, newEnd, options);
 };
 
 /**
diff --git a/lib/timeline/TimeStep.js b/lib/timeline/TimeStep.js
index 2ea1a4fa..d0f230f6 100644
--- a/lib/timeline/TimeStep.js
+++ b/lib/timeline/TimeStep.js
@@ -521,6 +521,9 @@ TimeStep.prototype.getLabelMinor = function(date) {
   if (date == undefined) {
     date = this.current;
   }
+  if (date instanceof Date) {
+    date = this.moment(date)
+  }
 
   if (typeof(this.format.minorLabels) === "function") {
     return this.format.minorLabels(date, this.scale, this.step);
@@ -540,7 +543,10 @@ TimeStep.prototype.getLabelMajor = function(date) {
   if (date == undefined) {
     date = this.current;
   }
-  
+  if (date instanceof Date) {
+    date = this.moment(date)
+  }
+
   if (typeof(this.format.majorLabels) === "function") {
     return this.format.majorLabels(date, this.scale, this.step);
   }
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index 28d610f5..d3f670fe 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@@ -1157,7 +1157,8 @@ ItemSet.prototype._orderNestedGroups = function(groupIds) {
       var nestedGroups = this.groupsData.get({
         filter: function(nestedGroup) {
           return nestedGroup.nestedInGroup == groupId;
-        }
+        },
+        order: this.options.groupOrder
       });
       var nestedGroupIds = nestedGroups.map(function(nestedGroup) { return nestedGroup.id })
       newGroupIdsOrder = newGroupIdsOrder.concat(nestedGroupIds);
diff --git a/lib/timeline/component/item/BackgroundItem.js b/lib/timeline/component/item/BackgroundItem.js
index f0255415..a4ec1bd9 100644
--- a/lib/timeline/component/item/BackgroundItem.js
+++ b/lib/timeline/component/item/BackgroundItem.js
@@ -143,6 +143,7 @@ BackgroundItem.prototype.repositionX = RangeItem.prototype.repositionX;
  */
 BackgroundItem.prototype.repositionY = function(margin) {
   var height;
+  var orientation = this.options.orientation.item;
 
   // special positioning for subgroups
   if (this.data.subgroup !== undefined) {
@@ -154,7 +155,6 @@ BackgroundItem.prototype.repositionY = function(margin) {
 
     this.dom.box.style.height = this.parent.subgroups[itemSubgroup].height + 'px';
 
-    var orientation = this.options.orientation.item;
     if (orientation == 'top') { 
       this.dom.box.style.top = this.parent.top + this.parent.subgroups[itemSubgroup].top + 'px';
     } else {
@@ -170,8 +170,8 @@ BackgroundItem.prototype.repositionY = function(margin) {
       height = Math.max(this.parent.height,
           this.parent.itemSet.body.domProps.center.height,
           this.parent.itemSet.body.domProps.centerContainer.height);
+      this.dom.box.style.bottom = orientation == 'bottom' ? '0' : '';
       this.dom.box.style.top = orientation == 'top' ? '0' : '';
-      this.dom.box.style.bottom = orientation == 'top' ? '' : '0';
     }
     else {
       height = this.parent.height;