@sgonzaloc/react-financial-charts-tooltip 3.0.0

package/LICENSE

@@ -0,0 +1,24 @@
+The MIT License (MIT)
+https://github.com/reactivemarkets/react-financial-charts
+
+Copyright (c) 2015-2018 Ragu Ramaswamy
+Copyright (c) 2016 Julien Renaux
+Copyright (c) 2019 Reactive Markets
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# Tooltip
+
+```bash
+npm i @react-financial-charts/tooltip
+```

package/lib/BollingerBandTooltip.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+export interface BollingerBandTooltipProps {
+    readonly className?: string;
+    readonly displayFormat: (value: number) => string;
+    readonly displayInit?: string;
+    readonly displayValuesFor?: (props: BollingerBandTooltipProps, moreProps: any) => any;
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly fontWeight?: number;
+    readonly labelFill?: string;
+    readonly labelFontWeight?: number;
+    readonly onClick?: (event: React.MouseEvent) => void;
+    readonly options: {
+        movingAverageType: string;
+        multiplier: number;
+        sourcePath: string;
+        windowSize: number;
+    };
+    readonly origin?: [number, number] | ((width: number, height: number) => [number, number]);
+    readonly textFill?: string;
+    readonly yAccessor?: (data: any) => {
+        bottom: number;
+        middle: number;
+        top: number;
+    };
+}
+export declare class BollingerBandTooltip extends React.Component<BollingerBandTooltipProps> {
+    static defaultProps: {
+        className: string;
+        displayFormat: (n: number | {
+            valueOf(): number;
+        }) => string;
+        displayValuesFor: (_: any, props: any) => any;
+        displayInit: string;
+        origin: number[];
+        yAccessor: (data: any) => any;
+    };
+    render(): import("react/jsx-runtime").JSX.Element;
+    private readonly renderSVG;
+}

package/lib/BollingerBandTooltip.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { functor, GenericChartComponent, last } from "@sgonzaloc/react-financial-charts-core";
+import { format } from "d3-format";
+import * as React from "react";
+import { ToolTipText } from "./ToolTipText";
+import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
+export class BollingerBandTooltip extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.renderSVG = (moreProps) => {
+            var _a;
+            const { onClick, displayFormat, yAccessor = BollingerBandTooltip.defaultProps.yAccessor, options, origin: originProp, textFill, labelFill, labelFontWeight, className, displayValuesFor = BollingerBandTooltip.defaultProps.displayValuesFor, displayInit, fontFamily, fontSize, fontWeight, } = this.props;
+            const { chartConfig: { width, height }, fullData, } = moreProps;
+            const currentItem = (_a = displayValuesFor(this.props, moreProps)) !== null && _a !== void 0 ? _a : last(fullData);
+            let top = displayInit;
+            let middle = displayInit;
+            let bottom = displayInit;
+            if (currentItem !== undefined) {
+                const item = yAccessor(currentItem);
+                if (item !== undefined) {
+                    top = displayFormat(item.top);
+                    middle = displayFormat(item.middle);
+                    bottom = displayFormat(item.bottom);
+                }
+            }
+            const origin = functor(originProp);
+            const [x, y] = origin(width, height);
+            const { sourcePath, windowSize, multiplier, movingAverageType } = options;
+            const tooltipLabel = `BB(${sourcePath}, ${windowSize}, ${multiplier}, ${movingAverageType}): `;
+            const tooltipValue = `${top}, ${middle}, ${bottom}`;
+            return (_jsx("g", Object.assign({ transform: `translate(${x}, ${y})`, className: className, onClick: onClick }, { children: _jsxs(ToolTipText, Object.assign({ x: 0, y: 0, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight }, { children: [_jsx(ToolTipTSpanLabel, Object.assign({ fill: labelFill, fontWeight: labelFontWeight }, { children: tooltipLabel })), _jsx("tspan", Object.assign({ fill: textFill }, { children: tooltipValue }))] })) })));
+        };
+    }
+    render() {
+        return _jsx(GenericChartComponent, { clip: false, svgDraw: this.renderSVG, drawOn: ["mousemove"] });
+    }
+}
+BollingerBandTooltip.defaultProps = {
+    className: "react-financial-charts-tooltip react-financial-charts-bollingerband-tooltip",
+    displayFormat: format(".2f"),
+    displayValuesFor: (_, props) => props.currentItem,
+    displayInit: "n/a",
+    origin: [8, 8],
+    yAccessor: (data) => data.bb,
+};
+//# sourceMappingURL=BollingerBandTooltip.js.map

