react-financial-charts
Version:
React charts specific to finance.
68 lines • 2.98 kB
JavaScript
import * as React from "react";
import GenericChartComponent from "../../GenericChartComponent";
import { getMouseCanvas } from "../../GenericComponent";
import { colorToRGBA, isDefined, noop } from "../../utils";
export class ClickableCircle extends React.Component {
constructor() {
super(...arguments);
this.renderSVG = (moreProps) => {
const { stroke, strokeWidth, fill } = this.props;
const { fillOpacity, strokeOpacity } = this.props;
const { r } = this.props;
const [x, y] = this.helper(this.props, moreProps);
return (React.createElement("circle", { cx: x, cy: y, r: r, strokeWidth: strokeWidth, stroke: stroke, strokeOpacity: strokeOpacity, fill: fill, fillOpacity: fillOpacity }));
};
this.drawOnCanvas = (ctx, moreProps) => {
const { stroke, strokeWidth, fill } = this.props;
const { fillOpacity, strokeOpacity } = this.props;
const { r } = this.props;
const [x, y] = this.helper(this.props, moreProps);
ctx.lineWidth = strokeWidth;
ctx.fillStyle = colorToRGBA(fill, fillOpacity);
ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
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(this.props, moreProps);
const [mx, my] = mouseXY;
const hover = (x - r) < mx && mx < (x + r)
&& (y - r) < my && my < (y + r);
return hover;
};
this.helper = (props, moreProps) => {
const { xyProvider, cx, cy } = props;
if (isDefined(xyProvider)) {
return xyProvider(moreProps);
}
const { xScale, chartConfig: { yScale } } = moreProps;
const x = xScale(cx);
const y = yScale(cy);
return [x, y];
};
}
render() {
const { interactiveCursorClass } = this.props;
const { show } = this.props;
const { onDragStart, onDrag, onDragComplete } = this.props;
if (!show) {
return null;
}
return (React.createElement(GenericChartComponent, { interactiveCursorClass: interactiveCursorClass, selected: true, isHover: this.isHover, onDragStart: onDragStart, onDrag: onDrag, onDragComplete: onDragComplete, svgDraw: this.renderSVG, canvasDraw: this.drawOnCanvas, canvasToDraw: getMouseCanvas, drawOn: ["pan", "mousemove", "drag"] }));
}
}
ClickableCircle.defaultProps = {
className: "react-financial-charts-interactive-line-edge",
onDragStart: noop,
onDrag: noop,
onDragComplete: noop,
onMove: noop,
show: false,
fillOpacity: 1,
strokeOpacity: 1,
};
//# sourceMappingURL=ClickableCircle.js.map