Browse Source

Merge branch 'develop' of https://github.com/almende/vis into develop

revert-3409-performance
Yotam Berkowitz 7 years ago
parent
commit
3124d8e698
23 changed files with 280 additions and 86 deletions
  1. +87
    -0
      HISTORY.md
  2. +33
    -4
      README.md
  3. +1
    -1
      docs/network/index.html
  4. +1
    -1
      docs/timeline/index.html
  5. +1
    -1
      examples/graph2d/08_performance.html
  6. +2
    -1
      examples/network/basicUsage.html
  7. +13
    -9
      examples/network/edgeStyles/colors.html
  8. +2
    -2
      lib/DataSet.js
  9. +4
    -2
      lib/network/modules/LayoutEngine.js
  10. +4
    -3
      lib/network/modules/components/NavigationHandler.js
  11. +4
    -4
      lib/network/modules/components/edges/util/EdgeBase.js
  12. +1
    -1
      lib/network/modules/components/nodes/shapes/Circle.js
  13. +1
    -1
      lib/network/modules/components/nodes/shapes/Diamond.js
  14. +1
    -1
      lib/network/modules/components/nodes/shapes/Dot.js
  15. +2
    -2
      lib/network/modules/components/nodes/shapes/Image.js
  16. +1
    -1
      lib/network/modules/components/nodes/shapes/Star.js
  17. +9
    -2
      lib/timeline/Range.js
  18. +3
    -1
      lib/timeline/component/ItemSet.js
  19. +2
    -3
      lib/timeline/component/item/BoxItem.js
  20. +2
    -3
      lib/timeline/component/item/PointItem.js
  21. +35
    -35
      lib/timeline/optionsGraph2d.js
  22. +10
    -8
      package.json
  23. +61
    -0
      test/TimelineRange.test.js

+ 87
- 0
HISTORY.md View File

