Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

3 lat temu
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  2. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  3. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  4. function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  5. function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
  6. // Copyright (c) 2016 - 2017 Uber Technologies, Inc.
  7. //
  8. // Permission is hereby granted, free of charge, to any person obtaining a copy
  9. // of this software and associated documentation files (the "Software"), to deal
  10. // in the Software without restriction, including without limitation the rights
  11. // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  12. // copies of the Software, and to permit persons to whom the Software is
  13. // furnished to do so, subject to the following conditions:
  14. //
  15. // The above copyright notice and this permission notice shall be included in
  16. // all copies or substantial portions of the Software.
  17. //
  18. // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  19. // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  20. // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  21. // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  22. // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  23. // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  24. // THE SOFTWARE.
  25. import React from 'react';
  26. import XYPlot from '../plot/xy-plot';
  27. import PolygonSeries from '../plot/series/polygon-series';
  28. import MarkSeries from '../plot/series/mark-series';
  29. import LabelSeries from '../plot/series/label-series';
  30. var MARGIN_ADJUST = 1.2;
  31. var TreemapSVG = function (_React$Component) {
  32. _inherits(TreemapSVG, _React$Component);
  33. function TreemapSVG() {
  34. _classCallCheck(this, TreemapSVG);
  35. return _possibleConstructorReturn(this, (TreemapSVG.__proto__ || Object.getPrototypeOf(TreemapSVG)).apply(this, arguments));
  36. }
  37. _createClass(TreemapSVG, [{
  38. key: 'getCircularNodes',
  39. value: function getCircularNodes() {
  40. var _props = this.props,
  41. animation = _props.animation,
  42. hideRootNode = _props.hideRootNode,
  43. nodes = _props.nodes,
  44. onLeafMouseOver = _props.onLeafMouseOver,
  45. onLeafMouseOut = _props.onLeafMouseOut,
  46. onLeafClick = _props.onLeafClick,
  47. scales = _props.scales,
  48. style = _props.style;
  49. var _nodes$reduce = nodes.reduce(function (acc, node, index) {
  50. if (!index && hideRootNode) {
  51. return acc;
  52. }
  53. var x = node.x,
  54. y = node.y,
  55. r = node.r;
  56. return {
  57. maxY: Math.max(y + r, acc.maxY),
  58. minY: Math.min(y - r, acc.minY),
  59. maxX: Math.max(x + MARGIN_ADJUST * r, acc.maxX),
  60. minX: Math.min(x - MARGIN_ADJUST * r, acc.minX),
  61. rows: acc.rows.concat([{
  62. x: x,
  63. y: y,
  64. size: r,
  65. color: scales.color(node)
  66. }])
  67. };
  68. }, {
  69. rows: [],
  70. maxY: -Infinity,
  71. minY: Infinity,
  72. maxX: -Infinity,
  73. minX: Infinity
  74. }),
  75. rows = _nodes$reduce.rows,
  76. minY = _nodes$reduce.minY,
  77. maxY = _nodes$reduce.maxY,
  78. minX = _nodes$reduce.minX,
  79. maxX = _nodes$reduce.maxX;
  80. return {
  81. updatedNodes: React.createElement(MarkSeries, {
  82. animation: animation,
  83. className: 'rv-treemap__leaf rv-treemap__leaf--circle',
  84. onSeriesMouseEnter: onLeafMouseOver,
  85. onSeriesMouseLeave: onLeafMouseOut,
  86. onSeriesClick: onLeafClick,
  87. data: rows,
  88. colorType: 'literal',
  89. getColor: function getColor(d) {
  90. return d.color;
  91. },
  92. sizeType: 'literal',
  93. getSize: function getSize(d) {
  94. return d.size;
  95. },
  96. style: style
  97. }),
  98. minY: minY,
  99. maxY: maxY,
  100. minX: minX,
  101. maxX: maxX
  102. };
  103. }
  104. }, {
  105. key: 'getNonCircularNodes',
  106. value: function getNonCircularNodes() {
  107. var _props2 = this.props,
  108. animation = _props2.animation,
  109. hideRootNode = _props2.hideRootNode,
  110. nodes = _props2.nodes,
  111. onLeafMouseOver = _props2.onLeafMouseOver,
  112. onLeafMouseOut = _props2.onLeafMouseOut,
  113. onLeafClick = _props2.onLeafClick,
  114. scales = _props2.scales,
  115. style = _props2.style;
  116. var color = scales.color;
  117. return nodes.reduce(function (acc, node, index) {
  118. if (!index && hideRootNode) {
  119. return acc;
  120. }
  121. var x0 = node.x0,
  122. x1 = node.x1,
  123. y1 = node.y1,
  124. y0 = node.y0;
  125. var x = x0;
  126. var y = y0;
  127. var nodeHeight = y1 - y0;
  128. var nodeWidth = x1 - x0;
  129. acc.maxY = Math.max(y + nodeHeight, acc.maxY);
  130. acc.minY = Math.min(y, acc.minY);
  131. acc.maxX = Math.max(x + nodeWidth, acc.maxX);
  132. acc.minX = Math.min(x, acc.minX);
  133. var data = [{ x: x, y: y }, { x: x, y: y + nodeHeight }, { x: x + nodeWidth, y: y + nodeHeight }, { x: x + nodeWidth, y: y }];
  134. acc.updatedNodes = acc.updatedNodes.concat([React.createElement(PolygonSeries, {
  135. animation: animation,
  136. className: 'rv-treemap__leaf',
  137. key: index,
  138. color: color(node),
  139. type: 'literal',
  140. onSeriesMouseEnter: onLeafMouseOver,
  141. onSeriesMouseLeave: onLeafMouseOut,
  142. onSeriesClick: onLeafClick,
  143. data: data,
  144. style: _extends({}, style, node.style)
  145. })]);
  146. return acc;
  147. }, {
  148. updatedNodes: [],
  149. maxY: -Infinity,
  150. minY: Infinity,
  151. maxX: -Infinity,
  152. minX: Infinity
  153. });
  154. }
  155. }, {
  156. key: 'render',
  157. value: function render() {
  158. var _props3 = this.props,
  159. className = _props3.className,
  160. height = _props3.height,
  161. mode = _props3.mode,
  162. nodes = _props3.nodes,
  163. width = _props3.width;
  164. var useCirclePacking = mode === 'circlePack';
  165. var _ref = useCirclePacking ? this.getCircularNodes() : this.getNonCircularNodes(),
  166. minY = _ref.minY,
  167. maxY = _ref.maxY,
  168. minX = _ref.minX,
  169. maxX = _ref.maxX,
  170. updatedNodes = _ref.updatedNodes;
  171. var labels = nodes.reduce(function (acc, node) {
  172. if (!node.data.title) {
  173. return acc;
  174. }
  175. return acc.concat(_extends({}, node.data, {
  176. x: node.x0 || node.x,
  177. y: node.y0 || node.y,
  178. label: '' + node.data.title
  179. }));
  180. }, []);
  181. return React.createElement(
  182. XYPlot,
  183. _extends({
  184. className: 'rv-treemap ' + (useCirclePacking ? 'rv-treemap-circle-packed' : '') + ' ' + className,
  185. width: width,
  186. height: height,
  187. yDomain: [maxY, minY],
  188. xDomain: [minX, maxX],
  189. colorType: 'literal',
  190. hasTreeStructure: true
  191. }, this.props),
  192. updatedNodes,
  193. React.createElement(LabelSeries, { data: labels })
  194. );
  195. }
  196. }]);
  197. return TreemapSVG;
  198. }(React.Component);
  199. TreemapSVG.displayName = 'TreemapSVG';
  200. export default TreemapSVG;