@tradingaction/series 2.0.15

package/src/ScatterSeries.tsx

@@ -0,0 +1,105 @@
+import { functor, getAxisCanvas, GenericChartComponent } from "@tradingaction/core";
+import { group } from "d3-array";
+import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
+import * as React from "react";
+
+export interface ScatterSeriesProps {
+    /**
+     * A Marker to draw.
+     */
+    readonly marker?: any;
+    /**
+     * Given the data point return a Marker.
+     */
+    readonly markerProvider?: (datum: any) => any;
+    /**
+     * Props to pass to the marker.
+     */
+    readonly markerProps?: object;
+    /**
+     * Accessor for y value.
+     */
+    readonly yAccessor: (data: any) => number | undefined;
+}
+
+export class ScatterSeries extends React.Component<ScatterSeriesProps> {
+    public render() {
+        return <GenericChartComponent canvasDraw={this.drawOnCanvas} canvasToDraw={getAxisCanvas} drawOn={["pan"]} />;
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const points = this.getMarkers(moreProps);
+
+        const { markerProps } = this.props;
+
+        const nest = group(
+            points,
+            (d) => d.fillStyle,
+            (d) => d.strokeStyle,
+        );
+
+        nest.forEach((fillValues, fillKey) => {
+            if (fillKey !== "none") {
+                ctx.fillStyle = fillKey;
+            }
+
+            fillValues.forEach((strokeValues) => {
+                strokeValues.forEach((point) => {
+                    const { marker } = point;
+                    marker.drawOnCanvas({ ...marker.defaultProps, ...markerProps, fillStyle: fillKey }, point, ctx);
+                });
+            });
+        });
+    };
+
+    private readonly getMarkers = (moreProps: {
+        xAccessor: (data: any) => number | Date;
+        xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+        chartConfig: any;
+        plotData: any[];
+    }) => {
+        const { yAccessor, markerProvider, markerProps } = this.props;
+
+        const {
+            xAccessor,
+            xScale,
+            chartConfig: { yScale },
+            plotData,
+        } = moreProps;
+
+        let { marker: Marker } = this.props;
+        if (!(markerProvider || Marker)) {
+            throw new Error("required prop, either marker or markerProvider missing");
+        }
+
+        return plotData
+            .map((d: any) => {
+                const yValue = yAccessor(d);
+                if (yValue === undefined) {
+                    return undefined;
+                }
+
+                const xValue = xAccessor(d);
+
+                if (markerProvider) {
+                    Marker = markerProvider(d);
+                }
+
+                const mProps = { ...Marker.defaultProps, ...markerProps };
+
+                const fill = functor(mProps.fillStyle);
+                const stroke = functor(mProps.strokeStyle);
+
+                return {
+                    x: xScale(xValue),
+                    y: yScale(yValue),
+                    fillStyle: fill(d),
+                    strokeStyle: stroke(d),
+                    datum: d,
+                    marker: Marker,
+                };
+            })
+            .filter((marker) => marker !== undefined)
+            .map((marker) => marker!);
+    };
+}

package/src/StackedBarSeries.tsx

