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.

204 lines
6.4 KiB

  1. var util = require('../../util');
  2. var DOMutil = require('../../DOMutil');
  3. var Component = require('./Component');
  4. /**
  5. * Legend for Graph2d
  6. */
  7. function Legend(body, options, side, linegraphOptions) {
  8. this.body = body;
  9. this.defaultOptions = {
  10. enabled: true,
  11. icons: true,
  12. iconSize: 20,
  13. iconSpacing: 6,
  14. left: {
  15. visible: true,
  16. position: 'top-left' // top/bottom - left,center,right
  17. },
  18. right: {
  19. visible: true,
  20. position: 'top-left' // top/bottom - left,center,right
  21. }
  22. }
  23. this.side = side;
  24. this.options = util.extend({},this.defaultOptions);
  25. this.linegraphOptions = linegraphOptions;
  26. this.svgElements = {};
  27. this.dom = {};
  28. this.groups = {};
  29. this.amountOfGroups = 0;
  30. this._create();
  31. this.setOptions(options);
  32. }
  33. Legend.prototype = new Component();
  34. Legend.prototype.clear = function() {
  35. this.groups = {};
  36. this.amountOfGroups = 0;
  37. }
  38. Legend.prototype.addGroup = function(label, graphOptions) {
  39. if (!this.groups.hasOwnProperty(label)) {
  40. this.groups[label] = graphOptions;
  41. }
  42. this.amountOfGroups += 1;
  43. };
  44. Legend.prototype.updateGroup = function(label, graphOptions) {
  45. this.groups[label] = graphOptions;
  46. };
  47. Legend.prototype.removeGroup = function(label) {
  48. if (this.groups.hasOwnProperty(label)) {
  49. delete this.groups[label];
  50. this.amountOfGroups -= 1;
  51. }
  52. };
  53. Legend.prototype._create = function() {
  54. this.dom.frame = document.createElement('div');
  55. this.dom.frame.className = 'legend';
  56. this.dom.frame.style.position = "absolute";
  57. this.dom.frame.style.top = "10px";
  58. this.dom.frame.style.display = "block";
  59. this.dom.textArea = document.createElement('div');
  60. this.dom.textArea.className = 'legendText';
  61. this.dom.textArea.style.position = "relative";
  62. this.dom.textArea.style.top = "0px";
  63. this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
  64. this.svg.style.position = 'absolute';
  65. this.svg.style.top = 0 +'px';
  66. this.svg.style.width = this.options.iconSize + 5 + 'px';
  67. this.svg.style.height = '100%';
  68. this.dom.frame.appendChild(this.svg);
  69. this.dom.frame.appendChild(this.dom.textArea);
  70. };
  71. /**
  72. * Hide the component from the DOM
  73. */
  74. Legend.prototype.hide = function() {
  75. // remove the frame containing the items
  76. if (this.dom.frame.parentNode) {
  77. this.dom.frame.parentNode.removeChild(this.dom.frame);
  78. }
  79. };
  80. /**
  81. * Show the component in the DOM (when not already visible).
  82. * @return {Boolean} changed
  83. */
  84. Legend.prototype.show = function() {
  85. // show frame containing the items
  86. if (!this.dom.frame.parentNode) {
  87. this.body.dom.center.appendChild(this.dom.frame);
  88. }
  89. };
  90. Legend.prototype.setOptions = function(options) {
  91. var fields = ['enabled','orientation','icons','left','right'];
  92. util.selectiveDeepExtend(fields, this.options, options);
  93. };
  94. Legend.prototype.redraw = function() {
  95. var activeGroups = 0;
  96. for (var groupId in this.groups) {
  97. if (this.groups.hasOwnProperty(groupId)) {
  98. if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
  99. activeGroups++;
  100. }
  101. }
  102. }
  103. if (this.options[this.side].visible == false || this.amountOfGroups == 0 || this.options.enabled == false || activeGroups == 0) {
  104. this.hide();
  105. }
  106. else {
  107. this.show();
  108. if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'bottom-left') {
  109. this.dom.frame.style.left = '4px';
  110. this.dom.frame.style.textAlign = "left";
  111. this.dom.textArea.style.textAlign = "left";
  112. this.dom.textArea.style.left = (this.options.iconSize + 15) + 'px';
  113. this.dom.textArea.style.right = '';
  114. this.svg.style.left = 0 +'px';
  115. this.svg.style.right = '';
  116. }
  117. else {
  118. this.dom.frame.style.right = '4px';
  119. this.dom.frame.style.textAlign = "right";
  120. this.dom.textArea.style.textAlign = "right";
  121. this.dom.textArea.style.right = (this.options.iconSize + 15) + 'px';
  122. this.dom.textArea.style.left = '';
  123. this.svg.style.right = 0 +'px';
  124. this.svg.style.left = '';
  125. }
  126. if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'top-right') {
  127. this.dom.frame.style.top = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
  128. this.dom.frame.style.bottom = '';
  129. }
  130. else {
  131. var scrollableHeight = this.body.domProps.center.height - this.body.domProps.centerContainer.height;
  132. this.dom.frame.style.bottom = 4 + scrollableHeight + Number(this.body.dom.center.style.top.replace("px","")) + 'px';
  133. this.dom.frame.style.top = '';
  134. }
  135. if (this.options.icons == false) {
  136. this.dom.frame.style.width = this.dom.textArea.offsetWidth + 10 + 'px';
  137. this.dom.textArea.style.right = '';
  138. this.dom.textArea.style.left = '';
  139. this.svg.style.width = '0px';
  140. }
  141. else {
  142. this.dom.frame.style.width = this.options.iconSize + 15 + this.dom.textArea.offsetWidth + 10 + 'px'
  143. this.drawLegendIcons();
  144. }
  145. var content = '';
  146. for (var groupId in this.groups) {
  147. if (this.groups.hasOwnProperty(groupId)) {
  148. if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
  149. content += this.groups[groupId].content + '<br />';
  150. }
  151. }
  152. }
  153. this.dom.textArea.innerHTML = content;
  154. this.dom.textArea.style.lineHeight = ((0.75 * this.options.iconSize) + this.options.iconSpacing) + 'px';
  155. }
  156. };
  157. Legend.prototype.drawLegendIcons = function() {
  158. if (this.dom.frame.parentNode) {
  159. DOMutil.prepareElements(this.svgElements);
  160. var padding = window.getComputedStyle(this.dom.frame).paddingTop;
  161. var iconOffset = Number(padding.replace('px',''));
  162. var x = iconOffset;
  163. var iconWidth = this.options.iconSize;
  164. var iconHeight = 0.75 * this.options.iconSize;
  165. var y = iconOffset + 0.5 * iconHeight + 3;
  166. this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
  167. for (var groupId in this.groups) {
  168. if (this.groups.hasOwnProperty(groupId)) {
  169. if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
  170. this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
  171. y += iconHeight + this.options.iconSpacing;
  172. }
  173. }
  174. }
  175. DOMutil.cleanupElements(this.svgElements);
  176. }
  177. };
  178. module.exports = Legend;