react-financial-charts
Version:
React charts specific to finance.
59 lines • 2.86 kB
JavaScript
import * as React from "react";
import { functor } from "../utils";
export class BarAnnotation extends React.Component {
constructor() {
super(...arguments);
this.onClick = (e) => {
const { onClick } = this.props;
if (onClick) {
const { xScale, yScale, datum } = this.props;
onClick({ xScale, yScale, datum }, e);
}
};
}
render() {
const { className, stroke, opacity } = this.props;
const { xAccessor, xScale, yScale, path } = this.props;
const { text, textXOffset, textYOffset, textAnchor, fontFamily, fontSize, textFill, textOpacity, textRotate, } = this.props;
const { x, y, fill, tooltip } = helper(this.props, xAccessor, xScale, yScale);
const { textIcon, textIconFontSize, textIconFill, textIconOpacity, textIconRotate, textIconXOffset, textIconYOffset, } = this.props;
return (React.createElement("g", { className: className, onClick: this.onClick },
tooltip != null ? React.createElement("title", null, tooltip) : null,
text != null ? (React.createElement("text", { x: x, y: y, dx: textXOffset, dy: textYOffset, fontFamily: fontFamily, fontSize: fontSize, fill: textFill, opacity: textOpacity, transform: textRotate != null
? `rotate(${textRotate}, ${x}, ${y})`
: undefined, textAnchor: textAnchor }, text)) : null,
textIcon != null ? (React.createElement("text", { x: x, y: y, dx: textIconXOffset, dy: textIconYOffset, fontSize: textIconFontSize, fill: textIconFill, opacity: textIconOpacity, transform: textIconRotate != null
? `rotate(${textIconRotate}, ${x}, ${y})`
: undefined, textAnchor: textAnchor }, textIcon)) : null,
path != null ? (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",
textAnchor: "middle",
fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
fontSize: 10,
textFill: "#000000",
textOpacity: 1,
textIconFill: "#000000",
textIconFontSize: 10,
x: ({ xScale, xAccessor, datum }) => xScale(xAccessor(datum)),
};
function 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),
};
}
//# sourceMappingURL=BarAnnotation.js.map