react-financial-charts
Version:
React charts specific to finance.
35 lines • 1.37 kB
JavaScript
import * as React from "react";
import { colorToRGBA, functor } from "../utils";
export class Circle extends React.Component {
render() {
const { className, stroke, strokeWidth, opacity, fill, point, r } = this.props;
const radius = functor(r)(point.datum);
return (React.createElement("circle", { className: className, cx: point.x, cy: point.y, stroke: stroke, strokeWidth: strokeWidth, fillOpacity: opacity, fill: fill, r: radius }));
}
}
Circle.defaultProps = {
stroke: "#4682B4",
strokeWidth: 1,
opacity: 0.5,
fill: "#4682B4",
className: "react-financial-charts-marker-circle",
};
Circle.drawOnCanvas = (props, point, ctx) => {
const { stroke = Circle.defaultProps.stroke, fill = Circle.defaultProps.fill, opacity, strokeWidth = Circle.defaultProps.strokeWidth, } = props;
ctx.strokeStyle = stroke;
ctx.lineWidth = strokeWidth;
if (fill !== "none") {
ctx.fillStyle = colorToRGBA(fill, opacity);
}
Circle.drawOnCanvasWithNoStateChange(props, point, ctx);
};
Circle.drawOnCanvasWithNoStateChange = (props, point, ctx) => {
const { r } = props;
const radius = functor(r)(point.datum);
ctx.moveTo(point.x, point.y);
ctx.beginPath();
ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.fill();
};
//# sourceMappingURL=CircleMarker.js.map