@tradingaction/annotations 2.0.13

package/LICENSE

@@ -0,0 +1,24 @@
+The MIT License (MIT)
+https://github.com/reactivemarkets/react-financial-charts
+
+Copyright (c) 2015-2018 Ragu Ramaswamy
+Copyright (c) 2016 Julien Renaux
+Copyright (c) 2019 Reactive Markets
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# Annotations
+
+```bash
+npm i @tradingaction/annotations
+```

package/lib/Annotate.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface AnnotateProps {
+    readonly className?: string;
+    readonly with: React.ElementType;
+    readonly when: (value: any, index: number, array: any[]) => boolean;
+    readonly usingProps?: any;
+}
+export declare class Annotate extends React.Component<AnnotateProps> {
+    static defaultProps: {
+        className: string;
+    };
+    render(): JSX.Element;
+    private readonly renderSVG;
+}

package/lib/Annotate.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { GenericChartComponent } from "@tradingaction/core";
+export class Annotate extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.renderSVG = (moreProps) => {
+            const { xAccessor, xScale, chartConfig: { yScale }, plotData, } = moreProps;
+            const { className, usingProps, with: Annotation, when } = this.props;
+            const data = plotData.filter(when);
+            return (React.createElement("g", { className: className }, data.map((d, idx) => {
+                return (React.createElement(Annotation, Object.assign({ key: idx }, usingProps, { xScale: xScale, yScale: yScale, xAccessor: xAccessor, plotData: plotData, datum: d })));
+            })));
+        };
+    }
+    render() {
+        return React.createElement(GenericChartComponent, { svgDraw: this.renderSVG, drawOn: ["pan"] });
+    }
+}
+Annotate.defaultProps = {
+    className: "react-financial-charts-enable-interaction react-financial-charts-annotate react-financial-charts-default-cursor",
+};
+//# sourceMappingURL=Annotate.js.map

package/lib/Annotate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Annotate.js","sourceRoot":"","sources":["../src/Annotate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAS5D,MAAM,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAwB;IAA5D;;QAUqB,cAAS,GAAG,CAAC,SAAc,EAAE,EAAE;YAC5C,MAAM,EACF,SAAS,EACT,MAAM,EACN,WAAW,EAAE,EAAE,MAAM,EAAE,EACvB,QAAQ,GACX,GAAG,SAAS,CAAC;YAEd,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAErE,MAAM,IAAI,GAAI,QAAsB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YAElD,OAAO,CACH,2BAAG,SAAS,EAAE,SAAS,IAClB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;gBACjB,OAAO,CACH,oBAAC,UAAU,kBACP,GAAG,EAAE,GAAG,IACJ,UAAU,IACd,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,IACV,CACL,CAAC;YACN,CAAC,CAAC,CACF,CACP,CAAC;QACN,CAAC,CAAC;IACN,CAAC;IAlCU,MAAM;QACT,OAAO,oBAAC,qBAAqB,IAAC,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,GAAI,CAAC;IAC/E,CAAC;;AAPa,qBAAY,GAAG;IACzB,SAAS,EACL,iHAAiH;CACxH,CAAC"}

package/lib/BarAnnotation.d.ts

@@ -0,0 +1,73 @@
+import { ScaleContinuousNumeric } from "d3-scale";
+import * as React from "react";
+export interface BarAnnotationProps {
+    readonly className?: string;
+    readonly path?: ({ x, y }: {
+        x: number;
+        y: number;
+    }) => string;
+    readonly onClick?: (e: React.MouseEvent, data: {
+        xScale?: ScaleContinuousNumeric<number, number>;
+        yScale?: ScaleContinuousNumeric<number, number>;
+        datum: any;
+    }) => void;
+    readonly xAccessor?: (datum: any) => any;
+    readonly xScale?: ScaleContinuousNumeric<number, number>;
+    readonly yScale?: ScaleContinuousNumeric<number, number>;
+    readonly datum?: object;
+    readonly stroke?: string;
+    readonly fill?: string | ((datum: any) => string);
+    readonly opacity?: number;
+    readonly plotData: any[];
+    readonly text?: string;
+    readonly textAnchor?: string;
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly textOpacity?: number;
+    readonly textFill?: string;
+    readonly textRotate?: number;
+    readonly textXOffset?: number;
+    readonly textYOffset?: number;
+    readonly textIcon?: string;
+    readonly textIconFontSize?: number;
+    readonly textIconOpacity?: number;
+    readonly textIconFill?: string;
+    readonly textIconRotate?: number;
+    readonly textIconXOffset?: number;
+    readonly textIconYOffset?: number;
+    readonly textIconAnchor?: string;
+    readonly tooltip?: string | ((datum: any) => string);
+    readonly x?: number | (({ xScale, xAccessor, datum, plotData, }: {
+        xScale: ScaleContinuousNumeric<number, number>;
+        xAccessor: (datum: any) => any;
+        datum: any;
+        plotData: any[];
+    }) => number);
+    readonly y?: number | (({ yScale, datum, plotData, }: {
+        yScale: ScaleContinuousNumeric<number, number>;
+        datum: any;
+        plotData: any[];
+    }) => number);
+}
+export declare class BarAnnotation extends React.Component<BarAnnotationProps> {
+    static defaultProps: {
+        className: string;
+        opacity: number;
+        fill: string;
+        fontFamily: string;
+        fontSize: number;
+        textAnchor: string;
+        textFill: string;
+        textOpacity: number;
+        textIconFill: string;
+        textIconFontSize: number;
+        x: ({ xScale, xAccessor, datum, }: {
+            xScale: ScaleContinuousNumeric<number, number>;
+            xAccessor: any;
+            datum: any;
+        }) => number;
+    };
+    render(): JSX.Element;
+    private readonly onClick;
+    private readonly helper;
+}

