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.

589 lines
17 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. var util = require('../../util');
  2. var DOMutil = require('../../DOMutil');
  3. var Component = require('./Component');
  4. var DataScale = require('./DataScale');
  5. /**
  6. * A horizontal time axis
  7. * @param {Object} [options] See DataAxis.setOptions for the available
  8. * options.
  9. * @constructor DataAxis
  10. * @extends Component
  11. * @param body
  12. */
  13. function DataAxis(body, options, svg, linegraphOptions) {
  14. this.id = util.randomUUID();
  15. this.body = body;
  16. this.defaultOptions = {
  17. orientation: 'left', // supported: 'left', 'right'
  18. showMinorLabels: true,
  19. showMajorLabels: true,
  20. icons: false,
  21. majorLinesOffset: 7,
  22. minorLinesOffset: 4,
  23. labelOffsetX: 10,
  24. labelOffsetY: 2,
  25. iconWidth: 20,
  26. width: '40px',
  27. visible: true,
  28. alignZeros: true,
  29. left: {
  30. range: {min: undefined, max: undefined},
  31. format: function (value) {
  32. return '' + parseFloat(value.toPrecision(3));
  33. },
  34. title: {text: undefined, style: undefined}
  35. },
  36. right: {
  37. range: {min: undefined, max: undefined},
  38. format: function (value) {
  39. return '' + parseFloat(value.toPrecision(3));
  40. },
  41. title: {text: undefined, style: undefined}
  42. }
  43. };
  44. this.linegraphOptions = linegraphOptions;
  45. this.linegraphSVG = svg;
  46. this.props = {};
  47. this.DOMelements = { // dynamic elements
  48. lines: {},
  49. labels: {},
  50. title: {}
  51. };
  52. this.dom = {};
  53. this.scale = undefined;
  54. this.range = {start: 0, end: 0};
  55. this.options = util.extend({}, this.defaultOptions);
  56. this.conversionFactor = 1;
  57. this.setOptions(options);
  58. this.width = Number(('' + this.options.width).replace("px", ""));
  59. this.minWidth = this.width;
  60. this.height = this.linegraphSVG.getBoundingClientRect().height;
  61. this.hidden = false;
  62. this.stepPixels = 25;
  63. this.zeroCrossing = -1;
  64. this.amountOfSteps = -1;
  65. this.lineOffset = 0;
  66. this.master = true;
  67. this.masterAxis = null;
  68. this.svgElements = {};
  69. this.iconsRemoved = false;
  70. this.groups = {};
  71. this.amountOfGroups = 0;
  72. // create the HTML DOM
  73. this._create();
  74. this.framework = {svg: this.svg, svgElements: this.svgElements, options: this.options, groups: this.groups};
  75. var me = this;
  76. this.body.emitter.on("verticalDrag", function () {
  77. me.dom.lineContainer.style.top = me.body.domProps.scrollTop + 'px';
  78. });
  79. }
  80. DataAxis.prototype = new Component();
  81. DataAxis.prototype.addGroup = function (label, graphOptions) {
  82. if (!this.groups.hasOwnProperty(label)) {
  83. this.groups[label] = graphOptions;
  84. }
  85. this.amountOfGroups += 1;
  86. };
  87. DataAxis.prototype.updateGroup = function (label, graphOptions) {
  88. if (!this.groups.hasOwnProperty(label)) {
  89. this.amountOfGroups += 1;
  90. }
  91. this.groups[label] = graphOptions;
  92. };
  93. DataAxis.prototype.removeGroup = function (label) {
  94. if (this.groups.hasOwnProperty(label)) {
  95. delete this.groups[label];
  96. this.amountOfGroups -= 1;
  97. }
  98. };
  99. DataAxis.prototype.setOptions = function (options) {
  100. if (options) {
  101. var redraw = false;
  102. if (this.options.orientation != options.orientation && options.orientation !== undefined) {
  103. redraw = true;
  104. }
  105. var fields = [
  106. 'orientation',
  107. 'showMinorLabels',
  108. 'showMajorLabels',
  109. 'icons',
  110. 'majorLinesOffset',
  111. 'minorLinesOffset',
  112. 'labelOffsetX',
  113. 'labelOffsetY',
  114. 'iconWidth',
  115. 'width',
  116. 'visible',
  117. 'left',
  118. 'right',
  119. 'alignZeros'
  120. ];
  121. util.selectiveDeepExtend(fields, this.options, options);
  122. this.minWidth = Number(('' + this.options.width).replace("px", ""));
  123. if (redraw === true && this.dom.frame) {
  124. this.hide();
  125. this.show();
  126. }
  127. }
  128. };
  129. /**
  130. * Create the HTML DOM for the DataAxis
  131. */
  132. DataAxis.prototype._create = function () {
  133. this.dom.frame = document.createElement('div');
  134. this.dom.frame.style.width = this.options.width;
  135. this.dom.frame.style.height = this.height;
  136. this.dom.lineContainer = document.createElement('div');
  137. this.dom.lineContainer.style.width = '100%';
  138. this.dom.lineContainer.style.height = this.height;
  139. this.dom.lineContainer.style.position = 'relative';
  140. // create svg element for graph drawing.
  141. this.svg = document.createElementNS('http://www.w3.org/2000/svg', "svg");
  142. this.svg.style.position = "absolute";
  143. this.svg.style.top = '0px';
  144. this.svg.style.height = '100%';
  145. this.svg.style.width = '100%';
  146. this.svg.style.display = "block";
  147. this.dom.frame.appendChild(this.svg);
  148. };
  149. DataAxis.prototype._redrawGroupIcons = function () {
  150. DOMutil.prepareElements(this.svgElements);
  151. var x;
  152. var iconWidth = this.options.iconWidth;
  153. var iconHeight = 15;
  154. var iconOffset = 4;
  155. var y = iconOffset + 0.5 * iconHeight;
  156. if (this.options.orientation === 'left') {
  157. x = iconOffset;
  158. }
  159. else {
  160. x = this.width - iconWidth - iconOffset;
  161. }
  162. var groupArray = Object.keys(this.groups);
  163. groupArray.sort(function (a, b) {
  164. return (a < b ? -1 : 1);
  165. })
  166. for (var i = 0; i < groupArray.length; i++) {
  167. var groupId = groupArray[i];
  168. if (this.groups[groupId].visible === true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] === true)) {
  169. this.groups[groupId].getLegend(iconWidth, iconHeight, this.framework, x, y);
  170. y += iconHeight + iconOffset;
  171. }
  172. }
  173. DOMutil.cleanupElements(this.svgElements);
  174. this.iconsRemoved = false;
  175. };
  176. DataAxis.prototype._cleanupIcons = function () {
  177. if (this.iconsRemoved === false) {
  178. DOMutil.prepareElements(this.svgElements);
  179. DOMutil.cleanupElements(this.svgElements);
  180. this.iconsRemoved = true;
  181. }
  182. }
  183. /**
  184. * Create the HTML DOM for the DataAxis
  185. */
  186. DataAxis.prototype.show = function () {
  187. this.hidden = false;
  188. if (!this.dom.frame.parentNode) {
  189. if (this.options.orientation === 'left') {
  190. this.body.dom.left.appendChild(this.dom.frame);
  191. }
  192. else {
  193. this.body.dom.right.appendChild(this.dom.frame);
  194. }
  195. }
  196. if (!this.dom.lineContainer.parentNode) {
  197. this.body.dom.backgroundHorizontal.appendChild(this.dom.lineContainer);
  198. }
  199. };
  200. /**
  201. * Create the HTML DOM for the DataAxis
  202. */
  203. DataAxis.prototype.hide = function () {
  204. this.hidden = true;
  205. if (this.dom.frame.parentNode) {
  206. this.dom.frame.parentNode.removeChild(this.dom.frame);
  207. }
  208. if (this.dom.lineContainer.parentNode) {
  209. this.dom.lineContainer.parentNode.removeChild(this.dom.lineContainer);
  210. }
  211. };
  212. /**
  213. * Set a range (start and end)
  214. * @param end
  215. * @param start
  216. * @param end
  217. */
  218. DataAxis.prototype.setRange = function (start, end) {
  219. this.range.start = start;
  220. this.range.end = end;
  221. };
  222. /**
  223. * Repaint the component
  224. * @return {boolean} Returns true if the component is resized
  225. */
  226. DataAxis.prototype.redraw = function () {
  227. var resized = false;
  228. var activeGroups = 0;
  229. // Make sure the line container adheres to the vertical scrolling.
  230. this.dom.lineContainer.style.top = this.body.domProps.scrollTop + 'px';
  231. for (var groupId in this.groups) {
  232. if (this.groups.hasOwnProperty(groupId)) {
  233. if (this.groups[groupId].visible === true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] === true)) {
  234. activeGroups++;
  235. }
  236. }
  237. }
  238. if (this.amountOfGroups === 0 || activeGroups === 0) {
  239. this.hide();
  240. }
  241. else {
  242. this.show();
  243. this.height = Number(this.linegraphSVG.style.height.replace("px", ""));
  244. // svg offsetheight did not work in firefox and explorer...
  245. this.dom.lineContainer.style.height = this.height + 'px';
  246. this.width = this.options.visible === true ? Number(('' + this.options.width).replace("px", "")) : 0;
  247. var props = this.props;
  248. var frame = this.dom.frame;
  249. // update classname
  250. frame.className = 'vis-data-axis';
  251. // calculate character width and height
  252. this._calculateCharSize();
  253. var orientation = this.options.orientation;
  254. var showMinorLabels = this.options.showMinorLabels;
  255. var showMajorLabels = this.options.showMajorLabels;
  256. // determine the width and height of the elements for the axis
  257. props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
  258. props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
  259. props.minorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.minorLinesOffset;
  260. props.minorLineHeight = 1;
  261. props.majorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.majorLinesOffset;
  262. props.majorLineHeight = 1;
  263. // take frame offline while updating (is almost twice as fast)
  264. if (orientation === 'left') {
  265. frame.style.top = '0';
  266. frame.style.left = '0';
  267. frame.style.bottom = '';
  268. frame.style.width = this.width + 'px';
  269. frame.style.height = this.height + "px";
  270. this.props.width = this.body.domProps.left.width;
  271. this.props.height = this.body.domProps.left.height;
  272. }
  273. else { // right
  274. frame.style.top = '';
  275. frame.style.bottom = '0';
  276. frame.style.left = '0';
  277. frame.style.width = this.width + 'px';
  278. frame.style.height = this.height + "px";
  279. this.props.width = this.body.domProps.right.width;
  280. this.props.height = this.body.domProps.right.height;
  281. }
  282. resized = this._redrawLabels();
  283. resized = this._isResized() || resized;
  284. if (this.options.icons === true) {
  285. this._redrawGroupIcons();
  286. }
  287. else {
  288. this._cleanupIcons();
  289. }
  290. this._redrawTitle(orientation);
  291. }
  292. return resized;
  293. };
  294. /**
  295. * Repaint major and minor text labels and vertical grid lines
  296. * @private
  297. */
  298. DataAxis.prototype._redrawLabels = function () {
  299. var resized = false;
  300. DOMutil.prepareElements(this.DOMelements.lines);
  301. DOMutil.prepareElements(this.DOMelements.labels);
  302. var orientation = this.options['orientation'];
  303. var customRange = this.options[orientation].range != undefined ? this.options[orientation].range : {};
  304. //Override range with manual options:
  305. var autoScaleEnd = true;
  306. if (customRange.max != undefined) {
  307. this.range.end = customRange.max;
  308. autoScaleEnd = false;
  309. }
  310. var autoScaleStart = true;
  311. if (customRange.min != undefined) {
  312. this.range.start = customRange.min;
  313. autoScaleStart = false;
  314. }
  315. this.scale = new DataScale(
  316. this.range.start,
  317. this.range.end,
  318. autoScaleStart,
  319. autoScaleEnd,
  320. this.dom.frame.offsetHeight,
  321. this.props.majorCharHeight,
  322. this.options.alignZeros,
  323. this.options[orientation].format
  324. );
  325. if (this.master === false && this.masterAxis != undefined) {
  326. this.scale.followScale(this.masterAxis.scale);
  327. }
  328. //Is updated in side-effect of _redrawLabel():
  329. this.maxLabelSize = 0;
  330. var lines = this.scale.getLines();
  331. lines.forEach(
  332. line=> {
  333. var y = line.y;
  334. var isMajor = line.major;
  335. if (this.options['showMinorLabels'] && isMajor === false) {
  336. this._redrawLabel(y - 2, line.val, orientation, 'vis-y-axis vis-minor', this.props.minorCharHeight);
  337. }
  338. if (isMajor) {
  339. if (y >= 0) {
  340. this._redrawLabel(y - 2, line.val, orientation, 'vis-y-axis vis-major', this.props.majorCharHeight);
  341. }
  342. }
  343. if (this.master === true) {
  344. if (isMajor) {
  345. this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-major', this.options.majorLinesOffset, this.props.majorLineWidth);
  346. }
  347. else {
  348. this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-minor', this.options.minorLinesOffset, this.props.minorLineWidth);
  349. }
  350. }
  351. });
  352. // Note that title is rotated, so we're using the height, not width!
  353. var titleWidth = 0;
  354. if (this.options[orientation].title !== undefined && this.options[orientation].title.text !== undefined) {
  355. titleWidth = this.props.titleCharHeight;
  356. }
  357. var offset = this.options.icons === true ? Math.max(this.options.iconWidth, titleWidth) + this.options.labelOffsetX + 15 : titleWidth + this.options.labelOffsetX + 15;
  358. // this will resize the yAxis to accommodate the labels.
  359. if (this.maxLabelSize > (this.width - offset) && this.options.visible === true) {
  360. this.width = this.maxLabelSize + offset;
  361. this.options.width = this.width + "px";
  362. DOMutil.cleanupElements(this.DOMelements.lines);
  363. DOMutil.cleanupElements(this.DOMelements.labels);
  364. this.redraw();
  365. resized = true;
  366. }
  367. // this will resize the yAxis if it is too big for the labels.
  368. else if (this.maxLabelSize < (this.width - offset) && this.options.visible === true && this.width > this.minWidth) {
  369. this.width = Math.max(this.minWidth, this.maxLabelSize + offset);
  370. this.options.width = this.width + "px";
  371. DOMutil.cleanupElements(this.DOMelements.lines);
  372. DOMutil.cleanupElements(this.DOMelements.labels);
  373. this.redraw();
  374. resized = true;
  375. }
  376. else {
  377. DOMutil.cleanupElements(this.DOMelements.lines);
  378. DOMutil.cleanupElements(this.DOMelements.labels);
  379. resized = false;
  380. }
  381. return resized;
  382. };
  383. DataAxis.prototype.convertValue = function (value) {
  384. return this.scale.convertValue(value);
  385. };
  386. DataAxis.prototype.screenToValue = function (x) {
  387. return this.scale.screenToValue(x);
  388. };
  389. /**
  390. * Create a label for the axis at position x
  391. * @private
  392. * @param y
  393. * @param text
  394. * @param orientation
  395. * @param className
  396. * @param characterHeight
  397. */
  398. DataAxis.prototype._redrawLabel = function (y, text, orientation, className, characterHeight) {
  399. // reuse redundant label
  400. var label = DOMutil.getDOMElement('div', this.DOMelements.labels, this.dom.frame); //this.dom.redundant.labels.shift();
  401. label.className = className;
  402. label.innerHTML = text;
  403. if (orientation === 'left') {
  404. label.style.left = '-' + this.options.labelOffsetX + 'px';
  405. label.style.textAlign = "right";
  406. }
  407. else {
  408. label.style.right = '-' + this.options.labelOffsetX + 'px';
  409. label.style.textAlign = "left";
  410. }
  411. label.style.top = y - 0.5 * characterHeight + this.options.labelOffsetY + 'px';
  412. text += '';
  413. var largestWidth = Math.max(this.props.majorCharWidth, this.props.minorCharWidth);
  414. if (this.maxLabelSize < text.length * largestWidth) {
  415. this.maxLabelSize = text.length * largestWidth;
  416. }
  417. };
  418. /**
  419. * Create a minor line for the axis at position y
  420. * @param y
  421. * @param orientation
  422. * @param className
  423. * @param offset
  424. * @param width
  425. */
  426. DataAxis.prototype._redrawLine = function (y, orientation, className, offset, width) {
  427. if (this.master === true) {
  428. var line = DOMutil.getDOMElement('div', this.DOMelements.lines, this.dom.lineContainer);//this.dom.redundant.lines.shift();
  429. line.className = className;
  430. line.innerHTML = '';
  431. if (orientation === 'left') {
  432. line.style.left = (this.width - offset) + 'px';
  433. }
  434. else {
  435. line.style.right = (this.width - offset) + 'px';
  436. }
  437. line.style.width = width + 'px';
  438. line.style.top = y + 'px';
  439. }
  440. };
  441. /**
  442. * Create a title for the axis
  443. * @private
  444. * @param orientation
  445. */
  446. DataAxis.prototype._redrawTitle = function (orientation) {
  447. DOMutil.prepareElements(this.DOMelements.title);
  448. // Check if the title is defined for this axes
  449. if (this.options[orientation].title !== undefined && this.options[orientation].title.text !== undefined) {
  450. var title = DOMutil.getDOMElement('div', this.DOMelements.title, this.dom.frame);
  451. title.className = 'vis-y-axis vis-title vis-' + orientation;
  452. title.innerHTML = this.options[orientation].title.text;
  453. // Add style - if provided
  454. if (this.options[orientation].title.style !== undefined) {
  455. util.addCssText(title, this.options[orientation].title.style);
  456. }
  457. if (orientation === 'left') {
  458. title.style.left = this.props.titleCharHeight + 'px';
  459. }
  460. else {
  461. title.style.right = this.props.titleCharHeight + 'px';
  462. }
  463. title.style.width = this.height + 'px';
  464. }
  465. // we need to clean up in case we did not use all elements.
  466. DOMutil.cleanupElements(this.DOMelements.title);
  467. };
  468. /**
  469. * Determine the size of text on the axis (both major and minor axis).
  470. * The size is calculated only once and then cached in this.props.
  471. * @private
  472. */
  473. DataAxis.prototype._calculateCharSize = function () {
  474. // determine the char width and height on the minor axis
  475. if (!('minorCharHeight' in this.props)) {
  476. var textMinor = document.createTextNode('0');
  477. var measureCharMinor = document.createElement('div');
  478. measureCharMinor.className = 'vis-y-axis vis-minor vis-measure';
  479. measureCharMinor.appendChild(textMinor);
  480. this.dom.frame.appendChild(measureCharMinor);
  481. this.props.minorCharHeight = measureCharMinor.clientHeight;
  482. this.props.minorCharWidth = measureCharMinor.clientWidth;
  483. this.dom.frame.removeChild(measureCharMinor);
  484. }
  485. if (!('majorCharHeight' in this.props)) {
  486. var textMajor = document.createTextNode('0');
  487. var measureCharMajor = document.createElement('div');
  488. measureCharMajor.className = 'vis-y-axis vis-major vis-measure';
  489. measureCharMajor.appendChild(textMajor);
  490. this.dom.frame.appendChild(measureCharMajor);
  491. this.props.majorCharHeight = measureCharMajor.clientHeight;
  492. this.props.majorCharWidth = measureCharMajor.clientWidth;
  493. this.dom.frame.removeChild(measureCharMajor);
  494. }
  495. if (!('titleCharHeight' in this.props)) {
  496. var textTitle = document.createTextNode('0');
  497. var measureCharTitle = document.createElement('div');
  498. measureCharTitle.className = 'vis-y-axis vis-title vis-measure';
  499. measureCharTitle.appendChild(textTitle);
  500. this.dom.frame.appendChild(measureCharTitle);
  501. this.props.titleCharHeight = measureCharTitle.clientHeight;
  502. this.props.titleCharWidth = measureCharTitle.clientWidth;
  503. this.dom.frame.removeChild(measureCharTitle);
  504. }
  505. };
  506. module.exports = DataAxis;