@tradingaction/tooltip 2.0.13

package/lib/StochasticTooltip.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+export interface StochasticTooltipProps {
+    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 onClick?: (event: React.MouseEvent) => void;
+    readonly yAccessor: (currentItem: any) => {
+        K: number;
+        D: number;
+    };
+    readonly options: {
+        windowSize: number;
+        kWindowSize: number;
+        dWindowSize: number;
+    };
+    readonly appearance: {
+        stroke: {
+            dLine: string;
+            kLine: string;
+        };
+    };
+    readonly displayFormat: (value: number) => string;
+    readonly displayInit?: string;
+    readonly displayValuesFor?: (props: StochasticTooltipProps, moreProps: any) => any;
+    readonly label: string;
+}
+export declare class StochasticTooltip extends React.Component<StochasticTooltipProps> {
+    static defaultProps: {
+        className: string;
+        displayFormat: (n: number | {
+            valueOf(): number;
+        }) => string;
+        displayInit: string;
+        displayValuesFor: (_: any, props: any) => any;
+        label: string;
+        origin: number[];
+    };
+    render(): JSX.Element;
+    private readonly renderSVG;
+}

package/lib/StochasticTooltip.js

@@ -0,0 +1,44 @@
+import { functor, GenericChartComponent } from "@tradingaction/core";
+import { format } from "d3-format";
+import * as React from "react";
+import { ToolTipText } from "./ToolTipText";
+import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
+export class StochasticTooltip extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.renderSVG = (moreProps) => {
+            var _a, _b, _c;
+            const { onClick, fontFamily, fontSize, fontWeight, yAccessor, displayFormat, origin: originProp, label, className, displayInit, displayValuesFor = StochasticTooltip.defaultProps.displayValuesFor, options, appearance, labelFill, } = this.props;
+            const { chartConfig: { width, height }, fullData, } = moreProps;
+            const currentItem = (_a = displayValuesFor(this.props, moreProps)) !== null && _a !== void 0 ? _a : fullData[fullData.length - 1];
+            const stochastic = currentItem && yAccessor(currentItem);
+            const K = (_b = ((stochastic === null || stochastic === void 0 ? void 0 : stochastic.K) && displayFormat(stochastic.K))) !== null && _b !== void 0 ? _b : displayInit;
+            const D = (_c = ((stochastic === null || stochastic === void 0 ? void 0 : stochastic.D) && displayFormat(stochastic.D))) !== null && _c !== void 0 ? _c : displayInit;
+            const origin = functor(originProp);
+            const [x, y] = origin(width, height);
+            const { stroke } = appearance;
+            return (React.createElement("g", { className: className, transform: `translate(${x}, ${y})`, onClick: onClick },
+                React.createElement(ToolTipText, { x: 0, y: 0, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight },
+                    React.createElement(ToolTipTSpanLabel, { fill: labelFill }, `${label} %K(`),
+                    React.createElement("tspan", { fill: stroke.kLine }, `${options.windowSize}, ${options.kWindowSize}`),
+                    React.createElement(ToolTipTSpanLabel, { fill: labelFill }, "): "),
+                    React.createElement("tspan", { fill: stroke.kLine }, K),
+                    React.createElement(ToolTipTSpanLabel, { fill: labelFill }, " %D ("),
+                    React.createElement("tspan", { fill: stroke.dLine }, options.dWindowSize),
+                    React.createElement(ToolTipTSpanLabel, { fill: labelFill }, "): "),
+                    React.createElement("tspan", { fill: stroke.dLine }, D))));
+        };
+    }
+    render() {
+        return React.createElement(GenericChartComponent, { clip: false, svgDraw: this.renderSVG, drawOn: ["mousemove"] });
+    }
+}
+StochasticTooltip.defaultProps = {
+    className: "react-financial-charts-tooltip",
+    displayFormat: format(".2f"),
+    displayInit: "n/a",
+    displayValuesFor: (_, props) => props.currentItem,
+    label: "STO",
+    origin: [0, 0],
+};
+//# sourceMappingURL=StochasticTooltip.js.map