package/lib/BarAnnotation.js

@@ -0,0 +1,48 @@
+import { functor } from "@tradingaction/core";
+import * as React from "react";
+export class BarAnnotation extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.onClick = (e) => {
+            const { onClick, xScale, yScale, datum } = this.props;
+            if (onClick !== undefined) {
+                onClick(e, { xScale, yScale, datum });
+            }
+        };
+        this.helper = (props, xAccessor, xScale, yScale) => {
+            const { x, y, datum, fill, tooltip, plotData } = props;
+            const xFunc = functor(x);
+            const yFunc = functor(y);
+            const [xPos, yPos] = [xFunc({ xScale, xAccessor, datum, plotData }), yFunc({ yScale, datum, plotData })];
+            return {
+                x: xPos,
+                y: yPos,
+                fill: functor(fill)(datum),
+                tooltip: functor(tooltip)(datum),
+            };
+        };
+    }
+    render() {
+        const { className, stroke, opacity, xAccessor, xScale, yScale, path, text, textXOffset, textYOffset, textAnchor, fontFamily, fontSize, textFill, textOpacity, textRotate, textIcon, textIconFontSize, textIconFill, textIconOpacity, textIconRotate, textIconXOffset, textIconYOffset, } = this.props;
+        const { x, y, fill, tooltip } = this.helper(this.props, xAccessor, xScale, yScale);
+        return (React.createElement("g", { className: className, onClick: this.onClick },
+            tooltip !== undefined ? React.createElement("title", null, tooltip) : null,
+            text !== undefined ? (React.createElement("text", { x: x, y: y, dx: textXOffset, dy: textYOffset, fontFamily: fontFamily, fontSize: fontSize, fill: textFill, opacity: textOpacity, transform: textRotate != undefined ? `rotate(${textRotate}, ${x}, ${y})` : undefined, textAnchor: textAnchor }, text)) : null,
+            textIcon !== undefined ? (React.createElement("text", { x: x, y: y, dx: textIconXOffset, dy: textIconYOffset, fontSize: textIconFontSize, fill: textIconFill, opacity: textIconOpacity, transform: textIconRotate != undefined ? `rotate(${textIconRotate}, ${x}, ${y})` : undefined, textAnchor: textAnchor }, textIcon)) : null,
+            path !== undefined ? React.createElement("path", { d: path({ x, y }), stroke: stroke, fill: fill, opacity: opacity }) : null));
+    }
+}
+BarAnnotation.defaultProps = {
+    className: "react-financial-charts-bar-annotation",
+    opacity: 1,
+    fill: "#000000",
+    fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+    fontSize: 10,
+    textAnchor: "middle",
+    textFill: "#000000",
+    textOpacity: 1,
+    textIconFill: "#000000",
+    textIconFontSize: 10,
+    x: ({ xScale, xAccessor, datum, }) => xScale(xAccessor(datum)),
+};
+//# sourceMappingURL=BarAnnotation.js.map

package/lib/BarAnnotation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarAnnotation.js","sourceRoot":"","sources":["../src/BarAnnotation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiE/B,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,SAA6B;IAAtE;;QA2FqB,YAAO,GAAG,CAAC,CAAmB,EAAE,EAAE;YAC/C,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACtD,IAAI,OAAO,KAAK,SAAS,EAAE;gBACvB,OAAO,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;aACzC;QACL,CAAC,CAAC;QAEe,WAAM,GAAG,CAAC,KAAyB,EAAE,SAAc,EAAE,MAAW,EAAE,MAAW,EAAE,EAAE;YAC9F,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;YAEvD,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YACzB,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YAEzB,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;YAEzG,OAAO;gBACH,CAAC,EAAE,IAAI;gBACP,CAAC,EAAE,IAAI;gBACP,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;gBAC1B,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;aACnC,CAAC;QACN,CAAC,CAAC;IACN,CAAC;IA1FU,MAAM;QACT,MAAM,EACF,SAAS,EACT,MAAM,EACN,OAAO,EACP,SAAS,EACT,MAAM,EACN,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,WAAW,EACX,UAAU,EACV,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,cAAc,EACd,eAAe,EACf,eAAe,GAClB,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;QAEnF,OAAO,CACH,2BAAG,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;YACzC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,mCAAQ,OAAO,CAAS,CAAC,CAAC,CAAC,IAAI;YACvD,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAClB,8BACI,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,EAAE,EAAE,WAAW,EACf,EAAE,EAAE,WAAW,EACf,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,UAAU,IAAI,SAAS,CAAC,CAAC,CAAC,UAAU,UAAU,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EACpF,UAAU,EAAE,UAAU,IAErB,IAAI,CACF,CACV,CAAC,CAAC,CAAC,IAAI;YACP,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,CACtB,8BACI,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,EAAE,EAAE,eAAe,EACnB,EAAE,EAAE,eAAe,EACnB,QAAQ,EAAE,gBAAgB,EAC1B,IAAI,EAAE,YAAY,EAClB,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,cAAc,IAAI,SAAS,CAAC,CAAC,CAAC,UAAU,cAAc,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAC5F,UAAU,EAAE,UAAU,IAErB,QAAQ,CACN,CACV,CAAC,CAAC,CAAC,IAAI;YACP,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,8BAAM,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC,CAAC,CAAC,IAAI,CACtG,CACP,CAAC;IACN,CAAC;;AAxFa,0BAAY,GAAG;IACzB,SAAS,EAAE,uCAAuC;IAClD,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,SAAS;IACf,UAAU,EAAE,wEAAwE;IACpF,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,CAAC;IACd,YAAY,EAAE,SAAS;IACvB,gBAAgB,EAAE,EAAE;IACpB,CAAC,EAAE,CAAC,EACA,MAAM,EACN,SAAS,EACT,KAAK,GAKR,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;CACjC,CAAC"}

