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.

219 lines
7.4 KiB

  1. var util = require('../../util');
  2. var DOMutil = require('../../DOMutil');
  3. var Line = require('./graph2d_types/line');
  4. var Bar = require('./graph2d_types/bar');
  5. var Points = require('./graph2d_types/points');
  6. /**
  7. * /**
  8. * @param {object} group | the object of the group from the dataset
  9. * @param {string} groupId | ID of the group
  10. * @param {object} options | the default options
  11. * @param {array} groupsUsingDefaultStyles | this array has one entree.
  12. * It is passed as an array so it is passed by reference.
  13. * It enumerates through the default styles
  14. * @constructor
  15. */
  16. function GraphGroup (group, groupId, options, groupsUsingDefaultStyles) {
  17. this.id = groupId;
  18. var fields = ['sampling','style','sort','yAxisOrientation','barChart','drawPoints','shaded','interpolation']
  19. this.options = util.selectiveBridgeObject(fields,options);
  20. this.usingDefaultStyle = group.className === undefined;
  21. this.groupsUsingDefaultStyles = groupsUsingDefaultStyles;
  22. this.zeroPosition = 0;
  23. this.update(group);
  24. if (this.usingDefaultStyle == true) {
  25. this.groupsUsingDefaultStyles[0] += 1;
  26. }
  27. this.itemsData = [];
  28. this.visible = group.visible === undefined ? true : group.visible;
  29. }
  30. /**
  31. * this loads a reference to all items in this group into this group.
  32. * @param {array} items
  33. */
  34. GraphGroup.prototype.setItems = function(items) {
  35. if (items != null) {
  36. this.itemsData = items;
  37. if (this.options.sort == true) {
  38. this.itemsData.sort(function (a,b) {return a.x - b.x;})
  39. }
  40. // typecast all items to numbers. Takes around 10ms for 500.000 items
  41. for (var i = 0; i < this.itemsData.length; i++) {
  42. this.itemsData[i].y = Number(this.itemsData[i].y);
  43. }
  44. }
  45. else {
  46. this.itemsData = [];
  47. }
  48. };
  49. /**
  50. * this is used for plotting barcharts, this way, we only have to calculate it once.
  51. * @param pos
  52. */
  53. GraphGroup.prototype.setZeroPosition = function(pos) {
  54. this.zeroPosition = pos;
  55. };
  56. /**
  57. * set the options of the graph group over the default options.
  58. * @param options
  59. */
  60. GraphGroup.prototype.setOptions = function(options) {
  61. if (options !== undefined) {
  62. var fields = ['sampling','style','sort','yAxisOrientation','barChart'];
  63. util.selectiveDeepExtend(fields, this.options, options);
  64. // if the group's drawPoints is a function delegate the callback to the onRender property
  65. if (typeof options.drawPoints == 'function') {
  66. options.drawPoints = {
  67. onRender: options.drawPoints
  68. }
  69. }
  70. util.mergeOptions(this.options, options,'interpolation');
  71. util.mergeOptions(this.options, options,'drawPoints');
  72. util.mergeOptions(this.options, options,'shaded');
  73. if (options.interpolation) {
  74. if (typeof options.interpolation == 'object') {
  75. if (options.interpolation.parametrization) {
  76. if (options.interpolation.parametrization == 'uniform') {
  77. this.options.interpolation.alpha = 0;
  78. }
  79. else if (options.interpolation.parametrization == 'chordal') {
  80. this.options.interpolation.alpha = 1.0;
  81. }
  82. else {
  83. this.options.interpolation.parametrization = 'centripetal';
  84. this.options.interpolation.alpha = 0.5;
  85. }
  86. }
  87. }
  88. }
  89. }
  90. if (this.options.style == 'line') {
  91. this.type = new Line(this.id, this.options);
  92. }
  93. else if (this.options.style == 'bar') {
  94. this.type = new Bar(this.id, this.options);
  95. }
  96. else if (this.options.style == 'points') {
  97. this.type = new Points(this.id, this.options);
  98. }
  99. };
  100. /**
  101. * this updates the current group class with the latest group dataset entree, used in _updateGroup in linegraph
  102. * @param group
  103. */
  104. GraphGroup.prototype.update = function(group) {
  105. this.group = group;
  106. this.content = group.content || 'graph';
  107. this.className = group.className || this.className || 'vis-graph-group' + this.groupsUsingDefaultStyles[0] % 10;
  108. this.visible = group.visible === undefined ? true : group.visible;
  109. this.style = group.style;
  110. this.setOptions(group.options);
  111. };
  112. /**
  113. * draw the icon for the legend.
  114. *
  115. * @param x
  116. * @param y
  117. * @param JSONcontainer
  118. * @param SVGcontainer
  119. * @param iconWidth
  120. * @param iconHeight
  121. */
  122. GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) {
  123. var fillHeight = iconHeight * 0.5;
  124. var path, fillPath;
  125. var outline = DOMutil.getSVGElement("rect", JSONcontainer, SVGcontainer);
  126. outline.setAttributeNS(null, "x", x);
  127. outline.setAttributeNS(null, "y", y - fillHeight);
  128. outline.setAttributeNS(null, "width", iconWidth);
  129. outline.setAttributeNS(null, "height", 2*fillHeight);
  130. outline.setAttributeNS(null, "class", "vis-outline");
  131. if (this.options.style == 'line') {
  132. path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
  133. path.setAttributeNS(null, "class", this.className);
  134. if(this.style !== undefined) {
  135. path.setAttributeNS(null, "style", this.style);
  136. }
  137. path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+"");
  138. if (this.options.shaded.enabled == true) {
  139. fillPath = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
  140. if (this.options.shaded.orientation == 'top') {
  141. fillPath.setAttributeNS(null, "d", "M"+x+", " + (y - fillHeight) +
  142. "L"+x+","+y+" L"+ (x + iconWidth) + ","+y+" L"+ (x + iconWidth) + "," + (y - fillHeight));
  143. }
  144. else {
  145. fillPath.setAttributeNS(null, "d", "M"+x+","+y+" " +
  146. "L"+x+"," + (y + fillHeight) + " " +
  147. "L"+ (x + iconWidth) + "," + (y + fillHeight) +
  148. "L"+ (x + iconWidth) + ","+y);
  149. }
  150. fillPath.setAttributeNS(null, "class", this.className + " vis-icon-fill");
  151. }
  152. if (this.options.drawPoints.enabled == true) {
  153. var groupTemplate = {
  154. style: this.options.drawPoints.style,
  155. size:this.options.drawPoints.size,
  156. className: this.className
  157. };
  158. DOMutil.drawPoint(x + 0.5 * iconWidth, y, groupTemplate, JSONcontainer, SVGcontainer);
  159. }
  160. }
  161. else {
  162. var barWidth = Math.round(0.3 * iconWidth);
  163. var bar1Height = Math.round(0.4 * iconHeight);
  164. var bar2Height = Math.round(0.75 * iconHeight);
  165. var offset = Math.round((iconWidth - (2 * barWidth))/3);
  166. DOMutil.drawBar(x + 0.5*barWidth + offset , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer, this.style);
  167. DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer, this.style);
  168. }
  169. };
  170. /**
  171. * return the legend entree for this group.
  172. *
  173. * @param iconWidth
  174. * @param iconHeight
  175. * @returns {{icon: HTMLElement, label: (group.content|*|string), orientation: (.options.yAxisOrientation|*)}}
  176. */
  177. GraphGroup.prototype.getLegend = function(iconWidth, iconHeight) {
  178. var svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
  179. this.drawIcon(0,0.5*iconHeight,[],svg,iconWidth,iconHeight);
  180. return {icon: svg, label: this.content, orientation:this.options.yAxisOrientation};
  181. };
  182. GraphGroup.prototype.getYRange = function(groupData) {
  183. return this.type.getYRange(groupData);
  184. };
  185. GraphGroup.prototype.getData = function(groupData) {
  186. return this.type.getData(groupData);
  187. };
  188. GraphGroup.prototype.draw = function(dataset, group, framework) {
  189. this.type.draw(dataset, group, framework);
  190. };
  191. module.exports = GraphGroup;