Browse Source

Implemented function `fit`

css_transitions
jos 10 years ago
parent
commit
eed261b695
5 changed files with 43 additions and 43 deletions
  1. +2
    -0
      HISTORY.md
  2. +7
    -0
      docs/timeline.html
  3. +33
    -40
      src/timeline/Timeline.js
  4. +0
    -2
      test/timeline.html
  5. +1
    -1
      test/timeline_groups.html

+ 2
- 0
HISTORY.md View File

@ -11,6 +11,8 @@ http://visjs.org
- Improved layout of box-items inside groups. - Improved layout of box-items inside groups.
- Items can now be dragged from one group to another. - Items can now be dragged from one group to another.
- Implemented option `stack` to enable/disable stacking of items. - Implemented option `stack` to enable/disable stacking of items.
- Implemented function `fit`, which sets the Timeline window such that it fits
all items.
- Option `editable` can now be used to enable/disable individual manipulation - Option `editable` can now be used to enable/disable individual manipulation
actions (`add`, `updateTime`, `updateGroup`, `remove`). actions (`add`, `updateTime`, `updateGroup`, `remove`).
- Function `setWindow` now accepts an object with properties `start` and `end`. - Function `setWindow` now accepts an object with properties `start` and `end`.

+ 7
- 0
docs/timeline.html View File

@ -628,6 +628,13 @@ var options = {
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr>
<td>fit()</td>
<td>none</td>
<td>Adjust the visible window such that it fits all items.
</td>
</tr>
<tr> <tr>
<td>getCustomTime()</td> <td>getCustomTime()</td>
<td>Date</td> <td>Date</td>

+ 33
- 40
src/timeline/Timeline.js View File

@ -408,47 +408,12 @@ Timeline.prototype.setItems = function(items) {
this.itemSet.setItems(newDataSet); this.itemSet.setItems(newDataSet);
if (initialLoad && (this.options.start == undefined || this.options.end == undefined)) { if (initialLoad && (this.options.start == undefined || this.options.end == undefined)) {
// apply the data range as range
var dataRange = this.getItemRange();
// add 5% space on both sides
var start = dataRange.min;
var end = dataRange.max;
if (start != null && end != null) {
var interval = (end.valueOf() - start.valueOf());
if (interval <= 0) {
// prevent an empty interval
interval = 24 * 60 * 60 * 1000; // 1 day
}
start = new Date(start.valueOf() - interval * 0.05);
end = new Date(end.valueOf() + interval * 0.05);
}
// override specified start and/or end date
if (this.options.start != undefined) {
start = util.convert(this.options.start, 'Date');
}
if (this.options.end != undefined) {
end = util.convert(this.options.end, 'Date');
}
this.fit();
// skip range set if there is no start and end date
if (start === null && end === null) {
return;
}
var start = (this.options.start != undefined) ? util.convert(this.options.start, 'Date') : null;
var end = (this.options.end != undefined) ? util.convert(this.options.end, 'Date') : null;
// if start and end dates are set but cannot be satisfyed due to zoom restrictions — correct end date
if (start != null && end != null) {
var diff = end.valueOf() - start.valueOf();
if (this.options.zoomMax != undefined && this.options.zoomMax < diff) {
end = new Date(start.valueOf() + this.options.zoomMax);
}
if (this.options.zoomMin != undefined && this.options.zoomMin > diff) {
end = new Date(start.valueOf() + this.options.zoomMin);
}
}
this.range.setRange(start, end);
this.setWindow(start, end);
} }
}; };
@ -456,7 +421,7 @@ Timeline.prototype.setItems = function(items) {
* Set groups * Set groups
* @param {vis.DataSet | Array | google.visualization.DataTable} groups * @param {vis.DataSet | Array | google.visualization.DataTable} groups
*/ */
Timeline.prototype.setGroups = function(groups) {
Timeline.prototype.setGroups = function setGroups(groups) {
// convert to type DataSet when needed // convert to type DataSet when needed
var newDataSet; var newDataSet;
if (!groups) { if (!groups) {
@ -474,6 +439,34 @@ Timeline.prototype.setGroups = function(groups) {
this.itemSet.setGroups(newDataSet); this.itemSet.setGroups(newDataSet);
}; };
/**
* Set Timeline window such that it fits all items
*/
Timeline.prototype.fit = function fit() {
// apply the data range as range
var dataRange = this.getItemRange();
// add 5% space on both sides
var start = dataRange.min;
var end = dataRange.max;
if (start != null && end != null) {
var interval = (end.valueOf() - start.valueOf());
if (interval <= 0) {
// prevent an empty interval
interval = 24 * 60 * 60 * 1000; // 1 day
}
start = new Date(start.valueOf() - interval * 0.05);
end = new Date(end.valueOf() + interval * 0.05);
}
// skip range set if there is no start and end date
if (start === null && end === null) {
return;
}
this.range.setRange(start, end);
};
/** /**
* Get the data range of the item set. * Get the data range of the item set.
* @returns {{min: Date, max: Date}} range A range with a start and end Date. * @returns {{min: Date, max: Date}} range A range with a start and end Date.

+ 0
- 2
test/timeline.html View File

@ -86,8 +86,6 @@
//height: 200, //height: 200,
showCurrentTime: true, showCurrentTime: true,
showCustomTime: true, showCustomTime: true,
//start: moment('2013-01-01'),
//end: moment('2013-12-31'),
//min: moment('2013-01-01'), //min: moment('2013-01-01'),
//max: moment('2013-12-31'), //max: moment('2013-12-31'),
//zoomMin: 1000 * 60 * 60 * 24, // 1 day //zoomMin: 1000 * 60 * 60 * 24, // 1 day

+ 1
- 1
test/timeline_groups.html View File

@ -78,7 +78,7 @@
updateTime: true, updateTime: true,
updateGroup: true updateGroup: true
}, },
stack: false,
//stack: false,
//height: 200, //height: 200,
groupOrder: 'content' groupOrder: 'content'
}; };

Loading…
Cancel
Save