package/lib/Label.d.ts

@@ -0,0 +1,33 @@
+import { ScaleContinuousNumeric } from "d3-scale";
+import * as React from "react";
+export interface LabelProps {
+    readonly datum?: any;
+    readonly fillStyle?: string | ((datum: any) => string);
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly fontWeight?: string;
+    readonly rotate?: number;
+    readonly selectCanvas?: (canvases: any) => any;
+    readonly text?: string | ((datum: any) => string);
+    readonly textAlign?: CanvasTextAlign;
+    readonly x: number | ((xScale: ScaleContinuousNumeric<number, number>, xAccessor: any, datum: any, plotData: any[]) => number);
+    readonly xAccessor?: (datum: any) => any;
+    readonly xScale?: ScaleContinuousNumeric<number, number>;
+    readonly y: number | ((yScale: ScaleContinuousNumeric<number, number>, datum: any, plotData: any[]) => number);
+    readonly yScale?: ScaleContinuousNumeric<number, number>;
+}
+export declare class Label extends React.Component<LabelProps> {
+    static defaultProps: {
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: string;
+        fillStyle: string;
+        rotate: number;
+        x: ({ xScale, xAccessor, datum }: any) => any;
+        selectCanvas: (canvases: any) => any;
+    };
+    static contextType: React.Context<import("@tradingaction/core/lib/ChartCanvas").ChartCanvasContextType<number | Date>>;
+    render(): JSX.Element;
+    private readonly drawOnCanvas;
+    private readonly helper;
+}

package/lib/Label.js

@@ -0,0 +1,69 @@
+import { GenericComponent, functor, ChartCanvasContext } from "@tradingaction/core";
+import * as React from "react";
+export class Label extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.drawOnCanvas = (ctx, moreProps) => {
+            ctx.save();
+            const { textAlign = "center", fontFamily, fontSize, fontWeight, rotate } = this.props;
+            const { canvasOriginX, canvasOriginY, margin, ratio } = this.context;
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+            ctx.scale(ratio, ratio);
+            if (canvasOriginX !== undefined) {
+                ctx.translate(canvasOriginX, canvasOriginY);
+            }
+            else {
+                ctx.translate(margin.left + 0.5 * ratio, margin.top + 0.5 * ratio);
+            }
+            const { xScale, chartConfig, xAccessor } = moreProps;
+            const yScale = Array.isArray(chartConfig) || !chartConfig ? undefined : chartConfig.yScale;
+            const { xPos, yPos, fillStyle, text } = this.helper(moreProps, xAccessor, xScale, yScale);
+            ctx.save();
+            ctx.translate(xPos, yPos);
+            if (rotate !== undefined) {
+                const radians = (rotate / 180) * Math.PI;
+                ctx.rotate(radians);
+            }
+            if (fontFamily !== undefined) {
+                ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+            }
+            if (fillStyle !== undefined) {
+                ctx.fillStyle = fillStyle;
+            }
+            if (textAlign !== undefined) {
+                ctx.textAlign = textAlign;
+            }
+            ctx.beginPath();
+            ctx.fillText(text, 0, 0);
+            ctx.restore();
+        };
+        this.helper = (moreProps, xAccessor, xScale, yScale) => {
+            const { x, y, datum, fillStyle, text } = this.props;
+            const { plotData } = moreProps;
+            const xFunc = functor(x);
+            const yFunc = functor(y);
+            const [xPos, yPos] = [xFunc({ xScale, xAccessor, datum, plotData }), yFunc({ yScale, datum, plotData })];
+            return {
+                xPos,
+                yPos,
+                text: functor(text)(datum),
+                fillStyle: functor(fillStyle)(datum),
+            };
+        };
+    }
+    render() {
+        const { selectCanvas } = this.props;
+        return React.createElement(GenericComponent, { canvasToDraw: selectCanvas, canvasDraw: this.drawOnCanvas, drawOn: [] });
+    }
+}
+Label.defaultProps = {
+    fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+    fontSize: 64,
+    fontWeight: "bold",
+    fillStyle: "#dcdcdc",
+    rotate: 0,
+    x: ({ xScale, xAccessor, datum }) => xScale(xAccessor(datum)),
+    selectCanvas: (canvases) => canvases.bg,
+};
+Label.contextType = ChartCanvasContext;
+//# sourceMappingURL=Label.js.map

package/lib/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../src/Label.tsx"],"names":[],"mappings":"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"}

package/lib/LabelAnnotation.d.ts

@@ -0,0 +1,53 @@
+import { ScaleContinuousNumeric } from "d3-scale";
+import * as React from "react";
+export interface LabelAnnotationProps {
+    readonly className?: string;
+    readonly datum?: any;
+    readonly fill?: string | ((datum: any) => string);
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly onClick?: (e: React.MouseEvent, data: {
+        xScale?: ScaleContinuousNumeric<number, number>;
+        yScale?: ScaleContinuousNumeric<number, number>;
+        datum: any;
+    }) => void;
+    readonly opacity?: number;
+    readonly plotData: any[];
+    readonly rotate?: number;
+    readonly text?: string | ((datum: any) => string);
+    readonly textAnchor?: string;
+    readonly tooltip?: string | ((datum: any) => string);
+    readonly xAccessor?: (datum: any) => any;
+    readonly xScale?: ScaleContinuousNumeric<number, number>;
+    readonly x?: number | (({ xScale, xAccessor, datum, plotData, }: {
+        xScale: ScaleContinuousNumeric<number, number>;
+        xAccessor: (datum: any) => any;
+        datum: any;
+        plotData: any[];
+    }) => number);
+    readonly yScale?: ScaleContinuousNumeric<number, number>;
+    readonly y?: number | (({ yScale, datum, plotData, }: {
+        yScale: ScaleContinuousNumeric<number, number>;
+        datum: any;
+        plotData: any[];
+    }) => number);
+}
+export declare class LabelAnnotation extends React.Component<LabelAnnotationProps> {
+    static defaultProps: {
+        className: string;
+        textAnchor: string;
+        fontFamily: string;
+        fontSize: number;
+        fill: string;
+        opacity: number;
+        rotate: number;
+        x: ({ xScale, xAccessor, datum, }: {
+            xScale: ScaleContinuousNumeric<number, number>;
+            xAccessor: any;
+            datum: any;
+        }) => number;
+    };
+    render(): JSX.Element;
+    private readonly handleClick;
+    private readonly helper;
+}

