Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 

254 строки
8.7 KiB

  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, { PureComponent } from 'react';
  26. import PropTypes from 'prop-types';
  27. import { transformValueToString } from '../utils/data-utils';
  28. import { getAttributeFunctor } from '../utils/scales-utils';
  29. /**
  30. * Format title by detault.
  31. * @param {Array} values List of values.
  32. * @returns {*} Formatted value or undefined.
  33. */
  34. function defaultTitleFormat(values) {
  35. var value = getFirstNonEmptyValue(values);
  36. if (value) {
  37. return {
  38. title: 'x',
  39. value: transformValueToString(value.x)
  40. };
  41. }
  42. }
  43. /**
  44. * Format items by default.
  45. * @param {Array} values Array of values.
  46. * @returns {*} Formatted list of items.
  47. */
  48. function defaultItemsFormat(values) {
  49. return values.map(function (v, i) {
  50. if (v) {
  51. return { value: v.y, title: i };
  52. }
  53. });
  54. }
  55. /**
  56. * Get the first non-empty item from an array.
  57. * @param {Array} values Array of values.
  58. * @returns {*} First non-empty value or undefined.
  59. */
  60. function getFirstNonEmptyValue(values) {
  61. return (values || []).find(function (v) {
  62. return Boolean(v);
  63. });
  64. }
  65. var Crosshair = function (_PureComponent) {
  66. _inherits(Crosshair, _PureComponent);
  67. function Crosshair() {
  68. _classCallCheck(this, Crosshair);
  69. return _possibleConstructorReturn(this, (Crosshair.__proto__ || Object.getPrototypeOf(Crosshair)).apply(this, arguments));
  70. }
  71. _createClass(Crosshair, [{
  72. key: '_renderCrosshairItems',
  73. /**
  74. * Render crosshair items (title + value for each series).
  75. * @returns {*} Array of React classes with the crosshair values.
  76. * @private
  77. */
  78. value: function _renderCrosshairItems() {
  79. var _props = this.props,
  80. values = _props.values,
  81. itemsFormat = _props.itemsFormat;
  82. var items = itemsFormat(values);
  83. if (!items) {
  84. return null;
  85. }
  86. return items.filter(function (i) {
  87. return i;
  88. }).map(function renderValue(item, i) {
  89. return React.createElement(
  90. 'div',
  91. { className: 'rv-crosshair__item', key: 'item' + i },
  92. React.createElement(
  93. 'span',
  94. { className: 'rv-crosshair__item__title' },
  95. item.title
  96. ),
  97. ': ',
  98. React.createElement(
  99. 'span',
  100. { className: 'rv-crosshair__item__value' },
  101. item.value
  102. )
  103. );
  104. });
  105. }
  106. /**
  107. * Render crosshair title.
  108. * @returns {*} Container with the crosshair title.
  109. * @private
  110. */
  111. }, {
  112. key: '_renderCrosshairTitle',
  113. value: function _renderCrosshairTitle() {
  114. var _props2 = this.props,
  115. values = _props2.values,
  116. titleFormat = _props2.titleFormat,
  117. style = _props2.style;
  118. var titleItem = titleFormat(values);
  119. if (!titleItem) {
  120. return null;
  121. }
  122. return React.createElement(
  123. 'div',
  124. { className: 'rv-crosshair__title', key: 'title', style: style.title },
  125. React.createElement(
  126. 'span',
  127. { className: 'rv-crosshair__title__title' },
  128. titleItem.title
  129. ),
  130. ': ',
  131. React.createElement(
  132. 'span',
  133. { className: 'rv-crosshair__title__value' },
  134. titleItem.value
  135. )
  136. );
  137. }
  138. }, {
  139. key: 'render',
  140. value: function render() {
  141. var _props3 = this.props,
  142. children = _props3.children,
  143. className = _props3.className,
  144. values = _props3.values,
  145. marginTop = _props3.marginTop,
  146. marginLeft = _props3.marginLeft,
  147. innerWidth = _props3.innerWidth,
  148. innerHeight = _props3.innerHeight,
  149. style = _props3.style;
  150. var value = getFirstNonEmptyValue(values);
  151. if (!value) {
  152. return null;
  153. }
  154. var x = getAttributeFunctor(this.props, 'x');
  155. var innerLeft = x(value);
  156. var _props$orientation = this.props.orientation,
  157. orientation = _props$orientation === undefined ? innerLeft > innerWidth / 2 ? 'left' : 'right' : _props$orientation;
  158. var left = marginLeft + innerLeft;
  159. var top = marginTop;
  160. var innerClassName = 'rv-crosshair__inner rv-crosshair__inner--' + orientation;
  161. return React.createElement(
  162. 'div',
  163. {
  164. className: 'rv-crosshair ' + className,
  165. style: { left: left + 'px', top: top + 'px' }
  166. },
  167. React.createElement('div', {
  168. className: 'rv-crosshair__line',
  169. style: _extends({ height: innerHeight + 'px' }, style.line)
  170. }),
  171. React.createElement(
  172. 'div',
  173. { className: innerClassName },
  174. children ? children : React.createElement(
  175. 'div',
  176. { className: 'rv-crosshair__inner__content', style: style.box },
  177. React.createElement(
  178. 'div',
  179. null,
  180. this._renderCrosshairTitle(),
  181. this._renderCrosshairItems()
  182. )
  183. )
  184. )
  185. );
  186. }
  187. }], [{
  188. key: 'defaultProps',
  189. get: function get() {
  190. return {
  191. titleFormat: defaultTitleFormat,
  192. itemsFormat: defaultItemsFormat,
  193. style: {
  194. line: {},
  195. title: {},
  196. box: {}
  197. }
  198. };
  199. }
  200. }, {
  201. key: 'propTypes',
  202. get: function get() {
  203. return {
  204. className: PropTypes.string,
  205. values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object])),
  206. series: PropTypes.object,
  207. innerWidth: PropTypes.number,
  208. innerHeight: PropTypes.number,
  209. marginLeft: PropTypes.number,
  210. marginTop: PropTypes.number,
  211. orientation: PropTypes.oneOf(['left', 'right']),
  212. itemsFormat: PropTypes.func,
  213. titleFormat: PropTypes.func,
  214. style: PropTypes.shape({
  215. line: PropTypes.object,
  216. title: PropTypes.object,
  217. box: PropTypes.object
  218. })
  219. };
  220. }
  221. }]);
  222. return Crosshair;
  223. }(PureComponent);
  224. Crosshair.displayName = 'Crosshair';
  225. export default Crosshair;