package/lib/StochasticTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StochasticTooltip.js","sourceRoot":"","sources":["../src/StochasticTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AA4BxD,MAAM,OAAO,iBAAkB,SAAQ,KAAK,CAAC,SAAiC;IAA9E;;QAcqB,cAAS,GAAG,CAAC,SAAc,EAAE,EAAE;;YAC5C,MAAM,EACF,OAAO,EACP,UAAU,EACV,QAAQ,EACR,UAAU,EACV,SAAS,EACT,aAAa,EACb,MAAM,EAAE,UAAU,EAClB,KAAK,EACL,SAAS,EACT,WAAW,EACX,gBAAgB,GAAG,iBAAiB,CAAC,YAAY,CAAC,gBAAgB,EAClE,OAAO,EACP,UAAU,EACV,SAAS,GACZ,GAAG,IAAI,CAAC,KAAK,CAAC;YACf,MAAM,EACF,WAAW,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC9B,QAAQ,GACX,GAAG,SAAS,CAAC;YAEd,MAAM,WAAW,GAAG,MAAA,gBAAgB,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,mCAAI,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAE7F,MAAM,UAAU,GAAG,WAAW,IAAI,SAAS,CAAC,WAAW,CAAC,CAAC;YAEzD,MAAM,CAAC,GAAG,MAAA,CAAC,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,CAAC,KAAI,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,mCAAI,WAAW,CAAC;YACxE,MAAM,CAAC,GAAG,MAAA,CAAC,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,CAAC,KAAI,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,mCAAI,WAAW,CAAC;YAExE,MAAM,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;YAEnC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YAErC,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;YAE9B,OAAO,CACH,2BAAG,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,EAAE,OAAO,EAAE,OAAO;gBACzE,oBAAC,WAAW,IAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU;oBACvF,oBAAC,iBAAiB,IAAC,IAAI,EAAE,SAAS,IAAG,GAAG,KAAK,MAAM,CAAqB;oBACxE,+BAAO,IAAI,EAAE,MAAM,CAAC,KAAK,IAAG,GAAG,OAAO,CAAC,UAAU,KAAK,OAAO,CAAC,WAAW,EAAE,CAAS;oBACpF,oBAAC,iBAAiB,IAAC,IAAI,EAAE,SAAS,UAAyB;oBAC3D,+BAAO,IAAI,EAAE,MAAM,CAAC,KAAK,IAAG,CAAC,CAAS;oBACtC,oBAAC,iBAAiB,IAAC,IAAI,EAAE,SAAS,YAA2B;oBAC7D,+BAAO,IAAI,EAAE,MAAM,CAAC,KAAK,IAAG,OAAO,CAAC,WAAW,CAAS;oBACxD,oBAAC,iBAAiB,IAAC,IAAI,EAAE,SAAS,UAAyB;oBAC3D,+BAAO,IAAI,EAAE,MAAM,CAAC,KAAK,IAAG,CAAC,CAAS,CAC5B,CACd,CACP,CAAC;QACN,CAAC,CAAC;IACN,CAAC;IAtDU,MAAM;QACT,OAAO,oBAAC,qBAAqB,IAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC,WAAW,CAAC,GAAI,CAAC;IAClG,CAAC;;AAXa,8BAAY,GAAG;IACzB,SAAS,EAAE,gCAAgC;IAC3C,aAAa,EAAE,MAAM,CAAC,KAAK,CAAC;IAC5B,WAAW,EAAE,KAAK;IAClB,gBAAgB,EAAE,CAAC,CAAM,EAAE,KAAU,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW;IAC3D,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;CACjB,CAAC"}

package/lib/ToolTipTSpanLabel.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export declare class ToolTipTSpanLabel extends React.PureComponent<React.SVGProps<SVGTSpanElement>> {
+    static defaultProps: {
+        className: string;
+        fill: string;
+    };
+    render(): JSX.Element;
+}

package/lib/ToolTipTSpanLabel.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+export class ToolTipTSpanLabel extends React.PureComponent {
+    render() {
+        const _a = this.props, { children } = _a, rest = __rest(_a, ["children"]);
+        return React.createElement("tspan", Object.assign({}, rest), children);
+    }
+}
+ToolTipTSpanLabel.defaultProps = {
+    className: "react-financial-charts-tooltip-label",
+    fill: "#4682B4",
+};
+//# sourceMappingURL=ToolTipTSpanLabel.js.map

