Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 
 

263 lignes
8.6 KiB

  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. 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.
  6. //
  7. // Permission is hereby granted, free of charge, to any person obtaining a copy
  8. // of this software and associated documentation files (the "Software"), to deal
  9. // in the Software without restriction, including without limitation the rights
  10. // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11. // copies of the Software, and to permit persons to whom the Software is
  12. // furnished to do so, subject to the following conditions:
  13. //
  14. // The above copyright notice and this permission notice shall be included in
  15. // all copies or substantial portions of the Software.
  16. //
  17. // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18. // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19. // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  20. // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21. // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22. // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  23. // THE SOFTWARE.
  24. var _react = require('react');
  25. var _react2 = _interopRequireDefault(_react);
  26. var _propTypes = require('prop-types');
  27. var _propTypes2 = _interopRequireDefault(_propTypes);
  28. var _d3Shape = require('d3-shape');
  29. var _animation = require('../animation');
  30. var _arcSeries = require('../plot/series/arc-series');
  31. var _arcSeries2 = _interopRequireDefault(_arcSeries);
  32. var _labelSeries = require('../plot/series/label-series');
  33. var _labelSeries2 = _interopRequireDefault(_labelSeries);
  34. var _xyPlot = require('../plot/xy-plot');
  35. var _xyPlot2 = _interopRequireDefault(_xyPlot);
  36. var _theme = require('../theme');
  37. var _chartUtils = require('../utils/chart-utils');
  38. var _seriesUtils = require('../utils/series-utils');
  39. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  40. var predefinedClassName = 'rv-radial-chart';
  41. var DEFAULT_RADIUS_MARGIN = 15;
  42. /**
  43. * Create the list of wedges to render.
  44. * @param {Object} props
  45. props.data {Object} - tree structured data (each node has a name anc an array of children)
  46. * @returns {Array} Array of nodes.
  47. */
  48. function getWedgesToRender(_ref) {
  49. var data = _ref.data,
  50. getAngle = _ref.getAngle;
  51. var pie = (0, _d3Shape.pie)().sort(null).value(getAngle);
  52. var pieData = pie(data).reverse();
  53. return pieData.map(function (row, index) {
  54. return _extends({}, row.data, {
  55. angle0: row.startAngle,
  56. angle: row.endAngle,
  57. radius0: row.data.innerRadius || 0,
  58. radius: row.data.radius || 1,
  59. color: row.data.color || index
  60. });
  61. });
  62. }
  63. function generateLabels(mappedData, accessors) {
  64. var labelsRadiusMultiplier = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1.1;
  65. var getLabel = accessors.getLabel,
  66. getSubLabel = accessors.getSubLabel;
  67. return mappedData.reduce(function (res, row) {
  68. var angle = row.angle,
  69. angle0 = row.angle0,
  70. radius = row.radius;
  71. var centeredAngle = (angle + angle0) / 2;
  72. // unfortunate, but true fact: d3 starts its radians at 12 oclock rather than 3
  73. // and move clockwise rather than counter clockwise. why why why!
  74. var updatedAngle = -1 * centeredAngle + Math.PI / 2;
  75. var newLabels = [];
  76. if (getLabel(row)) {
  77. newLabels.push({
  78. angle: updatedAngle,
  79. radius: radius * labelsRadiusMultiplier,
  80. label: getLabel(row)
  81. });
  82. }
  83. if (getSubLabel(row)) {
  84. newLabels.push({
  85. angle: updatedAngle,
  86. radius: radius * labelsRadiusMultiplier,
  87. label: getSubLabel(row),
  88. style: { fontSize: 10 },
  89. yOffset: 12
  90. });
  91. }
  92. return res.concat(newLabels);
  93. }, []);
  94. // could add force direction here to make sure the labels dont overlap
  95. }
  96. /**
  97. * Get the max radius so the chart can extend to the margin.
  98. * @param {Number} width - container width
  99. * @param {Number} height - container height
  100. * @return {Number} radius
  101. */
  102. function getMaxRadius(width, height) {
  103. return Math.min(width, height) / 2 - DEFAULT_RADIUS_MARGIN;
  104. }
  105. function RadialChart(props) {
  106. var animation = props.animation,
  107. className = props.className,
  108. children = props.children,
  109. colorType = props.colorType,
  110. data = props.data,
  111. getAngle = props.getAngle,
  112. getLabel = props.getLabel,
  113. getSubLabel = props.getSubLabel,
  114. height = props.height,
  115. hideRootNode = props.hideRootNode,
  116. innerRadius = props.innerRadius,
  117. labelsAboveChildren = props.labelsAboveChildren,
  118. labelsRadiusMultiplier = props.labelsRadiusMultiplier,
  119. labelsStyle = props.labelsStyle,
  120. margin = props.margin,
  121. onMouseLeave = props.onMouseLeave,
  122. onMouseEnter = props.onMouseEnter,
  123. radius = props.radius,
  124. showLabels = props.showLabels,
  125. style = props.style,
  126. width = props.width;
  127. var mappedData = getWedgesToRender({
  128. data: data,
  129. height: height,
  130. hideRootNode: hideRootNode,
  131. width: width,
  132. getAngle: getAngle
  133. });
  134. var radialDomain = (0, _seriesUtils.getRadialDomain)(mappedData);
  135. var arcProps = _extends({
  136. colorType: colorType
  137. }, props, {
  138. animation: animation,
  139. radiusDomain: [0, radialDomain],
  140. data: mappedData,
  141. radiusNoFallBack: true,
  142. style: style,
  143. arcClassName: 'rv-radial-chart__series--pie__slice'
  144. });
  145. if (radius) {
  146. arcProps.radiusDomain = [0, 1];
  147. arcProps.radiusRange = [innerRadius || 0, radius];
  148. arcProps.radiusType = 'linear';
  149. }
  150. var maxRadius = radius ? radius : getMaxRadius(width, height);
  151. var defaultMargin = (0, _chartUtils.getRadialLayoutMargin)(width, height, maxRadius);
  152. var labels = generateLabels(mappedData, {
  153. getLabel: getLabel,
  154. getSubLabel: getSubLabel
  155. }, labelsRadiusMultiplier);
  156. return _react2.default.createElement(
  157. _xyPlot2.default,
  158. {
  159. height: height,
  160. width: width,
  161. margin: _extends({}, margin, defaultMargin),
  162. className: className + ' ' + predefinedClassName,
  163. onMouseLeave: onMouseLeave,
  164. onMouseEnter: onMouseEnter,
  165. xDomain: [-radialDomain, radialDomain],
  166. yDomain: [-radialDomain, radialDomain]
  167. },
  168. _react2.default.createElement(_arcSeries2.default, _extends({}, arcProps, { getAngle: function getAngle(d) {
  169. return d.angle;
  170. } })),
  171. showLabels && !labelsAboveChildren && _react2.default.createElement(_labelSeries2.default, { data: labels, style: labelsStyle }),
  172. children,
  173. showLabels && labelsAboveChildren && _react2.default.createElement(_labelSeries2.default, { data: labels, style: labelsStyle })
  174. );
  175. }
  176. RadialChart.displayName = 'RadialChart';
  177. RadialChart.propTypes = {
  178. animation: _animation.AnimationPropType,
  179. className: _propTypes2.default.string,
  180. colorType: _propTypes2.default.string,
  181. data: _propTypes2.default.arrayOf(_propTypes2.default.shape({
  182. angle: _propTypes2.default.number,
  183. className: _propTypes2.default.string,
  184. label: _propTypes2.default.string,
  185. radius: _propTypes2.default.number,
  186. style: _propTypes2.default.object
  187. })).isRequired,
  188. getAngle: _propTypes2.default.func,
  189. getAngle0: _propTypes2.default.func,
  190. padAngle: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.number]),
  191. getRadius: _propTypes2.default.func,
  192. getRadius0: _propTypes2.default.func,
  193. getLabel: _propTypes2.default.func,
  194. height: _propTypes2.default.number.isRequired,
  195. labelsAboveChildren: _propTypes2.default.bool,
  196. labelsStyle: _propTypes2.default.object,
  197. margin: _chartUtils.MarginPropType,
  198. onValueClick: _propTypes2.default.func,
  199. onValueMouseOver: _propTypes2.default.func,
  200. onValueMouseOut: _propTypes2.default.func,
  201. showLabels: _propTypes2.default.bool,
  202. style: _propTypes2.default.object,
  203. subLabel: _propTypes2.default.func,
  204. width: _propTypes2.default.number.isRequired
  205. };
  206. RadialChart.defaultProps = {
  207. className: '',
  208. colorType: 'category',
  209. colorRange: _theme.DISCRETE_COLOR_RANGE,
  210. padAngle: 0,
  211. getAngle: function getAngle(d) {
  212. return d.angle;
  213. },
  214. getAngle0: function getAngle0(d) {
  215. return d.angle0;
  216. },
  217. getRadius: function getRadius(d) {
  218. return d.radius;
  219. },
  220. getRadius0: function getRadius0(d) {
  221. return d.radius0;
  222. },
  223. getLabel: function getLabel(d) {
  224. return d.label;
  225. },
  226. getSubLabel: function getSubLabel(d) {
  227. return d.subLabel;
  228. }
  229. };
  230. exports.default = RadialChart;