package/lib/BollingerBandTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BollingerBandTooltip.js","sourceRoot":"","sources":["../src/BollingerBandTooltip.tsx"],"names":[],"mappings":"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"}

package/lib/GroupTooltip.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { layouts } from "./SingleTooltip";
+export interface GroupTooltipProps {
+    readonly className?: string;
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly fontWeight?: number;
+    readonly displayFormat: (value: number) => string;
+    readonly displayInit?: string;
+    readonly displayValuesFor: (props: GroupTooltipProps, moreProps: any) => any;
+    readonly layout: layouts;
+    readonly onClick?: (event: React.MouseEvent, details: any) => void;
+    readonly options: {
+        labelFill?: string;
+        yLabel: string;
+        yAccessor: (data: any) => number;
+        valueFill?: string;
+        withShape?: boolean;
+    }[];
+    readonly origin: [number, number];
+    readonly position?: "topRight" | "bottomLeft" | "bottomRight";
+    readonly verticalSize?: number;
+    readonly width?: number;
+}
+export declare class GroupTooltip extends React.Component<GroupTooltipProps> {
+    static defaultProps: {
+        className: string;
+        layout: string;
+        displayFormat: (n: number | {
+            valueOf(): number;
+        }) => string;
+        displayInit: string;
+        displayValuesFor: (_: any, props: any) => any;
+        origin: number[];
+        width: number;
+        verticalSize: number;
+    };
+    render(): import("react/jsx-runtime").JSX.Element;
+    private readonly getPosition;
+    private readonly renderSVG;
+}

package/lib/GroupTooltip.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GenericChartComponent, last } from "@sgonzaloc/react-financial-charts-core";
+import { format } from "d3-format";
+import * as React from "react";
+import { SingleTooltip } from "./SingleTooltip";
+import { ToolTipText } from "./ToolTipText";
+export class GroupTooltip extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getPosition = (moreProps) => {
+            const { position } = this.props;
+            const { height, width } = moreProps.chartConfig;
+            const dx = 20;
+            const dy = 40;
+            let textAnchor;
+            let xyPos = null;
+            if (position !== undefined) {
+                switch (position) {
+                    case "topRight":
+                        xyPos = [width - dx, null];
+                        textAnchor = "end";
+                        break;
+                    case "bottomLeft":
+                        xyPos = [null, height - dy];
+                        break;
+                    case "bottomRight":
+                        xyPos = [width - dx, height - dy];
+                        textAnchor = "end";
+                        break;
+                    default:
+                        xyPos = [null, null];
+                }
+            }
+            else {
+                xyPos = [null, null];
+            }
+            return { xyPos, textAnchor };
+        };
+        this.renderSVG = (moreProps) => {
+            var _a;
+            const { chartId, fullData } = moreProps;
+            const { className, displayInit = GroupTooltip.defaultProps.displayInit, displayValuesFor, onClick, width = 60, verticalSize = 13, fontFamily, fontSize, fontWeight, layout, origin, displayFormat, options, } = this.props;
+            const currentItem = (_a = displayValuesFor(this.props, moreProps)) !== null && _a !== void 0 ? _a : last(fullData);
+            const { xyPos, textAnchor } = this.getPosition(moreProps);
+            const xPos = xyPos != null && xyPos[0] != null ? xyPos[0] : origin[0];
+            const yPos = xyPos != null && xyPos[1] != null ? xyPos[1] : origin[1];
+            const singleTooltip = options.map((each, idx) => {
+                const yValue = currentItem && each.yAccessor(currentItem);
+                const yDisplayValue = yValue ? displayFormat(yValue) : displayInit;
+                const orig = () => {
+                    if (layout === "horizontal" || layout === "horizontalRows") {
+                        return [width * idx, 0];
+                    }
+                    if (layout === "vertical") {
+                        return [0, verticalSize * idx];
+                    }
+                    if (layout === "verticalRows") {
+                        return [0, verticalSize * 2.3 * idx];
+                    }
+                    return [0, 0];
+                };
+                return (_jsx(SingleTooltip, { layout: layout, origin: orig(), yLabel: each.yLabel, yValue: yDisplayValue, options: each, forChart: chartId, onClick: onClick, fontFamily: fontFamily, fontSize: fontSize, labelFill: each.labelFill, valueFill: each.valueFill, withShape: each.withShape }, idx));
+            });
+            return (_jsx("g", Object.assign({ transform: `translate(${xPos}, ${yPos})`, className: className, textAnchor: textAnchor }, { children: layout === "horizontalInline" ? (_jsx(ToolTipText, Object.assign({ x: 0, y: 0, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight }, { children: singleTooltip }))) : (singleTooltip) })));
+        };
+    }
+    render() {
+        return _jsx(GenericChartComponent, { clip: false, svgDraw: this.renderSVG, drawOn: ["mousemove"] });
+    }
+}
+GroupTooltip.defaultProps = {
+    className: "react-financial-charts-tooltip react-financial-charts-group-tooltip",
+    layout: "horizontal",
+    displayFormat: format(".2f"),
+    displayInit: "",
+    displayValuesFor: (_, props) => props.currentItem,
+    origin: [0, 0],
+    width: 60,
+    verticalSize: 13,
+};
+//# sourceMappingURL=GroupTooltip.js.map

