react-financial-charts
Version:
React charts specific to finance.
105 lines • 4.28 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import * as PropTypes from "prop-types";
import * as React from "react";
import GenericComponent, { getMouseCanvas } from "../GenericComponent";
import { colorToRGBA, getStrokeDasharray, getStrokeDasharrayCanvas, isDefined, isNotDefined } from "../utils";
const defaultCustomX = (props, moreProps) => {
const { xScale, xAccessor, currentItem, mouseXY } = moreProps;
const { snapX } = props;
const x = snapX
? Math.round(xScale(xAccessor(currentItem)))
: mouseXY[0];
return x;
};
export class CrossHairCursor extends React.Component {
constructor() {
super(...arguments);
this.renderSVG = (moreProps) => {
const { className } = this.props;
const lines = this.helper(this.props, moreProps);
if (lines === undefined) {
return null;
}
return (React.createElement("g", { className: className }, lines.map((_a, idx) => {
var { strokeDasharray } = _a, rest = __rest(_a, ["strokeDasharray"]);
return React.createElement("line", Object.assign({ key: idx, strokeDasharray: getStrokeDasharray(strokeDasharray) }, rest));
})));
};
this.drawOnCanvas = (ctx, moreProps) => {
const lines = this.helper(this.props, moreProps);
if (lines !== undefined && isDefined(lines)) {
const { margin, ratio } = this.context;
const originX = 0.5 * ratio + margin.left;
const originY = 0.5 * ratio + margin.top;
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.scale(ratio, ratio);
ctx.translate(originX, originY);
lines.forEach((line) => {
const dashArray = getStrokeDasharrayCanvas(line.strokeDasharray);
ctx.strokeStyle = colorToRGBA(line.stroke, line.opacity);
ctx.lineWidth = 1;
ctx.setLineDash(dashArray);
ctx.beginPath();
ctx.moveTo(line.x1, line.y1);
ctx.lineTo(line.x2, line.y2);
ctx.stroke();
});
ctx.restore();
}
};
this.helper = (props, moreProps) => {
const { mouseXY, currentItem, show, height, width, } = moreProps;
const { customX = CrossHairCursor.defaultProps.customX, stroke = CrossHairCursor.defaultProps.stroke, opacity, strokeDasharray, } = props;
if (!show || isNotDefined(currentItem)) {
return undefined;
}
const line1 = {
x1: 0,
x2: width,
y1: mouseXY[1] + 0.5,
y2: mouseXY[1] + 0.5,
stroke,
strokeDasharray,
opacity,
};
const x = customX(props, moreProps);
const line2 = {
x1: x,
x2: x,
y1: 0,
y2: height,
stroke,
strokeDasharray,
opacity,
};
return [line1, line2];
};
}
render() {
return (React.createElement(GenericComponent, { svgDraw: this.renderSVG, clip: false, canvasDraw: this.drawOnCanvas, canvasToDraw: getMouseCanvas, drawOn: ["mousemove", "pan", "drag"] }));
}
}
CrossHairCursor.defaultProps = {
className: "react-financial-charts-crosshair",
customX: defaultCustomX,
opacity: 0.8,
snapX: true,
stroke: "#37474F",
strokeDasharray: "Dash",
};
CrossHairCursor.contextTypes = {
margin: PropTypes.object.isRequired,
ratio: PropTypes.number.isRequired,
};
//# sourceMappingURL=CrossHairCursor.js.map