UNPKG

react-financial-charts

Version:
101 lines 4.6 kB
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