package/lib/GroupTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupTooltip.js","sourceRoot":"","sources":["../src/GroupTooltip.tsx"],"names":[],"mappings":"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"}

package/lib/HoverTooltip.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+export interface HoverTooltipProps {
+    readonly background?: {
+        fillStyle?: string;
+        height?: number;
+        strokeStyle?: string;
+        width?: number;
+    };
+    readonly backgroundShapeCanvas: (props: HoverTooltipProps, { width, height }: {
+        width: number;
+        height: number;
+    }, ctx: CanvasRenderingContext2D) => void;
+    readonly chartId?: number | string;
+    readonly fontFamily?: string;
+    readonly fontFill?: string;
+    readonly fontSize?: number;
+    readonly origin?: (props: HoverTooltipProps, moreProps: any, bgSize: {
+        width: number;
+        height: number;
+    }, pointWidth: number) => [number, number];
+    readonly tooltip: {
+        content: (data: any) => {
+            x: string;
+            y: {
+                label: string;
+                value?: string;
+                stroke?: string;
+            }[];
+        };
+    };
+    readonly toolTipFillStyle?: string;
+    readonly toolTipStrokeStyle?: string;
+    readonly tooltipCanvas: (props: HoverTooltipProps, content: any, ctx: CanvasRenderingContext2D) => void;
+    readonly yAccessor: (data: any) => number;
+}
+export declare class HoverTooltip extends React.Component<HoverTooltipProps> {
+    static defaultProps: {
+        background: {
+            fillStyle: string;
+        };
+        toolTipFillStyle: string;
+        toolTipStrokeStyle: string;
+        tooltipCanvas: (props: HoverTooltipProps, content: any, ctx: CanvasRenderingContext2D) => void;
+        origin: (props: HoverTooltipProps, moreProps: any, bgSize: any, pointWidth: any) => any[];
+        backgroundShapeCanvas: (props: HoverTooltipProps, { width, height }: {
+            width: number;
+            height: number;
+        }, ctx: CanvasRenderingContext2D) => void;
+        fontFill: string;
+        fontFamily: string;
+        fontSize: number;
+    };
+    static contextType: React.Context<import("@sgonzaloc/react-financial-charts-core/lib/ChartCanvas").ChartCanvasContextType<number | Date>>;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private readonly drawOnCanvas;
+    private readonly helper;
+}

