From 77faead4e948f901fa6ca9951f085bbe045bae68 Mon Sep 17 00:00:00 2001 From: Pliable Pixels Date: Mon, 7 Nov 2016 15:43:13 -0500 Subject: Updated vis library to 4.17 and also linked to only graph2d-timeline CSS and JS --- www/lib/vis/docs/timeline/index.html | 162 ++++++++++++++++++++++++++++------- 1 file changed, 130 insertions(+), 32 deletions(-) (limited to 'www/lib/vis/docs/timeline') diff --git a/www/lib/vis/docs/timeline/index.html b/www/lib/vis/docs/timeline/index.html index f0b4d742..b7a14a1c 100644 --- a/www/lib/vis/docs/timeline/index.html +++ b/www/lib/vis/docs/timeline/index.html @@ -31,13 +31,13 @@ - + - + - + @@ -162,8 +162,8 @@

Loading

- Install or download the vis.js library. - in a subfolder of your project. Include the libraries script and css files in the + Install or download the vis.js library + in a subfolder of your project. Include the library's script and css files in the head of your html code:

@@ -213,7 +213,7 @@ or a DataView (offering 1 way data binding). Items are regular objects and can contain the properties start, end (optional), content, - group (optional), className (optional), + group (optional), className (optional), editable (optional), and style (optional).

