jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

initial hiding of times, currently only one time is allowed

v3_develop
Alex de Mulder 10 years ago
parent
f7f032df0c
commit
db06332925
6 changed files with 25718 additions and 25478 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +25553
    -25461
      dist/vis.js
  2. +56
    -0
      examples/timeline/hiding_times.html
  3. +30
    -5
      lib/timeline/Core.js
  4. +56
    -6
      lib/timeline/Range.js
  5. +18
    -1
      lib/timeline/TimeStep.js
  6. +5
    -5
      lib/timeline/component/TimeAxis.js

+ 25553
- 25461
dist/vis.js
File diff suppressed because it is too large
View File


+ 56
- 0
examples/timeline/hiding_times.html View File

@ -0,0 +1,56 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Basic demo</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2014-04-20'},
{id: 2, content: 'item 2', start: '2014-04-14'},
{id: 3, content: 'item 3', start: '2014-04-18'},
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
{id: 5, content: 'item 5', start: '2014-04-26 12:00:00'},
{id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
]);
// Configuration for the Timeline
var options = {
hide:{
start: '2014-04-20 00:00:00',
end: '2014-04-26 00:00:00'},
// } [
// {
// start: '2014-04-20 00:00:00',
// end: '2014-04-26 00:00:00'
// },
// {
// start: '2014-05-20 00:00:00',
// end: '2014-05-26 00:00:00'
// }
// ],
start: '2014-04-01',
end: '2014-05-10',
height: '200px'
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 30
- 5
lib/timeline/Core.js View File

@ -173,7 +173,7 @@ Core.prototype._create = function (container) {
Core.prototype.setOptions = function (options) { Core.prototype.setOptions = function (options) {
if (options) { if (options) {
// copy the known options // copy the known options
var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation', 'clickToUse', 'dataAttributes'];
var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation', 'clickToUse', 'dataAttributes', 'hide'];
util.selectiveExtend(fields, this.options, options); util.selectiveExtend(fields, this.options, options);
if ('clickToUse' in options) { if ('clickToUse' in options) {
@ -616,11 +616,24 @@ Core.prototype.getCurrentTime = function() {
*/ */
// TODO: move this function to Range // TODO: move this function to Range
Core.prototype._toTime = function(x) { Core.prototype._toTime = function(x) {
var conversion = this.range.conversion(this.props.center.width);
return new Date(x / conversion.scale + conversion.offset);
};
var startDate = new Date(this.options.hide.start).getTime();
var endDate = new Date(this.options.hide.end).getTime();
var duration = endDate - startDate;
if (!(startDate >= this.range.start && endDate < this.range.end)) {
duration = 0;
}
var conversion = this.range.conversion(this.props.center.width, duration);
var time = new Date(x / conversion.scale + conversion.offset);
if (time >= endDate && startDate >= this.range.start && endDate < this.range.end) {
time -= duration;
}
return time;
};
/** /**
* Convert a position on the global screen (pixels) to a datetime * Convert a position on the global screen (pixels) to a datetime
* @param {int} x Position on the screen in pixels * @param {int} x Position on the screen in pixels
@ -642,11 +655,23 @@ Core.prototype._toGlobalTime = function(x) {
*/ */
// TODO: move this function to Range // TODO: move this function to Range
Core.prototype._toScreen = function(time) { Core.prototype._toScreen = function(time) {
var conversion = this.range.conversion(this.props.center.width);
var startDate = new Date(this.options.hide.start).getTime();
var endDate = new Date(this.options.hide.end).getTime();
var duration = endDate - startDate;
// if time after the cutout, and the
if (time >= endDate && startDate >= this.range.start && endDate < this.range.end) {
time -= duration;
}
else if (!(startDate >= this.range.start && endDate < this.range.end)) {
duration = 0;
}
var conversion = this.range.conversion(this.props.center.width, duration);
return (time.valueOf() - conversion.offset) * conversion.scale; return (time.valueOf() - conversion.offset) * conversion.scale;
}; };
/** /**
* Convert a datetime (Date object) into a position on the root * Convert a datetime (Date object) into a position on the root
* This is used to get the pixel density estimate for the screen, not the center panel * This is used to get the pixel density estimate for the screen, not the center panel

+ 56
- 6
lib/timeline/Range.js View File

@ -17,6 +17,7 @@ function Range(body, options) {
this.end = now.clone().add(4, 'days').valueOf(); // Number this.end = now.clone().add(4, 'days').valueOf(); // Number
this.body = body; this.body = body;
this.deltaDifference = 0;
// default options // default options
this.defaultOptions = { this.defaultOptions = {
@ -77,7 +78,7 @@ Range.prototype = new Component();
Range.prototype.setOptions = function (options) { Range.prototype.setOptions = function (options) {
if (options) { if (options) {
// copy the options that we know // copy the options that we know
var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable', 'activate'];
var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable', 'activate','hide'];
util.selectiveExtend(fields, this.options, options); util.selectiveExtend(fields, this.options, options);
if ('start' in options || 'end' in options) { if ('start' in options || 'end' in options) {
@ -301,8 +302,8 @@ Range.prototype.getRange = function() {
* @param {Number} width * @param {Number} width
* @returns {{offset: number, scale: number}} conversion * @returns {{offset: number, scale: number}} conversion
*/ */
Range.prototype.conversion = function (width) {
return Range.conversion(this.start, this.end, width);
Range.prototype.conversion = function (width, totalHidden) {
return Range.conversion(this.start, this.end, width, totalHidden);
}; };
/** /**
@ -313,11 +314,14 @@ Range.prototype.conversion = function (width) {
* @param {Number} width * @param {Number} width
* @returns {{offset: number, scale: number}} conversion * @returns {{offset: number, scale: number}} conversion
*/ */
Range.conversion = function (start, end, width) {
Range.conversion = function (start, end, width, totalHidden) {
if (totalHidden === undefined) {
totalHidden = 0;
}
if (width != 0 && (end - start != 0)) { if (width != 0 && (end - start != 0)) {
return { return {
offset: start, offset: start,
scale: width / (end - start)
scale: width / (end - start - totalHidden)
} }
} }
else { else {
@ -334,6 +338,8 @@ Range.conversion = function (start, end, width) {
* @private * @private
*/ */
Range.prototype._onDragStart = function(event) { Range.prototype._onDragStart = function(event) {
this.deltaDifference = 0;
this.previousDelta = 0;
// only allow dragging when configured as movable // only allow dragging when configured as movable
if (!this.options.moveable) return; if (!this.options.moveable) return;
@ -366,10 +372,54 @@ Range.prototype._onDrag = function (event) {
if (!this.props.touch.allowDragging) return; if (!this.props.touch.allowDragging) return;
var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY; var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY;
delta -= this.deltaDifference;
var interval = (this.props.touch.end - this.props.touch.start); var interval = (this.props.touch.end - this.props.touch.start);
// normalize dragging speed if cutout is in between.
var startDate = new Date(this.options.hide.start).getTime();
var endDate = new Date(this.options.hide.end).getTime();
var duration = endDate - startDate;
if (startDate >= this.start && endDate < this.end) {
interval -= duration;
}
var width = (direction == 'horizontal') ? this.body.domProps.center.width : this.body.domProps.center.height; var width = (direction == 'horizontal') ? this.body.domProps.center.width : this.body.domProps.center.height;
var diffRange = -delta / width * interval; var diffRange = -delta / width * interval;
this._applyRange(this.props.touch.start + diffRange, this.props.touch.end + diffRange);
// snapping times away from hidden zones
var start = this.props.touch.start + diffRange;
var end = this.props.touch.end + diffRange;
if (start >= startDate && start < endDate && this.previousDelta - delta > 0) { // if the start is entering the zone from the left
this.deltaDifference += delta;
this.props.touch.start = endDate + 1;
this.props.touch.end = end + duration; // to cancel the time subtraction events;
this._onDrag(event);
return;
}
else if (start >= startDate && start < endDate && this.previousDelta - delta < 0) { // if the start is entering the zone from the right
this.deltaDifference += delta;
this.props.touch.start = startDate - 1;
this.props.touch.end = end - duration; // to cancel the time subtraction events;
this._onDrag(event);
return;
}
else if (end >= startDate && end < endDate && this.previousDelta - delta > 0) { // if the start is entering the zone from the right
this.deltaDifference += delta;
this.props.touch.end = endDate + 1;
this.props.touch.start = start; // to cancel the time subtraction events;
this._onDrag(event);
return;
}
else if (end >= startDate && end < endDate && this.previousDelta - delta < 0) { // if the start is entering the zone from the right
this.deltaDifference += delta;
this.props.touch.end = startDate-1;
this.props.touch.start = start; // to cancel the time subtraction events;
this._onDrag(event);
return;
}
this.previousDelta = delta;
this._applyRange(start, end);
// fire a rangechange event // fire a rangechange event
this.body.emitter.emit('rangechange', { this.body.emitter.emit('rangechange', {

+ 18
- 1
lib/timeline/TimeStep.js View File

@ -26,7 +26,7 @@ var moment = require('../module/moment');
* @param {Date} [end] The end date * @param {Date} [end] The end date
* @param {Number} [minimumStep] Optional. Minimum step size in milliseconds * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
*/ */
function TimeStep(start, end, minimumStep) {
function TimeStep(start, end, minimumStep, hide) {
// variables // variables
this.current = new Date(); this.current = new Date();
this._start = new Date(); this._start = new Date();
@ -38,6 +38,11 @@ function TimeStep(start, end, minimumStep) {
// initialize the range // initialize the range
this.setRange(start, end, minimumStep); this.setRange(start, end, minimumStep);
this.hide = hide;
if (hide === undefined) {
this.hide = [];
}
} }
/// enum scale /// enum scale
@ -190,6 +195,18 @@ TimeStep.prototype.next = function() {
if (this.current.valueOf() == prev) { if (this.current.valueOf() == prev) {
this.current = new Date(this._end.valueOf()); this.current = new Date(this._end.valueOf());
} }
var startDate = new Date(this.hide.start).getTime();
var endDate = new Date(this.hide.end).getTime();
if (this.current.valueOf() >= startDate &&
this.current.valueOf() < endDate &&
this.current.valueOf() < this._end.valueOf() &&
this.current.valueOf() != prev) {
//this.current = endDate;
this.next();
}
}; };

+ 5
- 5
lib/timeline/component/TimeAxis.js View File

@ -63,7 +63,7 @@ TimeAxis.prototype = new Component();
TimeAxis.prototype.setOptions = function(options) { TimeAxis.prototype.setOptions = function(options) {
if (options) { if (options) {
// copy all options that we know // copy all options that we know
util.selectiveExtend(['orientation', 'showMinorLabels', 'showMajorLabels'], this.options, options);
util.selectiveExtend(['orientation', 'showMinorLabels', 'showMajorLabels','hide'], this.options, options);
// apply locale to moment.js // apply locale to moment.js
// TODO: not so nice, this is applied globally to moment.js // TODO: not so nice, this is applied globally to moment.js
@ -178,7 +178,7 @@ TimeAxis.prototype._repaintLabels = function () {
end = util.convert(this.body.range.end, 'Number'), end = util.convert(this.body.range.end, 'Number'),
minimumStep = this.body.util.toTime((this.props.minorCharWidth || 10) * 7).valueOf() minimumStep = this.body.util.toTime((this.props.minorCharWidth || 10) * 7).valueOf()
-this.body.util.toTime(0).valueOf(); -this.body.util.toTime(0).valueOf();
var step = new TimeStep(new Date(start), new Date(end), minimumStep);
var step = new TimeStep(new Date(start), new Date(end), minimumStep, this.options.hide);
this.step = step; this.step = step;
// Move all DOM elements to a "redundant" list, where they // Move all DOM elements to a "redundant" list, where they
@ -199,9 +199,9 @@ TimeAxis.prototype._repaintLabels = function () {
var max = 0; var max = 0;
while (step.hasNext() && max < 1000) { while (step.hasNext() && max < 1000) {
max++; max++;
var cur = step.getCurrent(),
x = this.body.util.toScreen(cur),
isMajor = step.isMajor();
var cur = step.getCurrent();
var x = this.body.util.toScreen(cur);
var isMajor = step.isMajor();
// TODO: lines must have a width, such that we can create css backgrounds // TODO: lines must have a width, such that we can create css backgrounds

Write Preview
Loading…
Cancel
Save