@tradingaction/series 2.0.13

package/src/KagiSeries.tsx

@@ -0,0 +1,155 @@
+import * as React from "react";
+import { isDefined, isNotDefined, getAxisCanvas, GenericChartComponent } from "@tradingaction/core";
+
+export interface KagiSeriesProps {
+    /**
+     * Current value stroke
+     */
+    readonly currentValueStroke?: string;
+    /**
+     * Fill values.
+     */
+    readonly fill: {
+        yang: string;
+        yin: string;
+    };
+    /**
+     * Stroke values.
+     */
+    readonly stroke: {
+        yang: string;
+        yin: string;
+    };
+    /**
+     * Stroke width.
+     */
+    readonly strokeWidth?: number;
+}
+
+/**
+ * `KagiSeries` tracks price movement mostly independantly of time.
+ */
+export class KagiSeries extends React.Component<KagiSeriesProps> {
+    public static defaultProps = {
+        currentValueStroke: "#000000",
+        fill: {
+            yang: "none",
+            yin: "none",
+        },
+        stroke: {
+            yang: "#26a69a",
+            yin: "#ef5350",
+        },
+        strokeWidth: 2,
+    };
+
+    public render() {
+        return <GenericChartComponent canvasToDraw={getAxisCanvas} canvasDraw={this.drawOnCanvas} drawOn={["pan"]} />;
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const { stroke, strokeWidth, currentValueStroke } = this.props;
+        const {
+            xAccessor,
+            xScale,
+            chartConfig: { yScale },
+            plotData,
+        } = moreProps;
+
+        const paths = this.helper(plotData, xAccessor);
+
+        let begin = true;
+
+        paths.forEach((each) => {
+            // @ts-ignore
+            ctx.strokeStyle = stroke[each.type];
+            if (strokeWidth !== undefined) {
+                ctx.lineWidth = strokeWidth;
+            }
+
+            ctx.beginPath();
+            let prevX: any;
+            each.plot.forEach((d: any) => {
+                const [x1, y] = [xScale(d[0]), yScale(d[1])];
+                if (begin) {
+                    ctx.moveTo(x1, y);
+                    begin = false;
+                } else {
+                    if (isDefined(prevX)) {
+                        ctx.lineTo(prevX, y);
+                    }
+                    ctx.lineTo(x1, y);
+                }
+                prevX = x1;
+            });
+            ctx.stroke();
+        });
+
+        const lastPlot = paths[paths.length - 1].plot;
+        const last = lastPlot[lastPlot.length - 1];
+        ctx.beginPath();
+        ctx.lineWidth = 1;
+
+        const [x, y1, y2] = [xScale(last[0]), yScale(last[2]), yScale(last[3])];
+        ctx.moveTo(x, y1);
+        ctx.lineTo(x + 10, y1);
+        ctx.stroke();
+
+        ctx.beginPath();
+        if (currentValueStroke !== undefined) {
+            ctx.strokeStyle = currentValueStroke;
+        }
+        ctx.moveTo(x - 10, y2);
+        ctx.lineTo(x, y2);
+        ctx.stroke();
+    };
+
+    private readonly helper = (plotData: any[], xAccessor: any) => {
+        const kagiLine: any[] = [];
+        let kagi: {
+            added?: boolean;
+            plot?: any;
+            type?: any;
+        } = {};
+        let d = plotData[0];
+        let idx = xAccessor(d);
+
+        // tslint:disable-next-line: prefer-for-of
+        for (let i = 0; i < plotData.length; i++) {
+            d = plotData[i];
+
+            if (isNotDefined(d.close)) {
+                continue;
+            }
+            if (isNotDefined(kagi.type)) {
+                kagi.type = d.startAs;
+            }
+            if (isNotDefined(kagi.plot)) {
+                kagi.plot = [];
+            }
+
+            idx = xAccessor(d);
+            kagi.plot.push([idx, d.open]);
+
+            if (isDefined(d.changeTo)) {
+                kagi.plot.push([idx, d.changePoint]);
+                kagi.added = true;
+                kagiLine.push(kagi);
+
+                kagi = {
+                    type: d.changeTo,
+                    plot: [],
+                    added: false,
+                };
+                kagi.plot.push([idx, d.changePoint]);
+            }
+        }
+
+        if (!kagi.added) {
+            kagi.plot.push([idx, d.close, d.current, d.reverseAt]);
+            kagiLine.push(kagi);
+        }
+
+        return kagiLine;
+    };
+}

package/src/LineSeries.tsx

