@tradingaction/tooltip 2.0.13

package/src/HoverTooltip.tsx

@@ -0,0 +1,270 @@
+import { max, sum } from "d3-array";
+import * as React from "react";
+import { ChartCanvasContext, first, GenericComponent, isDefined, last } from "@tradingaction/core";
+
+const PADDING = 4;
+const X = 8;
+const Y = 8;
+
+const roundRect = (
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    radius: number,
+) => {
+    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: HoverTooltipProps,
+    { width, height }: { width: number; height: number },
+    ctx: CanvasRenderingContext2D,
+) => {
+    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: HoverTooltipProps, content: any, ctx: CanvasRenderingContext2D) => {
+    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 = max(content.y, (y: any) => ctx.measureText(y.label as string).width) ?? 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 = y.stroke ?? fontFill;
+        ctx.fillText(y.label, X, textY);
+
+        if (fontFill !== undefined) {
+            ctx.fillStyle = fontFill;
+        }
+        ctx.fillText(y.value, X * 2 + maxLabel, textY);
+    }
+};
+
+const drawOnCanvas = (
+    ctx: CanvasRenderingContext2D,
+    props: HoverTooltipProps,
+    context: any,
+    pointer: any,
+    height: number,
+) => {
+    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?.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: HoverTooltipProps, content: any, ctx: CanvasRenderingContext2D) => {
+    const { fontFamily, fontSize = 12, fontFill } = props;
+
+    ctx.font = `bold ${fontSize}px ${fontFamily}`;
+    if (fontFill !== undefined) {
+        ctx.fillStyle = fontFill;
+    }
+    ctx.textAlign = "left";
+
+    const measureText = (str: string) => ({
+        width: ctx.measureText(str).width,
+        height: fontSize + PADDING,
+    });
+
+    const { width, height } = content.y
+        .map(({ label, value }: any) => measureText(`${label}  ${value}`))
+        // Sum all y and x sizes (begin with x label size)
+        .reduce((res: any, size: any) => sumSizes(res, size), measureText(String(content.x)));
+
+    return {
+        width: width + 2 * X,
+        height: height + 2 * Y,
+    };
+};
+
+const sumSizes = (...sizes: any[]) => {
+    return {
+        width: Math.max(...sizes.map((size) => size.width)),
+        height: sum(sizes, (d) => d.height),
+    };
+};
+
+const normalizeX = (x: number, bgSize: any, pointWidth: number, width: number) => {
+    return x < width / 2 ? x + pointWidth / 2 + PADDING : x - bgSize.width - pointWidth / 2 - PADDING;
+};
+
+const normalizeY = (y: number, bgSize: any) => {
+    return y - bgSize.height <= 0 ? y + PADDING : y - bgSize.height - PADDING;
+};
+
+const defaultOrigin = (props: HoverTooltipProps, moreProps: any, bgSize: any, pointWidth: any) => {
+    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: any) => c.id === chartId);
+
+        y = Math.round(chartConfig[chartIndex].yScale(yValue));
+    }
+
+    x = normalizeX(x, bgSize, pointWidth, width);
+    y = normalizeY(y, bgSize);
+
+    return [x, y];
+};
+
+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 class HoverTooltip extends React.Component<HoverTooltipProps> {
+    public static 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,
+    };
+
+    public static contextType = ChartCanvasContext;
+
+    public render() {
+        return <GenericComponent canvasDraw={this.drawOnCanvas} drawOn={["mousemove", "pan"]} />;
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const pointer = this.helper(ctx, moreProps);
+        if (pointer === undefined) {
+            return;
+        }
+
+        const { height } = moreProps;
+
+        drawOnCanvas(ctx, this.props, this.context, pointer, height);
+    };
+
+    private readonly helper = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        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 };
+    };
+}

package/src/MACDTooltip.tsx

