ActiveShapeUtils.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. var _excluded = ["option", "shapeType", "propTransformer", "activeClassName", "isActive"];
  2. function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
  3. function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
  4. function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
  5. function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
  6. function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
  7. function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  8. function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
  9. function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
  10. import React, { isValidElement, cloneElement } from 'react';
  11. import isFunction from 'lodash/isFunction';
  12. import isPlainObject from 'lodash/isPlainObject';
  13. import isBoolean from 'lodash/isBoolean';
  14. import isEqual from 'lodash/isEqual';
  15. import { Rectangle } from '../shape/Rectangle';
  16. import { Trapezoid } from '../shape/Trapezoid';
  17. import { Sector } from '../shape/Sector';
  18. import { Layer } from '../container/Layer';
  19. import { Symbols } from '../shape/Symbols';
  20. /**
  21. * This is an abstraction for rendering a user defined prop for a customized shape in several forms.
  22. *
  23. * <Shape /> is the root and will handle taking in:
  24. * - an object of svg properties
  25. * - a boolean
  26. * - a render prop(inline function that returns jsx)
  27. * - a react element
  28. *
  29. * <ShapeSelector /> is a subcomponent of <Shape /> and used to match a component
  30. * to the value of props.shapeType that is passed to the root.
  31. *
  32. */
  33. function defaultPropTransformer(option, props) {
  34. return _objectSpread(_objectSpread({}, props), option);
  35. }
  36. function isSymbolsProps(shapeType, _elementProps) {
  37. return shapeType === 'symbols';
  38. }
  39. function ShapeSelector(_ref) {
  40. var shapeType = _ref.shapeType,
  41. elementProps = _ref.elementProps;
  42. switch (shapeType) {
  43. case 'rectangle':
  44. return /*#__PURE__*/React.createElement(Rectangle, elementProps);
  45. case 'trapezoid':
  46. return /*#__PURE__*/React.createElement(Trapezoid, elementProps);
  47. case 'sector':
  48. return /*#__PURE__*/React.createElement(Sector, elementProps);
  49. case 'symbols':
  50. if (isSymbolsProps(shapeType, elementProps)) {
  51. return /*#__PURE__*/React.createElement(Symbols, elementProps);
  52. }
  53. break;
  54. default:
  55. return null;
  56. }
  57. }
  58. export function getPropsFromShapeOption(option) {
  59. if ( /*#__PURE__*/isValidElement(option)) {
  60. return option.props;
  61. }
  62. return option;
  63. }
  64. export function Shape(_ref2) {
  65. var option = _ref2.option,
  66. shapeType = _ref2.shapeType,
  67. _ref2$propTransformer = _ref2.propTransformer,
  68. propTransformer = _ref2$propTransformer === void 0 ? defaultPropTransformer : _ref2$propTransformer,
  69. _ref2$activeClassName = _ref2.activeClassName,
  70. activeClassName = _ref2$activeClassName === void 0 ? 'recharts-active-shape' : _ref2$activeClassName,
  71. isActive = _ref2.isActive,
  72. props = _objectWithoutProperties(_ref2, _excluded);
  73. var shape;
  74. if ( /*#__PURE__*/isValidElement(option)) {
  75. shape = /*#__PURE__*/cloneElement(option, _objectSpread(_objectSpread({}, props), getPropsFromShapeOption(option)));
  76. } else if (isFunction(option)) {
  77. shape = option(props);
  78. } else if (isPlainObject(option) && !isBoolean(option)) {
  79. var nextProps = propTransformer(option, props);
  80. shape = /*#__PURE__*/React.createElement(ShapeSelector, {
  81. shapeType: shapeType,
  82. elementProps: nextProps
  83. });
  84. } else {
  85. var elementProps = props;
  86. shape = /*#__PURE__*/React.createElement(ShapeSelector, {
  87. shapeType: shapeType,
  88. elementProps: elementProps
  89. });
  90. }
  91. if (isActive) {
  92. return /*#__PURE__*/React.createElement(Layer, {
  93. className: activeClassName
  94. }, shape);
  95. }
  96. return shape;
  97. }
  98. /**
  99. * This is an abstraction to handle identifying the active index from a tooltip mouse interaction
  100. */
  101. export function isFunnel(graphicalItem, _item) {
  102. return _item != null && 'trapezoids' in graphicalItem.props;
  103. }
  104. export function isPie(graphicalItem, _item) {
  105. return _item != null && 'sectors' in graphicalItem.props;
  106. }
  107. export function isScatter(graphicalItem, _item) {
  108. return _item != null && 'points' in graphicalItem.props;
  109. }
  110. export function compareFunnel(shapeData, activeTooltipItem) {
  111. var _activeTooltipItem$la, _activeTooltipItem$la2;
  112. var xMatches = shapeData.x === (activeTooltipItem === null || activeTooltipItem === void 0 || (_activeTooltipItem$la = activeTooltipItem.labelViewBox) === null || _activeTooltipItem$la === void 0 ? void 0 : _activeTooltipItem$la.x) || shapeData.x === activeTooltipItem.x;
  113. var yMatches = shapeData.y === (activeTooltipItem === null || activeTooltipItem === void 0 || (_activeTooltipItem$la2 = activeTooltipItem.labelViewBox) === null || _activeTooltipItem$la2 === void 0 ? void 0 : _activeTooltipItem$la2.y) || shapeData.y === activeTooltipItem.y;
  114. return xMatches && yMatches;
  115. }
  116. export function comparePie(shapeData, activeTooltipItem) {
  117. var startAngleMatches = shapeData.endAngle === activeTooltipItem.endAngle;
  118. var endAngleMatches = shapeData.startAngle === activeTooltipItem.startAngle;
  119. return startAngleMatches && endAngleMatches;
  120. }
  121. export function compareScatter(shapeData, activeTooltipItem) {
  122. var xMatches = shapeData.x === activeTooltipItem.x;
  123. var yMatches = shapeData.y === activeTooltipItem.y;
  124. var zMatches = shapeData.z === activeTooltipItem.z;
  125. return xMatches && yMatches && zMatches;
  126. }
  127. function getComparisonFn(graphicalItem, activeItem) {
  128. var comparison;
  129. if (isFunnel(graphicalItem, activeItem)) {
  130. comparison = compareFunnel;
  131. } else if (isPie(graphicalItem, activeItem)) {
  132. comparison = comparePie;
  133. } else if (isScatter(graphicalItem, activeItem)) {
  134. comparison = compareScatter;
  135. }
  136. return comparison;
  137. }
  138. function getShapeDataKey(graphicalItem, activeItem) {
  139. var shapeKey;
  140. if (isFunnel(graphicalItem, activeItem)) {
  141. shapeKey = 'trapezoids';
  142. } else if (isPie(graphicalItem, activeItem)) {
  143. shapeKey = 'sectors';
  144. } else if (isScatter(graphicalItem, activeItem)) {
  145. shapeKey = 'points';
  146. }
  147. return shapeKey;
  148. }
  149. function getActiveShapeTooltipPayload(graphicalItem, activeItem) {
  150. if (isFunnel(graphicalItem, activeItem)) {
  151. var _activeItem$tooltipPa;
  152. return (_activeItem$tooltipPa = activeItem.tooltipPayload) === null || _activeItem$tooltipPa === void 0 || (_activeItem$tooltipPa = _activeItem$tooltipPa[0]) === null || _activeItem$tooltipPa === void 0 || (_activeItem$tooltipPa = _activeItem$tooltipPa.payload) === null || _activeItem$tooltipPa === void 0 ? void 0 : _activeItem$tooltipPa.payload;
  153. }
  154. if (isPie(graphicalItem, activeItem)) {
  155. var _activeItem$tooltipPa2;
  156. return (_activeItem$tooltipPa2 = activeItem.tooltipPayload) === null || _activeItem$tooltipPa2 === void 0 || (_activeItem$tooltipPa2 = _activeItem$tooltipPa2[0]) === null || _activeItem$tooltipPa2 === void 0 || (_activeItem$tooltipPa2 = _activeItem$tooltipPa2.payload) === null || _activeItem$tooltipPa2 === void 0 ? void 0 : _activeItem$tooltipPa2.payload;
  157. }
  158. if (isScatter(graphicalItem, activeItem)) {
  159. return activeItem.payload;
  160. }
  161. return {};
  162. }
  163. /**
  164. *
  165. * @param {GetActiveShapeIndexForTooltip} arg an object of incoming attributes from Tooltip
  166. * @returns {number}
  167. *
  168. * To handle possible duplicates in the data set,
  169. * match both the data value of the active item to a data value on a graph item,
  170. * and match the mouse coordinates of the active item to the coordinates of in a particular components shape data.
  171. * This assumes equal lengths of shape objects to data items.
  172. */
  173. export function getActiveShapeIndexForTooltip(_ref3) {
  174. var activeTooltipItem = _ref3.activeTooltipItem,
  175. graphicalItem = _ref3.graphicalItem,
  176. itemData = _ref3.itemData;
  177. var shapeKey = getShapeDataKey(graphicalItem, activeTooltipItem);
  178. var tooltipPayload = getActiveShapeTooltipPayload(graphicalItem, activeTooltipItem);
  179. var activeItemMatches = itemData.filter(function (datum, dataIndex) {
  180. var valuesMatch = isEqual(tooltipPayload, datum);
  181. var mouseCoordinateMatches = graphicalItem.props[shapeKey].filter(function (shapeData) {
  182. var comparison = getComparisonFn(graphicalItem, activeTooltipItem);
  183. return comparison(shapeData, activeTooltipItem);
  184. });
  185. // get the last index in case of multiple matches
  186. var indexOfMouseCoordinates = graphicalItem.props[shapeKey].indexOf(mouseCoordinateMatches[mouseCoordinateMatches.length - 1]);
  187. var coordinatesMatch = dataIndex === indexOfMouseCoordinates;
  188. return valuesMatch && coordinatesMatch;
  189. });
  190. // get the last index in case of multiple matches
  191. var activeIndex = itemData.indexOf(activeItemMatches[activeItemMatches.length - 1]);
  192. return activeIndex;
  193. }