package/lib/ToolTipTSpanLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolTipTSpanLabel.js","sourceRoot":"","sources":["../src/ToolTipTSpanLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,OAAO,iBAAkB,SAAQ,KAAK,CAAC,aAA8C;IAMhF,MAAM;QACT,MAAM,KAAwB,IAAI,CAAC,KAAK,EAAlC,EAAE,QAAQ,OAAwB,EAAnB,IAAI,cAAnB,YAAqB,CAAa,CAAC;QAEzC,OAAO,+CAAW,IAAI,GAAG,QAAQ,CAAS,CAAC;IAC/C,CAAC;;AATa,8BAAY,GAAG;IACzB,SAAS,EAAE,sCAAsC;IACjD,IAAI,EAAE,SAAS;CAClB,CAAC"}

package/lib/ToolTipText.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export declare class ToolTipText extends React.PureComponent<React.SVGProps<SVGTextElement>> {
+    static defaultProps: {
+        className: string;
+        fontFamily: string;
+        fontSize: number;
+    };
+    render(): JSX.Element;
+}

package/lib/ToolTipText.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+export class ToolTipText extends React.PureComponent {
+    render() {
+        const _a = this.props, { children } = _a, rest = __rest(_a, ["children"]);
+        return React.createElement("text", Object.assign({}, rest), children);
+    }
+}
+ToolTipText.defaultProps = {
+    className: "react-financial-charts-tooltip",
+    fontFamily: "-apple-system, system-ui, 'Helvetica Neue', Ubuntu, sans-serif",
+    fontSize: 11,
+};
+//# sourceMappingURL=ToolTipText.js.map

package/lib/ToolTipText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolTipText.js","sourceRoot":"","sources":["../src/ToolTipText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,aAA6C;IAOzE,MAAM;QACT,MAAM,KAAwB,IAAI,CAAC,KAAK,EAAlC,EAAE,QAAQ,OAAwB,EAAnB,IAAI,cAAnB,YAAqB,CAAa,CAAC;QAEzC,OAAO,8CAAU,IAAI,GAAG,QAAQ,CAAQ,CAAC;IAC7C,CAAC;;AAVa,wBAAY,GAAG;IACzB,SAAS,EAAE,gCAAgC;IAC3C,UAAU,EAAE,gEAAgE;IAC5E,QAAQ,EAAE,EAAE;CACf,CAAC"}

package/lib/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./BollingerBandTooltip";
+export * from "./GroupTooltip";
+export * from "./HoverTooltip";
+export * from "./MACDTooltip";
+export * from "./MovingAverageTooltip";
+export * from "./OHLCTooltip";
+export * from "./RSITooltip";
+export * from "./SingleTooltip";
+export * from "./SingleValueTooltip";
+export * from "./StochasticTooltip";
+export * from "./ToolTipText";
+export * from "./ToolTipTSpanLabel";

package/lib/index.js

@@ -0,0 +1,13 @@
+export * from "./BollingerBandTooltip";
+export * from "./GroupTooltip";
+export * from "./HoverTooltip";
+export * from "./MACDTooltip";
+export * from "./MovingAverageTooltip";
+export * from "./OHLCTooltip";
+export * from "./RSITooltip";
+export * from "./SingleTooltip";
+export * from "./SingleValueTooltip";
+export * from "./StochasticTooltip";
+export * from "./ToolTipText";
+export * from "./ToolTipTSpanLabel";
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -0,0 +1,51 @@
+{
+    "name": "@tradingaction/tooltip",
+    "version": "2.0.13",
+    "description": "Tooltips for react-financial-charts",
+    "publishConfig": {
+        "access": "public"
+    },
+    "main": "./lib/index.js",
+    "typings": "./lib/index.d.ts",
+    "files": [
+        "lib",
+        "src"
+    ],
+    "sideEffects": false,
+    "author": "Reactive Markets",
+    "keywords": [
+        "charts",
+        "charting",
+        "stockcharts",
+        "finance",
+        "financial",
+        "finance-chart",
+        "react",
+        "d3"
+    ],
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/reactivemarkets/react-financial-charts.git"
+    },
+    "bugs": {
+        "url": "https://github.com/reactivemarkets/react-financial-charts/issues"
+    },
+    "scripts": {
+        "build": "npm run clean && npm run compile",
+        "clean": "rimraf lib",
+        "compile": "tsc -p tsconfig.json",
+        "watch": "tsc -p tsconfig.json --watch --preserveWatchOutput"
+    },
+    "dependencies": {
+        "@tradingaction/core": "^2.0.13",
+        "d3-array": "^2.9.1",
+        "d3-format": "^2.0.0",
+        "d3-time-format": "^3.0.0"
+    },
+    "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+    },
+    "gitHead": "9c9bc635a2291c8da0e1dd5befa4000e96d83119"
+}

