@tradingaction/core 2.0.0

package/src/utils/ChartDataUtil.ts

@@ -0,0 +1,297 @@
+import { extent } from "d3-array";
+import { ScaleContinuousNumeric, scaleLinear, ScaleTime } from "d3-scale";
+import flattenDeep from "lodash.flattendeep";
+import * as React from "react";
+import type { ChartProps } from "../Chart";
+
+import { functor, getClosestItem, isNotDefined, isObject, last, mapObject, shallowEqual, zipper } from "./index";
+
+export interface ChartConfig {
+    id: number | string;
+    // readonly origin: number[] | ((width: number, height: number) => number[]);
+    readonly origin: number[];
+    readonly padding: number | { top: number; bottom: number };
+    readonly originalYExtentsProp?: number[] | ((data: any) => number) | ((data: any) => number[]);
+    readonly yExtents?: number[] | ((data: any) => number) | ((data: any) => number[]);
+    readonly yExtentsCalculator?: (options: {
+        plotData: any[];
+        xDomain: any;
+        xAccessor: any;
+        displayXAccessor: any;
+        fullData: any[];
+    }) => number[];
+    readonly flipYScale?: boolean;
+    readonly yScale: ScaleContinuousNumeric<number, number>;
+    readonly yPan: boolean;
+    readonly yPanEnabled: boolean;
+    readonly realYDomain?: number[];
+    readonly width: number;
+    readonly height: number;
+    mouseCoordinates?: { at: string; format: () => unknown };
+}
+
+export const ChartDefaultConfig = {
+    flipYScale: false,
+    id: 0,
+    origin: [0, 0],
+    padding: 0,
+    yPan: true,
+    yPanEnabled: false,
+    yScale: scaleLinear(),
+};
+
+export function getChartOrigin(origin: any, contextWidth: number, contextHeight: number) {
+    const originCoordinates = typeof origin === "function" ? origin(contextWidth, contextHeight) : origin;
+
+    return originCoordinates;
+}
+
+export function getDimensions({ width, height }: any, chartProps: any) {
+    const chartHeight = chartProps.height || height;
+
+    return {
+        availableHeight: height,
+        width,
+        height: chartHeight,
+    };
+}
+
+function values(func: any) {
+    return (d: any) => {
+        const obj = func(d);
+        if (isObject(obj)) {
+            return mapObject(obj);
+        }
+        return obj;
+    };
+}
+
+function isArraySize2AndNumber(yExtentsProp: any): yExtentsProp is [number, number] {
+    if (Array.isArray(yExtentsProp) && yExtentsProp.length === 2) {
+        const [a, b] = yExtentsProp;
+        return typeof a === "number" && typeof b === "number";
+    }
+
+    return false;
+}
+
+const isChartProps = (props: ChartProps | any | undefined): props is ChartProps => {
+    if (props === undefined) {
+        return false;
+    }
+
+    const chartProps = props as ChartProps;
+    if (chartProps.id === undefined) {
+        return false;
+    }
+
+    return true;
+};
+
+export function getNewChartConfig(innerDimension: any, children: any, existingChartConfig: ChartConfig[] = []) {
+    return React.Children.map(children, (each): ChartConfig | undefined => {
+        if (!each || !isChartProps(each.props)) {
+            return undefined;
+        }
+        const chartProps = {
+            ...ChartDefaultConfig,
+            ...(each.props as ChartProps),
+        };
+
+        const {
+            id,
+            origin,
+            padding,
+            yExtents: yExtentsProp,
+            yScale: yScaleProp = ChartDefaultConfig.yScale,
+            flipYScale,
+            yExtentsCalculator,
+        } = chartProps;
+
+        const yScale = yScaleProp.copy();
+        const { width, height, availableHeight } = getDimensions(innerDimension, chartProps);
+
+        const { yPan } = chartProps;
+        let { yPanEnabled } = chartProps;
+        const yExtents = yExtentsProp
+            ? (Array.isArray(yExtentsProp) ? yExtentsProp : [yExtentsProp]).map(functor)
+            : undefined;
+
+        const prevChartConfig = existingChartConfig.find((d) => d.id === id);
+
+        if (isArraySize2AndNumber(yExtentsProp)) {
+            if (
+                !!prevChartConfig &&
+                prevChartConfig.yPan &&
+                prevChartConfig.yPanEnabled &&
+                yPan &&
+                yPanEnabled &&
+                shallowEqual(prevChartConfig.originalYExtentsProp, yExtentsProp)
+            ) {
+                yScale.domain(prevChartConfig.yScale.domain());
+            } else {
+                const [a, b] = yExtentsProp;
+                yScale.domain([a, b]);
+            }
+        } else if (!!prevChartConfig && prevChartConfig.yPanEnabled) {
+            if (isArraySize2AndNumber(prevChartConfig.originalYExtentsProp)) {
+                // do nothing
+            } else {
+                yScale.domain(prevChartConfig.yScale.domain());
+                yPanEnabled = true;
+            }
+        }
+
+        return {
+            id,
+            origin: functor(origin)(width, availableHeight),
+            padding,
+            originalYExtentsProp: yExtentsProp,
+            yExtents,
+            yExtentsCalculator,
+            flipYScale,
+            yScale,
+            yPan,
+            yPanEnabled,
+            width,
+            height,
+        };
+    }).filter((each: any) => each !== undefined);
+}
+
+export function getCurrentCharts(chartConfig: ChartConfig[], mouseXY: number[]) {
+    const currentCharts = chartConfig
+        .filter((eachConfig) => {
+            const top = eachConfig.origin[1];
+            const bottom = top + eachConfig.height;
+            return mouseXY[1] > top && mouseXY[1] < bottom;
+        })
+        .map((config: any) => config.id);
+
+    return currentCharts;
+}
+
+function setRange(scale: any, height: number, padding: any, flipYScale: any) {
+    if (scale.rangeRoundPoints || isNotDefined(scale.invert)) {
+        if (isNaN(padding)) {
+            throw new Error("padding has to be a number for ordinal scale");
+        }
+        if (scale.rangeRoundPoints) {
+            scale.rangeRoundPoints(flipYScale ? [0, height] : [height, 0], padding);
+        }
+        if (scale.rangeRound) {
+            scale.range(flipYScale ? [0, height] : [height, 0]).padding(padding);
+        }
+    } else {
+        const { top, bottom } = isNaN(padding) ? padding : { top: padding, bottom: padding };
+
+        scale.range(flipYScale ? [top, height - bottom] : [height - bottom, top]);
+    }
+    return scale;
+}
+
+function yDomainFromYExtents(yExtents: any, yScale: any, plotData: any[]) {
+    const yValues = yExtents.map((eachExtent: any) => plotData.map(values(eachExtent)));
+
+    const allYValues: number[] = flattenDeep(yValues);
+
+    const realYDomain = yScale.invert ? (extent(allYValues) as [number, number]) : [...new Set(allYValues).values()];
+
+    return realYDomain;
+}
+
+export function getChartConfigWithUpdatedYScales(
+    chartConfig: ChartConfig[],
+    { plotData, xAccessor, displayXAccessor, fullData }: any,
+    xDomain: any,
+    dy?: number,
+    chartsToPan?: (string | number)[],
+): ChartConfig[] {
+    const yDomains = chartConfig.map(({ yExtentsCalculator, yExtents, yScale }) => {
+        const realYDomain = yExtentsCalculator
+            ? yExtentsCalculator({ plotData, xDomain, xAccessor, displayXAccessor, fullData })
+            : yDomainFromYExtents(yExtents, yScale, plotData);
+
+        const yDomainDY =
+            dy !== undefined
+                ? yScale
+                      .range()
+                      .map((each: any) => each - dy)
+                      .map(yScale.invert)
+                : yScale.domain();
+        return {
+            realYDomain,
+            yDomainDY,
+            prevYDomain: yScale.domain(),
+        };
+    });
+
+    const combine = zipper().combine(
+        (config: ChartConfig, { realYDomain, yDomainDY, prevYDomain }: (typeof yDomains)[number]): ChartConfig => {
+            const { id, padding, height, yScale, yPan, flipYScale, yPanEnabled = false } = config;
+
+            const another = chartsToPan !== undefined ? chartsToPan.indexOf(id) > -1 : true;
+            const domain = yPan && yPanEnabled ? (another ? yDomainDY : prevYDomain) : realYDomain;
+
+            const newYScale = setRange(yScale.copy().domain(domain), height, padding, flipYScale);
+
+            return {
+                ...config,
+                yScale: newYScale,
+                realYDomain,
+            };
+        },
+    );
+
+    const updatedChartConfig = combine(chartConfig, yDomains) as ChartConfig[];
+
+    return updatedChartConfig;
+}
+
+export function getCurrentItem(
+    xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+    xAccessor: any,
+    mouseXY: number[],
+    plotData: any[],
+) {
+    let xValue: number | Date;
+    let item: any;
+    if (xScale.invert) {
+        xValue = xScale.invert(mouseXY[0]);
+        item = getClosestItem(plotData, xValue, xAccessor);
+    } else {
+        const dr = xScale
+            .range()
+            .map((d, idx) => ({ x: Math.abs(d - mouseXY[0]), idx }))
+            .reduce((a, b) => (a.x < b.x ? a : b));
+
+        item = dr !== undefined ? plotData[dr.idx] : plotData[0];
+    }
+    return item;
+}
+
+export function getXValue(
+    xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+    xAccessor: any,
+    mouseXY: number[],
+    plotData: any[],
+) {
+    let xValue: number | Date;
+    let item: any;
+    if (xScale.invert) {
+        xValue = xScale.invert(mouseXY[0]);
+        if (xValue > xAccessor(last(plotData))) {
+            return Math.round(xValue.valueOf());
+        } else {
+            item = getClosestItem(plotData, xValue, xAccessor);
+        }
+    } else {
+        const dr = xScale
+            .range()
+            .map((d, idx) => ({ x: Math.abs(d - mouseXY[0]), idx }))
+            .reduce((a, b) => (a.x < b.x ? a : b));
+
+        item = dr !== undefined ? plotData[dr.idx] : plotData[0];
+    }
+    return xAccessor(item);
+}

