@tradingaction/series 2.0.15

package/src/VolumeProfileSeries.tsx

@@ -0,0 +1,247 @@
+import { ascending, descending, histogram as d3Histogram, max, merge, rollup, sum, zip } from "d3-array";
+import { scaleLinear } from "d3-scale";
+import * as React from "react";
+import {
+    accumulatingWindow,
+    functor,
+    head,
+    identity,
+    getAxisCanvas,
+    GenericChartComponent,
+    last,
+} from "@tradingaction/core";
+
+export interface VolumeProfileSeriesProps {
+    readonly absoluteChange: (datum: any) => number;
+    readonly bins: number;
+    readonly bySession?: boolean;
+    readonly fill?: (widthType: { type: "up" | "down"; width: number }) => string;
+    readonly maxProfileWidthPercent: number;
+    readonly orient?: "left" | "right";
+    readonly partialStartOK?: boolean;
+    readonly partialEndOK?: boolean;
+    readonly sessionBackGround?: string;
+    readonly sessionStart: ({ d, i, plotData }: any) => boolean;
+    readonly showSessionBackground?: boolean;
+    readonly source: (d: number, i: number, data: ArrayLike<number>) => number;
+    readonly stroke?: string;
+    readonly volume: (datum: any) => number;
+}
+
+export class VolumeProfileSeries extends React.Component<VolumeProfileSeriesProps> {
+    public static defaultProps = {
+        absoluteChange: (d: any) => d.absoluteChange,
+        bins: 20,
+        bySession: false,
+        fill: ({ type }: { type: "up" | "down"; width: number }) =>
+            type === "up" ? "rgba(38, 166, 154, 0.5)" : "rgba(239, 83, 80, 0.5)",
+        maxProfileWidthPercent: 50,
+        orient: "left",
+        partialStartOK: true,
+        partialEndOK: true,
+        sessionBackGround: "rgba(70, 130, 180, 0.3)",
+        sessionStart: ({ d, i, plotData }: any) => i > 0 && plotData[i - 1].date.getMonth() !== d.date.getMonth(),
+        showSessionBackground: false,
+        source: (d: any) => d.close,
+        stroke: "#FFFFFF",
+        volume: (d: any) => d.volume,
+    };
+
+    public render() {
+        return <GenericChartComponent canvasDraw={this.drawOnCanvas} canvasToDraw={getAxisCanvas} drawOn={["pan"]} />;
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const { xAccessor, width } = moreProps;
+
+        const { rects, sessionBg } = this.helper(this.props, moreProps, xAccessor, width);
+
+        this.drawOnCanvasContext(ctx, rects, sessionBg);
+    };
+
+    private readonly drawOnCanvasContext = (ctx: CanvasRenderingContext2D, rects: any[], sessionBg: any[]) => {
+        const { sessionBackGround, showSessionBackground } = this.props;
+
+        if (showSessionBackground) {
+            if (sessionBackGround !== undefined) {
+                ctx.fillStyle = sessionBackGround;
+            }
+
+            sessionBg.forEach((each: any) => {
+                const { x, y, height, width } = each;
+
+                ctx.beginPath();
+                ctx.rect(x, y, width, height);
+                ctx.closePath();
+                ctx.fill();
+            });
+        }
+
+        rects.forEach((each: any) => {
+            const { x, y, height, w1, w2, stroke1, stroke2, fill1, fill2 } = each;
+
+            if (w1 > 0) {
+                ctx.fillStyle = fill1;
+                if (stroke1 !== "none") {
+                    ctx.strokeStyle = stroke1;
+                }
+
+                ctx.beginPath();
+                ctx.rect(x, y, w1, height);
+                ctx.closePath();
+                ctx.fill();
+
+                if (stroke1 !== "none") {
+                    ctx.stroke();
+                }
+            }
+
+            if (w2 > 0) {
+                ctx.fillStyle = fill2;
+                if (stroke2 !== "none") {
+                    ctx.strokeStyle = stroke2;
+                }
+
+                ctx.beginPath();
+                ctx.rect(x + w1, y, w2, height);
+                ctx.closePath();
+                ctx.fill();
+
+                if (stroke2 !== "none") {
+                    ctx.stroke();
+                }
+            }
+        });
+    };
+
+    private readonly helper = (props: VolumeProfileSeriesProps, moreProps: any, xAccessor: any, width: number) => {
+        const {
+            xScale: realXScale,
+            chartConfig: { yScale },
+            plotData,
+        } = moreProps;
+
+        const {
+            sessionStart,
+            bySession,
+            partialStartOK,
+            partialEndOK,
+            bins,
+            maxProfileWidthPercent,
+            source,
+            volume,
+            absoluteChange,
+            orient,
+            fill,
+            stroke,
+        } = props;
+
+        const sessionBuilder = accumulatingWindow()
+            .discardTillStart(!partialStartOK)
+            .discardTillEnd(!partialEndOK)
+            .accumulateTill((d: any, i: any) => {
+                return sessionStart({ d, i, ...moreProps });
+            })
+            .accumulator(identity);
+
+        const dx = plotData.length > 1 ? realXScale(xAccessor(plotData[1])) - realXScale(xAccessor(head(plotData))) : 0;
+
+        const sessions = bySession ? sessionBuilder(plotData) : [plotData];
+
+        const allRects = sessions.map((session: any) => {
+            const begin = bySession ? realXScale(xAccessor(head(session))) : 0;
+            const finish = bySession ? realXScale(xAccessor(last(session))) : width;
+            const sessionWidth = finish - begin + dx;
+
+            const histogram2 = d3Histogram().value(source).thresholds(bins);
+
+            const rolledup = (data: any[]) => {
+                const sortFunction = orient === "right" ? descending : ascending;
+
+                const sortedData = data.sort((a, b) => sortFunction(a.direction, b.direction));
+
+                return rollup(
+                    sortedData,
+                    (leaves) => sum<any>(leaves, (d) => d.volume),
+                    (d) => d.direction,
+                );
+            };
+
+            const values = histogram2(session);
+
+            const volumeInBins = values
+                .map((arr) =>
+                    arr.map((d) => {
+                        return absoluteChange(d) > 0
+                            ? { direction: "up", volume: volume(d) }
+                            : { direction: "down", volume: volume(d) };
+                    }),
+                )
+                .map((arr) => Array.from(rolledup(arr)));
+
+            const volumeValues = volumeInBins.map((each) => sum(each.map((d) => d[1])));
+
+            const base = (xScaleD: any) => head(xScaleD.range());
+
+            const [start, end] =
+                orient === "right"
+                    ? [begin, begin + (sessionWidth * maxProfileWidthPercent) / 100]
+                    : [finish, finish - (sessionWidth * (100 - maxProfileWidthPercent)) / 100];
+
+            const xScale = scaleLinear()
+                .domain([0, max(volumeValues)!])
+                .range([start, end]);
+
+            const totalVolumes = volumeInBins.map((volumes) => {
+                const totalVolume = sum<any>(volumes, (d) => d[1]);
+                const totalVolumeX = xScale(totalVolume);
+                const widthLocal = base(xScale) - totalVolumeX;
+                const x = widthLocal < 0 ? totalVolumeX + widthLocal : totalVolumeX;
+
+                const ws = volumes.map((d) => {
+                    return {
+                        type: d[0],
+                        width: (d[1] * Math.abs(widthLocal)) / totalVolume,
+                    };
+                });
+
+                return { x, ws, totalVolumeX };
+            });
+
+            // @ts-ignore
+            const rects = zip(values, totalVolumes)
+                // @ts-ignore
+                .map(([d, { x, ws }]) => {
+                    const w1 = ws[0] || { type: "up", width: 0 };
+                    const w2 = ws[1] || { type: "down", width: 0 };
+
+                    return {
+                        y: yScale(d.x1),
+                        height: yScale(d.x1) - yScale(d.x0),
+                        x,
+                        width,
+                        w1: w1.width,
+                        w2: w2.width,
+                        stroke1: functor(stroke)(w1),
+                        stroke2: functor(stroke)(w2),
+                        fill1: functor(fill)(w1),
+                        fill2: functor(fill)(w2),
+                    };
+                });
+
+            const sessionBg = {
+                x: begin,
+                y: last(rects).y,
+                height: head(rects).y - last(rects).y + head(rects).height,
+                width: sessionWidth,
+            };
+
+            return { rects, sessionBg };
+        });
+
+        return {
+            rects: merge<any>(allRects.map((d: any) => d.rects)),
+            sessionBg: allRects.map((d: any) => d.sessionBg),
+        };
+    };
+}

