@tradingaction/series 2.0.13

package/src/AreaSeries.tsx

@@ -0,0 +1,95 @@
+import { strokeDashTypes } from "@tradingaction/core";
+import { ScaleContinuousNumeric } from "d3-scale";
+import { CurveFactory } from "d3-shape";
+import React, { Component } from "react";
+import { AreaOnlySeries } from "./AreaOnlySeries";
+import { LineSeries } from "./LineSeries";
+
+export interface AreaSeriesProps {
+    /**
+     * The base y value to draw the area to.
+     */
+    readonly baseAt?:
+        | number
+        | ((yScale: ScaleContinuousNumeric<number, number>, d: [number, number], moreProps: any) => number);
+    readonly canvasClip?: (context: CanvasRenderingContext2D, moreProps: any) => void;
+    /**
+     * Whether to connect the area between undefined data points.
+     */
+    readonly connectNulls?: boolean;
+    /**
+     * Color, gradient, or pattern to use for fill.
+     */
+    readonly fillStyle?:
+        | string
+        | ((context: CanvasRenderingContext2D, moreProps: any) => string | CanvasGradient | CanvasPattern);
+    /**
+     * A factory for a curve generator for the area and line.
+     */
+    readonly curve?: CurveFactory;
+    /**
+     * Color, gradient, or pattern to use for the stroke.
+     */
+    readonly strokeStyle?: string;
+    /**
+     * Stroke dash.
+     */
+    readonly strokeDasharray?: strokeDashTypes;
+    /**
+     * Stroke width.
+     */
+    readonly strokeWidth?: number;
+    /**
+     * Selector for data to plot.
+     */
+    readonly yAccessor: (data: any) => number | undefined;
+}
+
+/**
+ * `AreaSeries` component is similar to a `LineSeries` but with the area between the line and base filled.
+ */
+export class AreaSeries extends Component<AreaSeriesProps> {
+    public static defaultProps: Partial<AreaSeriesProps> = {
+        fillStyle: "rgba(33, 150, 243, 0.1)",
+        strokeStyle: "#2196f3",
+        strokeWidth: 3,
+        strokeDasharray: "Solid",
+    };
+
+    public render() {
+        const {
+            baseAt,
+            connectNulls,
+            strokeStyle,
+            strokeWidth,
+            strokeDasharray,
+            fillStyle,
+            curve,
+            canvasClip,
+            yAccessor,
+        } = this.props;
+
+        return (
+            <g>
+                <AreaOnlySeries
+                    connectNulls={connectNulls}
+                    yAccessor={yAccessor}
+                    curve={curve}
+                    base={baseAt}
+                    fillStyle={fillStyle}
+                    canvasClip={canvasClip}
+                />
+                <LineSeries
+                    connectNulls={connectNulls}
+                    yAccessor={yAccessor}
+                    strokeStyle={strokeStyle}
+                    strokeWidth={strokeWidth}
+                    strokeDasharray={strokeDasharray}
+                    curve={curve}
+                    canvasClip={canvasClip}
+                    highlightOnHover={false}
+                />
+            </g>
+        );
+    }
+}

package/src/BarSeries.tsx