package/src/utils/PureComponent.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { shallowEqual } from "./shallowEqual";
+
+export class PureComponent<T, S = {}, SS = any> extends React.Component<T, S, SS> {
+    public shouldComponentUpdate(nextProps: T, nextState: S, nextContext: SS) {
+        return (
+            !shallowEqual(this.props, nextProps) ||
+            !shallowEqual(this.state, nextState) ||
+            !shallowEqual(this.context, nextContext)
+        );
+    }
+}

package/src/utils/accumulatingWindow.ts

@@ -0,0 +1,118 @@
+/*
+
+Taken from https://github.com/ScottLogic/d3fc/blob/master/src/indicator/algorithm/calculator/slidingWindow.js
+
+The MIT License (MIT)
+
+Copyright (c) 2014-2015 Scott Logic Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+*/
+
+import { identity } from "./identity";
+import { functor } from "./index";
+import { noop } from "./noop";
+
+interface AccumulatingWindow {
+    (data: any[]): any[];
+    accumulateTill(): any;
+    accumulateTill(x: any): AccumulatingWindow;
+    accumulator(): any;
+    accumulator(x: any): AccumulatingWindow;
+    value(): any;
+    value(x: any): AccumulatingWindow;
+    discardTillStart(): boolean;
+    discardTillStart(x: boolean): AccumulatingWindow;
+    discardTillEnd(): boolean;
+    discardTillEnd(x: boolean): AccumulatingWindow;
+}
+
+export default function () {
+    let accumulateTill = functor(false);
+    let accumulator = noop;
+    let value = identity;
+    let discardTillStart = false;
+    let discardTillEnd = false;
+
+    const accumulatingWindow = function (data: any[]) {
+        let accumulatedWindow: any[] | undefined = discardTillStart ? undefined : [];
+        const response: any[] = [];
+        let accumulatorIdx = 0;
+        let i = 0;
+        for (i = 0; i < data.length; i++) {
+            const d = data[i];
+            if (accumulateTill(d, i, accumulatedWindow || [])) {
+                if (accumulatedWindow && accumulatedWindow.length > 0) {
+                    // @ts-ignore
+                    response.push(accumulator(accumulatedWindow, i, accumulatorIdx++));
+                }
+
+                accumulatedWindow = [value(d)];
+            } else if (accumulatedWindow) {
+                accumulatedWindow.push(value(d));
+            }
+        }
+
+        if (!discardTillEnd) {
+            // @ts-ignore
+            response.push(accumulator(accumulatedWindow, i, accumulatorIdx));
+        }
+
+        return response;
+    };
+
+    accumulatingWindow.accumulateTill = function (x: any) {
+        if (!arguments.length) {
+            return accumulateTill;
+        }
+        accumulateTill = functor(x);
+        return accumulatingWindow;
+    };
+    accumulatingWindow.accumulator = function (x: any) {
+        if (!arguments.length) {
+            return accumulator;
+        }
+        accumulator = x;
+        return accumulatingWindow;
+    };
+    accumulatingWindow.value = function (x: any) {
+        if (!arguments.length) {
+            return value;
+        }
+        value = x;
+        return accumulatingWindow;
+    };
+    accumulatingWindow.discardTillStart = function (x: any) {
+        if (!arguments.length) {
+            return discardTillStart;
+        }
+        discardTillStart = x;
+        return accumulatingWindow;
+    };
+    accumulatingWindow.discardTillEnd = function (x: any) {
+        if (!arguments.length) {
+            return discardTillEnd;
+        }
+        discardTillEnd = x;
+        return accumulatingWindow;
+    };
+
+    return accumulatingWindow as AccumulatingWindow;
+}