@@ -0,0 +1,116 @@
+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 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 class MACDTooltip extends React.Component<MACDTooltipProps> {
+    public static defaultProps = {
+        className: "react-financial-charts-tooltip",
+        displayFormat: format(".2f"),
+        displayInit: "n/a",
+        displayValuesFor: (_: any, props: any) => props.currentItem,
+        origin: [0, 0],
+    };
+
+    public render() {
+        return <GenericChartComponent clip={false} svgDraw={this.renderSVG} drawOn={["mousemove"]} />;
+    }
+
+    private readonly renderSVG = (moreProps: any) => {
+        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 = displayValuesFor(this.props, moreProps) ?? last(fullData);
+
+        const macdValue = currentItem && yAccessor(currentItem);
+
+        const macd = (macdValue?.macd && displayFormat(macdValue.macd)) || displayInit;
+        const signal = (macdValue?.signal && displayFormat(macdValue.signal)) || displayInit;
+        const divergence = (macdValue?.divergence && displayFormat(macdValue.divergence)) || displayInit;
+
+        const origin = functor(originProp);
+        const [x, y] = origin(width, height);
+
+        return (
+            <g className={className} transform={`translate(${x}, ${y})`} onClick={onClick}>
+                <ToolTipText x={0} y={0} fontFamily={fontFamily} fontSize={fontSize} fontWeight={fontWeight}>
+                    <ToolTipTSpanLabel fill={labelFill} fontWeight={labelFontWeight}>
+                        MACD (
+                    </ToolTipTSpanLabel>
+                    <tspan fill={appearance.strokeStyle.macd}>{options.slow}</tspan>
+                    <ToolTipTSpanLabel fill={labelFill} fontWeight={labelFontWeight}>
+                        ,{" "}
+                    </ToolTipTSpanLabel>
+                    <tspan fill={appearance.strokeStyle.macd}>{options.fast}</tspan>
+                    <ToolTipTSpanLabel fill={labelFill} fontWeight={labelFontWeight}>
+                        ):{" "}
+                    </ToolTipTSpanLabel>
+                    <tspan fill={appearance.strokeStyle.macd}>{macd}</tspan>
+                    <ToolTipTSpanLabel fill={labelFill} fontWeight={labelFontWeight}>
+                        {" "}
+                        Signal (
+                    </ToolTipTSpanLabel>
+                    <tspan fill={appearance.strokeStyle.signal}>{options.signal}</tspan>
+                    <ToolTipTSpanLabel fill={labelFill} fontWeight={labelFontWeight}>
+                        ):{" "}
+                    </ToolTipTSpanLabel>
+                    <tspan fill={appearance.strokeStyle.signal}>{signal}</tspan>
+                    <ToolTipTSpanLabel fill={labelFill} fontWeight={labelFontWeight}>
+                        {" "}
+                        Divergence:{" "}
+                    </ToolTipTSpanLabel>
+                    <tspan fill={appearance.fillStyle.divergence}>{divergence}</tspan>
+                </ToolTipText>
+            </g>
+        );
+    };
+}

package/src/MovingAverageTooltip.tsx

