@react-financial-charts/interactive
Version:
Interactive features for react-financial-charts
125 lines • 6.88 kB
JavaScript
import * as React from "react";
import { isDefined, isNotDefined, noop } from "@react-financial-charts/core";
import { getValueFromOverride, isHoverForInteractiveType, saveNodeType, terminate } from "./utils";
import { HoverTextNearMouse, MouseLocationIndicator, InteractiveStraightLine } from "./components";
import { EachTrendLine } from "./wrapper";
export class TrendLine extends React.Component {
constructor(props) {
super(props);
this.handleEnd = (e, xyValue, moreProps) => {
const { current } = this.state;
const { trends, appearance, type } = this.props;
if (this.mouseMoved && isDefined(current) && isDefined(current.start)) {
const newTrends = [
...trends.map((d) => (Object.assign(Object.assign({}, d), { selected: false }))),
{
start: current.start,
end: xyValue,
selected: true,
appearance,
type,
},
];
this.setState({
current: null,
trends: newTrends,
}, () => {
const { onComplete } = this.props;
if (onComplete !== undefined) {
onComplete(e, newTrends, moreProps);
}
});
}
};
this.handleStart = (e, xyValue, moreProps) => {
const { current } = this.state;
if (isNotDefined(current) || isNotDefined(current.start)) {
this.mouseMoved = false;
this.setState({
current: {
start: xyValue,
end: null,
},
}, () => {
const { onStart } = this.props;
if (onStart !== undefined) {
onStart(e, moreProps);
}
});
}
};
this.handleDrawLine = (_, xyValue) => {
const { current } = this.state;
if (isDefined(current) && isDefined(current.start)) {
this.mouseMoved = true;
this.setState({
current: {
start: current.start,
end: xyValue,
},
});
}
};
this.handleDragLineComplete = (e, moreProps) => {
const { override } = this.state;
if (isDefined(override)) {
const { trends } = this.props;
const newTrends = trends.map((each, idx) => idx === override.index
? Object.assign(Object.assign({}, each), { start: [override.x1Value, override.y1Value], end: [override.x2Value, override.y2Value], selected: true }) : Object.assign(Object.assign({}, each), { selected: false }));
this.setState({
override: null,
}, () => {
const { onComplete } = this.props;
if (onComplete !== undefined) {
onComplete(e, newTrends, moreProps);
}
});
}
};
this.handleDragLine = (_, index, newXYValue) => {
this.setState({
override: Object.assign({ index }, newXYValue),
});
};
this.terminate = terminate.bind(this);
this.saveNodeType = saveNodeType.bind(this);
this.getSelectionState = isHoverForInteractiveType("trends").bind(this);
this.state = {};
}
render() {
const { appearance, currentPositionstrokeOpacity, currentPositionRadius = TrendLine.defaultProps.currentPositionRadius, currentPositionStroke, currentPositionStrokeWidth, enabled, hoverText, shouldDisableSnap, snap, snapTo, trends, type, } = this.props;
const { current, override } = this.state;
const tempLine = isDefined(current) && isDefined(current.end) ? (React.createElement(InteractiveStraightLine, { type: type, x1Value: current.start[0], y1Value: current.start[1], x2Value: current.end[0], y2Value: current.end[1], strokeStyle: appearance.strokeStyle, strokeWidth: appearance.strokeWidth })) : null;
return (React.createElement("g", null,
trends.map((each, idx) => {
const eachAppearance = isDefined(each.appearance)
? Object.assign(Object.assign({}, appearance), each.appearance) : appearance;
const hoverTextWithDefault = Object.assign(Object.assign({}, TrendLine.defaultProps.hoverText), hoverText);
return (React.createElement(EachTrendLine, { key: idx, ref: this.saveNodeType(idx), index: idx, type: each.type, selected: each.selected, x1Value: getValueFromOverride(override, idx, "x1Value", each.start[0]), y1Value: getValueFromOverride(override, idx, "y1Value", each.start[1]), x2Value: getValueFromOverride(override, idx, "x2Value", each.end[0]), y2Value: getValueFromOverride(override, idx, "y2Value", each.end[1]), strokeStyle: eachAppearance.strokeStyle, strokeWidth: eachAppearance.strokeWidth, strokeOpacity: eachAppearance.strokeOpacity, strokeDasharray: eachAppearance.strokeDasharray, edgeStroke: eachAppearance.edgeStroke, edgeFill: eachAppearance.edgeFill, edgeStrokeWidth: eachAppearance.edgeStrokeWidth, r: eachAppearance.r, hoverText: hoverTextWithDefault, onDrag: this.handleDragLine, onDragComplete: this.handleDragLineComplete, edgeInteractiveCursor: "react-financial-charts-move-cursor", lineInteractiveCursor: "react-financial-charts-move-cursor" }));
}),
tempLine,
React.createElement(MouseLocationIndicator, { enabled: enabled, snap: snap, shouldDisableSnap: shouldDisableSnap, snapTo: snapTo, r: currentPositionRadius, stroke: currentPositionStroke, opacity: currentPositionstrokeOpacity, strokeWidth: currentPositionStrokeWidth, onMouseDown: this.handleStart, onClick: this.handleEnd, onMouseMove: this.handleDrawLine })));
}
}
TrendLine.defaultProps = {
type: "XLINE",
onStart: noop,
onSelect: noop,
currentPositionStroke: "#000000",
currentPositionstrokeOpacity: 1,
currentPositionStrokeWidth: 3,
currentPositionRadius: 0,
shouldDisableSnap: (e) => e.button === 2 || e.shiftKey,
hoverText: Object.assign(Object.assign({}, HoverTextNearMouse.defaultProps), { enable: true, bgHeight: "auto", bgWidth: "auto", text: "Click to select object", selectedText: "" }),
trends: [],
appearance: {
strokeStyle: "#000000",
strokeWidth: 1,
strokeDasharray: "Solid",
edgeStrokeWidth: 1,
edgeFill: "#FFFFFF",
edgeStroke: "#000000",
r: 6,
},
};
//# sourceMappingURL=TrendLine.js.map