@react-stockcharts3/annotations
Version:
Annotations for react-stockcharts3
40 lines • 1.74 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { functor } from "@react-stockcharts3/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 (_jsxs("g", { className: className, onClick: this.handleClick, children: [_jsx("title", { children: tooltip }), _jsx("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