@tradingaction/series 2.0.13

package/src/OverlayBarSeries.tsx

@@ -0,0 +1,115 @@
+import { merge } from "d3-array";
+import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
+import * as React from "react";
+import { first, functor, getAxisCanvas, GenericChartComponent, plotDataLengthBarWidth } from "@tradingaction/core";
+import { drawOnCanvas2 } from "./StackedBarSeries";
+
+export interface OverlayBarSeriesProps {
+    readonly baseAt?:
+        | number
+        | ((
+              xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+              yScale: ScaleContinuousNumeric<number, number>,
+              datum: any,
+          ) => number);
+    readonly direction?: "up" | "down";
+    readonly stroke?: boolean;
+    readonly width?: any;
+    readonly widthRatio?: number;
+    readonly fillStyle?: string | ((data: any, y: number) => string);
+    readonly yAccessor: ((datum: any) => number | undefined)[];
+    readonly xScale?: ScaleContinuousNumeric<number, number>;
+    readonly yScale?: ScaleContinuousNumeric<number, number>;
+    readonly plotData?: number[];
+    readonly clip?: boolean;
+}
+
+export class OverlayBarSeries extends React.Component<OverlayBarSeriesProps> {
+    public static defaultProps = {
+        baseAt: (xScale: ScaleContinuousNumeric<number, number>, yScale: ScaleContinuousNumeric<number, number>) =>
+            first(yScale.range()),
+        clip: true,
+        direction: "up",
+        stroke: false,
+        fillStyle: "#4682B4",
+        widthRatio: 0.5,
+        width: plotDataLengthBarWidth,
+    };
+
+    public render() {
+        const { clip } = this.props;
+
+        return (
+            <GenericChartComponent
+                canvasToDraw={getAxisCanvas}
+                canvasDraw={this.drawOnCanvas}
+                clip={clip}
+                drawOn={["pan"]}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const bars = this.getBars(moreProps);
+
+        drawOnCanvas2(this.props, ctx, bars);
+    };
+
+    private readonly getBars = (moreProps: any) => {
+        const {
+            xScale,
+            xAccessor,
+            chartConfig: { yScale },
+            plotData,
+        } = moreProps;
+
+        const { baseAt, fillStyle, stroke, yAccessor } = this.props;
+
+        const getFill = functor(fillStyle);
+        const getBase = functor(baseAt);
+        const widthFunctor = functor(this.props.width);
+
+        const width = widthFunctor(this.props, moreProps);
+        const offset = Math.floor(0.5 * width);
+
+        const bars = plotData.map((d: any) => {
+            const innerBars = yAccessor
+                .map((eachYAccessor: any, i: number) => {
+                    const yValue = eachYAccessor(d);
+                    if (yValue === undefined) {
+                        return undefined;
+                    }
+
+                    const xValue = xAccessor(d);
+                    const x = Math.round(xScale(xValue)) - offset;
+                    const y = yScale(yValue);
+
+                    return {
+                        height: 0,
+                        width: offset * 2,
+                        x,
+                        y,
+                        stroke: stroke ? getFill(d, i) : "none",
+                        fillStyle: getFill(d, i),
+                        i,
+                    };
+                })
+                .filter((yValue: any) => yValue !== undefined);
+
+            let b = getBase(xScale, yScale, d);
+            let h;
+            for (let i = innerBars.length - 1; i >= 0; i--) {
+                h = b - innerBars[i]!.y;
+                if (h < 0) {
+                    innerBars[i]!.y = b;
+                    h = -1 * h;
+                }
+                innerBars[i]!.height = h;
+                b = innerBars[i]!.y;
+            }
+            return innerBars;
+        });
+
+        return merge(bars);
+    };
+}

package/src/PointAndFigureSeries.tsx

@@ -0,0 +1,140 @@
+import { ScaleContinuousNumeric } from "d3-scale";
+import * as React from "react";
+import { isDefined, isNotDefined, getAxisCanvas, GenericChartComponent } from "@tradingaction/core";
+
+export interface PointAndFigureSeriesProps {
+    readonly className?: string;
+    readonly clip?: boolean;
+    readonly fill?: {
+        up: string;
+        down: string;
+    };
+    readonly stroke?: {
+        up: string;
+        down: string;
+    };
+    readonly strokeWidth?: number;
+}
+
+export class PointAndFigureSeries extends React.Component<PointAndFigureSeriesProps> {
+    public static defaultProps = {
+        className: "react-financial-charts-point-and-figure",
+        strokeWidth: 1,
+        stroke: {
+            up: "#6BA583",
+            down: "#FF0000",
+        },
+        fill: {
+            up: "none",
+            down: "none",
+        },
+        clip: true,
+    };
+
+    public render() {
+        const { clip } = this.props;
+
+        return (
+            <GenericChartComponent
+                clip={clip}
+                canvasDraw={this.drawOnCanvas}
+                canvasToDraw={getAxisCanvas}
+                drawOn={["pan"]}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const {
+            xAccessor,
+            xScale,
+            chartConfig: { yScale },
+            plotData,
+        } = moreProps;
+
+        const columns = this.getColumns(xScale, xAccessor, yScale, plotData);
+
+        this.drawOnCanvasPrivate(ctx, this.props, columns);
+    };
+
+    private readonly getColumns = (
+        xScale: ScaleContinuousNumeric<number, number>,
+        xAccessor: any,
+        yScale: ScaleContinuousNumeric<number, number>,
+        plotData: any[],
+    ) => {
+        const width = xScale(xAccessor(plotData[plotData.length - 1])) - xScale(xAccessor(plotData[0]));
+
+        const columnWidth = width / (plotData.length - 1);
+
+        let anyBox;
+        let j = 0;
+        while (isNotDefined(anyBox)) {
+            if (isDefined(plotData[j].close)) {
+                anyBox = plotData[j].boxes[0];
+            } else {
+                break;
+            }
+            j++;
+        }
+
+        const boxHeight = Math.abs(yScale(anyBox.open) - yScale(anyBox.close));
+
+        const columns = plotData
+            .filter((d) => isDefined(d.close))
+            .map((d) => {
+                const boxes = d.boxes.map((box: any) => ({
+                    columnWidth,
+                    boxHeight,
+                    open: yScale(box.open),
+                    close: yScale(box.close),
+                }));
+
+                const xOffset = xScale(xAccessor(d)) - columnWidth / 2;
+                return {
+                    boxes,
+                    direction: d.direction,
+                    offset: [xOffset, 0],
+                };
+            });
+        return columns;
+    };
+
+    private readonly drawOnCanvasPrivate = (ctx: CanvasRenderingContext2D, props: any, columns: any[]) => {
+        const { stroke, fill, strokeWidth } = props;
+
+        ctx.lineWidth = strokeWidth;
+
+        columns.forEach((col) => {
+            const [offsetX, offsetY] = col.offset;
+            col.boxes.forEach((box: any) => {
+                if (col.direction > 0) {
+                    ctx.fillStyle = fill.up;
+                    ctx.strokeStyle = stroke.up;
+
+                    ctx.beginPath();
+
+                    ctx.moveTo(offsetX, offsetY + box.open);
+                    ctx.lineTo(offsetX + box.columnWidth, offsetY + box.close);
+                    ctx.moveTo(offsetX, offsetY + box.close);
+                    ctx.lineTo(offsetX + box.columnWidth, offsetY + box.open);
+
+                    ctx.stroke();
+                } else {
+                    ctx.fillStyle = fill.down;
+                    ctx.strokeStyle = stroke.down;
+
+                    ctx.beginPath();
+
+                    const [x, y] = [offsetX + box.columnWidth / 2, offsetY + box.open + box.boxHeight / 2];
+                    const [rx, ry] = [box.columnWidth / 2, box.boxHeight / 2];
+
+                    ctx.ellipse(x, y, rx, ry, 0, 0, 2 * Math.PI);
+                    ctx.stroke();
+                }
+            });
+        });
+
+        ctx.stroke();
+    };
+}

package/src/RSISeries.tsx

@@ -0,0 +1,158 @@
+import * as React from "react";
+import { strokeDashTypes } from "@tradingaction/core";
+import { LineSeries } from "./LineSeries";
+import { StraightLine } from "./StraightLine";
+import { SVGComponent } from "./SVGComponent";
+
+export interface RSISeriesProps {
+    readonly className?: string;
+    readonly yAccessor: (data: any) => any;
+    readonly strokeStyle?: {
+        line: string;
+        top: string;
+        middle: string;
+        bottom: string;
+        outsideThreshold: string;
+        insideThreshold: string;
+    };
+    readonly strokeDasharray?: {
+        line: strokeDashTypes;
+        top: strokeDashTypes;
+        middle: strokeDashTypes;
+        bottom: strokeDashTypes;
+    };
+    readonly strokeWidth?: {
+        outsideThreshold: number;
+        insideThreshold: number;
+        top: number;
+        middle: number;
+        bottom: number;
+    };
+    readonly overSold?: number;
+    readonly middle?: number;
+    readonly overBought?: number;
+}
+
+/**
+ * The Relative Strength Index (RSI) is a momentum oscillator that measures the speed and change of price movements.
+ */
+export class RSISeries extends React.Component<RSISeriesProps> {
+    public static defaultProps = {
+        className: "react-financial-charts-rsi-series",
+        strokeStyle: {
+            line: "#000000",
+            top: "#B8C2CC",
+            middle: "#8795A1",
+            bottom: "#B8C2CC",
+            outsideThreshold: "#b300b3",
+            insideThreshold: "#ffccff",
+        },
+        strokeDasharray: {
+            line: "Solid" as strokeDashTypes,
+            top: "ShortDash" as strokeDashTypes,
+            middle: "ShortDash" as strokeDashTypes,
+            bottom: "ShortDash" as strokeDashTypes,
+        },
+        strokeWidth: {
+            outsideThreshold: 1,
+            insideThreshold: 1,
+            top: 1,
+            middle: 1,
+            bottom: 1,
+        },
+        overSold: 70,
+        middle: 50,
+        overBought: 30,
+    };
+
+    private clipPathId1 = `rsi-clip-${String(Math.round(Math.random() * 10000 * 10000))}`;
+    private clipPathId2 = `rsi-clip-${String(Math.round(Math.random() * 10000 * 10000))}`;
+
+    public render() {
+        const {
+            className,
+            strokeStyle = RSISeries.defaultProps.strokeStyle,
+            strokeDasharray = RSISeries.defaultProps.strokeDasharray,
+            strokeWidth = RSISeries.defaultProps.strokeWidth,
+        } = this.props;
+        const { yAccessor } = this.props;
+        const { overSold, middle, overBought } = this.props;
+
+        return (
+            <g className={className}>
+                <SVGComponent>{this.renderClip}</SVGComponent>
+                <StraightLine
+                    strokeStyle={strokeStyle.top}
+                    yValue={overSold}
+                    lineDash={strokeDasharray.top}
+                    lineWidth={strokeWidth.top}
+                />
+                <StraightLine
+                    strokeStyle={strokeStyle.middle}
+                    yValue={middle}
+                    lineDash={strokeDasharray.middle}
+                    lineWidth={strokeWidth.middle}
+                />
+                <StraightLine
+                    strokeStyle={strokeStyle.bottom}
+                    yValue={overBought}
+                    lineDash={strokeDasharray.bottom}
+                    lineWidth={strokeWidth.bottom}
+                />
+                <LineSeries
+                    canvasClip={this.topAndBottomClip}
+                    yAccessor={yAccessor}
+                    strokeStyle={strokeStyle.insideThreshold || strokeStyle.line}
+                    strokeWidth={strokeWidth.insideThreshold}
+                    strokeDasharray={strokeDasharray.line}
+                />
+                <LineSeries
+                    canvasClip={this.mainClip}
+                    yAccessor={yAccessor}
+                    strokeStyle={strokeStyle.outsideThreshold || strokeStyle.line}
+                    strokeWidth={strokeWidth.outsideThreshold}
+                    strokeDasharray={strokeDasharray.line}
+                />
+            </g>
+        );
+    }
+
+    private readonly renderClip = (moreProps: any) => {
+        const { chartConfig } = moreProps;
+        const { overSold, overBought } = this.props;
+        const { yScale, width, height } = chartConfig;
+
+        return (
+            <defs>
+                <clipPath id={this.clipPathId1}>
+                    <rect x={0} y={yScale(overSold)} width={width} height={yScale(overBought) - yScale(overSold)} />
+                </clipPath>
+                <clipPath id={this.clipPathId2}>
+                    <rect x={0} y={0} width={width} height={yScale(overSold)} />
+                    <rect x={0} y={yScale(overBought)} width={width} height={height - yScale(overBought)} />
+                </clipPath>
+            </defs>
+        );
+    };
+
+    private readonly mainClip = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const { chartConfig } = moreProps;
+        const { overSold, overBought } = this.props;
+        const { yScale, width, height } = chartConfig;
+
+        ctx.beginPath();
+        ctx.rect(0, 0, width, yScale(overSold));
+        ctx.rect(0, yScale(overBought), width, height - yScale(overBought));
+        ctx.clip();
+    };
+
+    private readonly topAndBottomClip = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const { chartConfig } = moreProps;
+        const { overSold, overBought } = this.props;
+        const { yScale, width } = chartConfig;
+
+        ctx.beginPath();
+        ctx.rect(0, yScale(overSold), width, yScale(overBought) - yScale(overSold));
+        ctx.clip();
+    };
+}