@@ -0,0 +1,272 @@
+import { group, merge } from "d3-array";
+import { ScaleContinuousNumeric } from "d3-scale";
+import { stack as d3Stack } from "d3-shape";
+import * as React from "react";
+import { functor, head, identity, getAxisCanvas, GenericChartComponent, plotDataLengthBarWidth } from "@tradingaction/core";
+
+export interface StackedBarSeriesProps {
+    readonly baseAt?:
+        | number
+        | ((
+              xScale: ScaleContinuousNumeric<number, number>,
+              yScale: ScaleContinuousNumeric<number, number>,
+              d: [number, number],
+              moreProps: any,
+          ) => number);
+    readonly clip?: boolean;
+    readonly direction?: "up" | "down";
+    readonly fillStyle?: string | ((data: any, y: number) => string);
+    readonly spaceBetweenBar?: number;
+    readonly stroke?: boolean;
+    readonly swapScales?: boolean;
+    readonly yAccessor: ((data: any) => number | undefined) | ((d: any) => number)[];
+    readonly width?: number | ((props: StackedBarSeriesProps, moreProps: any) => number);
+    readonly widthRatio?: number;
+}
+
+export class StackedBarSeries extends React.Component<StackedBarSeriesProps> {
+    public static defaultProps = {
+        baseAt: (xScale: ScaleContinuousNumeric<number, number>, yScale: ScaleContinuousNumeric<number, number>) =>
+            head(yScale.range()),
+        direction: "up",
+        stroke: false,
+        fillStyle: "rgba(70, 130, 180, 0.5)",
+        width: plotDataLengthBarWidth,
+        widthRatio: 0.8,
+        clip: true,
+        swapScales: false,
+    };
+
+    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 } = moreProps;
+
+        drawOnCanvasHelper(ctx, this.props, moreProps, xAccessor, d3Stack);
+    };
+}
+
+export function identityStack() {
+    let keys: any[] = [];
+    function stack(data: any) {
+        const response = keys.map((key, i) => {
+            const arrays = data.map((d: any) => {
+                const array = [0, d[key]];
+
+                // @ts-ignore
+                array.data = d;
+                return array;
+            });
+            arrays.key = key;
+            arrays.index = i;
+            return arrays;
+        });
+        return response;
+    }
+    stack.keys = function (x: any) {
+        if (!arguments.length) {
+            return keys;
+        }
+        keys = x;
+        return stack;
+    };
+    return stack;
+}
+
+export function drawOnCanvasHelper(
+    ctx: CanvasRenderingContext2D,
+    props: any,
+    moreProps: any,
+    xAccessor: any,
+    stackFn: any,
+    defaultPostAction = identity,
+    postRotateAction = rotateXY,
+) {
+    const {
+        xScale,
+        chartConfig: { yScale },
+        plotData,
+    } = moreProps;
+
+    const bars = doStuff(props, xAccessor, plotData, xScale, yScale, stackFn, postRotateAction, defaultPostAction);
+
+    drawOnCanvas2(props, ctx, bars);
+}
+
+function convertToArray(item: any) {
+    return Array.isArray(item) ? item : [item];
+}
+
+const doStuff = (
+    props: StackedBarSeriesProps,
+    xAccessor: any,
+    plotData: any[],
+    xScale: any,
+    yScale: any,
+    stackFn: any,
+    postRotateAction: any,
+    defaultPostAction: any,
+) => {
+    const { yAccessor, swapScales } = props;
+
+    const modifiedYAccessor = swapScales ? convertToArray(xAccessor) : convertToArray(yAccessor);
+    const modifiedXAccessor = swapScales ? yAccessor : xAccessor;
+
+    const modifiedXScale = swapScales ? yScale : xScale;
+    const modifiedYScale = swapScales ? xScale : yScale;
+
+    const postProcessor = swapScales ? postRotateAction : defaultPostAction;
+
+    const bars = getBars(
+        props,
+        modifiedXAccessor,
+        modifiedYAccessor,
+        modifiedXScale,
+        modifiedYScale,
+        plotData,
+        stackFn,
+        postProcessor,
+    );
+
+    return bars;
+};
+
+export const rotateXY = (array: any[]) =>
+    array.map((each) => {
+        return {
+            ...each,
+            x: each.y,
+            y: each.x,
+            height: each.width,
+            width: each.height,
+        };
+    });
+
+export const drawOnCanvas2 = (props: { stroke?: boolean }, ctx: CanvasRenderingContext2D, bars: any) => {
+    const { stroke } = props;
+
+    const nest = group(bars, (d: any) => d.fillStyle);
+
+    nest.forEach((values, key) => {
+        if (head(values).width > 1) {
+            if (key !== undefined) {
+                ctx.strokeStyle = key;
+            }
+        }
+        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 (stroke) {
+                    ctx.strokeRect(d.x, d.y, d.width, d.height);
+                }
+            }
+        });
+    });
+};
+
+export function getBars(
+    props: StackedBarSeriesProps,
+    xAccessor: any,
+    yAccessor: any,
+    xScale: any,
+    yScale: any,
+    plotData: any[],
+    stack = identityStack,
+    after = identity,
+) {
+    const { baseAt, fillStyle, stroke, spaceBetweenBar = 0 } = props;
+
+    const getFill = functor(fillStyle);
+    const getBase = functor(baseAt);
+
+    const widthFunctor = functor(props.width);
+    const width = widthFunctor(props, {
+        xScale,
+        xAccessor,
+        plotData,
+    });
+
+    const barWidth = Math.round(width);
+
+    const eachBarWidth = (barWidth - spaceBetweenBar * (yAccessor.length - 1)) / yAccessor.length;
+
+    const offset = barWidth === 1 ? 0 : 0.5 * width;
+
+    const ds = plotData.map((each) => {
+        const d = {
+            appearance: {},
+            x: xAccessor(each),
+        };
+        yAccessor.forEach((eachYAccessor: any, i: number) => {
+            const key = `y${i}`;
+            // @ts-ignore
+            d[key] = eachYAccessor(each);
+            const appearance = {
+                stroke: stroke ? getFill(each, i) : "none",
+                fillStyle: getFill(each, i),
+            };
+            // @ts-ignore
+            d.appearance[key] = appearance;
+        });
+        return d;
+    });
+
+    const keys = yAccessor.map((_: any, i: number) => `y${i}`);
+
+    // @ts-ignore
+    const data = stack().keys(keys)(ds);
+
+    const newData = data.map((each: any, i: number) => {
+        const key = each.key;
+        return each.map((d: any) => {
+            const array = [d[0], d[1]];
+
+            // @ts-ignore
+            array.data = {
+                x: d.data.x,
+                i,
+                appearance: d.data.appearance[key],
+            };
+            return array;
+        });
+    });
+
+    const bars = merge<any>(newData)
+        .map((d) => {
+            let y = yScale(d[1]);
+            let h = getBase(xScale, yScale, d.data) - yScale(d[1] - d[0]);
+            if (h < 0) {
+                y = y + h;
+                h = -h;
+            }
+
+            return {
+                ...d.data.appearance,
+                x: Math.round(xScale(d.data.x) - width / 2),
+                y,
+                groupOffset: Math.round(offset - (d.data.i > 0 ? (eachBarWidth + spaceBetweenBar) * d.data.i : 0)),
+                groupWidth: Math.round(eachBarWidth),
+                offset: Math.round(offset),
+                height: h,
+                width: barWidth,
+            };
+        })
+        .filter((bar) => !isNaN(bar.y));
+
+    return after(bars);
+}