package/src/index.ts

@@ -0,0 +1,23 @@
+export * from "./AlternateDataSeries";
+export * from "./AlternatingFillAreaSeries";
+export * from "./AreaOnlySeries";
+export * from "./AreaSeries";
+export * from "./markers";
+export * from "./LineSeries";
+export * from "./CandlestickSeries";
+export * from "./OHLCSeries";
+export * from "./BarSeries";
+export { StackedBarSeries, StackedBarSeriesProps } from "./StackedBarSeries";
+export * from "./GroupedBarSeries";
+export * from "./KagiSeries";
+export * from "./PointAndFigureSeries";
+export * from "./RenkoSeries";
+export * from "./MACDSeries";
+export * from "./BollingerSeries";
+export * from "./RSISeries";
+export * from "./StochasticSeries";
+export * from "./ElderRaySeries";
+export * from "./VolumeProfileSeries";
+export * from "./ScatterSeries";
+export * from "./StraightLine";
+export * from "./SARSeries";

package/src/markers/CircleMarker.tsx

@@ -0,0 +1,69 @@
+import { functor } from "@tradingaction/core";
+import * as React from "react";
+
+export interface CircleMarkerProps {
+    readonly className?: string;
+    readonly fillStyle?: string;
+    readonly point: {
+        x: number;
+        y: number;
+        datum: any;
+    };
+    readonly r: number | ((datum: any) => number);
+    readonly strokeStyle?: string;
+    readonly strokeWidth?: number;
+}
+
+export class CircleMarker extends React.Component<CircleMarkerProps> {
+    public static defaultProps = {
+        fillStyle: "#4682B4",
+        className: "react-financial-charts-marker-circle",
+    };
+
+    public static drawOnCanvas = (
+        props: CircleMarkerProps,
+        point: { x: number; y: number; datum: unknown },
+        ctx: CanvasRenderingContext2D,
+    ) => {
+        const { strokeStyle, fillStyle, r, strokeWidth } = props;
+
+        if (strokeStyle !== undefined) {
+            ctx.strokeStyle = strokeStyle;
+        }
+        if (strokeWidth !== undefined) {
+            ctx.lineWidth = strokeWidth;
+        }
+        if (fillStyle !== undefined) {
+            ctx.fillStyle = fillStyle;
+        }
+
+        const { datum, x, y } = point;
+
+        const radius = functor(r)(datum);
+
+        ctx.moveTo(x, y);
+        ctx.beginPath();
+        ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+        ctx.fill();
+        if (strokeStyle !== undefined) {
+            ctx.stroke();
+        }
+    };
+
+    public render() {
+        const { className, strokeStyle, strokeWidth, fillStyle, point, r } = this.props;
+        const radius = functor(r)(point.datum);
+
+        return (
+            <circle
+                className={className}
+                cx={point.x}
+                cy={point.y}
+                stroke={strokeStyle}
+                strokeWidth={strokeWidth}
+                fill={fillStyle}
+                r={radius}
+            />
+        );
+    }
+}