package/lib/LabelAnnotation.js

@@ -0,0 +1,47 @@
+import { functor } from "@tradingaction/core";
+import * as React from "react";
+export class LabelAnnotation extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.handleClick = (e) => {
+            const { onClick, xScale, yScale, datum } = this.props;
+            if (onClick !== undefined) {
+                onClick(e, { xScale, yScale, datum });
+            }
+        };
+        this.helper = () => {
+            const { x, y, datum, fill, text, tooltip, xAccessor, xScale, yScale, plotData } = this.props;
+            const xFunc = functor(x);
+            const yFunc = functor(y);
+            const [xPos, yPos] = [
+                xFunc({ xScale, xAccessor, datum, plotData }),
+                yFunc({ yScale, datum, plotData }),
+            ];
+            return {
+                xPos,
+                yPos,
+                text: functor(text)(datum),
+                fill: functor(fill)(datum),
+                tooltip: functor(tooltip)(datum),
+            };
+        };
+    }
+    render() {
+        const { className, textAnchor, fontFamily, fontSize, opacity, rotate } = this.props;
+        const { xPos, yPos, fill, text, tooltip } = this.helper();
+        return (React.createElement("g", { className: className },
+            React.createElement("title", null, tooltip),
+            React.createElement("text", { x: xPos, y: yPos, fontFamily: fontFamily, fontSize: fontSize, fill: fill, opacity: opacity, transform: `rotate(${rotate}, ${xPos}, ${yPos})`, onClick: this.handleClick, textAnchor: textAnchor }, text)));
+    }
+}
+LabelAnnotation.defaultProps = {
+    className: "react-financial-charts-label-annotation",
+    textAnchor: "middle",
+    fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+    fontSize: 12,
+    fill: "#000000",
+    opacity: 1,
+    rotate: 0,
+    x: ({ xScale, xAccessor, datum, }) => xScale(xAccessor(datum)),
+};
+//# sourceMappingURL=LabelAnnotation.js.map

package/lib/LabelAnnotation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelAnnotation.js","sourceRoot":"","sources":["../src/LabelAnnotation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmD/B,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAA+B;IAA1E;;QA6CqB,gBAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;YACnD,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACtD,IAAI,OAAO,KAAK,SAAS,EAAE;gBACvB,OAAO,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;aACzC;QACL,CAAC,CAAC;QAEe,WAAM,GAAG,GAAG,EAAE;YAC3B,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAE7F,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YACzB,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YAEzB,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,GAAqB;gBACnC,KAAK,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;gBAC7C,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;aACrC,CAAC;YAEF,OAAO;gBACH,IAAI;gBACJ,IAAI;gBACJ,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;gBAC1B,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;gBAC1B,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;aACnC,CAAC;QACN,CAAC,CAAC;IACN,CAAC;IAnDU,MAAM;QACT,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAEpF,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAE1D,OAAO,CACH,2BAAG,SAAS,EAAE,SAAS;YACnB,mCAAQ,OAAO,CAAS;YACxB,8BACI,CAAC,EAAE,IAAI,EACP,CAAC,EAAE,IAAI,EACP,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,MAAM,KAAK,IAAI,KAAK,IAAI,GAAG,EAChD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,UAAU,EAAE,UAAU,IAErB,IAAI,CACF,CACP,CACP,CAAC;IACN,CAAC;;AA1Ca,4BAAY,GAAG;IACzB,SAAS,EAAE,yCAAyC;IACpD,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,wEAAwE;IACpF,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;IACT,CAAC,EAAE,CAAC,EACA,MAAM,EACN,SAAS,EACT,KAAK,GAKR,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;CACjC,CAAC"}

package/lib/SvgPathAnnotation.d.ts

@@ -0,0 +1,47 @@
+import { ScaleContinuousNumeric } from "d3-scale";
+import * as React from "react";
+export interface SvgPathAnnotationProps {
+    readonly className?: string;
+    readonly datum?: any;
+    readonly fill?: string | ((datum: any) => string);
+    readonly onClick?: (e: React.MouseEvent, data: {
+        xScale?: ScaleContinuousNumeric<number, number>;
+        yScale?: ScaleContinuousNumeric<number, number>;
+        datum: any;
+    }) => void;
+    readonly opacity?: number;
+    readonly path: (datum: any) => string;
+    readonly pathHeight: number;
+    readonly pathWidth: number;
+    readonly plotData: any[];
+    readonly stroke?: string;
+    readonly tooltip?: string | ((datum: any) => string);
+    readonly xAccessor?: (datum: any) => any;
+    readonly x?: number | (({ xScale, xAccessor, datum, plotData, }: {
+        xScale: ScaleContinuousNumeric<number, number>;
+        xAccessor: (datum: any) => any;
+        datum: any;
+        plotData: any[];
+    }) => number);
+    readonly xScale?: ScaleContinuousNumeric<number, number>;
+    readonly y?: number | (({ yScale, datum, plotData, }: {
+        yScale: ScaleContinuousNumeric<number, number>;
+        datum: any;
+        plotData: any[];
+    }) => number);
+    readonly yScale?: ScaleContinuousNumeric<number, number>;
+}
+export declare class SvgPathAnnotation extends React.Component<SvgPathAnnotationProps> {
+    static defaultProps: {
+        className: string;
+        opacity: number;
+        x: ({ xScale, xAccessor, datum, }: {
+            xScale: ScaleContinuousNumeric<number, number>;
+            xAccessor: any;
+            datum: any;
+        }) => number;
+    };
+    render(): JSX.Element;
+    private readonly handleClick;
+    private readonly helper;
+}