package/src/StochasticSeries.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+
+import { LineSeries } from "./LineSeries";
+import { StraightLine } from "./StraightLine";
+
+export interface StochasticSeriesProps {
+    readonly className?: string;
+    readonly overBought?: number;
+    readonly overSold?: number;
+    readonly middle?: number;
+    readonly strokeStyle?: {
+        top: string;
+        middle: string;
+        bottom: string;
+        dLine: string;
+        kLine: string;
+    };
+    readonly yAccessor: (data: any) => { K: number; D: number };
+}
+
+/**
+ * The Stochastic Oscillator is a momentum indicator that shows the location of the close relative to the high-low range over a set number of periods.
+ */
+export class StochasticSeries extends React.Component<StochasticSeriesProps> {
+    public static defaultProps = {
+        className: "react-financial-charts-stochastic-series",
+        strokeStyle: {
+            top: "rgba(150, 75, 0, 0.3)",
+            middle: "rgba(0, 0, 0, 0.3)",
+            bottom: "rgba(150, 75, 0, 0.3)",
+            dLine: "#EA2BFF",
+            kLine: "#74D400",
+        },
+        overSold: 80,
+        middle: 50,
+        overBought: 20,
+    };
+
+    public render() {
+        const {
+            className,
+            strokeStyle = StochasticSeries.defaultProps.strokeStyle,
+            overSold,
+            middle,
+            overBought,
+        } = this.props;
+
+        return (
+            <g className={className}>
+                <LineSeries yAccessor={this.yAccessorForD} strokeStyle={strokeStyle.dLine} />
+                <LineSeries yAccessor={this.yAccessorForK} strokeStyle={strokeStyle.kLine} />
+                <StraightLine strokeStyle={strokeStyle.top} yValue={overSold} />
+                <StraightLine strokeStyle={strokeStyle.middle} yValue={middle} />
+                <StraightLine strokeStyle={strokeStyle.bottom} yValue={overBought} />
+            </g>
+        );
+    }
+
+    private readonly yAccessorForK = (d: any) => {
+        const { yAccessor } = this.props;
+
+        return yAccessor(d) && yAccessor(d).K;
+    };
+
+    private readonly yAccessorForD = (d: any) => {
+        const { yAccessor } = this.props;
+
+        return yAccessor(d) && yAccessor(d).D;
+    };
+}

package/src/StraightLine.tsx