@@ -0,0 +1,151 @@
+import { functor, head, getAxisCanvas, GenericChartComponent, plotDataLengthBarWidth } from "@tradingaction/core";
+import { group } from "d3-array";
+import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
+import * as React from "react";
+import { drawOnCanvasHelper, identityStack } from "./StackedBarSeries";
+
+interface IBar {
+    readonly x: number;
+    readonly y: number;
+    readonly height: number;
+    readonly width: number;
+    readonly fillStyle: string;
+}
+
+export interface BarSeriesProps {
+    readonly baseAt?:
+        | number
+        | ((
+              xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+              yScale: ScaleContinuousNumeric<number, number>,
+              d: [number, number],
+              moreProps: any,
+          ) => number);
+    readonly clip?: boolean;
+    readonly fillStyle?: string | ((data: any) => string);
+    readonly strokeStyle?: string;
+    readonly swapScales?: boolean;
+    readonly width?: number | ((props: { widthRatio: number }, moreProps: any) => number);
+    readonly widthRatio?: number;
+    readonly yAccessor: (data: any) => number | undefined;
+}
+
+/**
+ * A `BarSeries` component.
+ */
+export class BarSeries extends React.Component<BarSeriesProps> {
+    public static defaultProps = {
+        baseAt: (
+            xScale: ScaleContinuousNumeric<number, number>,
+            yScale: ScaleContinuousNumeric<number, number> /* , d*/,
+        ) => head(yScale.range()),
+        clip: true,
+        fillStyle: "rgba(70, 130, 180, 0.5)",
+        swapScales: false,
+        width: plotDataLengthBarWidth,
+        widthRatio: 0.8,
+    };
+
+    public render() {
+        const { clip } = this.props;
+
+        return (
+            <GenericChartComponent
+                clip={clip}
+                canvasToDraw={getAxisCanvas}
+                canvasDraw={this.drawOnCanvas}
+                drawOn={["pan"]}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        if (this.props.swapScales) {
+            const { xAccessor } = moreProps;
+
+            drawOnCanvasHelper(ctx, this.props, moreProps, xAccessor, identityStack);
+        } else {
+            const bars = this.getBars(moreProps);
+
+            const { strokeStyle } = this.props;
+
+            const nest = group(bars, (d: any) => d.fillStyle);
+
+            nest.forEach((values, key) => {
+                if (strokeStyle !== undefined) {
+                    if (head(values).width > 1) {
+                        ctx.strokeStyle = strokeStyle;
+                    }
+                }
+                ctx.fillStyle = key;
+
+                values.forEach((d) => {
+                    if (d.width <= 1) {
+                        ctx.fillRect(d.x - 0.5, d.y, 1, d.height);
+                    } else {
+                        ctx.fillRect(d.x + 0.5, d.y + 0.5, d.width, d.height);
+                        if (strokeStyle !== undefined) {
+                            ctx.strokeRect(d.x, d.y, d.width, d.height);
+                        }
+                    }
+                });
+            });
+        }
+    };
+
+    private readonly getBars = (moreProps: {
+        chartConfig: any;
+        xAccessor: (data: any) => number | Date;
+        xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+        plotData: any[];
+    }) => {
+        const { baseAt, fillStyle, width, yAccessor } = this.props;
+
+        const {
+            xScale,
+            xAccessor,
+            plotData,
+            chartConfig: { yScale },
+        } = moreProps;
+
+        const getFill = functor(fillStyle);
+        const getBase = functor(baseAt);
+        const getWidth = functor(width);
+
+        const barWidth = getWidth(this.props, {
+            xScale,
+            xAccessor,
+            plotData,
+        });
+
+        const offset = 0.5 * barWidth;
+
+        return plotData
+            .map((d) => {
+                const yValue = yAccessor(d);
+                if (yValue === undefined) {
+                    return undefined;
+                }
+
+                const xValue = xAccessor(d);
+                const x = xScale(xValue) - offset;
+
+                let y = yScale(yValue);
+
+                let h = getBase(xScale, yScale, d) - yScale(yValue);
+                if (h < 0) {
+                    y = y + h;
+                    h = -h;
+                }
+
+                return {
+                    x,
+                    y: Math.round(y),
+                    height: Math.round(h),
+                    width: offset * 2,
+                    fillStyle: getFill(d),
+                };
+            })
+            .filter((d) => d !== undefined) as IBar[];
+    };
+}

package/src/BollingerSeries.tsx

@@ -0,0 +1,90 @@
+import { ScaleContinuousNumeric } from "d3-scale";
+import * as React from "react";
+import { AreaOnlySeries } from "./AreaOnlySeries";
+import { LineSeries } from "./LineSeries";
+
+export interface BollingerSeriesProps {
+    readonly areaClassName?: string;
+    readonly className?: string;
+    readonly fillStyle?: string;
+    readonly strokeStyle?: {
+        top: string;
+        middle: string;
+        bottom: string;
+    };
+    readonly yAccessor?: (data: any) => { bottom: number; middle: number; top: number };
+}
+
+export class BollingerSeries extends React.Component<BollingerSeriesProps> {
+    public static defaultProps = {
+        areaClassName: "react-financial-charts-bollinger-band-series-area",
+        fillStyle: "rgba(38, 166, 153, 0.05)",
+        strokeStyle: {
+            top: "#26a69a",
+            middle: "#812828",
+            bottom: "#26a69a",
+        },
+        yAccessor: (data: any) => data.bb,
+    };
+
+    public render() {
+        const { className, strokeStyle = BollingerSeries.defaultProps.strokeStyle, fillStyle } = this.props;
+
+        return (
+            <g className={className}>
+                <LineSeries yAccessor={this.yAccessorForTop} strokeStyle={strokeStyle.top} />
+                <LineSeries yAccessor={this.yAccessorForMiddle} strokeStyle={strokeStyle.middle} />
+                <LineSeries yAccessor={this.yAccessorForBottom} strokeStyle={strokeStyle.bottom} />
+                <AreaOnlySeries
+                    yAccessor={this.yAccessorForTop}
+                    base={this.yAccessorForScaledBottom}
+                    fillStyle={fillStyle}
+                />
+            </g>
+        );
+    }
+
+    private readonly yAccessorForScaledBottom = (scale: ScaleContinuousNumeric<number, number>, d: any) => {
+        const { yAccessor = BollingerSeries.defaultProps.yAccessor } = this.props;
+
+        const bb = yAccessor(d);
+        if (bb === undefined) {
+            return undefined;
+        }
+
+        return scale(bb.bottom);
+    };
+
+    private readonly yAccessorForBottom = (d: any) => {
+        const { yAccessor = BollingerSeries.defaultProps.yAccessor } = this.props;
+
+        const bb = yAccessor(d);
+        if (bb === undefined) {
+            return undefined;
+        }
+
+        return bb.bottom;
+    };
+
+    private readonly yAccessorForMiddle = (d: any) => {
+        const { yAccessor = BollingerSeries.defaultProps.yAccessor } = this.props;
+
+        const bb = yAccessor(d);
+        if (bb === undefined) {
+            return undefined;
+        }
+
+        return bb.middle;
+    };
+
+    private readonly yAccessorForTop = (d: any) => {
+        const { yAccessor = BollingerSeries.defaultProps.yAccessor } = this.props;
+
+        const bb = yAccessor(d);
+        if (bb === undefined) {
+            return undefined;
+        }
+
+        return bb.top;
+    };
+}

package/src/CandlestickSeries.tsx

@@ -0,0 +1,188 @@
+import { functor, getAxisCanvas, GenericChartComponent, plotDataLengthBarWidth } from "@tradingaction/core";
+import { group } from "d3-array";
+import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
+import * as React from "react";
+
+export interface ICandle {
+    readonly x: number;
+    readonly y: number;
+    readonly height: number;
+    readonly fill: string;
+    readonly stroke: string;
+    readonly direction: number;
+    readonly width: number;
+    readonly wick: {
+        readonly stroke: string;
+        readonly x: number;
+        readonly y1: number;
+        readonly y2: number;
+        readonly y3: number;
+        readonly y4: number;
+    };
+}
+
+export interface CandlestickSeriesProps {
+    readonly candleStrokeWidth?: number;
+    readonly clip?: boolean;
+    readonly fill?: string | ((data: any) => string);
+    readonly stroke?: string | ((data: any) => string);
+    readonly wickStroke?: string | ((data: any) => string);
+    readonly width?: number | ((props: CandlestickSeriesProps, moreProps: any) => number);
+    readonly widthRatio?: number;
+    readonly yAccessor: (data: any) => { open: number; high: number; low: number; close: number } | undefined;
+    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 CandlestickSeries extends React.Component<CandlestickSeriesProps> {
+    public static defaultProps = {
+        candleStrokeWidth: 0.5,
+        clip: true,
+        fill: (d: any) => (d.close > d.open ? "#26a69a" : "#ef5350"),
+        stroke: "none",
+        wickStroke: (d: any) => (d.close > d.open ? "#26a69a" : "#ef5350"),
+        width: plotDataLengthBarWidth,
+        widthRatio: 0.8,
+        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}
+                key={"candle"}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const { candleStrokeWidth = CandlestickSeries.defaultProps.candleStrokeWidth } = this.props;
+        const {
+            xScale,
+            chartConfig: { yScale },
+            plotData,
+            xAccessor,
+        } = moreProps;
+
+        const candleData = this.getCandleData(xAccessor, xScale, yScale, plotData);
+
+        const wickNest = group(candleData, (d) => d.wick.stroke);
+
+        wickNest.forEach((values, key) => {
+            ctx.fillStyle = key;
+            values.forEach((each) => {
+                const d = each.wick;
+
+                ctx.fillRect(d.x - 0.5, d.y1, 1, d.y2 - d.y1);
+                ctx.fillRect(d.x - 0.5, d.y3, 1, d.y4 - d.y3);
+            });
+        });
+
+        const candleNest = group(
+            candleData,
+            (d) => d.stroke,
+            // @ts-ignore typings are incorrect for d3-array
+            (d) => d.fill,
+        );
+
+        candleNest.forEach((strokeValues, strokeKey) => {
+            if (strokeKey !== "none") {
+                // @ts-ignore
+                ctx.strokeStyle = strokeKey;
+                ctx.lineWidth = candleStrokeWidth;
+            }
+            strokeValues.forEach((values, key) => {
+                // @ts-ignore
+                ctx.fillStyle = key;
+
+                // @ts-ignore
+                values.forEach((d) => {
+                    if (d.width <= 1) {
+                        ctx.fillRect(d.x - 0.5, d.y, 1, d.height);
+                    } else if (d.height === 0) {
+                        ctx.fillRect(d.x - 0.5, d.y, d.width, 1);
+                    } else {
+                        ctx.fillRect(d.x - 0.5, d.y, d.width, d.height);
+                        if (strokeKey !== "none") {
+                            ctx.strokeRect(d.x, d.y, d.width, d.height);
+                        }
+                    }
+                });
+            });
+        });
+    };
+
+    private readonly getCandleData = (
+        xAccessor: (data: any) => number | Date,
+        xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+        yScale: ScaleContinuousNumeric<number, number>,
+        plotData: any[],
+    ) => {
+        const { fill: fillProp, stroke: strokeProp, yAccessor, wickStroke: wickStrokeProp } = this.props;
+
+        const fill = functor(fillProp);
+        const stroke = functor(strokeProp);
+        const wickStroke = functor(wickStrokeProp);
+        const widthFunctor = functor(this.props.width);
+        const width = widthFunctor(this.props, {
+            xScale,
+            xAccessor,
+            plotData,
+        });
+
+        const offset = 0.5 * width;
+
+        return plotData
+            .filter((d) => {
+                const ohlc = yAccessor(d);
+                if (ohlc === undefined) {
+                    return false;
+                }
+
+                return true;
+            })
+            .map((d) => {
+                const ohlc = yAccessor(d);
+                if (ohlc === undefined) {
+                    return undefined;
+                }
+
+                const xValue = xAccessor(d);
+                const x = xScale(xValue);
+                const y = Math.round(yScale(Math.max(ohlc.open, ohlc.close)));
+                const height = Math.max(1, Math.round(Math.abs(yScale(ohlc.open) - yScale(ohlc.close))));
+
+                return {
+                    x: x - offset,
+                    y,
+                    wick: {
+                        stroke: wickStroke(ohlc),
+                        x,
+                        y1: Math.round(yScale(ohlc.high)),
+                        y2: y,
+                        y3: y + height,
+                        y4: Math.round(yScale(ohlc.low)),
+                    },
+                    height,
+                    width: offset * 2,
+                    fill: fill(ohlc),
+                    stroke: stroke(ohlc),
+                    direction: ohlc.close - ohlc.open,
+                };
+            })
+            .filter((d) => d !== undefined) as ICandle[];
+    };
+}

package/src/ElderRaySeries.tsx

@@ -0,0 +1,99 @@
+import { strokeDashTypes } from "@tradingaction/core";
+import * as React from "react";
+import { OverlayBarSeries } from "./OverlayBarSeries";
+import { StraightLine } from "./StraightLine";
+
+export interface ElderRaySeriesProps {
+    readonly fillStyle?: {
+        bearPower: string;
+        bullPower: string;
+    };
+    readonly className?: string;
+    readonly clip?: boolean;
+    readonly stroke?: boolean;
+    readonly straightLineStrokeStyle?: string;
+    readonly straightLineStrokeDasharray?: strokeDashTypes;
+    readonly widthRatio?: number;
+    readonly yAccessor: (data: any) => { bearPower: number; bullPower: number };
+}
+
+/**
+ * This indicator consists of three separate indicators
+ * known as "bull power" and "bear power", which are derived from a 13-period
+ * exponential moving average (EMA). The three indicator help traders determine
+ * the trend direction and isolate spots to enter and exit trades.
+ */
+export class ElderRaySeries extends React.Component<ElderRaySeriesProps> {
+    public static defaultProps = {
+        fillStyle: {
+            bearPower: "rgba(239, 83, 80, 0.7)",
+            bullPower: "rgba(38, 166, 153, 0.7)",
+        },
+        className: "react-financial-charts-elderray-series",
+        clip: true,
+        stroke: true,
+        straightLineStrokeStyle: "rgba(0, 0, 0, 0.7)",
+        straightLineStrokeDasharray: "Dash",
+        widthRatio: 0.8,
+    };
+
+    public render() {
+        const { className, clip, stroke, straightLineStrokeStyle, straightLineStrokeDasharray, widthRatio } =
+            this.props;
+
+        return (
+            <g className={className}>
+                <OverlayBarSeries
+                    baseAt={this.yAccessorForBarBase}
+                    stroke={stroke}
+                    fillStyle={this.fillForEachBar}
+                    widthRatio={widthRatio}
+                    clip={clip}
+                    yAccessor={[
+                        this.yAccessorBullTop,
+                        this.yAccessorBearTop,
+                        this.yAccessorBullBottom,
+                        this.yAccessorBearBottom,
+                    ]}
+                />
+                <StraightLine yValue={0} strokeStyle={straightLineStrokeStyle} lineDash={straightLineStrokeDasharray} />
+            </g>
+        );
+    }
+
+    private readonly yAccessorBullTop = (d: any) => {
+        const { yAccessor } = this.props;
+        return yAccessor(d) && (yAccessor(d).bullPower > 0 ? yAccessor(d).bullPower : undefined);
+    };
+
+    private readonly yAccessorBearTop = (d: any) => {
+        const { yAccessor } = this.props;
+        return yAccessor(d) && (yAccessor(d).bearPower > 0 ? yAccessor(d).bearPower : undefined);
+    };
+
+    private readonly yAccessorBullBottom = (d: any) => {
+        const { yAccessor } = this.props;
+        return yAccessor(d) && (yAccessor(d).bullPower < 0 ? 0 : undefined);
+    };
+
+    private readonly yAccessorBearBottom = (d: any) => {
+        const { yAccessor } = this.props;
+        return (
+            yAccessor(d) &&
+            (yAccessor(d).bullPower < 0 || yAccessor(d).bullPower * yAccessor(d).bearPower < 0 // bullPower is +ve and bearPower is -ve
+                ? Math.min(0, yAccessor(d).bullPower)
+                : undefined)
+        );
+    };
+
+    private readonly yAccessorForBarBase = (_: any, yScale: any, d: any) => {
+        const { yAccessor } = this.props;
+        const y = yAccessor(d) && Math.min(yAccessor(d).bearPower, 0);
+        return yScale(y);
+    };
+
+    private readonly fillForEachBar = (_: any, yAccessorNumber: number) => {
+        const { fillStyle } = this.props;
+        return yAccessorNumber % 2 === 0 ? fillStyle!.bullPower : fillStyle!.bearPower;
+    };
+}

package/src/GroupedBarSeries.tsx

@@ -0,0 +1,48 @@
+import { getAxisCanvas, GenericChartComponent } from "@tradingaction/core";
+import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
+import * as React from "react";
+import { drawOnCanvasHelper, identityStack, StackedBarSeries } from "./StackedBarSeries";
+
+export interface GroupedBarSeriesProps {
+    readonly baseAt:
+        | number
+        | ((
+              xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+              yScale: ScaleContinuousNumeric<number, number>,
+              datum: any,
+          ) => number);
+    readonly direction: "up" | "down";
+    readonly fillStyle?: string | ((data: any) => string);
+    readonly spaceBetweenBar?: number;
+    readonly stroke: boolean;
+    readonly widthRatio?: number;
+    readonly yAccessor: ((data: any) => number | undefined) | ((d: any) => number)[];
+}
+
+export class GroupedBarSeries extends React.Component<GroupedBarSeriesProps> {
+    public static defaultProps = {
+        ...StackedBarSeries.defaultProps,
+        spaceBetweenBar: 5,
+        widthRatio: 0.8,
+    };
+
+    public render() {
+        return <GenericChartComponent canvasDraw={this.drawOnCanvas} canvasToDraw={getAxisCanvas} drawOn={["pan"]} />;
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const { xAccessor } = moreProps;
+
+        drawOnCanvasHelper(ctx, this.props, moreProps, xAccessor, identityStack, this.postProcessor);
+    };
+
+    private readonly postProcessor = (array: any[]) => {
+        return array.map((each) => {
+            return {
+                ...each,
+                x: each.x + each.offset - each.groupOffset,
+                width: each.groupWidth,
+            };
+        });
+    };
+}