@@ -0,0 +1,223 @@
+import {
+    getClosestItemIndexes,
+    getStrokeDasharrayCanvas,
+    strokeDashTypes,
+    getAxisCanvas,
+    getMouseCanvas,
+    GenericChartComponent,
+    MoreProps,
+} from "@tradingaction/core";
+import { line, CurveFactoryLineOnly, CurveFactory } from "d3-shape";
+import * as React from "react";
+
+export interface LineSeriesProps {
+    readonly canvasClip?: (context: CanvasRenderingContext2D, moreProps: any) => void;
+    /**
+     * Wether to connect the line between undefined data points.
+     */
+    readonly connectNulls?: boolean;
+    /**
+     * A factory for a curve generator for the line.
+     */
+    readonly curve?: CurveFactory | CurveFactoryLineOnly;
+    /**
+     * Function to decide if a data point has been defined.
+     */
+    readonly defined?: (d: number | undefined) => boolean;
+    /**
+     * Whether to highlight the line when within the `hoverTolerance`.
+     */
+    readonly highlightOnHover?: boolean;
+    /**
+     * Width to increase the line to on hover.
+     */
+    readonly hoverStrokeWidth?: number;
+    /**
+     * The distance between the cursor and the closest point in the line.
+     */
+    readonly hoverTolerance?: number;
+    /**
+     * Click handler.
+     */
+    readonly onClick?: (e: React.MouseEvent, moreProps: any) => void;
+    /**
+     * Double click handler.
+     */
+    readonly onDoubleClick?: (e: React.MouseEvent, moreProps: any) => void;
+    /**
+     * Hover handler.
+     */
+    readonly onHover?: (e: React.MouseEvent, moreProps: any) => void;
+    /**
+     * Unhover handler.
+     */
+    readonly onUnHover?: (e: React.MouseEvent, moreProps: any) => void;
+    /**
+     * Context menu handler.
+     */
+    readonly onContextMenu?: (e: React.MouseEvent, moreProps: any) => void;
+    /**
+     * 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;
+}
+
+/**
+ * `LineSeries` component.
+ */
+export class LineSeries extends React.Component<LineSeriesProps> {
+    public static defaultProps = {
+        connectNulls: false,
+        defined: (d: number | undefined) => d !== undefined && !isNaN(d),
+        hoverStrokeWidth: 4,
+        hoverTolerance: 6,
+        highlightOnHover: false,
+        strokeDasharray: "Solid",
+        strokeStyle: "#2196f3",
+        strokeWidth: 1,
+    };
+
+    public render() {
+        const { highlightOnHover, onClick, onContextMenu, onDoubleClick, onHover, onUnHover, strokeDasharray } =
+            this.props;
+
+        const hoverProps =
+            highlightOnHover || onHover || onUnHover
+                ? {
+                      isHover: this.isHover,
+                      drawOn: ["mousemove", "pan"],
+                      canvasToDraw: getMouseCanvas,
+                  }
+                : {
+                      drawOn: ["pan"],
+                      canvasToDraw: getAxisCanvas,
+                  };
+
+        const lineDash = getStrokeDasharrayCanvas(strokeDasharray);
+
+        return (
+            <GenericChartComponent
+                canvasDraw={this.drawOnCanvas(lineDash)}
+                onClickWhenHover={onClick}
+                onDoubleClickWhenHover={onDoubleClick}
+                onContextMenuWhenHover={onContextMenu}
+                onHover={onHover}
+                onUnHover={onUnHover}
+                {...hoverProps}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (lineDash?: number[]) => (ctx: CanvasRenderingContext2D, moreProps: MoreProps) => {
+        const {
+            connectNulls,
+            yAccessor,
+            hoverStrokeWidth = LineSeries.defaultProps.hoverStrokeWidth,
+            defined = LineSeries.defaultProps.defined,
+            curve,
+            canvasClip,
+            strokeStyle,
+            strokeWidth = LineSeries.defaultProps.strokeWidth,
+        } = this.props;
+
+        const { xAccessor, xScale, chartConfig, plotData, hovering } = moreProps;
+        if (!chartConfig) {
+            console.warn("LineSeries received no chartConfig, is it inside of a Chart?");
+            return;
+        }
+        const { yScale } = chartConfig;
+
+        if (canvasClip !== undefined) {
+            ctx.save();
+            canvasClip(ctx, moreProps);
+        }
+
+        ctx.lineWidth = hovering ? hoverStrokeWidth : strokeWidth;
+
+        if (strokeStyle !== undefined) {
+            ctx.strokeStyle = strokeStyle;
+        }
+
+        if (lineDash !== undefined) {
+            ctx.setLineDash(lineDash);
+        }
+
+        const dataSeries = line()
+            .x((d) => Math.round(xScale(xAccessor(d))))
+            .y((d) => Math.round(yScale(yAccessor(d)!)));
+
+        if (curve !== undefined) {
+            dataSeries.curve(curve);
+        }
+
+        if (!connectNulls) {
+            dataSeries.defined((d) => defined(yAccessor(d)));
+        }
+
+        ctx.beginPath();
+        dataSeries.context(ctx)(plotData);
+        ctx.stroke();
+
+        if (canvasClip !== undefined) {
+            ctx.restore();
+        }
+    };
+
+    private readonly isHover = (moreProps: any) => {
+        const { highlightOnHover, yAccessor, hoverTolerance = LineSeries.defaultProps.hoverTolerance } = this.props;
+        if (!highlightOnHover) {
+            return false;
+        }
+
+        const {
+            chartConfig: { yScale, origin },
+            xAccessor,
+            mouseXY,
+            currentItem,
+            xScale,
+            plotData,
+        } = moreProps;
+
+        const [x, y] = mouseXY;
+        const radius = hoverTolerance;
+
+        const { left, right } = getClosestItemIndexes(plotData, xScale.invert(x), xAccessor);
+        if (left === right) {
+            const cy = yScale(yAccessor(currentItem)) + origin[1];
+            const cx = xScale(xAccessor(currentItem)) + origin[0];
+
+            const hovering1 = Math.pow(x - cx, 2) + Math.pow(y - cy, 2) < Math.pow(radius, 2);
+
+            return hovering1;
+        } else {
+            const l = plotData[left];
+            const r = plotData[right];
+            const x1 = xScale(xAccessor(l)) + origin[0];
+            const y1 = yScale(yAccessor(l)) + origin[1];
+            const x2 = xScale(xAccessor(r)) + origin[0];
+            const y2 = yScale(yAccessor(r)) + origin[1];
+
+            // y = m * x + b
+            const m /* slope */ = (y2 - y1) / (x2 - x1);
+            const b /* y intercept */ = -1 * m * x1 + y1;
+
+            const desiredY = Math.round(m * x + b);
+
+            const hovering2 = y >= desiredY - radius && y <= desiredY + radius;
+
+            return hovering2;
+        }
+    };
+}

package/src/MACDSeries.tsx

@@ -0,0 +1,110 @@
+import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
+import * as React from "react";
+import { BarSeries } from "./BarSeries";
+import { LineSeries } from "./LineSeries";
+import { StraightLine } from "./StraightLine";
+
+export interface MACDSeriesProps {
+    readonly className?: string;
+    readonly clip?: boolean;
+    readonly fillStyle?: {
+        divergence: string;
+    };
+    readonly strokeStyle?: {
+        macd: string;
+        signal: string;
+        zero: string;
+    };
+    readonly widthRatio?: number;
+    readonly width?: number | ((props: { widthRatio: number }, moreProps: any) => number);
+    readonly yAccessor: (data: any) => { divergence: number; signal: number; macd: number } | undefined;
+    readonly zeroLineStroke?: string;
+    readonly zeroLineOpacity?: number;
+}
+
+/**
+ * The MACD turns two trend-following indicators, moving averages, into a momentum oscillator by subtracting the longer moving average from the shorter one.
+ */
+export class MACDSeries extends React.Component<MACDSeriesProps> {
+    public static defaultProps = {
+        className: "react-financial-charts-macd-series",
+        clip: true,
+        fillStyle: {
+            divergence: "rgba(70, 130, 180, 0.6)",
+        },
+        strokeStyle: {
+            macd: "#0093FF",
+            signal: "#D84315",
+            zero: "rgba(0, 0, 0, 0.3)",
+        },
+        widthRatio: 0.5,
+        width: BarSeries.defaultProps.width,
+    };
+
+    public render() {
+        const {
+            className,
+            clip,
+            fillStyle = MACDSeries.defaultProps.fillStyle,
+            strokeStyle = MACDSeries.defaultProps.strokeStyle,
+            widthRatio,
+            width,
+        } = this.props;
+
+        return (
+            <g className={className}>
+                <BarSeries
+                    baseAt={this.yAccessorForDivergenceBase}
+                    width={width}
+                    widthRatio={widthRatio}
+                    fillStyle={fillStyle.divergence}
+                    clip={clip}
+                    yAccessor={this.yAccessorForDivergence}
+                />
+                <LineSeries yAccessor={this.yAccessorForMACD} strokeStyle={strokeStyle.macd} />
+                <LineSeries yAccessor={this.yAccessorForSignal} strokeStyle={strokeStyle.signal} />
+                <StraightLine strokeStyle={strokeStyle.zero} yValue={0} />
+            </g>
+        );
+    }
+
+    private readonly yAccessorForDivergenceBase = (
+        xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+        yScale: ScaleContinuousNumeric<number, number>,
+    ) => {
+        return yScale(0);
+    };
+
+    private readonly yAccessorForDivergence = (d: any) => {
+        const { yAccessor } = this.props;
+
+        const dataItem = yAccessor(d);
+        if (dataItem !== undefined) {
+            return dataItem.divergence;
+        }
+
+        return undefined;
+    };
+
+    private readonly yAccessorForSignal = (d: any) => {
+        const { yAccessor } = this.props;
+
+        const dataItem = yAccessor(d);
+        if (dataItem !== undefined) {
+            return dataItem.signal;
+        }
+
+        return undefined;
+    };
+
+    private readonly yAccessorForMACD = (d: any) => {
+        const { yAccessor } = this.props;
+
+        const dataItem = yAccessor(d);
+        if (dataItem !== undefined) {
+            return dataItem.macd;
+        }
+
+        return undefined;
+    };
+}

package/src/OHLCSeries.tsx

@@ -0,0 +1,116 @@
+import { group } from "d3-array";
+import * as React from "react";
+import { functor, isDefined, getAxisCanvas, GenericChartComponent } from "@tradingaction/core";
+
+interface IOHLC {
+    readonly close?: number;
+    readonly high?: number;
+    readonly low?: number;
+    readonly open?: number;
+}
+
+export interface OHLCSeriesProps {
+    readonly clip?: boolean;
+    readonly stroke?: string | ((datum: any) => string);
+    readonly strokeWidth?: number;
+    readonly yAccessor: (datum: any) => IOHLC;
+}
+
+export class OHLCSeries extends React.Component<OHLCSeriesProps> {
+    public static defaultProps = {
+        yAccessor: (d: any) => ({ open: d.open, high: d.high, low: d.low, close: d.close }),
+        classNames: (d: any) => (isDefined(d.absoluteChange) ? (d.absoluteChange > 0 ? "up" : "down") : "firstbar"),
+        stroke: (d: any) => (isDefined(d.absoluteChange) ? (d.absoluteChange > 0 ? "#26a69a" : "#ef5350") : "#000000"),
+        strokeWidth: 1,
+        clip: true,
+    };
+
+    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 {
+            xAccessor,
+            xScale,
+            chartConfig: { yScale },
+            plotData,
+        } = moreProps;
+
+        const barData = this.getOHLCBars(this.props, xAccessor, xScale, yScale, plotData);
+
+        this.drawBarDataOnCanvas(ctx, barData);
+    };
+
+    private readonly getOHLCBars = (
+        props: OHLCSeriesProps,
+        xAccessor: any,
+        xScale: any,
+        yScale: any,
+        plotData: any,
+    ) => {
+        const { stroke: strokeProp, strokeWidth: strokeWidthProp = 1, yAccessor } = props;
+
+        const strokeFunc = functor(strokeProp);
+
+        const width = xScale(xAccessor(plotData[plotData.length - 1])) - xScale(xAccessor(plotData[0]));
+
+        const barWidth = Math.max(1, Math.round(width / (plotData.length - 1) / 2) - 1.5);
+
+        const strokeWidth = Math.min(barWidth, strokeWidthProp);
+
+        const bars = plotData
+            .filter((d: any) => yAccessor(d).close !== undefined)
+            .map((d: any) => {
+                const ohlc = yAccessor(d);
+                const x = Math.round(xScale(xAccessor(d)));
+                const y1 = yScale(ohlc.high);
+                const y2 = yScale(ohlc.low);
+                const openX1 = x - barWidth;
+                const openX2 = x + strokeWidth / 2;
+                const openY = yScale(ohlc.open);
+                const closeX1 = x - strokeWidth / 2;
+                const closeX2 = x + barWidth;
+                const closeY = yScale(ohlc.close);
+                const stroke = strokeFunc(d);
+
+                return { x, y1, y2, openX1, openX2, openY, closeX1, closeX2, closeY, stroke };
+            });
+
+        return { barWidth, strokeWidth, bars };
+    };
+
+    private readonly drawBarDataOnCanvas = (ctx: CanvasRenderingContext2D, barData: any) => {
+        const { strokeWidth, bars } = barData;
+
+        const wickNest = group(bars, (d: any) => d.stroke);
+
+        ctx.lineWidth = strokeWidth;
+
+        wickNest.forEach((values, key) => {
+            ctx.strokeStyle = key;
+            values.forEach((d) => {
+                ctx.beginPath();
+                ctx.moveTo(d.x, d.y1);
+                ctx.lineTo(d.x, d.y2);
+
+                ctx.moveTo(d.openX1, d.openY);
+                ctx.lineTo(d.openX2, d.openY);
+
+                ctx.moveTo(d.closeX1, d.closeY);
+                ctx.lineTo(d.closeX2, d.closeY);
+
+                ctx.stroke();
+            });
+        });
+    };
+}