react-financial-charts
Version:
React charts specific to finance.
93 lines • 4.86 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import * as React from "react";
import { noop } from "../../utils";
import { getCurrentItem } from "../../utils/ChartDataUtil";
import { isHover, saveNodeType } from "../utils";
import { HoverTextNearMouse } from "../components/HoverTextNearMouse";
import { edge1Provider, edge2Provider, LinearRegressionChannelWithArea, } from "../components/LinearRegressionChannelWithArea";
import { ClickableCircle } from "../components/ClickableCircle";
export class EachLinearRegressionChannel extends React.Component {
constructor(props) {
super(props);
this.handleHover = (moreProps) => {
if (this.state.hover !== moreProps.hovering) {
this.setState({
hover: moreProps.hovering,
});
}
};
this.handleEdge2Drag = (moreProps) => {
const { index, onDrag, snapTo } = this.props;
const { x1Value, } = this.props;
const [x2Value] = getNewXY(moreProps, snapTo);
onDrag(index, {
x1Value,
x2Value,
});
};
this.handleEdge1Drag = (moreProps) => {
const { index, onDrag, snapTo } = this.props;
const { x2Value, } = this.props;
const [x1Value] = getNewXY(moreProps, snapTo);
onDrag(index, {
x1Value,
x2Value,
});
};
this.isHover = isHover.bind(this);
this.saveNodeType = saveNodeType.bind(this);
this.state = {
hover: false,
};
}
render() {
const { x1Value, x2Value, appearance, edgeInteractiveCursor, hoverText, interactive, selected, onDragComplete, } = this.props;
const { stroke, strokeWidth, strokeOpacity, fill, fillOpacity, r, edgeStrokeWidth, edgeFill, edgeStroke, } = appearance;
const { hover } = this.state;
const hoverHandler = interactive
? { onHover: this.handleHover, onUnHover: this.handleHover }
: {};
const { enable: hoverTextEnabled, selectedText: hoverTextSelected, text: hoverTextUnselected } = hoverText, restHoverTextProps = __rest(hoverText, ["enable", "selectedText", "text"]);
return React.createElement("g", null,
React.createElement(LinearRegressionChannelWithArea, Object.assign({ ref: this.saveNodeType("area"), selected: selected || hover }, hoverHandler, { x1Value: x1Value, x2Value: x2Value, fill: fill, stroke: stroke, strokeWidth: (hover || selected) ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity, fillOpacity: fillOpacity })),
React.createElement(ClickableCircle, { ref: this.saveNodeType("edge1"), show: selected || hover, xyProvider: edge1Provider(this.props), r: r, fill: edgeFill, stroke: edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: edgeInteractiveCursor, onDrag: this.handleEdge1Drag, onDragComplete: onDragComplete }),
React.createElement(ClickableCircle, { ref: this.saveNodeType("edge2"), show: selected || hover, xyProvider: edge2Provider(this.props), r: r, fill: edgeFill, stroke: edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: edgeInteractiveCursor, onDrag: this.handleEdge2Drag, onDragComplete: onDragComplete }),
React.createElement(HoverTextNearMouse, Object.assign({ show: hoverTextEnabled && hover }, restHoverTextProps, { text: selected ? hoverTextSelected : hoverTextUnselected })));
}
}
EachLinearRegressionChannel.defaultProps = {
onDrag: noop,
onDragComplete: noop,
appearance: {
stroke: "#000000",
fillOpacity: 0.7,
strokeOpacity: 1,
strokeWidth: 1,
fill: "#8AAFE2",
edgeStrokeWidth: 2,
edgeStroke: "#000000",
edgeFill: "#FFFFFF",
r: 5,
},
interactive: true,
selected: false,
hoverText: Object.assign(Object.assign({}, HoverTextNearMouse.defaultProps), { enable: true, bgHeight: 18, bgWidth: 175, text: "Click and drag the edge circles" }),
};
export function getNewXY(moreProps, snapTo) {
const { xScale, xAccessor, plotData, mouseXY } = moreProps;
const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
const x = xAccessor(currentItem);
const y = snapTo(currentItem);
return [x, y];
}
//# sourceMappingURL=EachLinearRegressionChannel.js.map