@@ -0,0 +1,166 @@
+import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
+import * as React from "react";
+import { getAxisCanvas, getStrokeDasharrayCanvas, GenericChartComponent, strokeDashTypes } from "@tradingaction/core";
+
+export type TStraightLineXLabelPosition = "bottom" | "top";
+
+export interface StraightLineProps {
+    readonly lineDash?: strokeDashTypes | number[];
+    readonly lineWidth?: number;
+    readonly strokeStyle?: string;
+    readonly type?: "vertical" | "horizontal";
+    readonly yValue?: number;
+    readonly xValue?: number;
+
+    readonly xLabel?: string;
+    readonly xLabelPosition: TStraightLineXLabelPosition;
+    readonly xLabelFont: string; //'12px Arial'
+    readonly xLabelFill: string; //Background color
+    readonly xLabelColor: string; //'xLabel text color'
+    readonly xLabelPadding: number;
+
+    readonly onDoubleClick?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onClickOutside?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onContextMenuWhenHover?: (e: React.MouseEvent, moreProps: any) => void;
+}
+
+export class StraightLine extends React.Component<StraightLineProps> {
+    public static defaultProps = {
+        lineWidth: 1,
+        lineDash: "Solid",
+        strokeStyle: "rgba(0, 0, 0, 0.5)",
+        type: "horizontal",
+
+        xLabel: undefined,
+        xLabelPosition: "bottom",
+        xLabelFont: "12px Arial",
+        xLabelFill: "rgba(0, 0, 0, 0.7)",
+        xLabelColor: "#fff",
+        xLabelPadding: 5,
+    };
+
+    public render() {
+        return (
+            <GenericChartComponent
+                onContextMenu={this.props.onContextMenuWhenHover}
+                onDoubleClick={this.props.onDoubleClick}
+                onClickOutside={this.props.onClickOutside}
+                canvasDraw={this.drawOnCanvas}
+                canvasToDraw={getAxisCanvas}
+                drawOn={["pan", "mousemove", "drag"]}
+            />
+        );
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const {
+            type,
+            strokeStyle,
+            lineWidth,
+            lineDash,
+            yValue,
+            xValue,
+
+            xLabel,
+            xLabelPosition,
+            xLabelFont,
+            xLabelFill,
+            xLabelColor,
+            xLabelPadding,
+        } = this.props;
+
+        const {
+            xScale,
+            chartConfig: { yScale, width, height },
+        } = moreProps;
+
+        ctx.beginPath();
+
+        if (strokeStyle !== undefined) {
+            ctx.strokeStyle = strokeStyle;
+        }
+        if (lineWidth !== undefined) {
+            ctx.lineWidth = lineWidth;
+        }
+        if (lineDash !== undefined) {
+            ctx.setLineDash(typeof lineDash === "string" ? getStrokeDasharrayCanvas(lineDash) : lineDash);
+        }
+
+        const { x1, y1, x2, y2 } = this.getLineCoordinates(type, xScale, yScale, xValue, yValue, width, height);
+
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.stroke();
+
+        // Draw xLabel with background for vertical line at the bottom of the chart
+        // const xLabel = "Hi aman", xLabelFont = '12px Arial'
+        if (type === "vertical" && xLabel) {
+            // Horizontal support is not provided, because <PriceCoordinate /> could be used for left, and right with <StraightLine type="vertical" />
+            ctx.textAlign = "center";
+            ctx.textBaseline = "bottom";
+            ctx.font = xLabelFont || "12px Arial";
+
+            const { rectX, rectY, rectW, rectH, textX, textY } = this.getTextCoordinates(
+                ctx,
+                xLabel,
+                x1,
+                height,
+                xLabelPosition,
+                xLabelPadding,
+            );
+
+            // Set fill style for background
+            ctx.fillStyle = xLabelFill; // Provided or Semi-transparent black background
+            ctx.fillRect(rectX, rectY, rectW, rectH);
+
+            // Set fill style for text
+            ctx.fillStyle = xLabelColor;
+            ctx.fillText(xLabel, textX, textY);
+        }
+    };
+
+    private readonly getLineCoordinates = (
+        type: "horizontal" | "vertical" | undefined,
+        xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+        yScale: ScaleContinuousNumeric<number, number>,
+        xValue: number | undefined,
+        yValue: number | undefined,
+        width: number,
+        height: number,
+    ) => {
+        return type === "horizontal"
+            ? { x1: 0, y1: Math.round(yScale(yValue!)), x2: width, y2: Math.round(yScale(yValue!)) }
+            : { x1: Math.round(xScale(xValue!)), y1: 0, x2: Math.round(xScale(xValue!)), y2: height };
+    };
+
+    private readonly getTextCoordinates = (
+        ctx: CanvasRenderingContext2D,
+        xLabel: string,
+        xPosition: number,
+        chartHeight: number,
+        xLabelPosition: TStraightLineXLabelPosition,
+        xLabelPadding: number,
+    ) => {
+        // Measure text to determine background size
+        const textMetrics = ctx.measureText(xLabel);
+        const textWidth = textMetrics.width;
+        const textHeight = parseInt(ctx.font, 10); // Approximate height from font
+
+        const rectX = xPosition - textWidth / 2 - xLabelPadding;
+        const rectY = xLabelPosition == "bottom" ? chartHeight - textHeight - 2 * xLabelPadding : 0;
+        const rectW = textWidth + 2 * xLabelPadding;
+        const rectH = textHeight + 2 * xLabelPadding;
+
+        const textX = xPosition;
+        const textY = xLabelPosition == "bottom" ? chartHeight - xLabelPadding : textHeight + xLabelPadding + 1;
+
+        return {
+            rectX,
+            rectY,
+            rectW,
+            rectH,
+            textX,
+            textY,
+        };
+    };
+}