package/src/BollingerBandTooltip.tsx

@@ -0,0 +1,99 @@
+import { functor, GenericChartComponent, last } from "@tradingaction/core";
+import { format } from "d3-format";
+import * as React from "react";
+import { ToolTipText } from "./ToolTipText";
+import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
+
+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 class BollingerBandTooltip extends React.Component<BollingerBandTooltipProps> {
+    public static defaultProps = {
+        className: "react-financial-charts-tooltip react-financial-charts-bollingerband-tooltip",
+        displayFormat: format(".2f"),
+        displayValuesFor: (_: any, props: any) => props.currentItem,
+        displayInit: "n/a",
+        origin: [8, 8],
+        yAccessor: (data: any) => data.bb,
+    };
+
+    public render() {
+        return <GenericChartComponent clip={false} svgDraw={this.renderSVG} drawOn={["mousemove"]} />;
+    }
+
+    private readonly renderSVG = (moreProps: any) => {
+        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 = displayValuesFor(this.props, moreProps) ?? 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 (
+            <g transform={`translate(${x}, ${y})`} className={className} onClick={onClick}>
+                <ToolTipText x={0} y={0} fontFamily={fontFamily} fontSize={fontSize} fontWeight={fontWeight}>
+                    <ToolTipTSpanLabel fill={labelFill} fontWeight={labelFontWeight}>
+                        {tooltipLabel}
+                    </ToolTipTSpanLabel>
+                    <tspan fill={textFill}>{tooltipValue}</tspan>
+                </ToolTipText>
+            </g>
+        );
+    };
+}

package/src/GroupTooltip.tsx

@@ -0,0 +1,152 @@
+import { GenericChartComponent, last } from "@tradingaction/core";
+import { format } from "d3-format";
+import * as React from "react";
+import { layouts, SingleTooltip } from "./SingleTooltip";
+import { ToolTipText } from "./ToolTipText";
+
+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; // "verticalSize" only be used, if layout is "vertical", "verticalRows".
+    readonly width?: number; // "width" only be used, if layout is "horizontal" or "horizontalRows".
+}
+
+export class GroupTooltip extends React.Component<GroupTooltipProps> {
+    public static defaultProps = {
+        className: "react-financial-charts-tooltip react-financial-charts-group-tooltip",
+        layout: "horizontal",
+        displayFormat: format(".2f"),
+        displayInit: "",
+        displayValuesFor: (_: any, props: any) => props.currentItem,
+        origin: [0, 0],
+        width: 60,
+        verticalSize: 13,
+    };
+
+    public render() {
+        return <GenericChartComponent clip={false} svgDraw={this.renderSVG} drawOn={["mousemove"]} />;
+    }
+
+    private readonly getPosition = (moreProps: any) => {
+        const { position } = this.props;
+        const { height, width } = moreProps.chartConfig;
+
+        const dx = 20;
+        const dy = 40;
+        let textAnchor: string | undefined;
+        let xyPos: (number | null)[] | null = 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 };
+    };
+
+    private readonly renderSVG = (moreProps: any) => {
+        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 = displayValuesFor(this.props, moreProps) ?? 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: () => [number, number] = () => {
+                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 (
+                <SingleTooltip
+                    key={idx}
+                    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}
+                />
+            );
+        });
+
+        return (
+            <g transform={`translate(${xPos}, ${yPos})`} className={className} textAnchor={textAnchor}>
+                {layout === "horizontalInline" ? (
+                    <ToolTipText x={0} y={0} fontFamily={fontFamily} fontSize={fontSize} fontWeight={fontWeight}>
+                        {singleTooltip}
+                    </ToolTipText>
+                ) : (
+                    singleTooltip
+                )}
+            </g>
+        );
+    };
+}