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.

447 lines
14 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. var util = require('../../util');
  2. var Component = require('./Component');
  3. var TimeStep = require('../TimeStep');
  4. var DateUtil = require('../DateUtil');
  5. var moment = require('../../module/moment');
  6. /**
  7. * A horizontal time axis
  8. * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} body
  9. * @param {Object} [options] See TimeAxis.setOptions for the available
  10. * options.
  11. * @constructor TimeAxis
  12. * @extends Component
  13. */
  14. function TimeAxis (body, options) {
  15. this.dom = {
  16. foreground: null,
  17. majorLines: [],
  18. majorTexts: [],
  19. minorLines: [],
  20. minorTexts: [],
  21. redundant: {
  22. majorLines: [],
  23. majorTexts: [],
  24. minorLines: [],
  25. minorTexts: []
  26. }
  27. };
  28. this.props = {
  29. range: {
  30. start: 0,
  31. end: 0,
  32. minimumStep: 0
  33. },
  34. lineTop: 0
  35. };
  36. this.defaultOptions = {
  37. orientation: 'bottom', // supported: 'top', 'bottom'
  38. // TODO: implement timeaxis orientations 'left' and 'right'
  39. showMinorLabels: true,
  40. showMajorLabels: true,
  41. showMajorLines: true,
  42. showMinorLines: true,
  43. format: null
  44. };
  45. this.options = util.extend({}, this.defaultOptions);
  46. this.body = body;
  47. // create the HTML DOM
  48. this._create();
  49. this.setOptions(options);
  50. }
  51. TimeAxis.prototype = new Component();
  52. /**
  53. * Set options for the TimeAxis.
  54. * Parameters will be merged in current options.
  55. * @param {Object} options Available options:
  56. * {string} [orientation]
  57. * {boolean} [showMinorLabels]
  58. * {boolean} [showMajorLabels]
  59. */
  60. TimeAxis.prototype.setOptions = function(options) {
  61. if (options) {
  62. // copy all options that we know
  63. util.selectiveExtend(['orientation', 'showMinorLabels', 'showMajorLabels', 'showMinorLines', 'showMajorLines','hiddenDates', 'format'], this.options, options);
  64. // apply locale to moment.js
  65. // TODO: not so nice, this is applied globally to moment.js
  66. if ('locale' in options) {
  67. if (typeof moment.locale === 'function') {
  68. // moment.js 2.8.1+
  69. moment.locale(options.locale);
  70. }
  71. else {
  72. moment.lang(options.locale);
  73. }
  74. }
  75. }
  76. };
  77. /**
  78. * Create the HTML DOM for the TimeAxis
  79. */
  80. TimeAxis.prototype._create = function() {
  81. this.dom.foreground = document.createElement('div');
  82. this.dom.background = document.createElement('div');
  83. this.dom.foreground.className = 'timeaxis foreground';
  84. this.dom.background.className = 'timeaxis background';
  85. };
  86. /**
  87. * Destroy the TimeAxis
  88. */
  89. TimeAxis.prototype.destroy = function() {
  90. // remove from DOM
  91. if (this.dom.foreground.parentNode) {
  92. this.dom.foreground.parentNode.removeChild(this.dom.foreground);
  93. }
  94. if (this.dom.background.parentNode) {
  95. this.dom.background.parentNode.removeChild(this.dom.background);
  96. }
  97. this.body = null;
  98. };
  99. /**
  100. * Repaint the component
  101. * @return {boolean} Returns true if the component is resized
  102. */
  103. TimeAxis.prototype.redraw = function () {
  104. var options = this.options;
  105. var props = this.props;
  106. var foreground = this.dom.foreground;
  107. var background = this.dom.background;
  108. // determine the correct parent DOM element (depending on option orientation)
  109. var parent = (options.orientation == 'top') ? this.body.dom.top : this.body.dom.bottom;
  110. var parentChanged = (foreground.parentNode !== parent);
  111. // calculate character width and height
  112. this._calculateCharSize();
  113. // TODO: recalculate sizes only needed when parent is resized or options is changed
  114. var orientation = this.options.orientation,
  115. showMinorLabels = this.options.showMinorLabels,
  116. showMajorLabels = this.options.showMajorLabels;
  117. // determine the width and height of the elemens for the axis
  118. props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
  119. props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
  120. props.height = props.minorLabelHeight + props.majorLabelHeight;
  121. props.width = foreground.offsetWidth;
  122. props.minorLineHeight = this.body.domProps.root.height - props.majorLabelHeight -
  123. (options.orientation == 'top' ? this.body.domProps.bottom.height : this.body.domProps.top.height);
  124. props.minorLineWidth = 1; // TODO: really calculate width
  125. props.majorLineHeight = props.minorLineHeight + props.majorLabelHeight;
  126. props.majorLineWidth = 1; // TODO: really calculate width
  127. // take foreground and background offline while updating (is almost twice as fast)
  128. var foregroundNextSibling = foreground.nextSibling;
  129. var backgroundNextSibling = background.nextSibling;
  130. foreground.parentNode && foreground.parentNode.removeChild(foreground);
  131. background.parentNode && background.parentNode.removeChild(background);
  132. foreground.style.height = this.props.height + 'px';
  133. this._repaintLabels();
  134. // put DOM online again (at the same place)
  135. if (foregroundNextSibling) {
  136. parent.insertBefore(foreground, foregroundNextSibling);
  137. }
  138. else {
  139. parent.appendChild(foreground)
  140. }
  141. if (backgroundNextSibling) {
  142. this.body.dom.backgroundVertical.insertBefore(background, backgroundNextSibling);
  143. }
  144. else {
  145. this.body.dom.backgroundVertical.appendChild(background)
  146. }
  147. return this._isResized() || parentChanged;
  148. };
  149. /**
  150. * Repaint major and minor text labels and vertical grid lines
  151. * @private
  152. */
  153. TimeAxis.prototype._repaintLabels = function () {
  154. var orientation = this.options.orientation;
  155. // calculate range and step (step such that we have space for 7 characters per label)
  156. var start = util.convert(this.body.range.start, 'Number');
  157. var end = util.convert(this.body.range.end, 'Number');
  158. var timeLabelsize = this.body.util.toTime((this.props.minorCharWidth || 10) * 7).valueOf();
  159. var minimumStep = timeLabelsize - DateUtil.getHiddenDurationBefore(this.body.hiddenDates, this.body.range, timeLabelsize);
  160. minimumStep -= this.body.util.toTime(0).valueOf();
  161. var step = new TimeStep(new Date(start), new Date(end), minimumStep, this.body.hiddenDates);
  162. if (this.options.format) {
  163. step.setFormat(this.options.format);
  164. }
  165. this.step = step;
  166. // Move all DOM elements to a "redundant" list, where they
  167. // can be picked for re-use, and clear the lists with lines and texts.
  168. // At the end of the function _repaintLabels, left over elements will be cleaned up
  169. var dom = this.dom;
  170. dom.redundant.majorLines = dom.majorLines;
  171. dom.redundant.majorTexts = dom.majorTexts;
  172. dom.redundant.minorLines = dom.minorLines;
  173. dom.redundant.minorTexts = dom.minorTexts;
  174. dom.majorLines = [];
  175. dom.majorTexts = [];
  176. dom.minorLines = [];
  177. dom.minorTexts = [];
  178. var cur;
  179. var x = 0;
  180. var isMajor;
  181. var xPrev = 0;
  182. var width = 0;
  183. var prevLine;
  184. var xFirstMajorLabel = undefined;
  185. var max = 0;
  186. var className;
  187. step.first();
  188. while (step.hasNext() && max < 1000) {
  189. max++;
  190. cur = step.getCurrent();
  191. isMajor = step.isMajor();
  192. className = step.getClassName();
  193. xPrev = x;
  194. x = this.body.util.toScreen(cur);
  195. width = x - xPrev;
  196. if (prevLine) {
  197. prevLine.style.width = width + 'px';
  198. }
  199. // FIXME: the width is not always correct, for example on the month scale.
  200. if (this.options.showMinorLabels) {
  201. this._repaintMinorText(x, step.getLabelMinor(), orientation);
  202. }
  203. // FIXME: the divs must be ordered so that you can use css odd/even classes
  204. if (isMajor && this.options.showMajorLabels) {
  205. if (x > 0) {
  206. if (xFirstMajorLabel == undefined) {
  207. xFirstMajorLabel = x;
  208. }
  209. this._repaintMajorText(x, step.getLabelMajor(), orientation);
  210. }
  211. if (this.options.showMajorLines == true) {
  212. prevLine = this._repaintMajorLine(x, orientation, className);
  213. }
  214. }
  215. else if (this.options.showMinorLines == true) {
  216. prevLine = this._repaintMinorLine(x, orientation, className);
  217. }
  218. step.next();
  219. }
  220. // create a major label on the left when needed
  221. if (this.options.showMajorLabels) {
  222. var leftTime = this.body.util.toTime(0),
  223. leftText = step.getLabelMajor(leftTime),
  224. widthText = leftText.length * (this.props.majorCharWidth || 10) + 10; // upper bound estimation
  225. if (xFirstMajorLabel == undefined || widthText < xFirstMajorLabel) {
  226. this._repaintMajorText(0, leftText, orientation);
  227. }
  228. }
  229. // Cleanup leftover DOM elements from the redundant list
  230. util.forEach(this.dom.redundant, function (arr) {
  231. while (arr.length) {
  232. var elem = arr.pop();
  233. if (elem && elem.parentNode) {
  234. elem.parentNode.removeChild(elem);
  235. }
  236. }
  237. });
  238. };
  239. /**
  240. * Create a minor label for the axis at position x
  241. * @param {Number} x
  242. * @param {String} text
  243. * @param {String} orientation "top" or "bottom" (default)
  244. * @private
  245. */
  246. TimeAxis.prototype._repaintMinorText = function (x, text, orientation) {
  247. // reuse redundant label
  248. var label = this.dom.redundant.minorTexts.shift();
  249. if (!label) {
  250. // create new label
  251. var content = document.createTextNode('');
  252. label = document.createElement('div');
  253. label.appendChild(content);
  254. label.className = 'text minor';
  255. this.dom.foreground.appendChild(label);
  256. }
  257. this.dom.minorTexts.push(label);
  258. label.childNodes[0].nodeValue = text;
  259. label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0';
  260. label.style.left = x + 'px';
  261. //label.title = title; // TODO: this is a heavy operation
  262. };
  263. /**
  264. * Create a Major label for the axis at position x
  265. * @param {Number} x
  266. * @param {String} text
  267. * @param {String} orientation "top" or "bottom" (default)
  268. * @private
  269. */
  270. TimeAxis.prototype._repaintMajorText = function (x, text, orientation) {
  271. // reuse redundant label
  272. var label = this.dom.redundant.majorTexts.shift();
  273. if (!label) {
  274. // create label
  275. var content = document.createTextNode(text);
  276. label = document.createElement('div');
  277. label.className = 'text major';
  278. label.appendChild(content);
  279. this.dom.foreground.appendChild(label);
  280. }
  281. this.dom.majorTexts.push(label);
  282. label.childNodes[0].nodeValue = text;
  283. //label.title = title; // TODO: this is a heavy operation
  284. label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight + 'px');
  285. label.style.left = x + 'px';
  286. };
  287. /**
  288. * Create a minor line for the axis at position x
  289. * @param {Number} x
  290. * @param {String} orientation "top" or "bottom" (default)
  291. * @param {String} className
  292. * @return {Element} Returns the created line
  293. * @private
  294. */
  295. TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) {
  296. // reuse redundant line
  297. var line = this.dom.redundant.minorLines.shift();
  298. if (!line) {
  299. // create vertical line
  300. line = document.createElement('div');
  301. this.dom.background.appendChild(line);
  302. }
  303. this.dom.minorLines.push(line);
  304. var props = this.props;
  305. if (orientation == 'top') {
  306. line.style.top = props.majorLabelHeight + 'px';
  307. }
  308. else {
  309. line.style.top = this.body.domProps.top.height + 'px';
  310. }
  311. line.style.height = props.minorLineHeight + 'px';
  312. line.style.left = (x - props.minorLineWidth / 2) + 'px';
  313. line.className = 'grid vertical minor ' + className;
  314. return line;
  315. };
  316. /**
  317. * Create a Major line for the axis at position x
  318. * @param {Number} x
  319. * @param {String} orientation "top" or "bottom" (default)
  320. * @param {String} className
  321. * @return {Element} Returns the created line
  322. * @private
  323. */
  324. TimeAxis.prototype._repaintMajorLine = function (x, orientation, className) {
  325. // reuse redundant line
  326. var line = this.dom.redundant.majorLines.shift();
  327. if (!line) {
  328. // create vertical line
  329. line = document.createElement('DIV');
  330. this.dom.background.appendChild(line);
  331. }
  332. this.dom.majorLines.push(line);
  333. var props = this.props;
  334. if (orientation == 'top') {
  335. line.style.top = '0';
  336. }
  337. else {
  338. line.style.top = this.body.domProps.top.height + 'px';
  339. }
  340. line.style.left = (x - props.majorLineWidth / 2) + 'px';
  341. line.style.height = props.majorLineHeight + 'px';
  342. line.className = 'grid vertical major ' + className;
  343. return line;
  344. };
  345. /**
  346. * Determine the size of text on the axis (both major and minor axis).
  347. * The size is calculated only once and then cached in this.props.
  348. * @private
  349. */
  350. TimeAxis.prototype._calculateCharSize = function () {
  351. // Note: We calculate char size with every redraw. Size may change, for
  352. // example when any of the timelines parents had display:none for example.
  353. // determine the char width and height on the minor axis
  354. if (!this.dom.measureCharMinor) {
  355. this.dom.measureCharMinor = document.createElement('DIV');
  356. this.dom.measureCharMinor.className = 'text minor measure';
  357. this.dom.measureCharMinor.style.position = 'absolute';
  358. this.dom.measureCharMinor.appendChild(document.createTextNode('0'));
  359. this.dom.foreground.appendChild(this.dom.measureCharMinor);
  360. }
  361. this.props.minorCharHeight = this.dom.measureCharMinor.clientHeight;
  362. this.props.minorCharWidth = this.dom.measureCharMinor.clientWidth;
  363. // determine the char width and height on the major axis
  364. if (!this.dom.measureCharMajor) {
  365. this.dom.measureCharMajor = document.createElement('DIV');
  366. this.dom.measureCharMajor.className = 'text major measure';
  367. this.dom.measureCharMajor.style.position = 'absolute';
  368. this.dom.measureCharMajor.appendChild(document.createTextNode('0'));
  369. this.dom.foreground.appendChild(this.dom.measureCharMajor);
  370. }
  371. this.props.majorCharHeight = this.dom.measureCharMajor.clientHeight;
  372. this.props.majorCharWidth = this.dom.measureCharMajor.clientWidth;
  373. };
  374. /**
  375. * Snap a date to a rounded value.
  376. * The snap intervals are dependent on the current scale and step.
  377. * @param {Date} date the date to be snapped.
  378. * @return {Date} snappedDate
  379. */
  380. TimeAxis.prototype.snap = function(date) {
  381. return this.step.snap(date);
  382. };
  383. module.exports = TimeAxis;