package/lib/SvgPathAnnotation.js

@@ -0,0 +1,41 @@
+import { functor } from "@tradingaction/core";
+import * as React from "react";
+export class SvgPathAnnotation extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.handleClick = (e) => {
+            const { onClick, xScale, yScale, datum } = this.props;
+            if (onClick !== undefined) {
+                onClick(e, { xScale, yScale, datum });
+            }
+        };
+        this.helper = () => {
+            const { x, y, datum, fill, tooltip, xAccessor, xScale, yScale, plotData } = this.props;
+            const xFunc = functor(x);
+            const yFunc = functor(y);
+            const [xPos, yPos] = [
+                xFunc({ xScale, xAccessor, datum, plotData }),
+                yFunc({ yScale, datum, plotData }),
+            ];
+            return {
+                x: Math.round(xPos),
+                y: Math.round(yPos),
+                fill: functor(fill)(datum),
+                tooltip: functor(tooltip)(datum),
+            };
+        };
+    }
+    render() {
+        const { className, datum, stroke, opacity, path, pathWidth, pathHeight } = this.props;
+        const { x, y, fill, tooltip } = this.helper();
+        return (React.createElement("g", { className: className, onClick: this.handleClick },
+            React.createElement("title", null, tooltip),
+            React.createElement("path", { transform: `translate(${x - pathWidth},${y - pathHeight})`, d: path(datum), stroke: stroke, fill: fill, opacity: opacity })));
+    }
+}
+SvgPathAnnotation.defaultProps = {
+    className: "react-financial-charts-svg-path-annotation",
+    opacity: 1,
+    x: ({ xScale, xAccessor, datum, }) => xScale(xAccessor(datum)),
+};
+//# sourceMappingURL=SvgPathAnnotation.js.map

package/lib/SvgPathAnnotation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgPathAnnotation.js","sourceRoot":"","sources":["../src/SvgPathAnnotation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkD/B,MAAM,OAAO,iBAAkB,SAAQ,KAAK,CAAC,SAAiC;IAA9E;;QAkCqB,gBAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;YACnD,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACtD,IAAI,OAAO,KAAK,SAAS,EAAE;gBACvB,OAAO,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;aACzC;QACL,CAAC,CAAC;QAEe,WAAM,GAAG,GAAG,EAAE;YAC3B,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAEvF,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YACzB,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YAEzB,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,GAAqB;gBACnC,KAAK,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;gBAC7C,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;aACrC,CAAC;YAEF,OAAO;gBACH,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;gBACnB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;gBACnB,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;gBAC1B,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;aACnC,CAAC;QACN,CAAC,CAAC;IACN,CAAC;IA5CU,MAAM;QACT,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAEtF,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAE9C,OAAO,CACH,2BAAG,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW;YAC9C,mCAAQ,OAAO,CAAS;YACxB,8BACI,SAAS,EAAE,aAAa,CAAC,GAAG,SAAS,IAAI,CAAC,GAAG,UAAU,GAAG,EAC1D,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,EACd,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAClB,CACF,CACP,CAAC;IACN,CAAC;;AA/Ba,8BAAY,GAAG;IACzB,SAAS,EAAE,4CAA4C;IACvD,OAAO,EAAE,CAAC;IACV,CAAC,EAAE,CAAC,EACA,MAAM,EACN,SAAS,EACT,KAAK,GAKR,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;CACjC,CAAC"}

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Annotate";
+export * from "./BarAnnotation";
+export * from "./LabelAnnotation";
+export * from "./SvgPathAnnotation";
+export * from "./Label";

package/lib/index.js

@@ -0,0 +1,6 @@
+export * from "./Annotate";
+export * from "./BarAnnotation";
+export * from "./LabelAnnotation";
+export * from "./SvgPathAnnotation";
+export * from "./Label";
+//# 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,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC"}

package/package.json

@@ -0,0 +1,49 @@
+{
+    "name": "@tradingaction/annotations",
+    "version": "2.0.13",
+    "description": "Annotations 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"
+    },
+    "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+    },
+    "dependencies": {
+        "@tradingaction/core": "^2.0.13",
+        "@types/d3-scale": "^3.2.2"
+    },
+    "gitHead": "9c9bc635a2291c8da0e1dd5befa4000e96d83119"
+}

package/src/Annotate.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { GenericChartComponent } from "@tradingaction/core";
+
+export interface AnnotateProps {
+    readonly className?: string;
+    readonly with: React.ElementType;
+    readonly when: (value: any, index: number, array: any[]) => boolean;
+    readonly usingProps?: any;
+}
+
+export class Annotate extends React.Component<AnnotateProps> {
+    public static defaultProps = {
+        className:
+            "react-financial-charts-enable-interaction react-financial-charts-annotate react-financial-charts-default-cursor",
+    };
+
+    public render() {
+        return <GenericChartComponent svgDraw={this.renderSVG} drawOn={["pan"]} />;
+    }
+
+    private readonly renderSVG = (moreProps: any) => {
+        const {
+            xAccessor,
+            xScale,
+            chartConfig: { yScale },
+            plotData,
+        } = moreProps;
+
+        const { className, usingProps, with: Annotation, when } = this.props;
+
+        const data = (plotData as unknown[]).filter(when);
+
+        return (
+            <g className={className}>
+                {data.map((d, idx) => {
+                    return (
+                        <Annotation
+                            key={idx}
+                            {...usingProps}
+                            xScale={xScale}
+                            yScale={yScale}
+                            xAccessor={xAccessor}
+                            plotData={plotData}
+                            datum={d}
+                        />
+                    );
+                })}
+            </g>
+        );
+    };
+}

