@tradingaction/tooltip 2.1.2 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tradingaction/tooltip",
-    "version": "2.1.2",
+    "version": "2.1.3",
     "description": "Tooltips for react-financial-charts",
     "publishConfig": {
         "access": "public"
@@ -8,8 +8,7 @@
     "main": "./lib/index.js",
     "typings": "./lib/index.d.ts",
     "files": [
-        "lib",
-        "src"
+        "lib"
     ],
     "sideEffects": false,
     "author": "Reactive Markets",
@@ -38,7 +37,7 @@
         "watch": "tsc -p tsconfig.json --watch --preserveWatchOutput"
     },
     "dependencies": {
-        "@tradingaction/core": "^2.1.1",
+        "@tradingaction/core": "^2.1.2",
         "d3-array": "^2.9.1",
         "d3-format": "^2.0.0",
         "d3-time-format": "^3.0.0"
@@ -47,5 +46,5 @@
         "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
     },
-    "gitHead": "7491d9931380aafbdf99dfbdb06e1e2705c99fb9"
+    "gitHead": "8b8fc8c751cebbed2ff486c0cea46e561a477054"
 }

package/src/BollingerBandTooltip.tsx

@@ -1,99 +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";
-
-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

@@ -1,152 +0,0 @@
-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: "start" | "middle" | "end" | "inherit" | 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>
-        );
-    };
-}

package/src/HoverTooltip.tsx

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