react-financial-charts/lib/tooltip/BollingerBandTooltip.js

React charts specific to finance.

import { format } from "d3-format";
import * as React from "react";
import GenericChartComponent from "../GenericChartComponent";
import { functor, isDefined } from "../utils";
import { default as defaultDisplayValuesFor } from "./displayValuesFor";
import { ToolTipText } from "./ToolTipText";
import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
export class BollingerBandTooltip extends React.Component {
    constructor() {
        super(...arguments);
        this.renderSVG = (moreProps) => {
            const { onClick, displayFormat, yAccessor, options, textFill, labelFill } = this.props;
            const { displayValuesFor } = this.props;
            const { chartConfig: { width, height } } = moreProps;
            const currentItem = displayValuesFor(this.props, moreProps);
            let top;
            let middle;
            let bottom;
            top = middle = bottom = "n/a";
            if (isDefined(currentItem)
                && isDefined(yAccessor(currentItem))) {
                const item = yAccessor(currentItem);
                top = displayFormat(item.top);
                middle = displayFormat(item.middle);
                bottom = displayFormat(item.bottom);
            }
            const { origin: originProp } = this.props;
            const origin = functor(originProp);
            const [x, y] = origin(width, height);
            const { sourcePath, windowSize, multiplier, movingAverageType } = options;
            const tooltipLabel = `BB(${sourcePath}, ${windowSize}, ${multiplier}, ${movingAverageType}): `;
            const tooltipValue = `${top}, ${middle}, ${bottom}`;
            return (React.createElement("g", { transform: `translate(${x}, ${y})`, className: this.props.className, onClick: onClick },
                React.createElement(ToolTipText, { x: 0, y: 0, fontFamily: this.props.fontFamily, fontSize: this.props.fontSize },
                    React.createElement(ToolTipTSpanLabel, { fill: labelFill }, tooltipLabel),
                    React.createElement("tspan", { fill: textFill }, tooltipValue))));
        };
    }
    render() {
        return (React.createElement(GenericChartComponent, { clip: false, svgDraw: this.renderSVG, drawOn: ["mousemove"] }));
    }
}
BollingerBandTooltip.defaultProps = {
    className: "react-financial-charts-tooltip react-financial-charts-bollingerband-tooltip",
    displayFormat: format(".2f"),
    displayValuesFor: defaultDisplayValuesFor,
    origin: [8, 8],
    yAccessor: (data) => data.bb,
};
//# sourceMappingURL=BollingerBandTooltip.js.map