react-financial-charts
Version:
React charts specific to finance.
101 lines • 4.6 kB
JavaScript
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