react-financial-charts
Version:
React charts specific to finance.
83 lines • 4.25 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 { getXValue } from "../../utils/ChartDataUtil";
import { isHover, saveNodeType } from "../utils";
import { HoverTextNearMouse } from "../components/HoverTextNearMouse";
import { InteractiveText } from "../components/InteractiveText";
export class EachText extends React.Component {
constructor(props) {
super(props);
this.handleHover = (moreProps) => {
if (this.state.hover !== moreProps.hovering) {
this.setState({
hover: moreProps.hovering,
});
}
};
this.handleDrag = (moreProps) => {
const { index, onDrag } = this.props;
const { mouseXY: [, mouseY], chartConfig: { yScale }, xAccessor, mouseXY, plotData, xScale, } = moreProps;
const { dx, dy } = this.dragStartPosition;
const xValue = xScale.invert(xScale(getXValue(xScale, xAccessor, mouseXY, plotData)) - dx);
// xScale.invert(xScale(xAccessor(currentItem)) - dx);
const xyValue = [
xValue,
yScale.invert(mouseY - dy),
];
onDrag(index, xyValue);
};
this.handleDragStart = (moreProps) => {
const { position, } = this.props;
const { mouseXY } = moreProps;
const { chartConfig: { yScale }, xScale } = moreProps;
const [mouseX, mouseY] = mouseXY;
const [textCX, textCY] = position;
const dx = mouseX - xScale(textCX);
const dy = mouseY - yScale(textCY);
this.dragStartPosition = {
position, dx, dy,
};
};
this.handleHover = this.handleHover.bind(this);
this.handleDragStart = this.handleDragStart.bind(this);
this.handleDrag = this.handleDrag.bind(this);
this.isHover = isHover.bind(this);
this.saveNodeType = saveNodeType.bind(this);
this.state = {
hover: false,
};
}
render() {
const { position, bgFill, bgOpacity, bgStroke, bgStrokeWidth, textFill, fontFamily, fontSize, fontWeight, fontStyle, text, hoverText, selected, onDragComplete, } = this.props;
const { hover } = this.state;
const hoverHandler = {
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(InteractiveText, Object.assign({ ref: this.saveNodeType("text"), selected: selected || hover, interactiveCursorClass: "react-financial-charts-move-cursor" }, hoverHandler, { onDragStart: this.handleDragStart, onDrag: this.handleDrag, onDragComplete: onDragComplete, position: position, bgFill: bgFill, bgOpacity: bgOpacity, bgStroke: bgStroke || textFill, bgStrokeWidth: bgStrokeWidth, textFill: textFill, fontFamily: fontFamily, fontStyle: fontStyle, fontWeight: fontWeight, fontSize: fontSize, text: text })),
React.createElement(HoverTextNearMouse, Object.assign({ show: hoverTextEnabled && hover }, restHoverTextProps, { text: selected ? hoverTextSelected : hoverTextUnselected }))));
}
}
EachText.defaultProps = {
onDrag: noop,
onDragComplete: noop,
bgOpacity: 1,
bgStrokeWidth: 1,
selected: false,
fill: "#8AAFE2",
hoverText: Object.assign(Object.assign({}, HoverTextNearMouse.defaultProps), { enable: true, bgHeight: "auto", bgWidth: "auto", text: "Click to select object" }),
};
//# sourceMappingURL=EachText.js.map