package/lib/HoverTooltip.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { max, sum } from "d3-array";
+import * as React from "react";
+import { ChartCanvasContext, first, GenericComponent, isDefined, last } from "@sgonzaloc/react-financial-charts-core";
+const PADDING = 4;
+const X = 8;
+const Y = 8;
+const roundRect = (ctx, x, y, width, height, radius) => {
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+};
+const defaultBackgroundShapeCanvas = (props, { width, height }, ctx) => {
+    const { toolTipFillStyle, toolTipStrokeStyle } = props;
+    ctx.beginPath();
+    roundRect(ctx, 0, 0, width, height, 4);
+    if (toolTipFillStyle !== undefined) {
+        ctx.fillStyle = toolTipFillStyle;
+        ctx.shadowColor = "#898";
+        ctx.shadowBlur = 4;
+        ctx.fill();
+        ctx.shadowBlur = 0;
+    }
+    if (toolTipStrokeStyle !== undefined) {
+        ctx.strokeStyle = toolTipStrokeStyle;
+        ctx.stroke();
+    }
+};
+const defaultTooltipCanvas = (props, content, ctx) => {
+    var _a, _b;
+    const { fontSize = 14, fontFamily, fontFill } = props;
+    const startY = Y + fontSize * 0.9;
+    ctx.font = `bold ${fontSize}px ${fontFamily}`;
+    if (fontFill !== undefined) {
+        ctx.fillStyle = fontFill;
+    }
+    ctx.textAlign = "left";
+    ctx.fillText(content.x, X, startY);
+    const maxLabel = (_a = max(content.y, (y) => ctx.measureText(y.label).width)) !== null && _a !== void 0 ? _a : 0;
+    for (let i = 0; i < content.y.length; i++) {
+        const y = content.y[i];
+        const textY = (i + 1) * PADDING + startY + fontSize * (i + 1);
+        ctx.font = `${fontSize}px ${fontFamily}`;
+        ctx.fillStyle = (_b = y.stroke) !== null && _b !== void 0 ? _b : fontFill;
+        ctx.fillText(y.label, X, textY);
+        if (fontFill !== undefined) {
+            ctx.fillStyle = fontFill;
+        }
+        ctx.fillText(y.value, X * 2 + maxLabel, textY);
+    }
+};
+const drawOnCanvas = (ctx, props, context, pointer, height) => {
+    const { margin, ratio } = context;
+    const { backgroundShapeCanvas, tooltipCanvas, background } = props;
+    const originX = 0.5 * ratio + margin.left;
+    const originY = 0.5 * ratio + margin.top;
+    ctx.save();
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.scale(ratio, ratio);
+    ctx.translate(originX, originY);
+    const { x, y, content, centerX, pointWidth, bgSize } = pointer;
+    if ((background === null || background === void 0 ? void 0 : background.fillStyle) !== undefined) {
+        ctx.fillStyle = background.fillStyle;
+    }
+    ctx.beginPath();
+    ctx.rect(centerX - pointWidth / 2, 0, pointWidth, height);
+    ctx.fill();
+    ctx.translate(x, y);
+    backgroundShapeCanvas(props, bgSize, ctx);
+    tooltipCanvas(props, content, ctx);
+    ctx.restore();
+};
+const calculateTooltipSize = (props, content, ctx) => {
+    const { fontFamily, fontSize = 12, fontFill } = props;
+    ctx.font = `bold ${fontSize}px ${fontFamily}`;
+    if (fontFill !== undefined) {
+        ctx.fillStyle = fontFill;
+    }
+    ctx.textAlign = "left";
+    const measureText = (str) => ({
+        width: ctx.measureText(str).width,
+        height: fontSize + PADDING,
+    });
+    const { width, height } = content.y
+        .map(({ label, value }) => measureText(`${label}  ${value}`))
+        // Sum all y and x sizes (begin with x label size)
+        .reduce((res, size) => sumSizes(res, size), measureText(String(content.x)));
+    return {
+        width: width + 2 * X,
+        height: height + 2 * Y,
+    };
+};
+const sumSizes = (...sizes) => {
+    return {
+        width: Math.max(...sizes.map((size) => size.width)),
+        height: sum(sizes, (d) => d.height),
+    };
+};
+const normalizeX = (x, bgSize, pointWidth, width) => {
+    return x < width / 2 ? x + pointWidth / 2 + PADDING : x - bgSize.width - pointWidth / 2 - PADDING;
+};
+const normalizeY = (y, bgSize) => {
+    return y - bgSize.height <= 0 ? y + PADDING : y - bgSize.height - PADDING;
+};
+const defaultOrigin = (props, moreProps, bgSize, pointWidth) => {
+    const { chartId, yAccessor } = props;
+    const { mouseXY, xAccessor, currentItem, xScale, chartConfig, width } = moreProps;
+    let y = last(mouseXY);
+    const xValue = xAccessor(currentItem);
+    let x = Math.round(xScale(xValue));
+    if (isDefined(chartId) && isDefined(yAccessor) && isDefined(chartConfig) && isDefined(chartConfig.findIndex)) {
+        const yValue = yAccessor(currentItem);
+        const chartIndex = chartConfig.findIndex((c) => c.id === chartId);
+        y = Math.round(chartConfig[chartIndex].yScale(yValue));
+    }
+    x = normalizeX(x, bgSize, pointWidth, width);
+    y = normalizeY(y, bgSize);
+    return [x, y];
+};
+export class HoverTooltip extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.drawOnCanvas = (ctx, moreProps) => {
+            const pointer = this.helper(ctx, moreProps);
+            if (pointer === undefined) {
+                return;
+            }
+            const { height } = moreProps;
+            drawOnCanvas(ctx, this.props, this.context, pointer, height);
+        };
+        this.helper = (ctx, moreProps) => {
+            const { show, xScale, currentItem, plotData, xAccessor, displayXAccessor } = moreProps;
+            const { origin = HoverTooltip.defaultProps.origin, tooltip } = this.props;
+            if (!show || currentItem === undefined) {
+                return;
+            }
+            const xValue = xAccessor(currentItem);
+            if (xValue === undefined) {
+                return;
+            }
+            const content = tooltip.content({ currentItem, xAccessor: displayXAccessor });
+            const centerX = xScale(xValue);
+            const pointWidth = Math.abs(xScale(xAccessor(last(plotData))) - xScale(xAccessor(first(plotData)))) / (plotData.length - 1);
+            const bgSize = calculateTooltipSize(this.props, content, ctx);
+            const [x, y] = origin(this.props, moreProps, bgSize, pointWidth);
+            return { x, y, content, centerX, pointWidth, bgSize };
+        };
+    }
+    render() {
+        return _jsx(GenericComponent, { canvasDraw: this.drawOnCanvas, drawOn: ["mousemove", "pan"] });
+    }
+}
+HoverTooltip.defaultProps = {
+    background: {
+        fillStyle: "rgba(33, 148, 243, 0.1)",
+    },
+    toolTipFillStyle: "rgba(250, 250, 250, 1)",
+    toolTipStrokeStyle: "rgba(33, 148, 243)",
+    tooltipCanvas: defaultTooltipCanvas,
+    origin: defaultOrigin,
+    backgroundShapeCanvas: defaultBackgroundShapeCanvas,
+    fontFill: "#000000",
+    fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+    fontSize: 14,
+};
+HoverTooltip.contextType = ChartCanvasContext;
+//# sourceMappingURL=HoverTooltip.js.map