package/src/BarAnnotation.tsx

@@ -0,0 +1,181 @@
+import { functor } from "@tradingaction/core";
+import { ScaleContinuousNumeric } from "d3-scale";
+import * as React from "react";
+
+export interface BarAnnotationProps {
+    readonly className?: string;
+    readonly path?: ({ x, y }: { x: number; y: number }) => string;
+    readonly onClick?: (
+        e: React.MouseEvent,
+        data: {
+            xScale?: ScaleContinuousNumeric<number, number>;
+            yScale?: ScaleContinuousNumeric<number, number>;
+            datum: any;
+        },
+    ) => void;
+    readonly xAccessor?: (datum: any) => any;
+    readonly xScale?: ScaleContinuousNumeric<number, number>;
+    readonly yScale?: ScaleContinuousNumeric<number, number>;
+    readonly datum?: object;
+    readonly stroke?: string;
+    readonly fill?: string | ((datum: any) => string);
+    readonly opacity?: number;
+    readonly plotData: any[];
+    readonly text?: string;
+    readonly textAnchor?: string;
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly textOpacity?: number;
+    readonly textFill?: string;
+    readonly textRotate?: number;
+    readonly textXOffset?: number;
+    readonly textYOffset?: number;
+    readonly textIcon?: string;
+    readonly textIconFontSize?: number;
+    readonly textIconOpacity?: number;
+    readonly textIconFill?: string;
+    readonly textIconRotate?: number;
+    readonly textIconXOffset?: number;
+    readonly textIconYOffset?: number;
+    readonly textIconAnchor?: string;
+    readonly tooltip?: string | ((datum: any) => string);
+    readonly x?:
+        | number
+        | (({
+              xScale,
+              xAccessor,
+              datum,
+              plotData,
+          }: {
+              xScale: ScaleContinuousNumeric<number, number>;
+              xAccessor: (datum: any) => any;
+              datum: any;
+              plotData: any[];
+          }) => number);
+    readonly y?:
+        | number
+        | (({
+              yScale,
+              datum,
+              plotData,
+          }: {
+              yScale: ScaleContinuousNumeric<number, number>;
+              datum: any;
+              plotData: any[];
+          }) => number);
+}
+
+export class BarAnnotation extends React.Component<BarAnnotationProps> {
+    public static defaultProps = {
+        className: "react-financial-charts-bar-annotation",
+        opacity: 1,
+        fill: "#000000",
+        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+        fontSize: 10,
+        textAnchor: "middle",
+        textFill: "#000000",
+        textOpacity: 1,
+        textIconFill: "#000000",
+        textIconFontSize: 10,
+        x: ({
+            xScale,
+            xAccessor,
+            datum,
+        }: {
+            xScale: ScaleContinuousNumeric<number, number>;
+            xAccessor: any;
+            datum: any;
+        }) => xScale(xAccessor(datum)),
+    };
+
+    public render() {
+        const {
+            className,
+            stroke,
+            opacity,
+            xAccessor,
+            xScale,
+            yScale,
+            path,
+            text,
+            textXOffset,
+            textYOffset,
+            textAnchor,
+            fontFamily,
+            fontSize,
+            textFill,
+            textOpacity,
+            textRotate,
+            textIcon,
+            textIconFontSize,
+            textIconFill,
+            textIconOpacity,
+            textIconRotate,
+            textIconXOffset,
+            textIconYOffset,
+        } = this.props;
+
+        const { x, y, fill, tooltip } = this.helper(this.props, xAccessor, xScale, yScale);
+
+        return (
+            <g className={className} onClick={this.onClick}>
+                {tooltip !== undefined ? <title>{tooltip}</title> : null}
+                {text !== undefined ? (
+                    <text
+                        x={x}
+                        y={y}
+                        dx={textXOffset}
+                        dy={textYOffset}
+                        fontFamily={fontFamily}
+                        fontSize={fontSize}
+                        fill={textFill}
+                        opacity={textOpacity}
+                        transform={textRotate != undefined ? `rotate(${textRotate}, ${x}, ${y})` : undefined}
+                        textAnchor={textAnchor}
+                    >
+                        {text}
+                    </text>
+                ) : null}
+                {textIcon !== undefined ? (
+                    <text
+                        x={x}
+                        y={y}
+                        dx={textIconXOffset}
+                        dy={textIconYOffset}
+                        fontSize={textIconFontSize}
+                        fill={textIconFill}
+                        opacity={textIconOpacity}
+                        transform={textIconRotate != undefined ? `rotate(${textIconRotate}, ${x}, ${y})` : undefined}
+                        textAnchor={textAnchor}
+                    >
+                        {textIcon}
+                    </text>
+                ) : null}
+                {path !== undefined ? <path d={path({ x, y })} stroke={stroke} fill={fill} opacity={opacity} /> : null}
+            </g>
+        );
+    }
+
+    private readonly onClick = (e: React.MouseEvent) => {
+        const { onClick, xScale, yScale, datum } = this.props;
+        if (onClick !== undefined) {
+            onClick(e, { xScale, yScale, datum });
+        }
+    };
+
+    private readonly helper = (props: BarAnnotationProps, xAccessor: any, xScale: any, yScale: any) => {
+        const { x, y, datum, fill, tooltip, plotData } = props;
+
+        const xFunc = functor(x);
+        const yFunc = functor(y);
+
+        const [xPos, yPos] = [xFunc({ xScale, xAccessor, datum, plotData }), yFunc({ yScale, datum, plotData })];
+
+        return {
+            x: xPos,
+            y: yPos,
+            fill: functor(fill)(datum),
+            tooltip: functor(tooltip)(datum),
+        };
+    };
+}