package/src/RenkoSeries.tsx

@@ -0,0 +1,118 @@
+import { ScaleContinuousNumeric } from "d3-scale";
+import * as React from "react";
+import { isDefined, getAxisCanvas, GenericChartComponent } from "@tradingaction/core";
+
+export interface RenkoSeriesProps {
+    readonly clip?: boolean;
+    readonly fill?: {
+        up: string;
+        down: string;
+        partial: string;
+    };
+    readonly stroke?: {
+        up: string;
+        down: string;
+    };
+    readonly yAccessor?: (data: any) => any;
+
+    readonly onClickWhenHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onDoubleClickWhenHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onDoubleClick?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onContextMenu?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onClickOutside?: (e: React.MouseEvent, moreProps: any) => void;
+}
+
+export class RenkoSeries extends React.Component<RenkoSeriesProps> {
+    public static defaultProps = {
+        clip: true,
+        fill: {
+            up: "#26a69a",
+            down: "#ef5350",
+            partial: "#4682B4",
+        },
+        stroke: {
+            up: "none",
+            down: "none",
+        },
+        yAccessor: (d: any) => ({ open: d.open, high: d.high, low: d.low, close: d.close }),
+    };
+
+    public render() {
+        const { clip } = this.props;
+
+        return (
+            <GenericChartComponent
+                clip={clip}
+                canvasDraw={this.drawOnCanvas}
+                canvasToDraw={getAxisCanvas}
+                drawOn={["pan", "mousemove"]}
+                onClickWhenHover={this.props.onClickWhenHover}
+                onDoubleClickWhenHover={this.props.onDoubleClickWhenHover}
+                onDoubleClick={this.props.onDoubleClick}
+                onContextMenu={this.props.onContextMenu}
+                onClickOutside={this.props.onClickOutside}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const {
+            xAccessor,
+            xScale,
+            chartConfig: { yScale },
+            plotData,
+        } = moreProps;
+
+        const renko = this.getRenko(plotData, xScale, xAccessor, yScale);
+
+        renko.forEach((d) => {
+            const { fillStyle, strokeStyle } = d;
+            ctx.beginPath();
+
+            if (strokeStyle !== undefined) {
+                ctx.strokeStyle = strokeStyle;
+            }
+            if (fillStyle !== undefined) {
+                ctx.fillStyle = fillStyle;
+            }
+
+            ctx.rect(d.x, d.y, d.width, d.height);
+            ctx.closePath();
+            ctx.fill();
+        });
+    };
+
+    private readonly getRenko = (
+        plotData: any[],
+        xScale: ScaleContinuousNumeric<number, number>,
+        xAccessor: any,
+        yScale: ScaleContinuousNumeric<number, number>,
+    ) => {
+        const { fill, stroke, yAccessor = RenkoSeries.defaultProps.yAccessor } = this.props;
+
+        const width = xScale(xAccessor(plotData[plotData.length - 1])) - xScale(xAccessor(plotData[0]));
+
+        const candleWidth = width / (plotData.length - 1);
+
+        return plotData
+            .filter((d) => isDefined(yAccessor(d).close))
+            .map((d) => {
+                const ohlc = yAccessor(d);
+                const x = xScale(xAccessor(d)) - 0.5 * candleWidth;
+                const y = yScale(Math.max(ohlc.open, ohlc.close));
+                const height = Math.abs(yScale(ohlc.open) - yScale(ohlc.close));
+
+                const fillStyle = d.fullyFormed ? (ohlc.open <= ohlc.close ? fill?.up : fill?.down) : fill?.partial;
+                const strokeStyle = d.fullyFormed ? (ohlc.open <= ohlc.close ? stroke?.up : stroke?.down) : undefined;
+
+                return {
+                    fillStyle,
+                    height,
+                    strokeStyle,
+                    width: candleWidth,
+                    x,
+                    y,
+                };
+            });
+    };
+}

package/src/SARSeries.tsx

@@ -0,0 +1,111 @@
+import * as React from "react";
+import { first, getAxisCanvas, getMouseCanvas, GenericChartComponent, last } from "@tradingaction/core";
+
+export interface SARSeriesProps {
+    readonly fillStyle?: {
+        falling: string;
+        rising: string;
+    };
+    readonly strokeStyle?: {
+        falling: string;
+        rising: string;
+    };
+    readonly highlightOnHover?: boolean;
+    readonly onClick?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onDoubleClick?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onContextMenu?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly yAccessor: (datum: any) => number | undefined;
+}
+
+/**
+ * SAR stands for 'stop and reverse'.
+ * The indicator is below prices as they're rising and above
+ * prices as they're falling. In this regard, the indicator
+ * stops and reverses when the price trend reverses and breaks above or below the indicator.
+ */
+export class SARSeries extends React.Component<SARSeriesProps> {
+    public static defaultProps = {
+        fillStyle: {
+            falling: "#4682B4",
+            rising: "#15EC2E",
+        },
+        highlightOnHover: false,
+    };
+
+    public render() {
+        const { highlightOnHover, onClick, onDoubleClick, onContextMenu } = this.props;
+
+        const hoverProps = highlightOnHover
+            ? {
+                  isHover: this.isHover,
+                  drawOn: ["mousemove", "pan"],
+                  canvasToDraw: getMouseCanvas,
+              }
+            : {
+                  drawOn: ["pan"],
+                  canvasToDraw: getAxisCanvas,
+              };
+
+        return (
+            <GenericChartComponent
+                canvasDraw={this.drawOnCanvas}
+                onClickWhenHover={onClick}
+                onDoubleClickWhenHover={onDoubleClick}
+                onContextMenuWhenHover={onContextMenu}
+                {...hoverProps}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const { yAccessor, fillStyle = SARSeries.defaultProps.fillStyle, strokeStyle } = this.props;
+        const {
+            xAccessor,
+            plotData,
+            xScale,
+            chartConfig: { yScale },
+            hovering,
+        } = moreProps;
+
+        const width = xScale(xAccessor(last(plotData))) - xScale(xAccessor(first(plotData)));
+
+        const d = ((width / plotData.length) * 0.5) / 2;
+        const radius = Math.min(2, Math.max(0.5, d)) + (hovering ? 2 : 0);
+
+        (plotData as any[]).forEach((each) => {
+            const yValue = yAccessor(each);
+            if (yValue === undefined) {
+                return;
+            }
+
+            const centerX = xScale(xAccessor(each));
+            const centerY = yScale(yValue);
+            const color = yValue > each.close ? fillStyle.falling : fillStyle.rising;
+
+            ctx.fillStyle = color;
+            if (strokeStyle !== undefined) {
+                ctx.strokeStyle = yValue > each.close ? strokeStyle.falling : strokeStyle.rising;
+            }
+
+            ctx.beginPath();
+            ctx.ellipse(centerX, centerY, radius, radius, 0, 0, 2 * Math.PI);
+            ctx.closePath();
+            ctx.fill();
+            if (strokeStyle !== undefined) {
+                ctx.stroke();
+            }
+        });
+    };
+
+    private readonly isHover = (moreProps: any) => {
+        const {
+            mouseXY,
+            currentItem,
+            chartConfig: { yScale },
+        } = moreProps;
+        const { yAccessor } = this.props;
+        const y = mouseXY[1];
+        const currentY = yScale(yAccessor(currentItem));
+        return y < currentY + 5 && y > currentY - 5;
+    };
+}

package/src/SVGComponent.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { GenericChartComponent } from "@tradingaction/core";
+
+interface SVGComponentProps {
+    readonly children: (moreProps: any) => React.ReactNode;
+}
+
+export class SVGComponent extends React.Component<SVGComponentProps> {
+    public render() {
+        const { children } = this.props;
+        return <GenericChartComponent drawOn={[]} svgDraw={children} />;
+    }
+}