@@ -557,7 +557,7 @@ function (option, path) { format - Object + Object or Function none Apply custom date formatting of the labels on the time axis. The default value of format is: @@ -583,8 +583,16 @@ function (option, path) { year: '' } } + For values which not provided in the customized options.format, the default values will be used. All available formatting syntax is described in the docs of moment.js. +
+ You can also use a function format for each label. The function accepts as arguments the date, scale and step in that order, and expects to return a string for the label. + + 
function format({
+  minorLabels: Function(date: Date, scale: Number, step: Number),
+  majorLabels: Function(date: Date, scale: Number, step: Number)
+}
@@ -624,7 +632,7 @@ function (option, path) { If no order properties are provided, the order will be undetermined. - + groupOrderSwap Function @@ -640,7 +648,7 @@ function (option, path) { groupTemplate function none - A template function used to generate the contents of the groups. The function is called by the Timeline with a groups data as argument, and must return HTML code as result. When the option groupTemplate is specified, the groups 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 groups. The function is called by the Timeline with a groups data as the first argument and the group element as the second, and must return HTML code as result. When the option groupTemplate is specified, the groups do not need to have a field content. See section Templates for a detailed explanation. @@ -667,6 +675,15 @@ function (option, path) { + + horizontalScroll + Boolean + false + This option allows you to scroll horizontally to move backwards and forwards in the time range. + Only applicable when option zoomCtrl is defined or zoomable is false. Notice that defining this option as true will override verticalScroll scroll event but not eliminate the vertical scrollbar. + + + itemsAlwaysDraggable boolean @@ -787,7 +804,7 @@ function (option, path) { Only applicable when option selectable is true. - + multiselectPerGroup boolean @@ -805,7 +822,7 @@ function (option, path) { Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section Editing Items for more information. Only applicable when both options selectable and editable.add are set true. - + onAddGroup function @@ -829,7 +846,7 @@ function (option, path) { Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section Editing Items for more information. Only applicable when both options selectable and editable.updateTime or editable.updateGroup are set true. - + onMoveGroup function @@ -853,7 +870,7 @@ function (option, path) { Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section Editing Items for more information. Only applicable when both options selectable and editable.remove are set true. - + onRemoveGroup function @@ -895,6 +912,12 @@ function (option, path) { Orientation of the timeline items: 'top' or 'bottom' (default). Determines whether items are aligned to the top or bottom of the Timeline. + + rtl + boolean + false + If true, the timeline will be right-to-left. Note: you can achieve rtl timeline by defining a parent node with dir="rtl". The timeline knows to take the nearest parent node direction and apply it. Notice that the timeline will prefer the option.rtl over any parent dir="rtl" + selectable @@ -964,14 +987,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 argument, and must return HTML code 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. - - - - throttleRedraw - number - 0 - Limit the maximum number of redraws to once every x milliseconds. For example setting throttleRedraw to `100` milliseconds will limit the number of redraws to 10 times per second. + 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 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. @@ -1008,6 +1024,27 @@ function (option, path) { + + tooltipOnItemUpdateTime + Object/Boolean + false + Show a tooltip on updating an item's time. Note: editable.updateTime must be true + + + template + Function + none + A template function used to generate the contents of the tooltip. The function is called by the Timeline with an item data as the first argument, and must return HTML code as result. See section Templates for a detailed explanation. + + + + verticalScroll + Boolean + false + Show a vertical scroll on the side of the group list and link it to the scroll event when zoom is not triggered. Notice that defining this option as true will NOT override horizontalScroll. The scroll event will be vertically ignored, but a vertical scrollbar will be visible + + + width String or Number @@ -1187,7 +1224,7 @@ document.getElementById('myTimeline').onclick = function (event) { on(event, callback) none - Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: rangechange, rangechanged, select. The callback function is invoked as callback(properties), where properties is an object containing event specific properties. See section Events for more information. + Create an event listener. The callback function is invoked every time the event is triggered. Available events: rangechange, rangechanged, select, itemover, itemout. The callback function is invoked as callback(properties), where properties is an object containing event specific properties. See section Events for more information. @@ -1226,7 +1263,7 @@ document.getElementById('myTimeline').onclick = function (event) { none Adjust the time of a custom time bar. Parameter time can be a Date object, numeric timestamp, or ISO date string. - Parameter id is the idof the custom time bar, and is undefined by default. + Parameter id is the id of the custom time bar, and is undefined by default. @@ -1298,9 +1335,20 @@ document.getElementById('myTimeline').onclick = function (event) { - - + + zoomIn(percentage) + 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. + + + + zoomOut(percentage) + 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. + + +

Events

@@ -1314,7 +1362,7 @@ document.getElementById('myTimeline').onclick = function (event) { 

 timeline.on('select', function (properties) {
-  alert('selected items: ' + properties.nodes);
+  alert('selected items: ' + properties.items);
 });
@@ -1324,7 +1372,7 @@ timeline.on('select', function (properties) { 
 function onSelect (properties) {
-  alert('selected items: ' + properties.nodes);
+  alert('selected items: ' + properties.items);
 }
 
 // add event listener
@@ -1442,6 +1490,28 @@ timeline.off('select', onSelect);
       
     
 
+    
+      itemover
+      
+        
+      
+      Fired when the user moves the mouse over an item.
+    
+
+    
+      itemout
+      
+        
+      
+      Fired when the user moves the mouse out of an item.
+    
+
     
       timechange
       
@@ -1528,7 +1598,9 @@ var items = new vis.DataSet([
   

   
 
   

@@ -1554,7 +1626,7 @@ 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 items 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 argument, and outputs formatted HTML:
   

 
 
var options = {
@@ -1601,6 +1673,17 @@ var template = Handlebars.compile(source);
 };
 

 
+
React templates

+
+You can use a React component for the templates by rendering them to the templates' element directly:
+
+
+  template: function (item, element) {
+    return ReactDOM.render(<b>{item.content}</b>, element);
+  },
+

+
+
   
Multiple templates

 
   In order to support multiple templates, the template handler can be extended to switch between different templates, depending on a specific item property:
@@ -1640,7 +1723,7 @@ var options = {
 
   
Create a new locale

 
-  To load a locale into the Timeline not supported by default, one can add a new locale to the option locales:
+  To load a locale (that is not supported by default) into the Timeline, one can add a new locale to the option locales:
 
 
var options = {
   locales: {
@@ -1675,6 +1758,14 @@ var options = {
         en_US
       
     
+    
+      Italian
+      
+        it

+        it_IT

+        it_CH
+      
+    
     
       Dutch
       
@@ -1682,13 +1773,20 @@ var options = {
         nl_NL

         nl_BE
       
+    
+	
+      German
+      
+        de

+        de_DE

+      
     
   
 
 
   
Time zone

   

-    By default, the Timeline displays time in local time. To display a Timeline in an other time zone or in UTC, the date constructor can be overloaded via the configuration option moment, which by default is the constructor function of moment.js. More information about UTC with moment.js can be found in the docs: http://momentjs.com/docs/#/parsing/utc/.
+    By default, the Timeline displays time in local time. To display a Timeline in another time zone or in UTC, the date constructor can be overloaded via the configuration option moment, which by default is the constructor function of moment.js. More information about UTC with moment.js can be found in the docs: http://momentjs.com/docs/#/parsing/utc/.
   

 
   

@@ -1762,7 +1860,7 @@ var options = {
       Daysvis-date1, vis-date2, ..., vis-date31
     
     
-      Monthsvis-januari, vis-februari, vis-march, vis-april, vis-may, vis-june, vis-july, vis-august, vis-september, vis-october, vis-november, vis-december
+      Monthsvis-january, vis-february, vis-march, vis-april, vis-may, vis-june, vis-july, vis-august, vis-september, vis-october, vis-november, vis-december
     
     
       Yearsvis-year2014, vis-year2015, ...
-- 
cgit v1.2.3