@tradingaction/annotations
Version:
Annotations for react-financial-charts
48 lines • 2.78 kB
JavaScript
import { functor } from "@tradingaction/core";
import * as React from "react";
export class BarAnnotation extends React.Component {
constructor() {
super(...arguments);
this.onClick = (e) => {
const { onClick, xScale, yScale, datum } = this.props;
if (onClick !== undefined) {
onClick(e, { xScale, yScale, datum });
}
};
this.helper = (props, xAccessor, xScale, yScale) => {
const { x, y, datum, fill, tooltip, plotData } = props;
const xFunc = functor(x);
const yFunc = functor(y);
const [xPos, yPos] = [xFunc({ xScale, xAccessor, datum, plotData }), yFunc({ yScale, datum, plotData })];
return {
x: xPos,
y: yPos,
fill: functor(fill)(datum),
tooltip: functor(tooltip)(datum),
};
};
}
render() {
const { className, stroke, opacity, xAccessor, xScale, yScale, path, text, textXOffset, textYOffset, textAnchor, fontFamily, fontSize, textFill, textOpacity, textRotate, textIcon, textIconFontSize, textIconFill, textIconOpacity, textIconRotate, textIconXOffset, textIconYOffset, } = this.props;
const { x, y, fill, tooltip } = this.helper(this.props, xAccessor, xScale, yScale);
return (React.createElement("g", { className: className, onClick: this.onClick },
tooltip !== undefined ? React.createElement("title", null, tooltip) : null,
text !== undefined ? (React.createElement("text", { x: x, y: y, dx: textXOffset, dy: textYOffset, fontFamily: fontFamily, fontSize: fontSize, fill: textFill, opacity: textOpacity, transform: textRotate != undefined ? `rotate(${textRotate}, ${x}, ${y})` : undefined, textAnchor: textAnchor }, text)) : null,
textIcon !== undefined ? (React.createElement("text", { x: x, y: y, dx: textIconXOffset, dy: textIconYOffset, fontSize: textIconFontSize, fill: textIconFill, opacity: textIconOpacity, transform: textIconRotate != undefined ? `rotate(${textIconRotate}, ${x}, ${y})` : undefined, textAnchor: textAnchor }, textIcon)) : null,
path !== undefined ? React.createElement("path", { d: path({ x, y }), stroke: stroke, fill: fill, opacity: opacity }) : null));
}
}
BarAnnotation.defaultProps = {
className: "react-financial-charts-bar-annotation",
opacity: 1,
fill: "#000000",
fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
fontSize: 10,
textAnchor: "middle",
textFill: "#000000",
textOpacity: 1,
textIconFill: "#000000",
textIconFontSize: 10,
x: ({ xScale, xAccessor, datum, }) => xScale(xAccessor(datum)),
};
//# sourceMappingURL=BarAnnotation.js.map