@tradingaction/tooltip 2.0.13

package/src/RSITooltip.tsx

@@ -0,0 +1,80 @@
+import { functor, isDefined, GenericChartComponent } from "@tradingaction/core";
+import { format } from "d3-format";
+import * as React from "react";
+import { ToolTipText } from "./ToolTipText";
+import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
+
+export interface RSITooltipProps {
+    readonly className?: string;
+    readonly displayFormat: (value: number) => string;
+    readonly displayInit?: string;
+    readonly displayValuesFor: (props: RSITooltipProps, moreProps: any) => any;
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly fontWeight?: number;
+    readonly labelFill?: string;
+    readonly labelFontWeight?: number;
+    readonly onClick?: (event: React.MouseEvent<SVGGElement, MouseEvent>) => void;
+    readonly origin: number[] | ((width: number, height: number) => number[]);
+    readonly options: {
+        windowSize: number;
+    };
+    readonly textFill?: string;
+    readonly yAccessor: (data: any) => number | undefined;
+}
+
+export class RSITooltip extends React.Component<RSITooltipProps> {
+    public static defaultProps = {
+        displayFormat: format(".2f"),
+        displayInit: "n/a",
+        displayValuesFor: (_: RSITooltipProps, props: any) => props.currentItem,
+        origin: [0, 0],
+        className: "react-financial-charts-tooltip",
+    };
+
+    public render() {
+        return <GenericChartComponent clip={false} svgDraw={this.renderSVG} drawOn={["mousemove"]} />;
+    }
+
+    private readonly renderSVG = (moreProps: any) => {
+        const {
+            onClick,
+            displayInit,
+            fontFamily,
+            fontSize,
+            fontWeight,
+            yAccessor,
+            displayFormat,
+            className,
+            options,
+            labelFill,
+            labelFontWeight,
+            textFill,
+            displayValuesFor,
+        } = this.props;
+
+        const {
+            chartConfig: { width, height },
+        } = moreProps;
+
+        const currentItem = displayValuesFor(this.props, moreProps);
+        const rsi = isDefined(currentItem) && yAccessor(currentItem);
+        const value = (rsi && displayFormat(rsi)) || displayInit;
+
+        const { origin: originProp } = this.props;
+        const origin = functor(originProp);
+        const [x, y] = origin(width, height);
+
+        const tooltipLabel = `RSI (${options.windowSize}): `;
+        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}>
+                        {tooltipLabel}
+                    </ToolTipTSpanLabel>
+                    <tspan fill={textFill}>{value}</tspan>
+                </ToolTipText>
+            </g>
+        );
+    };
+}

package/src/SingleTooltip.tsx

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { ToolTipText } from "./ToolTipText";
+import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
+
+export type layouts = "horizontal" | "horizontalRows" | "horizontalInline" | "vertical" | "verticalRows";
+
+export interface SingleTooltipProps {
+    readonly origin: [number, number];
+    readonly yLabel: string;
+    readonly yValue: string;
+    readonly onClick?: (event: React.MouseEvent, details: any) => void;
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly fontWeight?: number;
+    readonly labelFill: string;
+    readonly valueFill: string;
+    readonly forChart: number | string;
+    readonly options: any;
+    readonly layout: layouts;
+    readonly withShape: boolean;
+}
+
+export class SingleTooltip extends React.Component<SingleTooltipProps> {
+    public static defaultProps = {
+        labelFill: "#4682B4",
+        valueFill: "#000000",
+        withShape: false,
+    };
+
+    /*
+     * Renders the value next to the label.
+     */
+    public renderValueNextToLabel() {
+        const { origin, yLabel, yValue, labelFill, valueFill, withShape, fontSize, fontFamily, fontWeight } =
+            this.props;
+
+        return (
+            <g transform={`translate(${origin[0]}, ${origin[1]})`} onClick={this.handleClick}>
+                {withShape ? <rect x="0" y="-6" width="6" height="6" fill={valueFill} /> : null}
+                <ToolTipText
+                    x={withShape ? 8 : 0}
+                    y={0}
+                    fontFamily={fontFamily}
+                    fontSize={fontSize}
+                    fontWeight={fontWeight}
+                >
+                    <ToolTipTSpanLabel fill={labelFill}>{yLabel}: </ToolTipTSpanLabel>
+                    <tspan fill={valueFill}>{yValue}</tspan>
+                </ToolTipText>
+            </g>
+        );
+    }
+
+    /*
+     * Renders the value beneath the label.
+     */
+    public renderValueBeneathLabel() {
+        const { origin, yLabel, yValue, labelFill, valueFill, withShape, fontSize, fontFamily, fontWeight } =
+            this.props;
+
+        return (
+            <g transform={`translate(${origin[0]}, ${origin[1]})`} onClick={this.handleClick}>
+                {withShape ? <line x1={0} y1={2} x2={0} y2={28} stroke={valueFill} strokeWidth="4px" /> : null}
+                <ToolTipText x={5} y={11} fontFamily={fontFamily} fontSize={fontSize} fontWeight={fontWeight}>
+                    <ToolTipTSpanLabel fill={labelFill}>{yLabel}</ToolTipTSpanLabel>
+                    <tspan x="5" dy="15" fill={valueFill}>
+                        {yValue}
+                    </tspan>
+                </ToolTipText>
+            </g>
+        );
+    }
+
+    /*
+     * Renders the value next to the label.
+     * The parent component must have a "text"-element.
+     */
+    public renderInline() {
+        const { yLabel, yValue, labelFill, valueFill, fontSize, fontFamily, fontWeight } = this.props;
+
+        return (
+            <tspan onClick={this.handleClick} fontFamily={fontFamily} fontSize={fontSize} fontWeight={fontWeight}>
+                <ToolTipTSpanLabel fill={labelFill}>{yLabel}:&nbsp;</ToolTipTSpanLabel>
+                <tspan fill={valueFill}>{yValue}&nbsp;&nbsp;</tspan>
+            </tspan>
+        );
+    }
+
+    public render() {
+        const { layout } = this.props;
+        let comp: JSX.Element | null = null;
+
+        switch (layout) {
+            case "horizontal":
+                comp = this.renderValueNextToLabel();
+                break;
+            case "horizontalRows":
+                comp = this.renderValueBeneathLabel();
+                break;
+            case "horizontalInline":
+                comp = this.renderInline();
+                break;
+            case "vertical":
+                comp = this.renderValueNextToLabel();
+                break;
+            case "verticalRows":
+                comp = this.renderValueBeneathLabel();
+                break;
+            default:
+                comp = this.renderValueNextToLabel();
+        }
+
+        return comp;
+    }
+
+    private readonly handleClick = (event: React.MouseEvent) => {
+        const { onClick, forChart, options } = this.props;
+        if (onClick !== undefined) {
+            onClick(event, { chartId: forChart, ...options });
+        }
+    };
+}

