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

React charts specific to finance.

import { format } from "d3-format";
import { timeFormat } from "d3-time-format";
import * as React from "react";
import GenericChartComponent from "../GenericChartComponent";
import { default as defaultDisplayValuesFor } from "./displayValuesFor";
import { functor, isDefined, last } from "../utils";
import { ToolTipText } from "./ToolTipText";
import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
const displayTextsDefault = {
    o: "O: ",
    h: " H: ",
    l: " L: ",
    c: " C: ",
    v: " Vol: ",
    na: "n/a",
};
const defaultDisplay = (props, _, itemsToDisplay) => {
    const { className, textFill, labelFill, onClick, fontFamily, fontSize, displayTexts, } = props;
    const { open, high, low, close, volume, x, y, } = itemsToDisplay;
    return (React.createElement("g", { className: `react-financial-charts-tooltip-hover ${className}`, transform: `translate(${x}, ${y})`, onClick: onClick },
        React.createElement(ToolTipText, { x: 0, y: 0, fontFamily: fontFamily, fontSize: fontSize },
            React.createElement(ToolTipTSpanLabel, { fill: labelFill, key: "label_O" }, displayTexts.o),
            React.createElement("tspan", { key: "value_O", fill: textFill }, open),
            React.createElement(ToolTipTSpanLabel, { fill: labelFill, key: "label_H" }, displayTexts.h),
            React.createElement("tspan", { key: "value_H", fill: textFill }, high),
            React.createElement(ToolTipTSpanLabel, { fill: labelFill, key: "label_L" }, displayTexts.l),
            React.createElement("tspan", { key: "value_L", fill: textFill }, low),
            React.createElement(ToolTipTSpanLabel, { fill: labelFill, key: "label_C" }, displayTexts.c),
            React.createElement("tspan", { key: "value_C", fill: textFill }, close),
            React.createElement(ToolTipTSpanLabel, { fill: labelFill, key: "label_Vol" }, displayTexts.v),
            React.createElement("tspan", { key: "value_Vol", fill: textFill }, volume))));
};
export class OHLCTooltip extends React.Component {
    constructor() {
        super(...arguments);
        this.renderSVG = (moreProps) => {
            const { displayValuesFor, xDisplayFormat, accessor, volumeFormat, ohlcFormat, percentFormat, displayTexts, lastAsDefault, } = this.props;
            const { chartConfig: { width, height }, displayXAccessor, fullData } = moreProps;
            const currentItem = displayValuesFor(this.props, moreProps);
            const displayItem = lastAsDefault ? currentItem || last(fullData) : currentItem;
            let displayDate;
            let open;
            let high;
            let low;
            let close;
            let volume;
            let percent;
            displayDate = open = high = low = close = volume = percent = displayTexts.na;
            if (isDefined(displayItem) && isDefined(accessor(displayItem))) {
                const item = accessor(displayItem);
                volume = isDefined(item.volume) ? volumeFormat(item.volume) : displayTexts.na;
                displayDate = xDisplayFormat(displayXAccessor(item));
                open = ohlcFormat(item.open);
                high = ohlcFormat(item.high);
                low = ohlcFormat(item.low);
                close = ohlcFormat(item.close);
                percent = percentFormat((item.close - item.open) / item.open);
            }
            const { origin: originProp } = this.props;
            const origin = functor(originProp);
            const [x, y] = origin(width, height);
            const itemsToDisplay = {
                displayDate,
                open,
                high,
                low,
                close,
                percent,
                volume,
                x,
                y,
            };
            return this.props.children(this.props, moreProps, itemsToDisplay);
        };
    }
    render() {
        return (React.createElement(GenericChartComponent, { clip: false, svgDraw: this.renderSVG, drawOn: ["mousemove"] }));
    }
}
OHLCTooltip.defaultProps = {
    accessor: (d) => {
        return {
            date: d.date,
            open: d.open,
            high: d.high,
            low: d.low,
            close: d.close,
            volume: d.volume,
        };
    },
    xDisplayFormat: timeFormat("%Y-%m-%d"),
    volumeFormat: format(".4s"),
    percentFormat: format(".2%"),
    ohlcFormat: format(".2f"),
    displayValuesFor: defaultDisplayValuesFor,
    origin: [0, 0],
    children: defaultDisplay,
    displayTexts: displayTextsDefault,
    lastAsDefault: false,
};
//# sourceMappingURL=OHLCTooltip.js.map