@tradingaction/tooltip 2.1.1 → 2.1.3

package/src/MovingAverageTooltip.tsx

@@ -1,167 +0,0 @@
-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

@@ -1,150 +0,0 @@
-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>
-        );
-    };
-}

package/src/RSITooltip.tsx

@@ -1,80 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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>
-            </>
-        );
-    };
-}