react-financial-charts
Version:
React charts specific to finance.
96 lines • 3.35 kB
JavaScript
import * as React from "react";
import GenericChartComponent from "../GenericChartComponent";
import { getMouseCanvas } from "../GenericComponent";
import { drawOnCanvas, renderSVG } from "./EdgeCoordinateV3";
import { isNotDefined } from "../utils";
const defaultCustomX = (props, moreProps) => {
const { xScale, xAccessor, currentItem, mouseXY } = moreProps;
const { snapX } = props;
const x = snapX
? xScale(xAccessor(currentItem))
: mouseXY[0];
const { displayXAccessor } = moreProps;
const { displayFormat } = props;
const coordinate = snapX
? displayFormat(displayXAccessor(currentItem))
: displayFormat(xScale.invert(x));
return { x, coordinate };
};
export class MouseCoordinateX extends React.Component {
constructor() {
super(...arguments);
this.drawOnCanvas = (ctx, moreProps) => {
const props = this.helper(this.props, moreProps);
if (isNotDefined(props)) {
return null;
}
drawOnCanvas(ctx, props);
};
this.renderSVG = (moreProps) => {
const props = this.helper(this.props, moreProps);
if (isNotDefined(props)) {
return null;
}
return renderSVG(props);
};
this.helper = (props, moreProps) => {
const { show, currentItem } = moreProps;
const { chartConfig: { height } } = moreProps;
if (isNotDefined(currentItem)) {
return null;
}
const { customX } = props;
const { orient, at } = props;
const { stroke, strokeOpacity, strokeWidth } = props;
const { rectRadius, rectWidth, rectHeight } = props;
const { fill, opacity, fontFamily, fontSize, textFill } = props;
const edgeAt = (at === "bottom")
? height
: 0;
const { x, coordinate, } = customX(props, moreProps);
const type = "vertical";
const y1 = 0;
const y2 = height;
const hideLine = true;
const coordinateProps = {
coordinate,
show,
type,
orient,
edgeAt,
hideLine,
fill, opacity, fontFamily, fontSize, textFill,
stroke, strokeOpacity, strokeWidth,
rectWidth,
rectHeight,
rectRadius,
arrowWidth: 0,
x1: x,
x2: x,
y1,
y2,
};
return coordinateProps;
};
}
render() {
return (React.createElement(GenericChartComponent, { svgDraw: this.renderSVG, clip: false, canvasDraw: this.drawOnCanvas, canvasToDraw: getMouseCanvas, drawOn: ["mousemove", "pan", "drag"] }));
}
}
MouseCoordinateX.defaultProps = {
yAxisPad: 0,
rectWidth: 80,
rectHeight: 20,
strokeOpacity: 1,
strokeWidth: 1,
orient: "bottom",
at: "bottom",
fill: "#37474F",
opacity: 1,
fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
fontSize: 13,
textFill: "#FFFFFF",
snapX: true,
customX: defaultCustomX,
};
//# sourceMappingURL=MouseCoordinateX.js.map