@symblight/react-stockcharts
Version:
Highly customizable stock charts with ReactJS and d3
232 lines (193 loc) • 10.6 kB
JavaScript
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
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; };
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; }; }();
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
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; }
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; }
import React, { Component } from "react";
import PropTypes from "prop-types";
import { format } from "d3-format";
import { ascending as d3Ascending } from "d3-array";
import { noop, strokeDashTypes } from "../../utils";
import { isNotDefined, saveNodeType, isHover } from "../utils";
import { getXValue } from "../../utils/ChartDataUtil";
import StraightLine, { generateLine } from "../components/StraightLine";
import AnnotateShape from "../components/AnnotateShape";
import ClickableCircle from "../components/ClickableCircle";
import ClickableRect from "../components/ClickableRect";
import BackgroundHover from "../components/BackgroundHover";
import HoverTextNearMouse from "../components/HoverTextNearMouse";
import Transform from "../components/Transform";
import Text from "../components/Text";
var EachShape = function (_Component) {
_inherits(EachShape, _Component);
function EachShape(props) {
_classCallCheck(this, EachShape);
var _this = _possibleConstructorReturn(this, (EachShape.__proto__ || Object.getPrototypeOf(EachShape)).call(this, props));
_this.handleDragComplete = _this.handleDragComplete.bind(_this);
_this.handleHover = _this.handleHover.bind(_this);
_this.isHover = isHover.bind(_this);
_this.saveNodeType = saveNodeType.bind(_this);
_this.nodes = {};
_this.state = {
hover: false
};
return _this;
}
_createClass(EachShape, [{
key: "handleDragComplete",
value: function handleDragComplete() {
var _props;
this.setState({
anchor: undefined
});
(_props = this.props).onDragComplete.apply(_props, arguments);
}
}, {
key: "handleHover",
value: function handleHover(moreProps) {
if (this.state.hover !== moreProps.hovering) {
this.setState({
hover: moreProps.hovering
});
}
}
}, {
key: "render",
value: function render() {
var _React$createElement;
var _props2 = this.props,
stroke = _props2.stroke,
opacity = _props2.opacity,
fill = _props2.fill,
r = _props2.r,
edgeStrokeWidth = _props2.edgeStrokeWidth,
edgeFill = _props2.edgeFill,
edgeStroke = _props2.edgeStroke,
edgeInteractiveCursor = _props2.edgeInteractiveCursor,
hoverText = _props2.hoverText,
selected = _props2.selected,
figure = _props2.figure,
position = _props2.position,
onDragComplete = _props2.onDragComplete,
onDrag = _props2.onDrag,
lineInteractiveCursor = _props2.lineInteractiveCursor,
width = _props2.width,
height = _props2.height,
angle = _props2.angle,
edgeRight = _props2.edgeRight,
edgeLeft = _props2.edgeLeft,
edgeAngleTop = _props2.edgeAngleTop,
edgeAngleBottom = _props2.edgeAngleBottom,
id = _props2.id,
index = _props2.index,
degrees = _props2.degrees;
var hoverTextEnabled = hoverText.enable,
hoverTextSelected = hoverText.selectedText,
hoverTextUnselected = hoverText.text,
restHoverTextProps = _objectWithoutProperties(hoverText, ["enable", "selectedText", "text"]);
var _state = this.state,
hover = _state.hover,
anchor = _state.anchor;
return React.createElement(
"g",
null,
React.createElement(Transform, (_React$createElement = {
figure: figure,
position: position,
stroke: stroke,
fill: fill,
index: index,
opacity: opacity,
degrees: degrees,
edgeRight: edgeRight,
edgeLeft: edgeLeft,
edgeAngleTop: edgeAngleTop,
edgeAngleBottom: edgeAngleBottom,
selected: selected || hover,
r: r
}, _defineProperty(_React$createElement, "position", position), _defineProperty(_React$createElement, "fill", fill), _defineProperty(_React$createElement, "opacity", opacity), _defineProperty(_React$createElement, "width", width), _defineProperty(_React$createElement, "height", height), _defineProperty(_React$createElement, "interactiveCursorClass", "react-stockcharts-move-cursor"), _defineProperty(_React$createElement, "onDrag", onDrag), _defineProperty(_React$createElement, "onDragComplete", onDragComplete), _React$createElement)),
React.createElement(AnnotateShape, {
id: id,
ref: this.saveNodeType("shape"),
selected: selected || hover,
figure: figure,
position: position,
stroke: stroke,
fill: fill,
opacity: opacity,
degrees: degrees,
width: width,
height: height,
onHover: this.handleHover,
onUnHover: this.handleHover,
interactiveCursorClass: "react-stockcharts-move-cursor"
}),
React.createElement(HoverTextNearMouse, _extends({
show: hoverTextEnabled && hover
}, restHoverTextProps, {
text: selected ? hoverTextSelected : hoverTextUnselected
}))
);
}
}]);
return EachShape;
}(Component);
export function getNewXY(moreProps) {
var xScale = moreProps.xScale,
yScale = moreProps.chartConfig.yScale,
xAccessor = moreProps.xAccessor,
plotData = moreProps.plotData,
mouseXY = moreProps.mouseXY;
var mouseY = mouseXY[1];
var x = getXValue(xScale, xAccessor, mouseXY, plotData);
var _yScale$domain$slice$ = yScale.domain().slice().sort(d3Ascending),
_yScale$domain$slice$2 = _slicedToArray(_yScale$domain$slice$, 2),
small = _yScale$domain$slice$2[0],
big = _yScale$domain$slice$2[1];
var y = yScale.invert(mouseY);
var newY = Math.min(Math.max(y, small), big);
return [x, newY];
}
EachShape.propTypes = {
index: PropTypes.number,
onDrag: PropTypes.func.isRequired,
onDragComplete: PropTypes.func.isRequired,
onSelect: PropTypes.func.isRequired,
onUnSelect: PropTypes.func.isRequired,
r: PropTypes.number.isRequired,
defaultClassName: PropTypes.string,
selected: PropTypes.bool,
stroke: PropTypes.string.isRequired,
fill: PropTypes.string.isRequired,
edgeStrokeWidth: PropTypes.number.isRequired,
edgeStroke: PropTypes.string.isRequired,
edgeInteractiveCursor: PropTypes.string.isRequired,
edgeFill: PropTypes.string.isRequired,
hoverText: PropTypes.object.isRequired,
lineInteractiveCursor: PropTypes.string.isRequired
};
EachShape.defaultProps = {
onDrag: noop,
onEdge1Drag: noop,
onEdge2Drag: noop,
onDragComplete: noop,
onSelect: noop,
onUnSelect: noop,
selected: false,
fill: "#FFFFFF",
stroke: "#000000",
edgeStroke: "#000000",
edgeFill: "#FFFFFF",
edgeStrokeWidth: 2,
r: 5,
strokeWidth: 1,
strokeOpacity: 1,
hoverText: {
enable: false
}
};
export default EachShape;
//# sourceMappingURL=EachShape.js.map