react-financial-charts
Version:
React charts specific to finance.
48 lines • 2.63 kB
JavaScript
import { format } from "d3-format";
import * as React from "react";
import GenericChartComponent from "../GenericChartComponent";
import { default as defaultDisplayValuesFor } from "./displayValuesFor";
import { functor, identity, isDefined, noop } from "../utils";
import { ToolTipText } from "./ToolTipText";
import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
export class SingleValueTooltip extends React.Component {
constructor() {
super(...arguments);
this.renderSVG = (moreProps) => {
const { onClick, fontFamily, fontSize, labelFill, valueFill, className } = this.props;
const { xDisplayFormat, yDisplayFormat, xLabel, yLabel, xAccessor, yAccessor, xInitDisplay, yInitDisplay } = this.props;
const { displayValuesFor } = this.props;
const { chartConfig: { width, height } } = moreProps;
const currentItem = displayValuesFor(this.props, moreProps);
const xDisplayValue = isDefined(currentItem) && isDefined(xAccessor(currentItem)) ?
xDisplayFormat(xAccessor(currentItem)) : xInitDisplay;
const yDisplayValue = isDefined(currentItem) && isDefined(yAccessor(currentItem)) ?
yDisplayFormat(yAccessor(currentItem)) : yInitDisplay;
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 },
xLabel ? React.createElement(ToolTipTSpanLabel, { x: 0, dy: "5", fill: labelFill }, `${xLabel}: `) : null,
xLabel ? React.createElement("tspan", { fill: valueFill }, `${xDisplayValue} `) : null,
React.createElement(ToolTipTSpanLabel, { fill: labelFill }, `${yLabel}: `),
React.createElement("tspan", { fill: valueFill }, yDisplayValue))));
};
}
render() {
return (React.createElement(GenericChartComponent, { clip: false, svgDraw: this.renderSVG, drawOn: ["mousemove"] }));
}
}
SingleValueTooltip.defaultProps = {
origin: [0, 0],
labelFill: "#4682B4",
valueFill: "#000000",
yDisplayFormat: format(".2f"),
displayValuesFor: defaultDisplayValuesFor,
xAccessor: noop,
yAccessor: identity,
xInitDisplay: "n/a",
yInitDisplay: "n/a",
className: "react-financial-charts-tooltip",
};
//# sourceMappingURL=SingleValueTooltip.js.map