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/data/dataset.html | 8 +- www/lib/vis/docs/graph2d/index.html | 2 +- www/lib/vis/docs/graph3d/index.html | 13 ++- www/lib/vis/docs/network/edges.html | 14 ++- www/lib/vis/docs/network/index.html | 108 ++++++++++++++++++----- www/lib/vis/docs/timeline/index.html | 162 ++++++++++++++++++++++++++++------- 6 files changed, 244 insertions(+), 63 deletions(-) (limited to 'www/lib/vis/docs') diff --git a/www/lib/vis/docs/data/dataset.html b/www/lib/vis/docs/data/dataset.html index 3f90ead4..af0f2b4d 100644 --- a/www/lib/vis/docs/data/dataset.html +++ b/www/lib/vis/docs/data/dataset.html @@ -598,9 +598,11 @@ function (event, properties, senderId) { update, and remove, properties is always an object containing a property items, which contains an array with the ids of the affected - items. The update event has an extra field oldData - containing the original data of the updated items, and a field data - containing the changes: the properties of the items that are being updated. + items. The update and remove events have an extra + field oldData containing the original data of the items in the + dataset before the items were updated or removed. The update + event also contains a field data containing the changes: + the properties of the items that are being updated. diff --git a/www/lib/vis/docs/graph2d/index.html b/www/lib/vis/docs/graph2d/index.html index ed062202..8f07e20a 100644 --- a/www/lib/vis/docs/graph2d/index.html +++ b/www/lib/vis/docs/graph2d/index.html @@ -1202,7 +1202,7 @@ function (option, path) { 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. The callback function is invoked as callback(properties), where properties is an object containing event specific properties. See section Events for more information. diff --git a/www/lib/vis/docs/graph3d/index.html b/www/lib/vis/docs/graph3d/index.html index c0e604a7..429e2a98 100644 --- a/www/lib/vis/docs/graph3d/index.html +++ b/www/lib/vis/docs/graph3d/index.html @@ -435,6 +435,14 @@ var options = { when drawn in perspective. + + showLegend + boolean + none + If true, a legend is drawn for the graph (if the graph type supports it). + By default a legend is drawn for dot and dot-color style graphs. + + showShadow boolean @@ -466,7 +474,8 @@ var options = { The contents of the tooltip can be customized by providing a callback function as tooltip. In this case the function is called with an object containing parameters x, - y, and z argument, + y, z, and data + (the source JS object for the point) as an argument, and must return a string which may contain HTML. @@ -796,4 +805,4 @@ graph3d.on('cameraPositionChange', onCameraPositionChange); - \ No newline at end of file + diff --git a/www/lib/vis/docs/network/edges.html b/www/lib/vis/docs/network/edges.html index 42c132ac..423f9a45 100644 --- a/www/lib/vis/docs/network/edges.html +++ b/www/lib/vis/docs/network/edges.html @@ -115,9 +115,9 @@ var options = { edges:{ arrows: { - to: {enabled: false, scaleFactor:1}, - middle: {enabled: false, scaleFactor:1}, - from: {enabled: false, scaleFactor:1} + to: {enabled: false, scaleFactor:1, type:'arrow'}, + middle: {enabled: false, scaleFactor:1, type:'arrow'}, + from: {enabled: false, scaleFactor:1, type:'arrow'} }, arrowStrikethrough: true, color: { @@ -243,6 +243,12 @@ network.setOptions(options); 1 The scale factor allows you to change the size of the arrowhead. + + arrows.to.type + String + arrow + The type of endpoint. Default is arrow. Also possible is circle. + arrows.middle Object or Boolean @@ -703,4 +709,4 @@ var options: { - \ No newline at end of file + diff --git a/www/lib/vis/docs/network/index.html b/www/lib/vis/docs/network/index.html index bd7d7c3c..cfd03d64 100644 --- a/www/lib/vis/docs/network/index.html +++ b/www/lib/vis/docs/network/index.html @@ -210,7 +210,20 @@

Modules
Options
Methods
Method Reference +
- Global
- Canvas
- Clustering
- Layout
- Manipulation
- Information
- Physics
- Selection
- Viewport
- Configurator
+
Events

Importing Data

'en'

'de'

'es'

'nl'

locales - section below

'en'

'de'

'es'

'it'

'nl'

'pt-br'

'ru'

locales section below

network.clustering.findNode('fred')

['A','B','C','fred']

allowSingleNodeCluster : true

+    clusterNodeProperties: {
+        allowSingleNodeCluster: true
+    }
+

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:

start

end

content

group

className

group

className

editable

style

order

selectable

true

Global methods for the network.
Methods related to the canvas.
Set the size of the canvas. This is automatically done on a window resize.
Clustering
getClusteredEdges( + `String baseEdgeId`) +
Returns: Array	Similiar to `findNode` in that it returns all the edge ids that were created from the provided edge during clustering +
getBaseEdge( + `String clusteredEdgeId`) +
Returns: Value	When a clusteredEdgeId is available, this method will return the original baseEdgeId provided in `data.edges` + ie. After clustering the 'SelectEdge' event is fired but provides only the clustered edge. This method can then be used to return the baseEdgeId. +
updateEdge( + `String startEdgeId, Object options`) +
Returns: none	Visible edges between clustered nodes are not the same edge as the ones provided in `data.edges` passed on `network` creation + With each layer of clustering, copies of the edges between clusters are created and the previous edges are hidden, until the cluster is opened. + This method takes an edgeId (ie. a base edgeId from data.edges) and applys the options to it and any edges that were created from it while clustering. Example: + `network.clustering.updateEdge(originalEdge.id, {color : '#aa0000'});` + This would turn the base edge and any subsequent edges red, so when opening clusters the edges will all be the same color. +
updateClusteredNode( + `String clusteredNodeId, Object options`) +
Returns: none	Clustered Nodes when created are not contained in the original `data.nodes` passed on `network` creation + This method updates the cluster node. Example: + `network.clustering.updateClusteredNode(clusteredNodeId, {shape : 'star'});` +
isCluster( `String nodeId`) @@ -649,7 +709,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
Layout
Manipulation methods to use the manipulation system without GUI.
Methods to get information on nodes and edges.
Physics methods to control when the simulation should run.
Selection methods for nodes and edges.
setSelection( - `Object selection`, + `Object selection`, `[Object options]`)
Methods to control the viewport for zoom and animation.
Returns: none	Programatically release the focussed node.
Methods to use with the configurator module.
clusterEdgeProperties
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) +}
groupOrderSwap	Function	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.
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
multiselectPerGroup	boolean	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	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	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	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	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.
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
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.
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.

percentage

Number

percentage

Number

percentage

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);
 });

 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
+      
+        
+          item: hovered item id
+          event: the original mouseover event
+        
+      
+      Fired when the user moves the mouse over an item.
+    
+
+    
+      itemout
+      
+        
+          item: hovered item id
+          event: the original mouseout event
+        
+      
+      Fired when the user moves the mouse out of an item.
+    
+
     
       timechange
       
@@ -1528,7 +1598,9 @@ var items = new vis.DataSet([
   
   
     item: the item being manipulated
-    callback: a callback function which must be invoked to report back. The callback must be invoked as callback(item or null). Here, item can contain changes to the passed item. Parameter `item` typically contains fields `content`, `start`, and optionally `end`. The type of `start` and `end` is determined by the DataSet type configuration and is `Date` by default.  When invoked as callback(null), the action will be cancelled.
+    callback: a callback function which must be invoked to report back. The callback must be invoked as callback(item) or callback(null).
+    Here, item can contain changes to the passed item. Parameter item typically contains fields `content`, `start`, and optionally `end`. The type of `start`
+    and `end` is determined by the DataSet type configuration and is `Date` by default.  When invoked as callback(null), the action will be cancelled.
   
 
   
@@ -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