@react-financial-charts/interactive
Version:
Interactive features for react-financial-charts
126 lines • 4.71 kB
JavaScript
import * as React from "react";
import { isDefined, isNotDefined, getMouseCanvas, GenericChartComponent } from "@react-financial-charts/core";
import { generateLine, isHovering } from "./InteractiveStraightLine";
export class ChannelWithArea extends React.Component {
constructor() {
super(...arguments);
this.drawOnCanvas = (ctx, moreProps) => {
const { strokeStyle, strokeWidth, fillStyle } = this.props;
const { line1, line2 } = helper(this.props, moreProps);
if (line1 !== undefined) {
const { x1, y1, x2, y2 } = line1;
ctx.lineWidth = strokeWidth;
ctx.strokeStyle = strokeStyle;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
if (line2 !== undefined) {
const { y1: line2Y1, y2: line2Y2 } = line2;
ctx.beginPath();
ctx.moveTo(x1, line2Y1);
ctx.lineTo(x2, line2Y2);
ctx.stroke();
ctx.fillStyle = fillStyle;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x2, line2Y2);
ctx.lineTo(x1, line2Y1);
ctx.closePath();
ctx.fill();
}
}
};
this.isHover = (moreProps) => {
const { tolerance, onHover } = this.props;
if (onHover !== undefined) {
const { line1, line2 } = helper(this.props, moreProps);
if (line1 !== undefined && line2 !== undefined) {
const { mouseXY, xScale, chartConfig: { yScale }, } = moreProps;
const line1Hovering = isHovering({
x1Value: line1.x1,
y1Value: line1.y1,
x2Value: line1.x2,
y2Value: line1.y2,
type: "LINE",
mouseXY,
tolerance,
xScale,
yScale,
});
const line2Hovering = isHovering({
x1Value: line2.x1,
y1Value: line2.y1,
x2Value: line2.x2,
y2Value: line2.y2,
type: "LINE",
mouseXY,
tolerance,
xScale,
yScale,
});
return line1Hovering || line2Hovering;
}
}
return false;
};
}
render() {
const { selected, interactiveCursorClass } = this.props;
const { onDragStart, onDrag, onDragComplete, onHover, onUnHover } = this.props;
return (React.createElement(GenericChartComponent, { isHover: this.isHover, canvasToDraw: getMouseCanvas, canvasDraw: this.drawOnCanvas, interactiveCursorClass: interactiveCursorClass, selected: selected, onDragStart: onDragStart, onDrag: onDrag, onDragComplete: onDragComplete, onHover: onHover, onUnHover: onUnHover, drawOn: ["mousemove", "mouseleave", "pan", "drag"] }));
}
}
ChannelWithArea.defaultProps = {
type: "LINE",
strokeWidth: 1,
tolerance: 4,
selected: false,
};
function getLines(props, moreProps) {
const { startXY, endXY, dy, type } = props;
const { xScale } = moreProps;
if (isNotDefined(startXY) || isNotDefined(endXY)) {
return {};
}
const line1 = generateLine({
type,
start: startXY,
end: endXY,
xScale,
yScale: undefined,
});
const line2 = isDefined(dy)
? Object.assign(Object.assign({}, line1), { y1: line1.y1 + dy, y2: line1.y2 + dy }) : undefined;
return {
line1,
line2,
};
}
function helper(props, moreProps) {
const lines = getLines(props, moreProps);
const { xScale, chartConfig: { yScale }, } = moreProps;
const line1 = lines.line1 !== undefined
? {
x1: xScale(lines.line1.x1),
y1: yScale(lines.line1.y1),
x2: xScale(lines.line1.x2),
y2: yScale(lines.line1.y2),
}
: undefined;
const line2 = lines.line2 !== undefined
? {
x1: line1.x1,
y1: yScale(lines.line2.y1),
x2: line1.x2,
y2: yScale(lines.line2.y2),
}
: undefined;
return {
lines,
line1,
line2,
};
}
//# sourceMappingURL=ChannelWithArea.js.map