package/src/SingleValueTooltip.tsx

@@ -0,0 +1,131 @@
+import { functor, identity, GenericChartComponent, noop, last } from "@tradingaction/core";
+import { format } from "d3-format";
+import * as React from "react";
+import { ToolTipText } from "./ToolTipText";
+import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
+
+interface SingleValueTooltipIcon {
+    unicode: string;
+    onClick: () => void;
+    size?: any;
+    fillColor?: string;
+}
+
+export interface SingleValueTooltipProps {
+    readonly xDisplayFormat?: (value: number) => string;
+    readonly yDisplayFormat?: (value: number) => string;
+    readonly xInitDisplay?: string;
+    readonly yInitDisplay?: string;
+    readonly xLabel?: string;
+    readonly yLabel: string;
+    readonly labelFill?: string;
+    readonly labelFontWeight?: number;
+    readonly valueFill?: string;
+    readonly origin?: [number, number] | ((width: number, height: number) => [number, number]);
+    readonly className?: string;
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly fontWeight?: number;
+    readonly onClick?: (event: React.MouseEvent<SVGGElement, MouseEvent>) => void;
+    readonly displayValuesFor?: (props: SingleValueTooltipProps, moreProps: any) => any;
+    readonly xAccessor?: (d: any) => number;
+    readonly yAccessor?: (d: any) => number;
+    readonly icons?: SingleValueTooltipIcon[];
+}
+
+export class SingleValueTooltip extends React.Component<SingleValueTooltipProps> {
+    public static defaultProps = {
+        className: "react-financial-charts-tooltip",
+        displayValuesFor: (_: any, props: any) => props.currentItem,
+        labelFill: "#4682B4",
+        origin: [0, 0],
+        valueFill: "#000000",
+        xAccessor: noop,
+        xDisplayFormat: identity as (value: number) => string,
+        xInitDisplay: "n/a",
+        yAccessor: identity as (d: any) => number,
+        yDisplayFormat: format(".2f") as (value: number) => string,
+        yInitDisplay: "n/a",
+    };
+
+    public render() {
+        return <GenericChartComponent clip={false} svgDraw={this.renderSVG} drawOn={["mousemove"]} />;
+    }
+
+    private readonly renderSVG = (moreProps: any) => {
+        const {
+            onClick,
+            fontFamily,
+            fontSize,
+            fontWeight,
+            labelFill,
+            labelFontWeight,
+            valueFill,
+            className,
+            displayValuesFor = SingleValueTooltip.defaultProps.displayValuesFor,
+            origin: originProp,
+            xDisplayFormat = SingleValueTooltip.defaultProps.xDisplayFormat,
+            yDisplayFormat = SingleValueTooltip.defaultProps.yDisplayFormat,
+            xLabel,
+            yLabel,
+            xAccessor = SingleValueTooltip.defaultProps.xAccessor,
+            yAccessor = SingleValueTooltip.defaultProps.yAccessor,
+            xInitDisplay,
+            yInitDisplay,
+        } = this.props;
+
+        const {
+            chartConfig: { width, height },
+            fullData,
+        } = moreProps;
+
+        const currentItem = displayValuesFor(this.props, moreProps) ?? last(fullData);
+
+        let xDisplayValue = xInitDisplay;
+        let yDisplayValue = yInitDisplay;
+        if (currentItem !== undefined) {
+            const xItem = xAccessor(currentItem);
+            if (xItem !== undefined) {
+                xDisplayValue = xDisplayFormat(xItem);
+            }
+
+            const yItem = yAccessor(currentItem);
+            if (yItem !== undefined) {
+                yDisplayValue = yDisplayFormat(yItem);
+            }
+        }
+
+        const origin = functor(originProp);
+
+        const [x, y] = origin(width, height);
+
+        const handleIconClick = (e: React.MouseEvent<SVGTSpanElement, MouseEvent>, icon: SingleValueTooltipIcon) => {
+            if (typeof icon.onClick == "function") {
+                e.stopPropagation();
+                icon.onClick();
+            }
+        };
+
+        return (
+            <>
+                <g className={className} transform={`translate(${x}, ${y})`} onClick={onClick}>
+                    <ToolTipText x={0} y={0} fontFamily={fontFamily} fontSize={fontSize} fontWeight={fontWeight}>
+                        {xLabel ? (
+                            <ToolTipTSpanLabel x={0} dy="5" fill={labelFill}>{`${xLabel}: `}</ToolTipTSpanLabel>
+                        ) : null}
+                        {xLabel ? <tspan fill={valueFill}>{`${xDisplayValue} `}</tspan> : null}
+                        <ToolTipTSpanLabel
+                            fill={labelFill}
+                            fontWeight={labelFontWeight}
+                        >{`${yLabel} `}</ToolTipTSpanLabel>
+                        <tspan fill={valueFill}>{yDisplayValue}</tspan>
+
+                        {this.props.icons?.map((i) => {
+                            return <tspan fill={i.fillColor || '#000'} fontSize={i.size} onClick={(e) => handleIconClick(e, i)}>&nbsp;{i.unicode}</tspan>;
+                        })}
+                    </ToolTipText>
+                </g>
+            </>
+        );
+    };
+}

