UNPKG

react-financial-charts

Version:
48 lines 2.63 kB
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