package/lib/HoverTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverTooltip.js","sourceRoot":"","sources":["../src/HoverTooltip.tsx"],"names":[],"mappings":"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"}

package/lib/MACDTooltip.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+export interface MACDTooltipProps {
+    readonly origin: number[] | ((width: number, height: number) => [number, number]);
+    readonly className?: string;
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly fontWeight?: number;
+    readonly labelFill?: string;
+    readonly labelFontWeight?: number;
+    readonly onClick?: (event: React.MouseEvent) => void;
+    readonly options: {
+        slow: number;
+        fast: number;
+        signal: number;
+    };
+    readonly appearance: {
+        strokeStyle: {
+            macd: string;
+            signal: string;
+        };
+        fillStyle: {
+            divergence: string;
+        };
+    };
+    readonly displayFormat: (value: number) => string;
+    readonly displayInit?: string;
+    readonly displayValuesFor: (props: MACDTooltipProps, moreProps: any) => any | undefined;
+    readonly yAccessor: (data: any) => {
+        macd: number;
+        signal: number;
+        divergence: number;
+    };
+}
+export declare class MACDTooltip extends React.Component<MACDTooltipProps> {
+    static defaultProps: {
+        className: string;
+        displayFormat: (n: number | {
+            valueOf(): number;
+        }) => string;
+        displayInit: string;
+        displayValuesFor: (_: any, props: any) => any;
+        origin: number[];
+    };
+    render(): import("react/jsx-runtime").JSX.Element;
+    private readonly renderSVG;
+}