@ -1,6 +1,93 @@
# vis.js history # vis.js history
http://visjs.org http://visjs.org
## 2017-01-15, version 4.18.0
### General
- Readme improvements (#2520)
- Babel updates and fixes (#2466, #2513, #2566)
- Removed dist folder from the develop-branch (#2497)
- updated and cleaned-up npm dependencies (#2518, #2406)
- FEAT: Added CodeClimate tests (#2411)
- FEAT: Added initial Travis-CI support: https://travis-ci.org/almende/vis (#2550)
- FIX #2500: Replace { bool } with { boolean: bool } (#2501, #2506, #2581)
- FIX #2445: Fix YUI Compressor incompatibilities (#2452)
- FIX #2402: make sure a given element isn’t undefined before accessing properties (#2403)
- FIX #2560: IE11 issue 'Symbol' is undefined with babel-polyfill (#2566)
- FIX #2490: Don't pass non-string values to Date.parse (#2534)
### DataSet
- FIX: Removed event oldData items (#2535)
- FIX #2528: Fixed deleting item with id 0 (#2530)
### Network
- FIX #1911: Fix missing blur edge event (#2554)
- FIX #2478: Fix tooltip issue causing exception when node becomes cluster (#2555)
- FEAT: Change styles if element is selected (#2446)
- FEAT #2306: Add example for network onLoad animation. (#2476)
- FEAT #1845: Adding example of cursor change (#2463)
- FEAT #1603 #1628 #1936 #2298 #2384: Font styles, width and height of network nodes (#2385)
- FEAT: Add pointer position to zoom event (#2377)
- FEAT #1653 #2342: label margins for box, circle, database, icon and text nodes. (#2343)
- FEAT #2233 #2068 #1756: Edit edge without endpoint dragging, and pass label in data (#2329)
### Timeline / Graph2D
- FIX: #2522 Right button while dragging item makes items uneditable (#2582)
- FIX #2538: Major axis labels displaying wrong value (#2551)
- FEAT #2516: Added followMouse & overflowMethod to tooltip options (#2544)
- FIX: Fixed tool-tip surviving after item deleted (#2545)
- FIX #2515: Fixed hover events for HTML elements (#2539)
- FIX: Timeline.setGroups for Array (#2529)
- FIX: Error in React example when adding a ranged item (#2521)
- FEAT #226 #2421 #2429: Added mouse events for the timeline (#2473)
- FEAT #497: new stackSubgroups option (#2519, #2527)
- FEAT #338: Added HTML tool-tip support (#2498)
- FIX #2511: readded throttleRedraw option; added DEPRECATED warning (#2514)
- FEAT #2300: Added nested groups (#2416)
- FEAT #2464: Add template support for minor/major labels (#2493)
- FIX #2379: Fix initial drag (#2474)
- FIX #2102: Fix error on click for graph2D when no data is provided (#2472)
- FIX #2469: Fix graph2D render issue (#2470)
- FIX #1126: Add visibleFrameTemplate option for higher item dom content (#2437)
- FIX #2467: Fix Range ctor with optional options parameter (#2468)
- FEAT #1746: Rolling mode (#2439, #2486)
- FIX #2422: Timeline onMove callback (#2427)
- FIX #2370: IE10 drag-and-drop support (#2426)
- FIX #1906: Pass through original hammer.js events (#2420)
- FIX #2327: Add support to fixed times drag and drop (#2372)
- FIX: \_origRedraw sometimes undefined (#2399)
- FIX #2367 #2328: Group editable bug (#2368)
- FIX #2336: Mouse wheel problem on custom time element (#2366)
- FIX #2307: Timeline async initial redraw bug (#2386)
- FIX #2312: Vertical scroll bug with groups and fixed height (#2363)
- FIX #2333: Scrollbar width on browser zoom (#2344)
- Fixed #2319: Bug in TimeStep.prototype.getClassName (#2335)
- FEAT #257: Added option to change the visibility of a group (#2315)
- FEAT: More editable control of timeline items (#2305)
- FIX #2273: Cannot scroll page when zoomKey is enabled (#2301)
- FIX #2295, 2263: Issues with vertical scroll and maxHeight (#2302)
- FIX #2285: onUpdate event (#2304)
- FIX: Timeline-docs: updated group.content description to show that it can be an element (#2296)
- FIX #2251: No axis after daylight saving (#2290)
- FEAT #2256: Timeline editable can override items (#2284)
- FEAT: Graph2d performance enhancement (#2281)
### Graph3D
- FEAT #2451: Allow pass the color of points in 'dot-color' mode of Graph3D (#2489)
- FEAT: Improvement for camera 3d moving (#2340)
- FEAT: Add ability to move graph3d by left mouse button while pressing ctrl key and rotate like before (#2357)
- FIX: Fixed label disappearing bug for large axis values in graph3d (#2348)
- FIX: Fixed Grpah3D-docs: Changed "an" to "and" in graph3D docs (#2313)
- FIX #2274: Graph3d disappears when setSize is called (#2293)
- FIX: Fixed typo in index.html of Graph3D (#2286)
## 2016-11-05, version 4.17.0 ## 2016-11-05, version 4.17.0
### General ### General

+ 33
- 4
README.md View File

@ -265,10 +265,6 @@ var options = {};
var timeline = new Timeline(container, data, options); var timeline = new Timeline(container, data, options);
``` ```
Install the application dependencies via npm:
$ npm install vis moment
The application can be bundled and minified: The application can be bundled and minified:
$ browserify app.js -o dist/app-bundle.js -t babelify $ browserify app.js -o dist/app-bundle.js -t babelify
@ -289,6 +285,39 @@ And loaded into a webpage:
</html> </html>
``` ```
#### Example 4: Integrate vis.js components directly in your webpack build
You can integrate e.g. the timeline component directly in you webpack build.
Therefor you just import the component-files from root direcory (starting with "index-").
```js
var visTimeline = require('vis/index-timeline-graph2d');
var container = document.getElementById('visualization');
var data = new DataSet();
var timeline = new Timeline(container, data, {});
```
To get this to work you'll need to add the some babel-loader-setting:
```js
module: {
loaders: [{
test: /node_modules[\\\/]vis[\\\/].*\.js$/,
loader: 'babel',
query: {
cacheDirectory: true,
presets: ["es2015"],
plugins: [
"transform-es3-property-literals",
"transform-es3-member-expression-literals",
"transform-runtime"
]
}
}]
}
```
## Test ## Test
To test the library, install the project dependencies once: To test the library, install the project dependencies once:

+ 1
- 1
docs/network/index.html View File

@ -1401,7 +1401,7 @@ var options = {
</tr> </tr>
<tr><td id="event_zoom">zoom</td> <tr><td id="event_zoom">zoom</td>
<td>Object</td> <td>Object</td>
<td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in. The scale is a number greater than 0, which is the same that you get with network.getScale(), Passes an object with properties structured as:
<td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in. The scale is a number greater than 0, which is the same that you get with network.getScale(). When fired by clicking the zoom in or zoom out navigation buttons, the pointer property of the object passed will be null. Passes an object with properties structured as:
<pre class="prettyprint lang-js">{ <pre class="prettyprint lang-js">{
direction: '+'/'-', direction: '+'/'-',
scale: Number, scale: Number,

+ 1
- 1
docs/timeline/index.html View File

@ -1592,7 +1592,7 @@ timeline.off('select', onSelect);
</ul> </ul>
</td> </td>
<td>Fired after the user selects or deselects items by tapping or holding them. <td>Fired after the user selects or deselects items by tapping or holding them.
When a use taps an already selected item, the select event is fired again.
When a user taps an already selected item, the select event is fired again.
Not fired when the method <code>setSelection</code>is executed. Not fired when the method <code>setSelection</code>is executed.
</td> </td>
</tr> </tr>

+ 1
- 1
examples/graph2d/08_performance.html View File

@ -147,4 +147,4 @@
var graph2d = new vis.Graph2d(container, dataset, options); var graph2d = new vis.Graph2d(container, dataset, options);
</script> </script>
</body> </body>
</html>
</html>

+ 2
- 1
examples/network/basicUsage.html View File

@ -37,7 +37,8 @@
{from: 1, to: 3}, {from: 1, to: 3},
{from: 1, to: 2}, {from: 1, to: 2},
{from: 2, to: 4}, {from: 2, to: 4},
{from: 2, to: 5}
{from: 2, to: 5},
{from: 3, to: 3}
]); ]);
// create a network // create a network

+ 13
- 9
examples/network/edgeStyles/colors.html View File

@ -30,14 +30,14 @@
<script type="text/javascript"> <script type="text/javascript">
// create an array with nodes // create an array with nodes
var nodes = new vis.DataSet([ var nodes = new vis.DataSet([
{id: 1, label: 1, color:'#97C2FC'},
{id: 2, label: 2, color:'#FFFF00'},
{id: 3, label: 3, color:'#FB7E81'},
{id: 4, label: 4, color:'#7BE141'},
{id: 5, label: 5, color:'#6E6EFD'},
{id: 6, label: 6, color:'#C2FABC'},
{id: 7, label: 7, color:'#FFA807'},
{id: 8, label: 8, color:'#6E6EFD'}
{id: 1, label: 'node\none', shape: 'box', color:'#97C2FC'},
{id: 2, label: 'node\ntwo', shape: 'circle', color:'#FFFF00'},
{id: 3, label: 'node\nthree', shape: 'diamond', color:'#FB7E81'},
{id: 4, label: 'node\nfour', shape: 'dot', size: 10, color:'#7BE141'},
{id: 5, label: 'node\nfive', shape: 'ellipse', color:'#6E6EFD'},
{id: 6, label: 'node\nsix', shape: 'star', color:'#C2FABC'},
{id: 7, label: 'node\nseven', shape: 'triangle', color:'#FFA807'},
{id: 8, label: 'node\neight', shape: 'triangleDown', color:'#6E6EFD'}
]); ]);
// create an array with edges // create an array with edges
@ -58,7 +58,11 @@
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var options = {};
var options = {
nodes: {
shape: 'circle'
}
};
var network = new vis.Network(container, data, options); var network = new vis.Network(container, data, options);
</script> </script>

+ 2
- 2
lib/DataSet.js View File

@ -730,7 +730,7 @@ DataSet.prototype.clear = function (senderId) {
var i, len; var i, len;
var ids = Object.keys(this._data); var ids = Object.keys(this._data);
var items = []; var items = [];
for (i = 0, len = ids.length; i < len; i++) { for (i = 0, len = ids.length; i < len; i++) {
items.push(this._data[ids[i]]); items.push(this._data[ids[i]]);
} }
@ -912,7 +912,7 @@ DataSet.prototype._getItem = function (id, types) {
} }
if (!converted[this._fieldId]) { if (!converted[this._fieldId]) {
converted[this._fieldId] = id;
converted[this._fieldId] = raw.id;
} }
return converted; return converted;

+ 4
- 2
lib/network/modules/LayoutEngine.js View File

@ -381,9 +381,11 @@ class LayoutEngine {
// the main method to shift the trees // the main method to shift the trees
let shiftTrees = () => { let shiftTrees = () => {
let treeSizes = getTreeSizes(); let treeSizes = getTreeSizes();
let shiftBy = 0;
for (let i = 0; i < treeSizes.length - 1; i++) { for (let i = 0; i < treeSizes.length - 1; i++) {
let diff = treeSizes[i].max - treeSizes[i+1].min; let diff = treeSizes[i].max - treeSizes[i+1].min;
shiftTree(i + 1, diff + this.options.hierarchical.treeSpacing);
shiftBy += diff + this.options.hierarchical.treeSpacing;
shiftTree(i + 1, shiftBy);
} }
}; };
@ -1358,4 +1360,4 @@ class LayoutEngine {
} }
export default LayoutEngine;
export default LayoutEngine;

+ 4
- 3
lib/network/modules/components/NavigationHandler.js View File

@ -160,7 +160,8 @@ class NavigationHandler {
this.body.view.scale = scale; this.body.view.scale = scale;
this.body.view.translation = { x: tx, y: ty }; this.body.view.translation = { x: tx, y: ty };
this.body.emitter.emit('zoom', { direction: '+', scale: this.body.view.scale, pointer: pointer });
this.body.emitter.emit('zoom', { direction: '+', scale: this.body.view.scale, pointer: null });
} }
_zoomOut() { _zoomOut() {
var scaleOld = this.body.view.scale; var scaleOld = this.body.view.scale;
@ -172,7 +173,7 @@ class NavigationHandler {
this.body.view.scale = scale; this.body.view.scale = scale;
this.body.view.translation = { x: tx, y: ty }; this.body.view.translation = { x: tx, y: ty };
this.body.emitter.emit('zoom', { direction: '-', scale: this.body.view.scale, pointer: pointer });
this.body.emitter.emit('zoom', { direction: '-', scale: this.body.view.scale, pointer: null });
} }
@ -226,4 +227,4 @@ class NavigationHandler {
} }
export default NavigationHandler;
export default NavigationHandler;

+ 4
- 4
lib/network/modules/components/edges/util/EdgeBase.js View File

@ -57,7 +57,7 @@ class EdgeBase {
this._line(ctx, values, viaNode, fromPoint, toPoint); this._line(ctx, values, viaNode, fromPoint, toPoint);
} }
else { else {
let [x,y,radius] = this._getCircleData(ctx, values);
let [x,y,radius] = this._getCircleData(ctx);
this._circle(ctx, values, x, y, radius); this._circle(ctx, values, x, y, radius);
} }
} }
@ -83,7 +83,7 @@ class EdgeBase {
this._line(ctx, values, viaNode); this._line(ctx, values, viaNode);
} }
else { else {
let [x,y,radius] = this._getCircleData(ctx, values);
let [x,y,radius] = this._getCircleData(ctx);
this._circle(ctx, values, x, y, radius); this._circle(ctx, values, x, y, radius);
} }
@ -98,7 +98,7 @@ class EdgeBase {
ctx.dashedLine(this.from.x, this.from.y, this.to.x, this.to.y, pattern); ctx.dashedLine(this.from.x, this.from.y, this.to.x, this.to.y, pattern);
} }
else { else {
let [x,y,radius] = this._getCircleData(ctx, values);
let [x,y,radius] = this._getCircleData(ctx);
this._circle(ctx, values, x, y, radius); this._circle(ctx, values, x, y, radius);
} }
// draw shadow if enabled // draw shadow if enabled
@ -331,7 +331,7 @@ class EdgeBase {
returnValue = this._getDistanceToEdge(x1, y1, x2, y2, x3, y3, via) returnValue = this._getDistanceToEdge(x1, y1, x2, y2, x3, y3, via)
} }
else { else {
let [x,y,radius] = this._getCircleData(undefined, values);
let [x,y,radius] = this._getCircleData(undefined);
let dx = x - x3; let dx = x - x3;
let dy = y - y3; let dy = y - y3;
returnValue = Math.abs(Math.sqrt(dx * dx + dy * dy) - radius); returnValue = Math.abs(Math.sqrt(dx * dx + dy * dy) - radius);

+ 1
- 1
lib/network/modules/components/nodes/shapes/Circle.js View File

@ -35,7 +35,7 @@ class Circle extends CircleImageBase {
this.updateBoundingBox(x,y); this.updateBoundingBox(x,y);
this.labelModule.draw(ctx, this.left + this.textSize.width / 2 + this.margin.left, this.labelModule.draw(ctx, this.left + this.textSize.width / 2 + this.margin.left,
this.top + this.textSize.height / 2 + this.margin.top, selected, hover);
y, selected, hover);
} }
updateBoundingBox(x,y) { updateBoundingBox(x,y) {

+ 1
- 1
lib/network/modules/components/nodes/shapes/Diamond.js View File

@ -7,7 +7,7 @@ class Diamond extends ShapeBase {
super(options, body, labelModule) super(options, body, labelModule)
} }
resize(ctx, values, selected = this.selected, hover = this.hover) {
resize(ctx, selected = this.selected, hover = this.hover, values) {
this._resizeShape(selected, hover, values); this._resizeShape(selected, hover, values);
} }

+ 1
- 1
lib/network/modules/components/nodes/shapes/Dot.js View File

@ -7,7 +7,7 @@ class Dot extends ShapeBase {
super(options, body, labelModule) super(options, body, labelModule)
} }
resize(ctx, values, selected = this.selected, hover = this.hover) {
resize(ctx, selected = this.selected, hover = this.hover, values) {
this._resizeShape(selected, hover, values); this._resizeShape(selected, hover, values);
} }

+ 2
- 2
lib/network/modules/components/nodes/shapes/Image.js View File

@ -42,11 +42,11 @@ class Image extends CircleImageBase {
ctx.save(); ctx.save();
// if borders are zero width, they will be drawn with width 1 by default. This prevents that // if borders are zero width, they will be drawn with width 1 by default. This prevents that
if (borderWidth > 0) { if (borderWidth > 0) {
this.enableBorderDashes(ctx);
this.enableBorderDashes(ctx, values);
//draw the border //draw the border
ctx.stroke(); ctx.stroke();
//disable dashed border for other elements //disable dashed border for other elements
this.disableBorderDashes(ctx);
this.disableBorderDashes(ctx, values);
} }
ctx.restore(); ctx.restore();

+ 1
- 1
lib/network/modules/components/nodes/shapes/Star.js View File

@ -7,7 +7,7 @@ class Star extends ShapeBase {
super(options, body, labelModule) super(options, body, labelModule)
} }
resize(ctx, values, selected, hover) {
resize(ctx, selected, hover, values) {
this._resizeShape(selected, hover, values); this._resizeShape(selected, hover, values);
} }

+ 9
- 2
lib/timeline/Range.js View File

@ -15,7 +15,7 @@ var DateUtil = require('./DateUtil');
function Range(body, options) { function Range(body, options) {
var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0); var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
var start = now.clone().add(-3, 'days').valueOf(); var start = now.clone().add(-3, 'days').valueOf();
var end = now.clone().add(-3, 'days').valueOf();
var end = now.clone().add(3, 'days').valueOf();
if(options === undefined) { if(options === undefined) {
this.start = start; this.start = start;
@ -256,6 +256,13 @@ Range.prototype.setRange = function(start, end, animation, byUser, event) {
} }
}; };
/**
* Get the number of milliseconds per pixel.
*/
Range.prototype.getMillisecondsPerPixel = function() {
return (this.end - this.start) / this.body.dom.center.clientWidth;
}
/** /**
* Stop an animation * Stop an animation
* @private * @private
@ -291,7 +298,7 @@ Range.prototype._applyRange = function(start, end) {
throw new Error('Invalid end "' + end + '"'); throw new Error('Invalid end "' + end + '"');
} }
// prevent start < end
// prevent end < start
if (newEnd < newStart) { if (newEnd < newStart) {
newEnd = newStart; newEnd = newStart;
} }

+ 3
- 1
lib/timeline/component/ItemSet.js View File

@ -256,6 +256,8 @@ ItemSet.prototype._create = function(){
this.body.dom.centerContainer.addEventListener('mouseover', this._onMouseOver.bind(this)); this.body.dom.centerContainer.addEventListener('mouseover', this._onMouseOver.bind(this));
this.body.dom.centerContainer.addEventListener('mouseout', this._onMouseOut.bind(this)); this.body.dom.centerContainer.addEventListener('mouseout', this._onMouseOut.bind(this));
this.body.dom.centerContainer.addEventListener('mousemove', this._onMouseMove.bind(this)); this.body.dom.centerContainer.addEventListener('mousemove', this._onMouseMove.bind(this));
// right-click on timeline
this.body.dom.centerContainer.addEventListener('contextmenu', this._onDragEnd.bind(this));
// attach to the DOM // attach to the DOM
this.show(); this.show();
@ -1590,6 +1592,7 @@ ItemSet.prototype._moveToGroup = function(item, groupId) {
* @private * @private
*/ */
ItemSet.prototype._onDragEnd = function (event) { ItemSet.prototype._onDragEnd = function (event) {
this.touchParams.itemIsDragging = false;
if (this.touchParams.itemProps) { if (this.touchParams.itemProps) {
event.stopPropagation(); event.stopPropagation();
@ -1597,7 +1600,6 @@ ItemSet.prototype._onDragEnd = function (event) {
var dataset = this.itemsData.getDataSet(); var dataset = this.itemsData.getDataSet();
var itemProps = this.touchParams.itemProps ; var itemProps = this.touchParams.itemProps ;
this.touchParams.itemProps = null; this.touchParams.itemProps = null;
this.touchParams.itemIsDragging = false;
itemProps.forEach(function (props) { itemProps.forEach(function (props) {
var id = props.item.id; var id = props.item.id;

+ 2
- 3
lib/timeline/component/item/BoxItem.js View File

@ -37,15 +37,14 @@ BoxItem.prototype = new Item (null, null, null);
/** /**
* Check whether this item is visible inside given range * Check whether this item is visible inside given range
* @returns {{start: Number, end: Number}} range with a timestamp for start and end
* @param {{start: Number, end: Number}} range with a timestamp for start and end
* @returns {boolean} True if visible * @returns {boolean} True if visible
*/ */
BoxItem.prototype.isVisible = function(range) { BoxItem.prototype.isVisible = function(range) {
// determine visibility // determine visibility
var isVisible; var isVisible;
var align = this.options.align; var align = this.options.align;
var msPerPixel = (range.end - range.start) / range.body.dom.center.clientWidth;
var widthInMs = this.width * msPerPixel;
var widthInMs = this.width * range.getMillisecondsPerPixel();
if (align == 'right') { if (align == 'right') {
isVisible = (this.data.start.getTime() > range.start ) && (this.data.start.getTime() - widthInMs < range.end); isVisible = (this.data.start.getTime() > range.start ) && (this.data.start.getTime() - widthInMs < range.end);

+ 2
- 3
lib/timeline/component/item/PointItem.js View File

@ -38,13 +38,12 @@ PointItem.prototype = new Item (null, null, null);
/** /**
* Check whether this item is visible inside given range * Check whether this item is visible inside given range
* @returns {{start: Number, end: Number}} range with a timestamp for start and end
* @param {{start: Number, end: Number}} range with a timestamp for start and end
* @returns {boolean} True if visible * @returns {boolean} True if visible
*/ */
PointItem.prototype.isVisible = function(range) { PointItem.prototype.isVisible = function(range) {
// determine visibility // determine visibility
var msPerPixel = (range.end - range.start) / range.body.dom.center.clientWidth;
var widthInMs = this.width * msPerPixel;
var widthInMs = this.width * range.getMillisecondsPerPixel();
return (this.data.start.getTime() + widthInMs > range.start ) && (this.data.start < range.end); return (this.data.start.getTime() + widthInMs > range.start ) && (this.data.start < range.end);
}; };

+ 35
- 35
lib/timeline/optionsGraph2d.js View File

@ -18,90 +18,90 @@ let any = 'any';
let allOptions = { let allOptions = {
configure: { configure: {
enabled: {bool},
filter: {bool,'function': 'function'},
enabled: {'boolean': bool},
filter: {'boolean': bool,'function': 'function'},
container: {dom}, container: {dom},
__type__: {object,bool,'function': 'function'}
__type__: {object,'boolean': bool,'function': 'function'}
}, },
//globals : //globals :
yAxisOrientation: {string:['left','right']}, yAxisOrientation: {string:['left','right']},
defaultGroup: {string}, defaultGroup: {string},
sort: {bool},
sampling: {bool},
stack:{bool},
sort: {'boolean': bool},
sampling: {'boolean': bool},
stack:{'boolean': bool},
graphHeight: {string, number}, graphHeight: {string, number},
shaded: { shaded: {
enabled: {bool},
enabled: {'boolean': bool},
orientation: {string:['bottom','top','zero','group']}, // top, bottom, zero, group orientation: {string:['bottom','top','zero','group']}, // top, bottom, zero, group
groupId: {object}, groupId: {object},
__type__: {bool,object}
__type__: {'boolean': bool,object}
}, },
style: {string:['line','bar','points']}, // line, bar style: {string:['line','bar','points']}, // line, bar
barChart: { barChart: {
width: {number}, width: {number},
minWidth: {number}, minWidth: {number},
sideBySide: {bool},
sideBySide: {'boolean': bool},
align: {string:['left','center','right']}, align: {string:['left','center','right']},
__type__: {object} __type__: {object}
}, },
interpolation: { interpolation: {
enabled: {bool},
enabled: {'boolean': bool},
parametrization: {string:['centripetal', 'chordal','uniform']}, // uniform (alpha = 0.0), chordal (alpha = 1.0), centripetal (alpha = 0.5) parametrization: {string:['centripetal', 'chordal','uniform']}, // uniform (alpha = 0.0), chordal (alpha = 1.0), centripetal (alpha = 0.5)
alpha: {number}, alpha: {number},
__type__: {object,bool}
__type__: {object,'boolean': bool}
}, },
drawPoints: { drawPoints: {
enabled: {bool},
enabled: {'boolean': bool},
onRender: { 'function': 'function' }, onRender: { 'function': 'function' },
size: {number}, size: {number},
style: {string:['square','circle']}, // square, circle style: {string:['square','circle']}, // square, circle
__type__: {object,bool,'function': 'function'}
__type__: {object,'boolean': bool,'function': 'function'}
}, },
dataAxis: { dataAxis: {
showMinorLabels: {bool},
showMajorLabels: {bool},
icons: {bool},
showMinorLabels: {'boolean': bool},
showMajorLabels: {'boolean': bool},
icons: {'boolean': bool},
width: {string, number}, width: {string, number},
visible: {bool},
alignZeros: {bool},
visible: {'boolean': bool},
alignZeros: {'boolean': bool},
left:{ left:{
range: {min:{number},max:{number},__type__: {object}},
range: {min:{number,'undefined': 'undefined'},max:{number,'undefined': 'undefined'},__type__: {object}},
format: {'function': 'function'}, format: {'function': 'function'},
title: {text:{string,number},style:{string},__type__: {object}},
title: {text:{string,number,'undefined': 'undefined'},style:{string,'undefined': 'undefined'},__type__: {object}},
__type__: {object} __type__: {object}
}, },
right:{ right:{
range: {min:{number},max:{number},__type__: {object}},
range: {min:{number,'undefined': 'undefined'},max:{number,'undefined': 'undefined'},__type__: {object}},
format: {'function': 'function'}, format: {'function': 'function'},
title: {text:{string,number},style:{string},__type__: {object}},
title: {text:{string,number,'undefined': 'undefined'},style:{string,'undefined': 'undefined'},__type__: {object}},
__type__: {object} __type__: {object}
}, },
__type__: {object} __type__: {object}
}, },
legend: { legend: {
enabled: {bool},
icons: {bool},
enabled: {'boolean': bool},
icons: {'boolean': bool},
left: { left: {
visible: {bool},
visible: {'boolean': bool},
position: {string:['top-right','bottom-right','top-left','bottom-left']}, position: {string:['top-right','bottom-right','top-left','bottom-left']},
__type__: {object} __type__: {object}
}, },
right: { right: {
visible: {bool},
visible: {'boolean': bool},
position: {string:['top-right','bottom-right','top-left','bottom-left']}, position: {string:['top-right','bottom-right','top-left','bottom-left']},
__type__: {object} __type__: {object}
}, },
__type__: {object,bool}
__type__: {object,'boolean': bool}
}, },
groups: { groups: {
visibility: {any}, visibility: {any},
__type__: {object} __type__: {object}
}, },
autoResize: {bool},
autoResize: {'boolean': bool},
throttleRedraw: {number}, // TODO: DEPRICATED see https://github.com/almende/vis/issues/2511 throttleRedraw: {number}, // TODO: DEPRICATED see https://github.com/almende/vis/issues/2511
clickToUse: {bool},
clickToUse: {'boolean': bool},
end: {number, date, string, moment}, end: {number, date, string, moment},
format: { format: {
minorLabels: { minorLabels: {
@ -146,12 +146,12 @@ let allOptions = {
maxMinorChars: {number}, maxMinorChars: {number},
min: {date, number, string, moment}, min: {date, number, string, moment},
minHeight: {number, string}, minHeight: {number, string},
moveable: {bool},
multiselect: {bool},
moveable: {'boolean': bool},
multiselect: {'boolean': bool},
orientation: {string}, orientation: {string},
showCurrentTime: {bool},
showMajorLabels: {bool},
showMinorLabels: {bool},
showCurrentTime: {'boolean': bool},
showMajorLabels: {'boolean': bool},
showMinorLabels: {'boolean': bool},
start: {date, number, string, moment}, start: {date, number, string, moment},
timeAxis: { timeAxis: {
scale: {string,'undefined': 'undefined'}, scale: {string,'undefined': 'undefined'},
@ -159,7 +159,7 @@ let allOptions = {
__type__: {object} __type__: {object}
}, },
width: {string, number}, width: {string, number},
zoomable: {bool},
zoomable: {'boolean': bool},
zoomKey: {string: ['ctrlKey', 'altKey', 'metaKey', '']}, zoomKey: {string: ['ctrlKey', 'altKey', 'metaKey', '']},
zoomMax: {number}, zoomMax: {number},
zoomMin: {number}, zoomMin: {number},

+ 10
- 8
package.json View File

@ -1,6 +1,6 @@
{ {
"name": "vis", "name": "vis",
"version": "4.17.0-SNAPSHOT",
"version": "4.18.0-SNAPSHOT",
"description": "A dynamic, browser-based visualization library.", "description": "A dynamic, browser-based visualization library.",
"homepage": "http://visjs.org/", "homepage": "http://visjs.org/",
"license": "(Apache-2.0 OR MIT)", "license": "(Apache-2.0 OR MIT)",
@ -29,8 +29,14 @@
"watch-dev": "gulp watch --bundle" "watch-dev": "gulp watch --bundle"
}, },
"dependencies": { "dependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-polyfill": "^6.20.0", "babel-polyfill": "^6.20.0",
"babel-runtime": "^6.20.0",
"babel-plugin-transform-es3-member-expression-literals": "^6.8.0",
"babel-plugin-transform-es3-property-literals": "^6.8.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-runtime": "^6.20.0",
"emitter-component": "^1.1.1", "emitter-component": "^1.1.1",
"moment": "^2.12.0", "moment": "^2.12.0",
"propagating-hammerjs": "^1.4.6", "propagating-hammerjs": "^1.4.6",
@ -39,12 +45,6 @@
}, },
"devDependencies": { "devDependencies": {
"async": "^2.0.0-rc.2", "async": "^2.0.0-rc.2",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-transform-es3-member-expression-literals": "^6.8.0",
"babel-plugin-transform-es3-property-literals": "^6.8.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babelify": "^7.3.0", "babelify": "^7.3.0",
"clean-css": "^3.4.10", "clean-css": "^3.4.10",
"gulp": "^3.9.1", "gulp": "^3.9.1",
@ -52,7 +52,9 @@
"gulp-concat": "^2.6.0", "gulp-concat": "^2.6.0",
"gulp-rename": "^1.2.2", "gulp-rename": "^1.2.2",
"gulp-util": "^3.0.7", "gulp-util": "^3.0.7",
"jsdom": "9.9.1",
"mocha": "^3.1.2", "mocha": "^3.1.2",
"mocha-jsdom": "^1.1.0",
"rimraf": "^2.5.2", "rimraf": "^2.5.2",
"uglify-js": "^2.6.2", "uglify-js": "^2.6.2",
"uuid": "^3.0.1", "uuid": "^3.0.1",

+ 61
- 0
test/TimelineRange.test.js View File

@ -0,0 +1,61 @@
var assert = require('assert');
var vis = require('../dist/vis');
var jsdom = require('mocha-jsdom')
var moment = vis.moment;
var timeline = vis.timeline;
var Range = timeline.Range;
function buildSimpleBody() {
var body = {
dom: {
center: {
clientWidth: 1000
}
},
domProps: this.props,
emitter: {
on: function() {},
off: function() {},
emit: function() {}
},
hiddenDates: [],
util: {}
};
body.dom.rollingModeBtn = document.createElement('div');
return body;
}
describe('Timeline Range', function () {
jsdom();
it('should have start default before now', function () {
var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0).valueOf();
var range = new Range(buildSimpleBody());
assert(range.start < now, "Default start is before now");
});
it('should have end default after now', function () {
var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0).valueOf();
var range = new Range(buildSimpleBody());
assert(range.end > now, "Default end is after now");
});
it('should support custom start and end dates', function () {
var range = new Range(buildSimpleBody());
range.setRange(new Date(2017, 0, 26, 13, 26, 3, 320), new Date(2017, 3, 11, 0, 23, 35, 0), false, false, null);
assert.equal(range.start, new Date(2017, 0, 26, 13, 26, 3, 320).valueOf(), "start is as expected");
assert.equal(range.end, new Date(2017, 3, 11, 0, 23, 35, 0).valueOf(), "end is as expected");
});
it('should calculate milliseconds per pixel', function () {
var range = new Range(buildSimpleBody());
assert(range.getMillisecondsPerPixel() > 0, "positive value for milliseconds per pixel");
});
it('should calculate 1 millisecond per pixel for simple range', function () {
var range = new Range(buildSimpleBody());
range.setRange(new Date(2017, 0, 26, 13, 26, 3, 320), new Date(2017, 0, 26, 13, 26, 4, 320), false, false, null);
assert.equal(range.getMillisecondsPerPixel(), 1, "one second over 1000 pixels");
});
});

Loading…
Cancel
Save