react-financial-charts
Version:
React charts specific to finance.
73 lines • 3.27 kB
JavaScript
import * as React from "react";
import GenericChartComponent from "../../GenericChartComponent";
import { getMouseCanvas } from "../../GenericComponent";
import { colorToRGBA } from "../../utils";
import { isHovering2 } from "./StraightLine";
export class ClickableShape extends React.Component {
constructor() {
super(...arguments);
this.renderSVG = () => {
throw new Error("svg not implemented");
};
this.drawOnCanvas = (ctx, moreProps) => {
const { stroke, strokeWidth, strokeOpacity, hovering, textBox } = this.props;
const [x, y] = this.helper(this.props, moreProps, ctx);
this.closeIcon = { x, y };
ctx.beginPath();
ctx.lineWidth = hovering ? strokeWidth + 1 : strokeWidth;
ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
const halfWidth = textBox.closeIcon.width / 2;
ctx.moveTo(x - halfWidth, y - halfWidth);
ctx.lineTo(x + halfWidth, y + halfWidth);
ctx.moveTo(x - halfWidth, y + halfWidth);
ctx.lineTo(x + halfWidth, y - halfWidth);
ctx.stroke();
};
this.isHover = (moreProps) => {
const { mouseXY } = moreProps;
if (this.closeIcon) {
const { textBox } = this.props;
const { x, y } = this.closeIcon;
const halfWidth = textBox.closeIcon.width / 2;
const start1 = [x - halfWidth, y - halfWidth];
const end1 = [x + halfWidth, y + halfWidth];
const start2 = [x - halfWidth, y + halfWidth];
const end2 = [x + halfWidth, y - halfWidth];
if (isHovering2(start1, end1, mouseXY, 3) || isHovering2(start2, end2, mouseXY, 3)) {
return true;
}
}
return false;
};
this.helper = (props, moreProps, ctx) => {
const { yValue, text, textBox } = props;
const { fontFamily, fontStyle, fontWeight, fontSize } = props;
ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
const { chartConfig: { yScale } } = moreProps;
const x = textBox.left
+ textBox.padding.left
+ ctx.measureText(text).width
+ textBox.padding.right
+ textBox.closeIcon.padding.left
+ textBox.closeIcon.width / 2;
const y = yScale(yValue);
return [x, y];
};
}
render() {
const { interactiveCursorClass } = this.props;
const { show } = this.props;
const { onHover, onUnHover, onClick } = this.props;
if (!show) {
return null;
}
return (React.createElement(GenericChartComponent, { interactiveCursorClass: interactiveCursorClass, isHover: this.isHover, onClickWhenHover: onClick, svgDraw: this.renderSVG, canvasDraw: this.drawOnCanvas, canvasToDraw: getMouseCanvas, onHover: onHover, onUnHover: onUnHover, drawOn: ["pan", "mousemove", "drag"] }));
}
}
ClickableShape.defaultProps = {
show: false,
fillOpacity: 1,
strokeOpacity: 1,
strokeWidth: 1,
};
//# sourceMappingURL=ClickableShape.js.map