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.

3 vuotta sitten
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. 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; }; }();
  6. 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; }; // 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. var _react = require('react');
  26. var _react2 = _interopRequireDefault(_react);
  27. var _propTypes = require('prop-types');
  28. var _propTypes2 = _interopRequireDefault(_propTypes);
  29. var _d3Hierarchy = require('d3-hierarchy');
  30. var _theme = require('../theme');
  31. var _animation = require('../animation');
  32. var _scalesUtils = require('../utils/scales-utils');
  33. var _chartUtils = require('../utils/chart-utils');
  34. var _treemapDom = require('./treemap-dom');
  35. var _treemapDom2 = _interopRequireDefault(_treemapDom);
  36. var _treemapSvg = require('./treemap-svg');
  37. var _treemapSvg2 = _interopRequireDefault(_treemapSvg);
  38. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  39. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  40. 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; }
  41. 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; }
  42. var TREEMAP_TILE_MODES = {
  43. squarify: _d3Hierarchy.treemapSquarify,
  44. resquarify: _d3Hierarchy.treemapResquarify,
  45. slice: _d3Hierarchy.treemapSlice,
  46. dice: _d3Hierarchy.treemapDice,
  47. slicedice: _d3Hierarchy.treemapSliceDice,
  48. binary: _d3Hierarchy.treemapBinary
  49. };
  50. var TREEMAP_LAYOUT_MODES = ['circlePack', 'partition', 'partition-pivot'];
  51. var NOOP = function NOOP(d) {
  52. return d;
  53. };
  54. var ATTRIBUTES = ['opacity', 'color'];
  55. var DEFAULT_MARGINS = {
  56. left: 40,
  57. right: 10,
  58. top: 10,
  59. bottom: 40
  60. };
  61. /**
  62. * Get the map of scale functions from the given props.
  63. * @param {Object} props Props for the component.
  64. * @returns {Object} Map of scale functions.
  65. * @private
  66. */
  67. function _getScaleFns(props) {
  68. var data = props.data;
  69. var allData = data.children || [];
  70. // Adding _allData property to the object to reuse the existing
  71. // getAttributeFunctor function.
  72. var compatibleProps = _extends({}, props, (0, _scalesUtils.getMissingScaleProps)(props, allData, ATTRIBUTES), {
  73. _allData: allData
  74. });
  75. return {
  76. opacity: (0, _scalesUtils.getAttributeFunctor)(compatibleProps, 'opacity'),
  77. color: (0, _scalesUtils.getAttributeFunctor)(compatibleProps, 'color')
  78. };
  79. }
  80. var Treemap = function (_React$Component) {
  81. _inherits(Treemap, _React$Component);
  82. function Treemap(props) {
  83. _classCallCheck(this, Treemap);
  84. var _this = _possibleConstructorReturn(this, (Treemap.__proto__ || Object.getPrototypeOf(Treemap)).call(this, props));
  85. _this.state = _extends({
  86. scales: _getScaleFns(props)
  87. }, (0, _chartUtils.getInnerDimensions)(props, props.margin));
  88. return _this;
  89. }
  90. _createClass(Treemap, [{
  91. key: 'componentWillReceiveProps',
  92. value: function componentWillReceiveProps(props) {
  93. this.setState(_extends({
  94. scales: _getScaleFns(props)
  95. }, (0, _chartUtils.getInnerDimensions)(props, props.margin)));
  96. }
  97. /**
  98. * Create the list of nodes to render.
  99. * @returns {Array} Array of nodes.
  100. * @private
  101. */
  102. }, {
  103. key: '_getNodesToRender',
  104. value: function _getNodesToRender() {
  105. var _state = this.state,
  106. innerWidth = _state.innerWidth,
  107. innerHeight = _state.innerHeight;
  108. var _props = this.props,
  109. data = _props.data,
  110. mode = _props.mode,
  111. padding = _props.padding,
  112. sortFunction = _props.sortFunction,
  113. getSize = _props.getSize;
  114. if (!data) {
  115. return [];
  116. }
  117. if (mode === 'partition' || mode === 'partition-pivot') {
  118. var partitionFunction = (0, _d3Hierarchy.partition)().size(mode === 'partition-pivot' ? [innerHeight, innerWidth] : [innerWidth, innerHeight]).padding(padding);
  119. var _structuredInput = (0, _d3Hierarchy.hierarchy)(data).sum(getSize).sort(function (a, b) {
  120. return sortFunction(a, b, getSize);
  121. });
  122. var mappedNodes = partitionFunction(_structuredInput).descendants();
  123. if (mode === 'partition-pivot') {
  124. return mappedNodes.map(function (node) {
  125. return _extends({}, node, {
  126. x0: node.y0,
  127. x1: node.y1,
  128. y0: node.x0,
  129. y1: node.x1
  130. });
  131. });
  132. }
  133. return mappedNodes;
  134. }
  135. if (mode === 'circlePack') {
  136. var packingFunction = (0, _d3Hierarchy.pack)().size([innerWidth, innerHeight]).padding(padding);
  137. var _structuredInput2 = (0, _d3Hierarchy.hierarchy)(data).sum(getSize).sort(function (a, b) {
  138. return sortFunction(a, b, getSize);
  139. });
  140. return packingFunction(_structuredInput2).descendants();
  141. }
  142. var tileFn = TREEMAP_TILE_MODES[mode];
  143. var treemapingFunction = (0, _d3Hierarchy.treemap)(tileFn).tile(tileFn).size([innerWidth, innerHeight]).padding(padding);
  144. var structuredInput = (0, _d3Hierarchy.hierarchy)(data).sum(getSize).sort(function (a, b) {
  145. return sortFunction(a, b, getSize);
  146. });
  147. return treemapingFunction(structuredInput).descendants();
  148. }
  149. }, {
  150. key: 'render',
  151. value: function render() {
  152. var renderMode = this.props.renderMode;
  153. var scales = this.state.scales;
  154. var nodes = this._getNodesToRender();
  155. var TreemapElement = renderMode === 'SVG' ? _treemapSvg2.default : _treemapDom2.default;
  156. return _react2.default.createElement(TreemapElement, _extends({}, this.props, { nodes: nodes, scales: scales }));
  157. }
  158. }]);
  159. return Treemap;
  160. }(_react2.default.Component);
  161. Treemap.displayName = 'Treemap';
  162. Treemap.propTypes = {
  163. animation: _animation.AnimationPropType,
  164. className: _propTypes2.default.string,
  165. data: _propTypes2.default.object.isRequired,
  166. height: _propTypes2.default.number.isRequired,
  167. hideRootNode: _propTypes2.default.bool,
  168. margin: _chartUtils.MarginPropType,
  169. mode: _propTypes2.default.oneOf(Object.keys(TREEMAP_TILE_MODES).concat(TREEMAP_LAYOUT_MODES)),
  170. onLeafClick: _propTypes2.default.func,
  171. onLeafMouseOver: _propTypes2.default.func,
  172. onLeafMouseOut: _propTypes2.default.func,
  173. useCirclePacking: _propTypes2.default.bool,
  174. padding: _propTypes2.default.number.isRequired,
  175. sortFunction: _propTypes2.default.func,
  176. width: _propTypes2.default.number.isRequired,
  177. getSize: _propTypes2.default.func,
  178. getColor: _propTypes2.default.func
  179. };
  180. Treemap.defaultProps = {
  181. className: '',
  182. colorRange: _theme.CONTINUOUS_COLOR_RANGE,
  183. _colorValue: _theme.DEFAULT_COLOR,
  184. data: {
  185. children: []
  186. },
  187. hideRootNode: false,
  188. margin: DEFAULT_MARGINS,
  189. mode: 'squarify',
  190. onLeafClick: NOOP,
  191. onLeafMouseOver: NOOP,
  192. onLeafMouseOut: NOOP,
  193. opacityType: _theme.OPACITY_TYPE,
  194. _opacityValue: _theme.DEFAULT_OPACITY,
  195. padding: 1,
  196. sortFunction: function sortFunction(a, b, accessor) {
  197. if (!accessor) {
  198. return 0;
  199. }
  200. return accessor(a) - accessor(b);
  201. },
  202. getSize: function getSize(d) {
  203. return d.size;
  204. },
  205. getColor: function getColor(d) {
  206. return d.color;
  207. },
  208. getLabel: function getLabel(d) {
  209. return d.title;
  210. }
  211. };
  212. exports.default = Treemap;