@tradingaction/annotations/lib/SvgPathAnnotation.js

Annotations for react-financial-charts

import { functor } from "@tradingaction/core";
import * as React from "react";
export class SvgPathAnnotation extends React.Component {
    constructor() {
        super(...arguments);
        this.handleClick = (e) => {
            const { onClick, xScale, yScale, datum } = this.props;
            if (onClick !== undefined) {
                onClick(e, { xScale, yScale, datum });
            }
        };
        this.helper = () => {
            const { x, y, datum, fill, tooltip, xAccessor, xScale, yScale, plotData } = this.props;
            const xFunc = functor(x);
            const yFunc = functor(y);
            const [xPos, yPos] = [
                xFunc({ xScale, xAccessor, datum, plotData }),
                yFunc({ yScale, datum, plotData }),
            ];
            return {
                x: Math.round(xPos),
                y: Math.round(yPos),
                fill: functor(fill)(datum),
                tooltip: functor(tooltip)(datum),
            };
        };
    }
    render() {
        const { className, datum, stroke, opacity, path, pathWidth, pathHeight } = this.props;
        const { x, y, fill, tooltip } = this.helper();
        return (React.createElement("g", { className: className, onClick: this.handleClick },
            React.createElement("title", null, tooltip),
            React.createElement("path", { transform: `translate(${x - pathWidth},${y - pathHeight})`, d: path(datum), stroke: stroke, fill: fill, opacity: opacity })));
    }
}
SvgPathAnnotation.defaultProps = {
    className: "react-financial-charts-svg-path-annotation",
    opacity: 1,
    x: ({ xScale, xAccessor, datum, }) => xScale(xAccessor(datum)),
};
//# sourceMappingURL=SvgPathAnnotation.js.map