package/lib/MACDTooltip.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { functor, GenericChartComponent, last } from "@sgonzaloc/react-financial-charts-core";
+import { format } from "d3-format";
+import * as React from "react";
+import { ToolTipText } from "./ToolTipText";
+import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
+export class MACDTooltip extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.renderSVG = (moreProps) => {
+            var _a;
+            const { onClick, displayInit, fontFamily, fontSize, fontWeight, displayValuesFor, displayFormat, className, yAccessor, options, origin: originProp, appearance, labelFill, labelFontWeight, } = this.props;
+            const { chartConfig: { width, height }, fullData, } = moreProps;
+            const currentItem = (_a = displayValuesFor(this.props, moreProps)) !== null && _a !== void 0 ? _a : last(fullData);
+            const macdValue = currentItem && yAccessor(currentItem);
+            const macd = ((macdValue === null || macdValue === void 0 ? void 0 : macdValue.macd) && displayFormat(macdValue.macd)) || displayInit;
+            const signal = ((macdValue === null || macdValue === void 0 ? void 0 : macdValue.signal) && displayFormat(macdValue.signal)) || displayInit;
+            const divergence = ((macdValue === null || macdValue === void 0 ? void 0 : macdValue.divergence) && displayFormat(macdValue.divergence)) || displayInit;
+            const origin = functor(originProp);
+            const [x, y] = origin(width, height);
+            return (_jsx("g", Object.assign({ className: className, transform: `translate(${x}, ${y})`, onClick: onClick }, { children: _jsxs(ToolTipText, Object.assign({ x: 0, y: 0, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight }, { children: [_jsx(ToolTipTSpanLabel, Object.assign({ fill: labelFill, fontWeight: labelFontWeight }, { children: "MACD (" })), _jsx("tspan", Object.assign({ fill: appearance.strokeStyle.macd }, { children: options.slow })), _jsxs(ToolTipTSpanLabel, Object.assign({ fill: labelFill, fontWeight: labelFontWeight }, { children: [",", " "] })), _jsx("tspan", Object.assign({ fill: appearance.strokeStyle.macd }, { children: options.fast })), _jsxs(ToolTipTSpanLabel, Object.assign({ fill: labelFill, fontWeight: labelFontWeight }, { children: ["):", " "] })), _jsx("tspan", Object.assign({ fill: appearance.strokeStyle.macd }, { children: macd })), _jsxs(ToolTipTSpanLabel, Object.assign({ fill: labelFill, fontWeight: labelFontWeight }, { children: [" ", "Signal ("] })), _jsx("tspan", Object.assign({ fill: appearance.strokeStyle.signal }, { children: options.signal })), _jsxs(ToolTipTSpanLabel, Object.assign({ fill: labelFill, fontWeight: labelFontWeight }, { children: ["):", " "] })), _jsx("tspan", Object.assign({ fill: appearance.strokeStyle.signal }, { children: signal })), _jsxs(ToolTipTSpanLabel, Object.assign({ fill: labelFill, fontWeight: labelFontWeight }, { children: [" ", "Divergence:", " "] })), _jsx("tspan", Object.assign({ fill: appearance.fillStyle.divergence }, { children: divergence }))] })) })));
+        };
+    }
+    render() {
+        return _jsx(GenericChartComponent, { clip: false, svgDraw: this.renderSVG, drawOn: ["mousemove"] });
+    }
+}
+MACDTooltip.defaultProps = {
+    className: "react-financial-charts-tooltip",
+    displayFormat: format(".2f"),
+    displayInit: "n/a",
+    displayValuesFor: (_, props) => props.currentItem,
+    origin: [0, 0],
+};
+//# sourceMappingURL=MACDTooltip.js.map

package/lib/MACDTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MACDTooltip.js","sourceRoot":"","sources":["../src/MACDTooltip.tsx"],"names":[],"mappings":"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"}