@react-financial-charts/interactive
Version:
Interactive features for react-financial-charts
149 lines • 7.11 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 { isDefined, isNotDefined, noop } from "@react-financial-charts/core";
import { HoverTextNearMouse, MouseLocationIndicator } from "./components";
import { getSlope, getYIntercept } from "./components/InteractiveStraightLine";
import { isHoverForInteractiveType, saveNodeType, terminate } from "./utils";
import { EachEquidistantChannel } from "./wrapper";
export class EquidistantChannel extends React.Component {
constructor(props) {
super(props);
this.handleDragChannel = (_, index, newXYValue) => {
this.setState({
override: Object.assign({ index }, newXYValue),
});
};
this.handleDragChannelComplete = (e, moreProps) => {
const { override } = this.state;
const { channels } = this.props;
if (isDefined(override)) {
const { index } = override, rest = __rest(override, ["index"]);
const newChannels = channels.map((each, idx) => idx === index ? Object.assign(Object.assign(Object.assign({}, each), rest), { selected: true }) : each);
this.setState({
override: null,
}, () => {
const { onComplete } = this.props;
if (onComplete !== undefined) {
onComplete(e, newChannels, moreProps);
}
});
}
};
this.handleStart = (_, xyValue) => {
const { current } = this.state;
if (isNotDefined(current) || isNotDefined(current.startXY)) {
this.mouseMoved = false;
this.setState({
current: {
startXY: xyValue,
endXY: null,
},
}, () => {
const { onStart } = this.props;
if (onStart !== undefined) {
onStart();
}
});
}
};
this.handleEnd = (e, _, moreProps) => {
const { current } = this.state;
const { channels, appearance } = this.props;
if (this.mouseMoved && isDefined(current) && isDefined(current.startXY)) {
if (isNotDefined(current.dy)) {
this.setState({
current: Object.assign(Object.assign({}, current), { dy: 0 }),
});
}
else {
const newChannels = [
...channels.map((d) => (Object.assign(Object.assign({}, d), { selected: false }))),
Object.assign(Object.assign({}, current), { selected: true, appearance }),
];
this.setState({
current: null,
}, () => {
const { onComplete } = this.props;
if (onComplete !== undefined) {
onComplete(e, newChannels, moreProps);
}
});
}
}
};
this.handleDrawChannel = (_, xyValue) => {
const { current } = this.state;
if (isDefined(current) && isDefined(current.startXY)) {
this.mouseMoved = true;
if (isNotDefined(current.dy)) {
this.setState({
current: {
startXY: current.startXY,
endXY: xyValue,
},
});
}
else {
const m = getSlope(current.startXY, current.endXY);
const b = getYIntercept(m, current.endXY);
// @ts-ignore
const y = m * xyValue[0] + b;
const dy = xyValue[1] - y;
this.setState({
current: Object.assign(Object.assign({}, current), { dy }),
});
}
}
};
this.terminate = terminate.bind(this);
this.saveNodeType = saveNodeType.bind(this);
this.getSelectionState = isHoverForInteractiveType("channels").bind(this);
this.state = {};
}
render() {
const { appearance, channels, currentPositionOpacity, currentPositionRadius = EquidistantChannel.defaultProps.currentPositionRadius, currentPositionStroke, currentPositionStrokeWidth, enabled, hoverText, } = this.props;
const { current, override } = this.state;
const overrideIndex = isDefined(override) ? override.index : null;
const tempChannel = isDefined(current) && isDefined(current.endXY) ? (React.createElement(EachEquidistantChannel, Object.assign({ interactive: false }, current, { appearance: appearance, hoverText: hoverText }))) : null;
return (React.createElement("g", null,
channels.map((each, idx) => {
const eachAppearance = isDefined(each.appearance)
? Object.assign(Object.assign({}, appearance), each.appearance) : appearance;
return (React.createElement(EachEquidistantChannel, Object.assign({ key: idx, ref: this.saveNodeType(idx), index: idx, selected: each.selected, hoverText: hoverText }, (idx === overrideIndex ? override : each), { appearance: eachAppearance, onDrag: this.handleDragChannel, onDragComplete: this.handleDragChannelComplete })));
}),
tempChannel,
React.createElement(MouseLocationIndicator, { enabled: enabled, snap: false, r: currentPositionRadius, stroke: currentPositionStroke, opacity: currentPositionOpacity, strokeWidth: currentPositionStrokeWidth, onMouseDown: this.handleStart, onClick: this.handleEnd, onMouseMove: this.handleDrawChannel })));
}
}
EquidistantChannel.defaultProps = {
onSelect: noop,
currentPositionStroke: "#000000",
currentPositionOpacity: 1,
currentPositionStrokeWidth: 3,
currentPositionRadius: 4,
hoverText: Object.assign(Object.assign({}, HoverTextNearMouse.defaultProps), { enable: true, bgHeight: 18, bgWidth: 120, text: "Click to select object" }),
channels: [],
appearance: {
stroke: "#000000",
strokeOpacity: 1,
strokeWidth: 1,
fill: "#8AAFE2",
fillOpacity: 0.7,
edgeStroke: "#000000",
edgeFill: "#FFFFFF",
edgeFill2: "#250B98",
edgeStrokeWidth: 1,
r: 5,
},
};
//# sourceMappingURL=EquidistantChannel.js.map