package/src/Label.tsx

@@ -0,0 +1,110 @@
+import { GenericComponent, functor, ChartCanvasContext } from "@tradingaction/core";
+import { ScaleContinuousNumeric } from "d3-scale";
+import * as React from "react";
+
+export interface LabelProps {
+    readonly datum?: any;
+    readonly fillStyle?: string | ((datum: any) => string);
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly fontWeight?: string;
+    readonly rotate?: number;
+    readonly selectCanvas?: (canvases: any) => any;
+    readonly text?: string | ((datum: any) => string);
+    readonly textAlign?: CanvasTextAlign;
+    readonly x:
+        | number
+        | ((xScale: ScaleContinuousNumeric<number, number>, xAccessor: any, datum: any, plotData: any[]) => number);
+    readonly xAccessor?: (datum: any) => any;
+    readonly xScale?: ScaleContinuousNumeric<number, number>;
+    readonly y: number | ((yScale: ScaleContinuousNumeric<number, number>, datum: any, plotData: any[]) => number);
+    readonly yScale?: ScaleContinuousNumeric<number, number>;
+}
+
+export class Label extends React.Component<LabelProps> {
+    public static defaultProps = {
+        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+        fontSize: 64,
+        fontWeight: "bold",
+        fillStyle: "#dcdcdc",
+        rotate: 0,
+        x: ({ xScale, xAccessor, datum }: any) => xScale(xAccessor(datum)),
+        selectCanvas: (canvases: any) => canvases.bg,
+    };
+
+    public static contextType = ChartCanvasContext;
+
+    public render() {
+        const { selectCanvas } = this.props;
+
+        return <GenericComponent canvasToDraw={selectCanvas} canvasDraw={this.drawOnCanvas} drawOn={[]} />;
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        ctx.save();
+
+        const { textAlign = "center", fontFamily, fontSize, fontWeight, rotate } = this.props;
+
+        const { canvasOriginX, canvasOriginY, margin, ratio } = this.context;
+
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.scale(ratio, ratio);
+
+        if (canvasOriginX !== undefined) {
+            ctx.translate(canvasOriginX, canvasOriginY);
+        } else {
+            ctx.translate(margin.left + 0.5 * ratio, margin.top + 0.5 * ratio);
+        }
+
+        const { xScale, chartConfig, xAccessor } = moreProps;
+
+        const yScale = Array.isArray(chartConfig) || !chartConfig ? undefined : chartConfig.yScale;
+
+        const { xPos, yPos, fillStyle, text } = this.helper(moreProps, xAccessor, xScale, yScale);
+
+        ctx.save();
+        ctx.translate(xPos, yPos);
+        if (rotate !== undefined) {
+            const radians = (rotate / 180) * Math.PI;
+
+            ctx.rotate(radians);
+        }
+
+        if (fontFamily !== undefined) {
+            ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+        }
+        if (fillStyle !== undefined) {
+            ctx.fillStyle = fillStyle;
+        }
+        if (textAlign !== undefined) {
+            ctx.textAlign = textAlign;
+        }
+
+        ctx.beginPath();
+        ctx.fillText(text, 0, 0);
+        ctx.restore();
+    };
+
+    private readonly helper = (
+        moreProps: any,
+        xAccessor: any,
+        xScale: ScaleContinuousNumeric<number, number>,
+        yScale: ScaleContinuousNumeric<number, number>,
+    ) => {
+        const { x, y, datum, fillStyle, text } = this.props;
+
+        const { plotData } = moreProps;
+
+        const xFunc = functor(x);
+        const yFunc = functor(y);
+
+        const [xPos, yPos] = [xFunc({ xScale, xAccessor, datum, plotData }), yFunc({ yScale, datum, plotData })];
+
+        return {
+            xPos,
+            yPos,
+            text: functor(text)(datum),
+            fillStyle: functor(fillStyle)(datum),
+        };
+    };
+}

package/src/LabelAnnotation.tsx