package/src/markers/SquareMarker.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { functor } from "@tradingaction/core";
+
+export interface SquareProps {
+    readonly className?: string;
+    readonly fillStyle?: string;
+    readonly point: {
+        x: number;
+        y: number;
+        datum: any;
+    };
+    readonly strokeStyle?: string;
+    readonly strokeWidth?: number;
+    readonly width: number | ((datum: any) => number);
+}
+
+export class Square extends React.Component<SquareProps> {
+    public static defaultProps = {
+        fillStyle: "#4682B4",
+        className: "react-financial-charts-marker-rect",
+    };
+
+    public static drawOnCanvas = (
+        props: SquareProps,
+        point: { x: number; y: number; datum: unknown },
+        ctx: CanvasRenderingContext2D,
+    ) => {
+        const { strokeStyle, fillStyle, strokeWidth, width } = props;
+
+        if (strokeStyle !== undefined) {
+            ctx.strokeStyle = strokeStyle;
+        }
+        if (strokeWidth !== undefined) {
+            ctx.lineWidth = strokeWidth;
+        }
+        if (fillStyle !== undefined) {
+            ctx.fillStyle = fillStyle;
+        }
+
+        const w = functor(width)(point.datum);
+        const x = point.x - w / 2;
+        const y = point.y - w / 2;
+        ctx.beginPath();
+        ctx.rect(x, y, w, w);
+        ctx.fill();
+
+        if (strokeStyle !== undefined) {
+            ctx.stroke();
+        }
+    };
+
+    public render() {
+        const { className, strokeStyle, strokeWidth, fillStyle, point, width } = this.props;
+        const w = functor(width)(point.datum);
+        const x = point.x - w / 2;
+        const y = point.y - w / 2;
+
+        return (
+            <rect
+                className={className}
+                x={x}
+                y={y}
+                stroke={strokeStyle}
+                strokeWidth={strokeWidth}
+                fill={fillStyle}
+                width={w}
+                height={w}
+            />
+        );
+    }
+}

