react-financial-charts
Version:
React charts specific to finance.
50 lines • 3.14 kB
JavaScript
import { format } from "d3-format";
import * as React from "react";
import GenericChartComponent from "../GenericChartComponent";
import { default as defaultDisplayValuesFor } from "./displayValuesFor";
import { functor } from "../utils";
import { ToolTipText } from "./ToolTipText";
import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
export class MACDTooltip extends React.Component {
constructor() {
super(...arguments);
this.renderSVG = (moreProps) => {
const { onClick, fontFamily, fontSize, displayFormat, className } = this.props;
const { yAccessor, options, appearance, labelFill } = this.props;
const { displayValuesFor } = this.props;
const { chartConfig: { width, height } } = moreProps;
const currentItem = displayValuesFor(this.props, moreProps);
const macdValue = currentItem && yAccessor(currentItem);
const macd = (macdValue && macdValue.macd && displayFormat(macdValue.macd)) || "n/a";
const signal = (macdValue && macdValue.signal && displayFormat(macdValue.signal)) || "n/a";
const divergence = (macdValue && macdValue.divergence && displayFormat(macdValue.divergence)) || "n/a";
const { origin: originProp } = this.props;
const origin = functor(originProp);
const [x, y] = origin(width, height);
return (React.createElement("g", { className: className, transform: `translate(${x}, ${y})`, onClick: onClick },
React.createElement(ToolTipText, { x: 0, y: 0, fontFamily: fontFamily, fontSize: fontSize },
React.createElement(ToolTipTSpanLabel, { fill: labelFill }, "MACD ("),
React.createElement("tspan", { fill: appearance.stroke.macd }, options.slow),
React.createElement(ToolTipTSpanLabel, { fill: labelFill }, ", "),
React.createElement("tspan", { fill: appearance.stroke.macd }, options.fast),
React.createElement(ToolTipTSpanLabel, { fill: labelFill }, "): "),
React.createElement("tspan", { fill: appearance.stroke.macd }, macd),
React.createElement(ToolTipTSpanLabel, { fill: labelFill }, " Signal ("),
React.createElement("tspan", { fill: appearance.stroke.signal }, options.signal),
React.createElement(ToolTipTSpanLabel, { fill: labelFill }, "): "),
React.createElement("tspan", { fill: appearance.stroke.signal }, signal),
React.createElement(ToolTipTSpanLabel, { fill: labelFill }, " Divergence: "),
React.createElement("tspan", { fill: appearance.fill.divergence }, divergence))));
};
}
render() {
return (React.createElement(GenericChartComponent, { clip: false, svgDraw: this.renderSVG, drawOn: ["mousemove"] }));
}
}
MACDTooltip.defaultProps = {
className: "react-financial-charts-tooltip",
displayFormat: format(".2f"),
displayValuesFor: defaultDisplayValuesFor,
origin: [0, 0],
};
//# sourceMappingURL=MACDTooltip.js.map