@react-financial-charts/coordinates
Version:
Coordinates for react-financial-charts
54 lines • 2.11 kB
JavaScript
import { getMouseCanvas, GenericChartComponent } from "@react-financial-charts/core";
import * as React from "react";
/**
* Draws a circle at the current x location of radius `r`.
*/
export class CurrentCoordinate extends React.Component {
constructor() {
super(...arguments);
this.drawOnCanvas = (ctx, moreProps) => {
const circle = this.getCircle(moreProps);
if (circle === undefined) {
return;
}
const { fillStyle, r, strokeStyle } = this.props;
const fillColor = fillStyle instanceof Function ? fillStyle(moreProps.currentItem) : fillStyle;
if (fillColor !== undefined) {
ctx.fillStyle = fillColor;
}
const strokeColor = strokeStyle instanceof Function ? strokeStyle(moreProps.currentItem) : strokeStyle;
if (strokeColor !== undefined) {
ctx.strokeStyle = strokeColor;
}
ctx.beginPath();
ctx.arc(circle.x, circle.y, r, 0, 2 * Math.PI, false);
ctx.fill();
if (strokeColor !== undefined) {
ctx.stroke();
}
};
this.getCircle = (moreProps) => {
const { show, xScale, chartConfig: { yScale }, currentItem, xAccessor, } = moreProps;
if (!show || currentItem === undefined) {
return undefined;
}
const { yAccessor } = this.props;
const xValue = xAccessor(currentItem);
const yValue = yAccessor(currentItem);
if (yValue === undefined) {
return undefined;
}
const x = Math.round(xScale(xValue));
const y = Math.round(yScale(yValue));
return { x, y };
};
}
render() {
return (React.createElement(GenericChartComponent, { canvasDraw: this.drawOnCanvas, canvasToDraw: getMouseCanvas, drawOn: ["mousemove", "pan"] }));
}
}
CurrentCoordinate.defaultProps = {
fillStyle: "#2196f3",
r: 3,
};
//# sourceMappingURL=CurrentCoordinate.js.map