@react-financial-charts/interactive
Version:
Interactive features for react-financial-charts
79 lines • 3.65 kB
JavaScript
import { functor, getClosestValue, getMouseCanvas, GenericChartComponent, isDefined, noop, shallowEqual, } from "@react-financial-charts/core";
import * as React from "react";
import { getXValue } from "@react-financial-charts/core/lib/utils/ChartDataUtil";
export class MouseLocationIndicator extends React.Component {
constructor() {
super(...arguments);
this.mutableState = {};
this.xy = (e, moreProps) => {
const { xAccessor, plotData } = moreProps;
const { mouseXY, currentItem, xScale, chartConfig: { yScale }, } = moreProps;
const { enabled, snap, shouldDisableSnap, snapTo } = this.props;
if (enabled && isDefined(currentItem) && isDefined(e)) {
const xValue = snap && !shouldDisableSnap(e)
? xAccessor(currentItem)
: getXValue(xScale, xAccessor, mouseXY, plotData);
const yValue = snap && snapTo !== undefined && !shouldDisableSnap(e)
? getClosestValue(snapTo(currentItem), yScale.invert(mouseXY[1]))
: yScale.invert(mouseXY[1]);
const x = xScale(xValue);
const y = yScale(yValue);
return { xValue, yValue, x, y };
}
};
this.handleClick = (e, moreProps) => {
const pos = this.xy(e, moreProps);
if (pos !== undefined && isDefined(pos)) {
const { xValue, yValue, x, y } = pos;
this.mutableState = { x, y };
this.props.onClick(e, [xValue, yValue], moreProps);
}
};
this.handleMouseDown = (e, moreProps) => {
const pos = this.xy(e, moreProps);
if (pos !== undefined && isDefined(pos)) {
const { xValue, yValue, x, y } = pos;
this.mutableState = { x, y };
this.props.onMouseDown(e, [xValue, yValue], moreProps);
}
};
this.handleMousePosChange = (e, moreProps) => {
if (!shallowEqual(moreProps.mousXY, moreProps.prevMouseXY)) {
const pos = this.xy(e, moreProps);
if (pos !== undefined && isDefined(pos)) {
const { xValue, yValue, x, y } = pos;
this.mutableState = { x, y };
this.props.onMouseMove(e, [xValue, yValue], moreProps);
}
}
};
this.drawOnCanvas = (ctx, moreProps) => {
const { enabled, r, stroke, strokeWidth } = this.props;
const { x, y } = this.mutableState;
const { show } = moreProps;
if (enabled && show && isDefined(x)) {
ctx.lineWidth = strokeWidth;
ctx.strokeStyle = stroke;
ctx.moveTo(x, y);
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI, false);
ctx.stroke();
}
};
}
render() {
const { enabled, disablePan } = this.props;
return (React.createElement(GenericChartComponent, { onMouseDown: this.handleMouseDown, onClick: this.handleClick, onMouseMove: this.handleMousePosChange, onPan: this.handleMousePosChange, disablePan: enabled && disablePan, canvasDraw: this.drawOnCanvas, canvasToDraw: getMouseCanvas, drawOn: ["mousemove", "pan"] }));
}
}
MouseLocationIndicator.defaultProps = {
onMouseMove: noop,
onMouseDown: noop,
onClick: noop,
shouldDisableSnap: functor(false),
stroke: "#000000",
strokeWidth: 1,
opacity: 1,
disablePan: true,
};
//# sourceMappingURL=MouseLocationIndicator.js.map