package/src/StochasticTooltip.tsx

@@ -0,0 +1,97 @@
+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 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 class StochasticTooltip extends React.Component<StochasticTooltipProps> {
+    public static defaultProps = {
+        className: "react-financial-charts-tooltip",
+        displayFormat: format(".2f"),
+        displayInit: "n/a",
+        displayValuesFor: (_: any, props: any) => props.currentItem,
+        label: "STO",
+        origin: [0, 0],
+    };
+
+    public render() {
+        return <GenericChartComponent clip={false} svgDraw={this.renderSVG} drawOn={["mousemove"]} />;
+    }
+
+    private readonly renderSVG = (moreProps: any) => {
+        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 = displayValuesFor(this.props, moreProps) ?? fullData[fullData.length - 1];
+
+        const stochastic = currentItem && yAccessor(currentItem);
+
+        const K = (stochastic?.K && displayFormat(stochastic.K)) ?? displayInit;
+        const D = (stochastic?.D && displayFormat(stochastic.D)) ?? displayInit;
+
+        const origin = functor(originProp);
+
+        const [x, y] = origin(width, height);
+
+        const { stroke } = appearance;
+
+        return (
+            <g className={className} transform={`translate(${x}, ${y})`} onClick={onClick}>
+                <ToolTipText x={0} y={0} fontFamily={fontFamily} fontSize={fontSize} fontWeight={fontWeight}>
+                    <ToolTipTSpanLabel fill={labelFill}>{`${label} %K(`}</ToolTipTSpanLabel>
+                    <tspan fill={stroke.kLine}>{`${options.windowSize}, ${options.kWindowSize}`}</tspan>
+                    <ToolTipTSpanLabel fill={labelFill}>): </ToolTipTSpanLabel>
+                    <tspan fill={stroke.kLine}>{K}</tspan>
+                    <ToolTipTSpanLabel fill={labelFill}> %D (</ToolTipTSpanLabel>
+                    <tspan fill={stroke.dLine}>{options.dWindowSize}</tspan>
+                    <ToolTipTSpanLabel fill={labelFill}>): </ToolTipTSpanLabel>
+                    <tspan fill={stroke.dLine}>{D}</tspan>
+                </ToolTipText>
+            </g>
+        );
+    };
+}

package/src/ToolTipTSpanLabel.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+
+export class ToolTipTSpanLabel extends React.PureComponent<React.SVGProps<SVGTSpanElement>> {
+    public static defaultProps = {
+        className: "react-financial-charts-tooltip-label",
+        fill: "#4682B4",
+    };
+
+    public render() {
+        const { children, ...rest } = this.props;
+
+        return <tspan {...rest}>{children}</tspan>;
+    }
+}

package/src/ToolTipText.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+export class ToolTipText extends React.PureComponent<React.SVGProps<SVGTextElement>> {
+    public static defaultProps = {
+        className: "react-financial-charts-tooltip",
+        fontFamily: "-apple-system, system-ui, 'Helvetica Neue', Ubuntu, sans-serif",
+        fontSize: 11,
+    };
+
+    public render() {
+        const { children, ...rest } = this.props;
+
+        return <text {...rest}>{children}</text>;
+    }
+}

package/src/index.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";