package/src/utils/barWidth.ts

@@ -0,0 +1,44 @@
+import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
+import { first, last } from ".";
+
+/**
+ * Bar width is based on the amount of items in the plot data and the distance between the first and last of those
+ * items.
+ * @param props the props passed to the series.
+ * @param moreProps an object holding the xScale, xAccessor and plotData.
+ * @return {number} the bar width.
+ */
+export const plotDataLengthBarWidth = <T>(
+    props: { widthRatio: number },
+    moreProps: {
+        xAccessor: (datum: T) => number | Date;
+        xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+        plotData: T[];
+    },
+): number => {
+    const { widthRatio } = props;
+    const { xAccessor, xScale, plotData } = moreProps;
+
+    const [l, r] = xScale.range();
+
+    if (xScale.invert != null) {
+        const [dl, dr] = xScale.domain();
+        if (typeof dl === "number" && typeof dr === "number") {
+            const totalWidth = Math.abs(r - l);
+
+            const width = totalWidth / Math.abs(dl - dr);
+
+            return width * widthRatio;
+        }
+
+        const width = xScale(xAccessor(last(plotData))) - xScale(xAccessor(first(plotData)));
+
+        return (width / plotData.length) * widthRatio * 0.7;
+    }
+
+    const totalWidth = Math.abs(r - l);
+
+    const width = totalWidth / xScale.domain().length;
+
+    return width * widthRatio;
+};