@@ -0,0 +1,167 @@
+import { functor, GenericChartComponent, last, MoreProps } from "@tradingaction/core";
+import { format } from "d3-format";
+import * as React from "react";
+import { ToolTipText } from "./ToolTipText";
+import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
+
+export interface SingleMAToolTipProps {
+    readonly color: string;
+    readonly displayName: string;
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly fontWeight?: number;
+    readonly forChart: number | string;
+    readonly labelFill?: string;
+    readonly labelFontWeight?: number;
+    readonly onClick?: (event: React.MouseEvent<SVGRectElement, MouseEvent>, details: any) => void;
+    readonly options: IMovingAverageTooltip;
+    readonly origin: [number, number];
+    readonly textFill?: string;
+    readonly value: string;
+    readonly icons?: SingleMATooltipIcon[];
+}
+
+interface SingleMATooltipIcon {
+    unicode: string;
+    onClick: (option: any) => void;
+    size?: any;
+    fillColor?: string;
+}
+
+export class SingleMAToolTip extends React.Component<SingleMAToolTipProps> {
+    public render() {
+        const { color, displayName, fontSize, fontFamily, fontWeight, textFill, labelFill, labelFontWeight, value } =
+            this.props;
+
+        const translate = "translate(" + this.props.origin[0] + ", " + this.props.origin[1] + ")";
+
+        const handleIconClick = (e: React.MouseEvent<SVGTSpanElement, MouseEvent>, icon: SingleMATooltipIcon) => {
+            if (typeof icon.onClick == "function") {
+                e.stopPropagation();
+                icon.onClick(this.props.options);
+            }
+        };
+
+        return (
+            <g transform={translate} onClick={this.onClick}>
+                <line x1={0} y1={2} x2={0} y2={28} stroke={color} strokeWidth={4} />
+                <ToolTipText x={5} y={11} fontFamily={fontFamily} fontSize={fontSize} fontWeight={fontWeight}>
+                    <ToolTipTSpanLabel fill={labelFill} fontWeight={labelFontWeight}>
+                        {displayName}
+                    </ToolTipTSpanLabel>
+                    <tspan x={5} dy={15} fill={textFill}>
+                        {value}
+                    </tspan>
+                    {this.props.icons?.map((i) => {
+                        return <tspan fontSize={i.size} fill={i.fillColor || '#000'} onClick={(e) => handleIconClick(e, i)}>&nbsp;{i.unicode}</tspan>;
+                    })}
+                </ToolTipText>
+            </g>
+        );
+    }
+
+    private readonly onClick = (event: React.MouseEvent<SVGRectElement, MouseEvent>) => {
+        const { onClick, forChart, options } = this.props;
+        if (onClick !== undefined) {
+            onClick(event, { chartId: forChart, ...options });
+        }
+    };
+}
+
+interface IMovingAverageTooltip {
+    data?: any;//from input data-structure
+    yAccessor: (data: any) => number;
+    type: string;
+    stroke: string;
+    windowSize: number;
+    icons?: SingleMATooltipIcon[];
+}
+
+interface MovingAverageTooltipProps {
+    readonly className?: string;
+    readonly displayFormat: (value: number) => string;
+    readonly origin: number[];
+    readonly displayInit?: string;
+    readonly displayValuesFor?: (props: MovingAverageTooltipProps, moreProps: any) => any;
+    readonly onClick?: (event: React.MouseEvent<SVGRectElement, MouseEvent>) => void;
+    readonly textFill?: string;
+    readonly labelFill?: string;
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly fontWeight?: number;
+    readonly width?: number;
+    readonly options: IMovingAverageTooltip[];
+}
+
+// tslint:disable-next-line: max-classes-per-file
+export class MovingAverageTooltip extends React.Component<MovingAverageTooltipProps> {
+    public static defaultProps = {
+        className: "react-financial-charts-tooltip react-financial-charts-moving-average-tooltip",
+        displayFormat: format(".2f"),
+        displayInit: "n/a",
+        displayValuesFor: (_: any, props: any) => props.currentItem,
+        origin: [0, 10],
+        width: 65,
+    };
+
+    public render() {
+        return <GenericChartComponent clip={false} svgDraw={this.renderSVG} drawOn={["mousemove"]} />;
+    }
+
+    private readonly renderSVG = (moreProps: MoreProps) => {
+        const { chartId, chartConfig, chartConfig: { height = 0 } = {}, fullData } = moreProps;
+
+        const {
+            className,
+            displayInit = MovingAverageTooltip.defaultProps.displayInit,
+            onClick,
+            width = 65,
+            fontFamily,
+            fontSize,
+            fontWeight,
+            textFill,
+            labelFill,
+            origin: originProp,
+            displayFormat,
+            displayValuesFor = MovingAverageTooltip.defaultProps.displayValuesFor,
+            options,
+        } = this.props;
+
+        const currentItem = displayValuesFor(this.props, moreProps) ?? last(fullData);
+
+        const config = chartConfig!;
+
+        const origin = functor(originProp);
+        const [x, y] = origin(width, height);
+        const [ox, oy] = config.origin;
+
+        return (
+            <g transform={`translate(${ox + x}, ${oy + y})`} className={className}>
+                {options.map((each, idx) => {
+                    const yValue = currentItem && each.yAccessor(currentItem);
+
+                    const tooltipLabel = `${each.type} (${each.windowSize})`;
+                    const yDisplayValue = yValue ? displayFormat(yValue) : displayInit;
+                    return (
+                        <SingleMAToolTip
+                            key={idx}
+                            origin={[width * idx, 0]}
+                            color={each.stroke}
+                            displayName={tooltipLabel}
+                            value={yDisplayValue}
+                            options={each}
+                            forChart={chartId}
+                            onClick={onClick}
+                            fontFamily={fontFamily}
+                            fontSize={fontSize}
+                            fontWeight={fontWeight}
+                            textFill={textFill}
+                            labelFill={labelFill}
+                            icons={each.icons}
+                        />
+                    );
+                })}
+            </g>
+        );
+    };
+}

package/src/OHLCTooltip.tsx