package/src/markers/TriangleMarker.tsx

@@ -0,0 +1,131 @@
+import * as React from "react";
+import { functor } from "@tradingaction/core";
+
+export interface TriangleProps {
+    readonly className?: string;
+    readonly direction?: "top" | "bottom" | "left" | "right" | "hide" | ((datum: any) => any);
+    readonly fillStyle?: string | ((datum: any) => string);
+    readonly point: {
+        x: number;
+        y: number;
+        datum: any;
+    };
+    readonly strokeStyle?: string | ((datum: any) => string);
+    readonly strokeWidth?: number;
+    readonly width?: number | ((datum: any) => number);
+}
+
+export class Triangle extends React.Component<TriangleProps> {
+    public static defaultProps = {
+        direction: "top",
+        fillStyle: "#4682B4",
+        className: "react-financial-charts-marker-triangle",
+    };
+
+    public static drawOnCanvas = (
+        props: TriangleProps,
+        point: { x: number; y: number; datum: unknown },
+        ctx: CanvasRenderingContext2D,
+    ) => {
+        const { fillStyle, strokeStyle, strokeWidth, width } = props;
+
+        if (strokeStyle !== undefined) {
+            ctx.strokeStyle = functor(strokeStyle)(point.datum);
+        }
+        if (strokeWidth !== undefined) {
+            ctx.lineWidth = strokeWidth;
+        }
+        if (fillStyle !== undefined) {
+            ctx.fillStyle = functor(fillStyle)(point.datum);
+        }
+
+        const w = functor(width)(point.datum);
+        const { x, y } = point;
+        const { innerOpposite, innerHypotenuse } = getTrianglePoints(w);
+        const rotationDeg = getRotationInDegrees(props, point);
+
+        ctx.beginPath();
+        ctx.moveTo(x, y - innerHypotenuse);
+        ctx.lineTo(x + w / 2, y + innerOpposite);
+        ctx.lineTo(x - w / 2, y + innerOpposite);
+
+        // TODO: rotation does not work
+        // example: https://gist.github.com/geoffb/6392450
+        if (rotationDeg !== null && rotationDeg !== 0) {
+            ctx.save();
+            ctx.translate(x, y);
+            ctx.rotate((rotationDeg * Math.PI) / 180); // 45 degrees
+            ctx.fill();
+            ctx.restore();
+        }
+        ctx.fill();
+
+        if (strokeStyle !== undefined) {
+            ctx.stroke();
+        }
+    };
+
+    public render() {
+        const { className, fillStyle, strokeStyle, strokeWidth, point, width } = this.props;
+
+        const rotation = getRotationInDegrees(this.props, point);
+        if (rotation == null) {
+            return null;
+        }
+
+        const fillColor = functor(fillStyle)(point.datum);
+        const strokeColor = functor(strokeStyle)(point.datum);
+
+        const w = functor(width)(point.datum);
+        const { x, y } = point;
+        const { innerOpposite, innerHypotenuse } = getTrianglePoints(w);
+        const points = `
+		${x} ${y - innerHypotenuse},
+		${x + w / 2} ${y + innerOpposite},
+		${x - w / 2} ${y + innerOpposite}
+	    `;
+
+        return (
+            <polygon
+                className={className}
+                points={points}
+                stroke={strokeColor}
+                strokeWidth={strokeWidth}
+                fill={fillColor}
+                transform={rotation !== 0 ? `rotate(${rotation}, ${x}, ${y})` : undefined}
+            />
+        );
+    }
+}
+
+const getTrianglePoints = (width: number) => {
+    const innerHypotenuse = (width / 2) * (1 / Math.cos((30 * Math.PI) / 180));
+    const innerOpposite = (width / 2) * (1 / Math.tan((60 * Math.PI) / 180));
+    return {
+        innerOpposite,
+        innerHypotenuse,
+    };
+};
+
+const getRotationInDegrees = (props: TriangleProps, point: any) => {
+    const { direction = Triangle.defaultProps.direction } = props;
+
+    const directionVal = functor(direction)(point.datum);
+    if (directionVal === "hide") {
+        return null;
+    }
+
+    let rotate = 0;
+    switch (directionVal) {
+        case "bottom":
+            rotate = 180;
+            break;
+        case "left":
+            rotate = -90;
+            break;
+        case "right":
+            rotate = 90;
+            break;
+    }
+    return rotate;
+};

package/src/markers/index.ts

@@ -0,0 +1,3 @@
+export * from "./CircleMarker";
+export * from "./SquareMarker";
+export * from "./TriangleMarker";