@react-financial-charts/interactive
Version:
Interactive features for react-financial-charts
48 lines • 2.03 kB
JavaScript
import * as React from "react";
import { getMouseCanvas, GenericChartComponent } from "@react-financial-charts/core";
export class ClickableCircle extends React.Component {
constructor() {
super(...arguments);
this.drawOnCanvas = (ctx, moreProps) => {
const { strokeStyle, strokeWidth, fillStyle, r } = this.props;
ctx.lineWidth = strokeWidth;
ctx.fillStyle = fillStyle;
ctx.strokeStyle = strokeStyle;
const [x, y] = this.helper(moreProps);
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI, false);
ctx.fill();
ctx.stroke();
};
this.isHover = (moreProps) => {
const { mouseXY } = moreProps;
const r = this.props.r + 7;
const [x, y] = this.helper(moreProps);
const [mx, my] = mouseXY;
const hover = x - r < mx && mx < x + r && y - r < my && my < y + r;
return hover;
};
this.helper = (moreProps) => {
const { xyProvider, cx, cy } = this.props;
if (xyProvider !== undefined) {
return xyProvider(moreProps);
}
const { xScale, chartConfig: { yScale }, } = moreProps;
const x = xScale(cx);
const y = yScale(cy);
return [x, y];
};
}
render() {
const { interactiveCursorClass, onDragStart, onDrag, onDragComplete, show } = this.props;
if (!show) {
return null;
}
return (React.createElement(GenericChartComponent, { interactiveCursorClass: interactiveCursorClass, selected: true, isHover: this.isHover, onDragStart: onDragStart, onDrag: onDrag, onDragComplete: onDragComplete, canvasDraw: this.drawOnCanvas, canvasToDraw: getMouseCanvas, drawOn: ["pan", "mousemove", "drag"] }));
}
}
ClickableCircle.defaultProps = {
className: "react-financial-charts-interactive-line-edge",
show: false,
};
//# sourceMappingURL=ClickableCircle.js.map