package/src/utils/closestItem.ts

@@ -0,0 +1,60 @@
+export const getClosestItemIndexes = <T, TAccessor extends number | Date>(
+    array: T[],
+    value: TAccessor,
+    accessor: (item: T) => TAccessor,
+) => {
+    let lo = 0;
+    let hi = array.length - 1;
+    while (hi - lo > 1) {
+        const mid = Math.round((lo + hi) / 2);
+        const itemAtMid = array[mid];
+        const valueAtMid = accessor(itemAtMid);
+        if (valueAtMid <= value) {
+            lo = mid;
+        } else {
+            hi = mid;
+        }
+    }
+
+    const lowItemValue = accessor(array[lo]);
+    const highItemValue = accessor(array[hi]);
+
+    // for Date object === does not work, so using the <= in combination with >=
+    // the same code works for both dates and numbers
+    if (lowItemValue?.valueOf() === value?.valueOf()) {
+        hi = lo;
+    }
+    if (highItemValue?.valueOf() === value?.valueOf()) {
+        lo = hi;
+    }
+
+    if (lowItemValue < value && highItemValue < value) {
+        lo = hi;
+    }
+    if (lowItemValue > value && highItemValue > value) {
+        hi = lo;
+    }
+
+    return { left: lo, right: hi };
+};
+
+export const getClosestItem = <T, TAccessor extends number | Date>(
+    array: T[],
+    value: TAccessor,
+    accessor: (item: T) => TAccessor,
+) => {
+    const { left, right } = getClosestItemIndexes(array, value, accessor);
+    if (left === right) {
+        return array[left];
+    }
+
+    const leftItem = accessor(array[left]);
+    const rightItem = accessor(array[right]);
+
+    const closest =
+        Math.abs(leftItem.valueOf() - value.valueOf()) < Math.abs(rightItem.valueOf() - value.valueOf())
+            ? array[left]
+            : array[right];
+
+    return closest;
+};