@@ -0,0 +1,125 @@
+import { functor } from "@tradingaction/core";
+import { ScaleContinuousNumeric } from "d3-scale";
+import * as React from "react";
+
+export interface LabelAnnotationProps {
+    readonly className?: string;
+    readonly datum?: any;
+    readonly fill?: string | ((datum: any) => string);
+    readonly fontFamily?: string;
+    readonly fontSize?: number;
+    readonly onClick?: (
+        e: React.MouseEvent,
+        data: {
+            xScale?: ScaleContinuousNumeric<number, number>;
+            yScale?: ScaleContinuousNumeric<number, number>;
+            datum: any;
+        },
+    ) => void;
+    readonly opacity?: number;
+    readonly plotData: any[];
+    readonly rotate?: number;
+    readonly text?: string | ((datum: any) => string);
+    readonly textAnchor?: string;
+    readonly tooltip?: string | ((datum: any) => string);
+    readonly xAccessor?: (datum: any) => any;
+    readonly xScale?: ScaleContinuousNumeric<number, number>;
+    readonly x?:
+        | number
+        | (({
+              xScale,
+              xAccessor,
+              datum,
+              plotData,
+          }: {
+              xScale: ScaleContinuousNumeric<number, number>;
+              xAccessor: (datum: any) => any;
+              datum: any;
+              plotData: any[];
+          }) => number);
+    readonly yScale?: ScaleContinuousNumeric<number, number>;
+    readonly y?:
+        | number
+        | (({
+              yScale,
+              datum,
+              plotData,
+          }: {
+              yScale: ScaleContinuousNumeric<number, number>;
+              datum: any;
+              plotData: any[];
+          }) => number);
+}
+
+export class LabelAnnotation extends React.Component<LabelAnnotationProps> {
+    public static defaultProps = {
+        className: "react-financial-charts-label-annotation",
+        textAnchor: "middle",
+        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+        fontSize: 12,
+        fill: "#000000",
+        opacity: 1,
+        rotate: 0,
+        x: ({
+            xScale,
+            xAccessor,
+            datum,
+        }: {
+            xScale: ScaleContinuousNumeric<number, number>;
+            xAccessor: any;
+            datum: any;
+        }) => xScale(xAccessor(datum)),
+    };
+
+    public render() {
+        const { className, textAnchor, fontFamily, fontSize, opacity, rotate } = this.props;
+
+        const { xPos, yPos, fill, text, tooltip } = this.helper();
+
+        return (
+            <g className={className}>
+                <title>{tooltip}</title>
+                <text
+                    x={xPos}
+                    y={yPos}
+                    fontFamily={fontFamily}
+                    fontSize={fontSize}
+                    fill={fill}
+                    opacity={opacity}
+                    transform={`rotate(${rotate}, ${xPos}, ${yPos})`}
+                    onClick={this.handleClick}
+                    textAnchor={textAnchor}
+                >
+                    {text}
+                </text>
+            </g>
+        );
+    }
+
+    private readonly handleClick = (e: React.MouseEvent) => {
+        const { onClick, xScale, yScale, datum } = this.props;
+        if (onClick !== undefined) {
+            onClick(e, { xScale, yScale, datum });
+        }
+    };
+
+    private readonly helper = () => {
+        const { x, y, datum, fill, text, tooltip, xAccessor, xScale, yScale, plotData } = this.props;
+
+        const xFunc = functor(x);
+        const yFunc = functor(y);
+
+        const [xPos, yPos]: [number, number] = [
+            xFunc({ xScale, xAccessor, datum, plotData }),
+            yFunc({ yScale, datum, plotData }),
+        ];
+
+        return {
+            xPos,
+            yPos,
+            text: functor(text)(datum),
+            fill: functor(fill)(datum),
+            tooltip: functor(tooltip)(datum),
+        };
+    };
+}

package/src/SvgPathAnnotation.tsx

@@ -0,0 +1,112 @@
+import { functor } from "@tradingaction/core";
+import { ScaleContinuousNumeric } from "d3-scale";
+import * as React from "react";
+
+export interface SvgPathAnnotationProps {
+    readonly className?: string;
+    readonly datum?: any;
+    readonly fill?: string | ((datum: any) => string);
+    readonly onClick?: (
+        e: React.MouseEvent,
+        data: {
+            xScale?: ScaleContinuousNumeric<number, number>;
+            yScale?: ScaleContinuousNumeric<number, number>;
+            datum: any;
+        },
+    ) => void;
+    readonly opacity?: number;
+    readonly path: (datum: any) => string;
+    readonly pathHeight: number;
+    readonly pathWidth: number;
+    readonly plotData: any[];
+    readonly stroke?: string;
+    readonly tooltip?: string | ((datum: any) => string);
+    readonly xAccessor?: (datum: any) => any;
+    readonly x?:
+        | number
+        | (({
+              xScale,
+              xAccessor,
+              datum,
+              plotData,
+          }: {
+              xScale: ScaleContinuousNumeric<number, number>;
+              xAccessor: (datum: any) => any;
+              datum: any;
+              plotData: any[];
+          }) => number);
+    readonly xScale?: ScaleContinuousNumeric<number, number>;
+    readonly y?:
+        | number
+        | (({
+              yScale,
+              datum,
+              plotData,
+          }: {
+              yScale: ScaleContinuousNumeric<number, number>;
+              datum: any;
+              plotData: any[];
+          }) => number);
+    readonly yScale?: ScaleContinuousNumeric<number, number>;
+}
+
+export class SvgPathAnnotation extends React.Component<SvgPathAnnotationProps> {
+    public static defaultProps = {
+        className: "react-financial-charts-svg-path-annotation",
+        opacity: 1,
+        x: ({
+            xScale,
+            xAccessor,
+            datum,
+        }: {
+            xScale: ScaleContinuousNumeric<number, number>;
+            xAccessor: any;
+            datum: any;
+        }) => xScale(xAccessor(datum)),
+    };
+
+    public render() {
+        const { className, datum, stroke, opacity, path, pathWidth, pathHeight } = this.props;
+
+        const { x, y, fill, tooltip } = this.helper();
+
+        return (
+            <g className={className} onClick={this.handleClick}>
+                <title>{tooltip}</title>
+                <path
+                    transform={`translate(${x - pathWidth},${y - pathHeight})`}
+                    d={path(datum)}
+                    stroke={stroke}
+                    fill={fill}
+                    opacity={opacity}
+                />
+            </g>
+        );
+    }
+
+    private readonly handleClick = (e: React.MouseEvent) => {
+        const { onClick, xScale, yScale, datum } = this.props;
+        if (onClick !== undefined) {
+            onClick(e, { xScale, yScale, datum });
+        }
+    };
+
+    private readonly helper = () => {
+        const { x, y, datum, fill, tooltip, xAccessor, xScale, yScale, plotData } = this.props;
+
+        const xFunc = functor(x);
+        const yFunc = functor(y);
+
+        const [xPos, yPos]: [number, number] = [
+            xFunc({ xScale, xAccessor, datum, plotData }),
+            yFunc({ yScale, datum, plotData }),
+        ];
+
+        return {
+            x: Math.round(xPos),
+            y: Math.round(yPos),
+            fill: functor(fill)(datum),
+            tooltip: functor(tooltip)(datum),
+        };
+    };
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./Annotate";
+export * from "./BarAnnotation";
+export * from "./LabelAnnotation";
+export * from "./SvgPathAnnotation";
+export * from "./Label";