react-financial-charts
Version:
React charts specific to finance.
93 lines • 4.12 kB
JavaScript
import * as React from "react";
import GenericChartComponent from "../../GenericChartComponent";
import { getMouseCanvas } from "../../GenericComponent";
import { colorToRGBA, isDefined, noop } from "../../utils";
export class InteractiveText extends React.Component {
constructor() {
super(...arguments);
this.calculateTextWidth = true;
this.isHover = (moreProps) => {
const { onHover } = this.props;
if (isDefined(onHover)
&& isDefined(this.textWidth)
&& !this.calculateTextWidth) {
const { rect } = this.helper(this.props, moreProps, this.textWidth);
const { mouseXY: [x, y] } = moreProps;
if (x >= rect.x
&& y >= rect.y
&& x <= rect.x + rect.width
&& y <= rect.y + rect.height) {
return true;
}
}
return false;
};
this.drawOnCanvas = (ctx, moreProps) => {
const { bgFill, bgOpacity, bgStrokeWidth, bgStroke, textFill, fontFamily, fontSize, fontStyle, fontWeight, text, } = this.props;
if (this.calculateTextWidth) {
ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
const { width } = ctx.measureText(text);
this.textWidth = width;
this.calculateTextWidth = false;
}
const { selected } = this.props;
const { x, y, rect } = this.helper(this.props, moreProps, this.textWidth);
ctx.fillStyle = colorToRGBA(bgFill, bgOpacity);
ctx.beginPath();
ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
if (selected) {
ctx.strokeStyle = bgStroke;
ctx.lineWidth = bgStrokeWidth;
ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
}
ctx.fillStyle = textFill;
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
ctx.beginPath();
ctx.fillText(text, x, y);
};
this.renderSVG = () => {
throw new Error("svg not implemented");
};
this.helper = (props, moreProps, textWidth) => {
const { position, fontSize } = props;
const { xScale, chartConfig: { yScale } } = moreProps;
const [xValue, yValue] = position;
const x = xScale(xValue);
const y = yScale(yValue);
const rect = {
x: x - textWidth / 2 - fontSize,
y: y - fontSize,
width: textWidth + fontSize * 2,
height: fontSize * 2,
};
return {
x, y, rect,
};
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
this.calculateTextWidth = (nextProps.text !== this.props.text
|| nextProps.fontStyle !== this.props.fontStyle
|| nextProps.fontWeight !== this.props.fontWeight
|| nextProps.fontSize !== this.props.fontSize
|| nextProps.fontFamily !== this.props.fontFamily);
}
render() {
const { selected, interactiveCursorClass } = this.props;
const { onHover, onUnHover } = this.props;
const { onDragStart, onDrag, onDragComplete } = this.props;
return (React.createElement(GenericChartComponent, { isHover: this.isHover, svgDraw: this.renderSVG, canvasToDraw: getMouseCanvas, canvasDraw: this.drawOnCanvas, interactiveCursorClass: interactiveCursorClass, selected: selected, onDragStart: onDragStart, onDrag: onDrag, onDragComplete: onDragComplete, onHover: onHover, onUnHover: onUnHover, drawOn: ["mousemove", "mouseleave", "pan", "drag"] }));
}
}
InteractiveText.defaultProps = {
onDragStart: noop,
onDrag: noop,
onDragComplete: noop,
type: "SD",
fontWeight: "normal",
tolerance: 4,
selected: false,
};
//# sourceMappingURL=InteractiveText.js.map