react-financial-charts
Version:
React charts specific to finance.
82 lines • 3.93 kB
JavaScript
import * as React from "react";
import { noop } from "../../utils";
import { isHover, saveNodeType } from "../utils";
import { ClickableShape } from "../components/ClickableShape";
import { InteractiveYCoordinate } from "../components/InteractiveYCoordinate";
export class EachInteractiveYCoordinate extends React.Component {
constructor(props) {
super(props);
this.handleCloseIconHover = (moreProps) => {
if (this.state.closeIconHover !== moreProps.hovering) {
this.setState({
closeIconHover: moreProps.hovering,
});
}
};
this.handleHover = (moreProps) => {
if (this.state.hover !== moreProps.hovering) {
this.setState({
hover: moreProps.hovering,
closeIconHover: moreProps.hovering ? this.state.closeIconHover : false,
});
}
};
this.handleDelete = (moreProps) => {
const { index, onDelete } = this.props;
onDelete(index, moreProps);
};
this.handleDrag = (moreProps) => {
const { index, onDrag } = this.props;
const { mouseXY: [, mouseY], chartConfig: { yScale }, } = moreProps;
const { dy } = this.dragStartPosition;
const newYValue = yScale.invert(mouseY - dy);
onDrag(index, newYValue);
};
this.handleDragStart = (moreProps) => {
const { yValue, } = this.props;
const { mouseXY } = moreProps;
const { chartConfig: { yScale } } = moreProps;
const [, mouseY] = mouseXY;
const dy = mouseY - yScale(yValue);
this.dragStartPosition = {
yValue, dy,
};
};
this.isHover = isHover.bind(this);
this.saveNodeType = saveNodeType.bind(this);
this.state = {
hover: false,
closeIconHover: false,
};
}
render() {
const { yValue, bgFill, bgOpacity, textFill, fontFamily, fontSize, fontWeight, fontStyle, text,
// hoverText,
selected, onDragComplete, stroke, strokeOpacity, strokeDasharray, strokeWidth, edge, textBox, draggable, } = this.props;
const { hover, closeIconHover } = this.state;
const hoverHandler = {
onHover: this.handleHover,
onUnHover: this.handleHover,
};
const dragProps = draggable
? {
onDragStart: this.handleDragStart,
onDrag: this.handleDrag,
onDragComplete,
}
: {};
return (React.createElement("g", null,
React.createElement(InteractiveYCoordinate, Object.assign({ ref: this.saveNodeType("priceCoordinate"), selected: selected && !closeIconHover, hovering: hover || closeIconHover, interactiveCursorClass: "react-financial-charts-move-cursor" }, hoverHandler, dragProps, { yValue: yValue, bgFill: bgFill, bgOpacity: bgOpacity, textFill: textFill, fontFamily: fontFamily, fontStyle: fontStyle, fontWeight: fontWeight, fontSize: fontSize, stroke: stroke, strokeOpacity: strokeOpacity, strokeDasharray: strokeDasharray, strokeWidth: strokeWidth, text: text, textBox: textBox, edge: edge })),
React.createElement(ClickableShape, { show: true, hovering: closeIconHover, text: text, yValue: yValue, fontFamily: fontFamily, fontStyle: fontStyle, fontWeight: fontWeight, fontSize: fontSize, textBox: textBox, stroke: stroke, strokeOpacity: strokeOpacity, onHover: this.handleCloseIconHover, onUnHover: this.handleCloseIconHover, onClick: this.handleDelete })));
}
}
EachInteractiveYCoordinate.defaultProps = {
onDrag: noop,
onDragComplete: noop,
strokeWidth: 1,
opacity: 1,
selected: false,
fill: "#FFFFFF",
draggable: false,
};
//# sourceMappingURL=EachInteractiveYCoordinate.js.map