react-financial-charts/lib/series/SquareMarker.js

React charts specific to finance.

import * as React from "react";
import { colorToRGBA, functor } from "../utils";
export class Square extends React.Component {
    render() {
        const { className, stroke, strokeWidth, opacity, fill, point, width } = this.props;
        const w = functor(width)(point.datum);
        const x = point.x - (w / 2);
        const y = point.y - (w / 2);
        return (React.createElement("rect", { className: className, x: x, y: y, stroke: stroke, strokeWidth: strokeWidth, fillOpacity: opacity, fill: fill, width: w, height: w }));
    }
}
Square.defaultProps = {
    stroke: "#4682B4",
    strokeWidth: 1,
    opacity: 0.5,
    fill: "#4682B4",
    className: "react-financial-charts-marker-rect",
};
Square.drawOnCanvas = (props, point, ctx) => {
    const { stroke = Square.defaultProps.stroke, fill, opacity, strokeWidth = Square.defaultProps.strokeWidth, } = props;
    ctx.strokeStyle = stroke;
    ctx.lineWidth = strokeWidth;
    if (fill !== "none") {
        ctx.fillStyle = colorToRGBA(fill, opacity);
    }
    Square.drawOnCanvasWithNoStateChange(props, point, ctx);
};
Square.drawOnCanvasWithNoStateChange = (props, point, ctx) => {
    const { width } = props;
    const w = functor(width)(point.datum);
    const x = point.x - (w / 2);
    const y = point.y - (w / 2);
    ctx.beginPath();
    ctx.rect(x, y, w, w);
    ctx.stroke();
    ctx.fill();
};
//# sourceMappingURL=SquareMarker.js.map