package/src/utils/evaluator.ts

@@ -0,0 +1,163 @@
+import { max, min } from "d3-array";
+import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
+import { getClosestItemIndexes, head, isDefined, isNotDefined, last } from "../utils";
+
+function getNewEnd<T, TAccessor extends number | Date>(
+    fallbackEnd: { lastItem: T; lastItemX: TAccessor },
+    xAccessor: (item: T) => TAccessor,
+    initialXScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+    start: any,
+) {
+    const { lastItem, lastItemX } = fallbackEnd;
+
+    const lastItemXValue = xAccessor(lastItem);
+
+    const [rangeStart, rangeEnd] = initialXScale.range();
+
+    const newEnd =
+        ((rangeEnd - rangeStart) / (lastItemX.valueOf() - rangeStart)) * (lastItemXValue.valueOf() - start.valueOf()) +
+        start.valueOf();
+
+    return newEnd;
+}
+
+function extentsWrapper<TDomain extends number | Date>(
+    useWholeData: boolean,
+    clamp:
+        | boolean
+        | "left"
+        | "right"
+        | "both"
+        | ((domain: [TDomain, TDomain], headTail: [TDomain, TDomain]) => [TDomain, TDomain]),
+    pointsPerPxThreshold: number,
+    minPointsPerPxThreshold: number,
+    flipXScale: boolean,
+) {
+    function filterData<T>(
+        data: T[],
+        inputDomain: [TDomain, TDomain],
+        xAccessor: (item: T) => TDomain,
+        initialXScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+        { currentPlotData, currentDomain, fallbackStart, fallbackEnd, ignoreThresholds = false }: any = {},
+    ) {
+        if (useWholeData) {
+            return { plotData: data, domain: inputDomain };
+        }
+
+        let left: TDomain = head(inputDomain);
+        let right: TDomain = last(inputDomain);
+        let clampedDomain = inputDomain;
+
+        let filteredData = getFilteredResponse(data, left, right, xAccessor);
+        if (filteredData.length === 1 && fallbackStart !== undefined) {
+            left = fallbackStart;
+            right = getNewEnd(fallbackEnd, xAccessor, initialXScale, left);
+
+            clampedDomain = [left, right];
+            filteredData = getFilteredResponse(data, left, right, xAccessor);
+        }
+
+        if (typeof clamp === "function") {
+            clampedDomain = clamp(clampedDomain, [xAccessor(head(data)), xAccessor(last(data))]);
+        } else {
+            if (clamp === "left" || clamp === "both" || clamp === true) {
+                clampedDomain = [max([left, xAccessor(head(data))])!, clampedDomain[1]];
+            }
+
+            if (clamp === "right" || clamp === "both" || clamp === true) {
+                clampedDomain = [clampedDomain[0], min([right, xAccessor(last(data))])!];
+            }
+        }
+
+        if (clampedDomain !== inputDomain) {
+            filteredData = getFilteredResponse(data, clampedDomain[0], clampedDomain[1], xAccessor);
+        }
+
+        const realInputDomain = clampedDomain;
+
+        const xScale = initialXScale.copy().domain(realInputDomain) as
+            | ScaleContinuousNumeric<number, number>
+            | ScaleTime<number, number>;
+
+        let width = Math.floor(xScale(xAccessor(last(filteredData))) - xScale(xAccessor(head(filteredData))));
+
+        // prevent negative width when flipXScale
+        if (flipXScale && width < 0) {
+            width = width * -1;
+        }
+
+        let plotData: T[];
+        let domain: [number | Date, number | Date];
+
+        const chartWidth = last(xScale.range()) - head(xScale.range());
+
+        if (
+            (ignoreThresholds && filteredData.length > 1) ||
+            canShowTheseManyPeriods(width, filteredData.length, pointsPerPxThreshold, minPointsPerPxThreshold)
+        ) {
+            plotData = filteredData;
+            domain = realInputDomain;
+        } else {
+            if (chartWidth > showMaxThreshold(width, pointsPerPxThreshold) && isDefined(fallbackEnd)) {
+                plotData = filteredData;
+                const newEnd = getNewEnd(fallbackEnd, xAccessor, initialXScale, head(realInputDomain));
+                domain = [head(realInputDomain), newEnd];
+            } else {
+                plotData =
+                    currentPlotData ?? filteredData.slice(filteredData.length - showMax(width, pointsPerPxThreshold));
+                domain = currentDomain ?? [xAccessor(head(plotData)), xAccessor(last(plotData))];
+            }
+        }
+        return { plotData, domain };
+    }
+    return { filterData };
+}
+
+function canShowTheseManyPeriods(width: number, arrayLength: number, maxThreshold: number, minThreshold: number) {
+    const widthAdjustedMinThreshold = showMinThreshold(width, minThreshold);
+    const widthAdjustedMaxTheshold = showMaxThreshold(width, maxThreshold);
+    return arrayLength >= widthAdjustedMinThreshold && arrayLength < widthAdjustedMaxTheshold;
+}
+
+function showMinThreshold(width: number, threshold: number) {
+    return Math.max(1, Math.ceil(width * threshold));
+}
+
+function showMaxThreshold(width: number, threshold: number) {
+    return Math.floor(width * threshold);
+}
+
+function showMax(width: number, threshold: number) {
+    return Math.floor(showMaxThreshold(width, threshold) * 0.97);
+}
+
+function getFilteredResponse<T, TAccessor extends number | Date>(
+    data: T[],
+    left: TAccessor,
+    right: TAccessor,
+    xAccessor: (item: T) => TAccessor,
+) {
+    const newLeftIndex = getClosestItemIndexes(data, left, xAccessor).left;
+    const newRightIndex = getClosestItemIndexes(data, right, xAccessor).right;
+
+    const filteredData = data.slice(newLeftIndex, newRightIndex + 1);
+
+    return filteredData;
+}
+
+export default function ({
+    xScale,
+    useWholeData,
+    clamp,
+    pointsPerPxThreshold,
+    minPointsPerPxThreshold,
+    flipXScale,
+}: any) {
+    return extentsWrapper(
+        useWholeData || isNotDefined(xScale.invert),
+        clamp,
+        pointsPerPxThreshold,
+        minPointsPerPxThreshold,
+        flipXScale,
+    );
+}

package/src/utils/identity.ts

@@ -0,0 +1 @@
+export const identity = (d: any) => d;