vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

291 lines
8.5 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. var Emitter = require('emitter-component');
  2. var Hammer = require('../module/hammer');
  3. var util = require('../util');
  4. var DataSet = require('../DataSet');
  5. var DataView = require('../DataView');
  6. var Range = require('./Range');
  7. var Core = require('./Core');
  8. var TimeAxis = require('./component/TimeAxis');
  9. var CurrentTime = require('./component/CurrentTime');
  10. var CustomTime = require('./component/CustomTime');
  11. var ItemSet = require('./component/ItemSet');
  12. /**
  13. * Create a timeline visualization
  14. * @param {HTMLElement} container
  15. * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
  16. * @param {Object} [options] See Timeline.setOptions for the available options.
  17. * @constructor
  18. * @extends Core
  19. */
  20. function Timeline (container, items, options) {
  21. if (!(this instanceof Timeline)) {
  22. throw new SyntaxError('Constructor must be called with the new operator');
  23. }
  24. var me = this;
  25. this.defaultOptions = {
  26. start: null,
  27. end: null,
  28. autoResize: true,
  29. orientation: 'bottom',
  30. width: null,
  31. height: null,
  32. maxHeight: null,
  33. minHeight: null
  34. };
  35. this.options = util.deepExtend({}, this.defaultOptions);
  36. // Create the DOM, props, and emitter
  37. this._create(container);
  38. // all components listed here will be repainted automatically
  39. this.components = [];
  40. this.body = {
  41. dom: this.dom,
  42. domProps: this.props,
  43. emitter: {
  44. on: this.on.bind(this),
  45. off: this.off.bind(this),
  46. emit: this.emit.bind(this)
  47. },
  48. util: {
  49. snap: null, // will be specified after TimeAxis is created
  50. toScreen: me._toScreen.bind(me),
  51. toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
  52. toTime: me._toTime.bind(me),
  53. toGlobalTime : me._toGlobalTime.bind(me)
  54. }
  55. };
  56. // range
  57. this.range = new Range(this.body);
  58. this.components.push(this.range);
  59. this.body.range = this.range;
  60. // time axis
  61. this.timeAxis = new TimeAxis(this.body);
  62. this.components.push(this.timeAxis);
  63. this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
  64. // current time bar
  65. this.currentTime = new CurrentTime(this.body);
  66. this.components.push(this.currentTime);
  67. // custom time bar
  68. // Note: time bar will be attached in this.setOptions when selected
  69. this.customTime = new CustomTime(this.body);
  70. this.components.push(this.customTime);
  71. // item set
  72. this.itemSet = new ItemSet(this.body);
  73. this.components.push(this.itemSet);
  74. this.itemsData = null; // DataSet
  75. this.groupsData = null; // DataSet
  76. // apply options
  77. if (options) {
  78. this.setOptions(options);
  79. }
  80. // create itemset
  81. if (items) {
  82. this.setItems(items);
  83. }
  84. else {
  85. this.redraw();
  86. }
  87. }
  88. // Extend the functionality from Core
  89. Timeline.prototype = new Core();
  90. /**
  91. * Set items
  92. * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
  93. */
  94. Timeline.prototype.setItems = function(items) {
  95. var initialLoad = (this.itemsData == null);
  96. // convert to type DataSet when needed
  97. var newDataSet;
  98. if (!items) {
  99. newDataSet = null;
  100. }
  101. else if (items instanceof DataSet || items instanceof DataView) {
  102. newDataSet = items;
  103. }
  104. else {
  105. // turn an array into a dataset
  106. newDataSet = new DataSet(items, {
  107. type: {
  108. start: 'Date',
  109. end: 'Date'
  110. }
  111. });
  112. }
  113. // set items
  114. this.itemsData = newDataSet;
  115. this.itemSet && this.itemSet.setItems(newDataSet);
  116. if (initialLoad && ('start' in this.options || 'end' in this.options)) {
  117. this.fit();
  118. var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null;
  119. var end = ('end' in this.options) ? util.convert(this.options.end, 'Date') : null;
  120. this.setWindow(start, end, false);
  121. }
  122. };
  123. /**
  124. * Set groups
  125. * @param {vis.DataSet | Array | google.visualization.DataTable} groups
  126. */
  127. Timeline.prototype.setGroups = function(groups) {
  128. // convert to type DataSet when needed
  129. var newDataSet;
  130. if (!groups) {
  131. newDataSet = null;
  132. }
  133. else if (groups instanceof DataSet || groups instanceof DataView) {
  134. newDataSet = groups;
  135. }
  136. else {
  137. // turn an array into a dataset
  138. newDataSet = new DataSet(groups);
  139. }
  140. this.groupsData = newDataSet;
  141. this.itemSet.setGroups(newDataSet);
  142. };
  143. /**
  144. * Set selected items by their id. Replaces the current selection
  145. * Unknown id's are silently ignored.
  146. * @param {string[] | string} [ids] An array with zero or more id's of the items to be
  147. * selected. If ids is an empty array, all items will be
  148. * unselected.
  149. * @param {Object} [options] Available options:
  150. * `focus: boolean`
  151. * If true, focus will be set to the selected item(s)
  152. * `animate: boolean | number`
  153. * If true (default), the range is animated
  154. * smoothly to the new window.
  155. * If a number, the number is taken as duration
  156. * for the animation. Default duration is 500 ms.
  157. * Only applicable when option focus is true.
  158. */
  159. Timeline.prototype.setSelection = function(ids, options) {
  160. this.itemSet && this.itemSet.setSelection(ids);
  161. if (options && options.focus) {
  162. this.focus(ids, options);
  163. }
  164. };
  165. /**
  166. * Get the selected items by their id
  167. * @return {Array} ids The ids of the selected items
  168. */
  169. Timeline.prototype.getSelection = function() {
  170. return this.itemSet && this.itemSet.getSelection() || [];
  171. };
  172. /**
  173. * Adjust the visible window such that the selected item (or multiple items)
  174. * are centered on screen.
  175. * @param {String | String[]} id An item id or array with item ids
  176. * @param {Object} [options] Available options:
  177. * `animate: boolean | number`
  178. * If true (default), the range is animated
  179. * smoothly to the new window.
  180. * If a number, the number is taken as duration
  181. * for the animation. Default duration is 500 ms.
  182. * Only applicable when option focus is true
  183. */
  184. Timeline.prototype.focus = function(id, options) {
  185. if (!this.itemsData || id == undefined) return;
  186. var ids = Array.isArray(id) ? id : [id];
  187. // get the specified item(s)
  188. var itemsData = this.itemsData.getDataSet().get(ids, {
  189. type: {
  190. start: 'Date',
  191. end: 'Date'
  192. }
  193. });
  194. // calculate minimum start and maximum end of specified items
  195. var start = null;
  196. var end = null;
  197. itemsData.forEach(function (itemData) {
  198. var s = itemData.start.valueOf();
  199. var e = 'end' in itemData ? itemData.end.valueOf() : itemData.start.valueOf();
  200. if (start === null || s < start) {
  201. start = s;
  202. }
  203. if (end === null || e > end) {
  204. end = e;
  205. }
  206. });
  207. // calculate the new middle and interval for the window
  208. var middle = (start + end) / 2;
  209. var interval = Math.max((this.range.end - this.range.start), (end - start) * 1.1);
  210. var animate = (options && options.animate !== undefined) ? options.animate : true;
  211. this.range.setRange(middle - interval / 2, middle + interval / 2, animate);
  212. };
  213. /**
  214. * Get the data range of the item set.
  215. * @returns {{min: Date, max: Date}} range A range with a start and end Date.
  216. * When no minimum is found, min==null
  217. * When no maximum is found, max==null
  218. */
  219. Timeline.prototype.getItemRange = function() {
  220. // calculate min from start filed
  221. var dataset = this.itemsData.getDataSet(),
  222. min = null,
  223. max = null;
  224. if (dataset) {
  225. // calculate the minimum value of the field 'start'
  226. var minItem = dataset.min('start');
  227. min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
  228. // Note: we convert first to Date and then to number because else
  229. // a conversion from ISODate to Number will fail
  230. // calculate maximum value of fields 'start' and 'end'
  231. var maxStartItem = dataset.max('start');
  232. if (maxStartItem) {
  233. max = util.convert(maxStartItem.start, 'Date').valueOf();
  234. }
  235. var maxEndItem = dataset.max('end');
  236. if (maxEndItem) {
  237. if (max == null) {
  238. max = util.convert(maxEndItem.end, 'Date').valueOf();
  239. }
  240. else {
  241. max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
  242. }
  243. }
  244. }
  245. return {
  246. min: (min != null) ? new Date(min) : null,
  247. max: (max != null) ? new Date(max) : null
  248. };
  249. };
  250. module.exports = Timeline;