@@ -0,0 +1,150 @@
+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";
+
+const displayTextsDefault = {
+    o: "O: ",
+    h: " H: ",
+    l: " L: ",
+    c: " C: ",
+    v: " Vol: ",
+    na: "n/a",
+};
+
+export interface OHLCTooltipProps {
+    readonly accessor?: (data: any) => any;
+    readonly className?: string;
+    readonly changeFormat?: (n: number | { valueOf(): number }) => string;
+    readonly displayTexts?: {
+        o: string;
+        h: string;
+        l: string;
+        c: string;
+        v: string;
+        na: string;
+    };
+    readonly displayValuesFor?: (props: OHLCTooltipProps, moreProps: any) => any;
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly fontWeight?: number;
+    readonly labelFill?: string;
+    readonly labelFontWeight?: number;
+    readonly ohlcFormat?: (n: number | { valueOf(): number }) => string;
+    readonly onClick?: (event: React.MouseEvent<SVGGElement, MouseEvent>) => void;
+    readonly origin?: [number, number] | ((width: number, height: number) => [number, number]);
+    readonly percentFormat?: (n: number | { valueOf(): number }) => string;
+    readonly volumeFormat?: (n: number | { valueOf(): number }) => string;
+    readonly textFill?: string | ((item: any) => string);
+}
+
+export class OHLCTooltip extends React.Component<OHLCTooltipProps> {
+    public static defaultProps = {
+        accessor: (d: unknown) => d,
+        changeFormat: format("+.2f"),
+        className: "react-financial-charts-tooltip-hover",
+        displayTexts: displayTextsDefault,
+        displayValuesFor: (_: any, props: any) => props.currentItem,
+        fontFamily: "-apple-system, system-ui, 'Helvetica Neue', Ubuntu, sans-serif",
+        ohlcFormat: format(".2f"),
+        origin: [0, 0],
+        percentFormat: format("+.2%"),
+        volumeFormat: format("0.2s"),
+    };
+
+    public render() {
+        return <GenericChartComponent clip={false} svgDraw={this.renderSVG} drawOn={["mousemove"]} />;
+    }
+
+    private readonly renderSVG = (moreProps: any) => {
+        const {
+            accessor,
+            changeFormat = OHLCTooltip.defaultProps.changeFormat,
+            className,
+            displayTexts = OHLCTooltip.defaultProps.displayTexts,
+            displayValuesFor = OHLCTooltip.defaultProps.displayValuesFor,
+            fontFamily,
+            fontSize,
+            fontWeight,
+            labelFill,
+            labelFontWeight,
+            ohlcFormat = OHLCTooltip.defaultProps.ohlcFormat,
+            onClick,
+            percentFormat = OHLCTooltip.defaultProps.percentFormat,
+            volumeFormat = OHLCTooltip.defaultProps.volumeFormat,
+            textFill,
+        } = this.props;
+
+        const {
+            chartConfig: { width, height },
+            fullData,
+        } = moreProps;
+
+        const currentItem = displayValuesFor(this.props, moreProps) ?? last(fullData);
+
+        let open: string = displayTexts.na;
+        let high: string = displayTexts.na;
+        let low: string = displayTexts.na;
+        let close: string = displayTexts.na;
+        let change: string = displayTexts.na;
+
+        if (currentItem !== undefined && accessor !== undefined) {
+            const item = accessor(currentItem);
+            let formatForChange = `${changeFormat(item.close - item.open)}`;
+            const percent = percentFormat((item.close - item.open) / item.open);
+            if (percent) {
+                formatForChange += ` (${percent})`;
+            }
+            const volumeValue = volumeFormat(item.volume || 0).replace(/G/, "B");
+            if (volumeValue) {
+                formatForChange += ` ${displayTexts.v}${volumeValue}`;
+            }
+            if (item !== undefined) {
+                open = ohlcFormat(item.open);
+                high = ohlcFormat(item.high);
+                low = ohlcFormat(item.low);
+                close = ohlcFormat(item.close);
+                change = formatForChange;
+            }
+        }
+
+        const { origin: originProp } = this.props;
+        const [x, y] = functor(originProp)(width, height);
+        const valueFill = functor(textFill)(currentItem);
+
+        return (
+            <g className={className} transform={`translate(${x}, ${y})`} onClick={onClick}>
+                <ToolTipText x={0} y={0} fontFamily={fontFamily} fontSize={fontSize} fontWeight={fontWeight}>
+                    <ToolTipTSpanLabel fill={labelFill} fontWeight={labelFontWeight} key="label_O">
+                        {displayTexts.o}
+                    </ToolTipTSpanLabel>
+                    <tspan key="value_O" fill={valueFill}>
+                        {open}
+                    </tspan>
+                    <ToolTipTSpanLabel fill={labelFill} fontWeight={labelFontWeight} key="label_H">
+                        {displayTexts.h}
+                    </ToolTipTSpanLabel>
+                    <tspan key="value_H" fill={valueFill}>
+                        {high}
+                    </tspan>
+                    <ToolTipTSpanLabel fill={labelFill} fontWeight={labelFontWeight} key="label_L">
+                        {displayTexts.l}
+                    </ToolTipTSpanLabel>
+                    <tspan key="value_L" fill={valueFill}>
+                        {low}
+                    </tspan>
+                    <ToolTipTSpanLabel fill={labelFill} fontWeight={labelFontWeight} key="label_C">
+                        {displayTexts.c}
+                    </ToolTipTSpanLabel>
+                    <tspan key="value_C" fill={valueFill}>
+                        {close}
+                    </tspan>
+                    <tspan key="value_Change" fill={valueFill}>
+                        {` ${change}`}
+                    </tspan>
+                </ToolTipText>
+            </g>
+        );
+    };
+}