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.

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