@react-financial-charts/core - npm Package Compare versions

Comparing version 1.0.0-alpha.10 to 1.0.0-alpha.13

CHANGELOG.md

@@ -6,2 +6,22 @@ # Change Log
 
+# [1.0.0-alpha.13](https://github.com/reactivemarkets/react-financial-charts/compare/v1.0.0-alpha.12...v1.0.0-alpha.13) (2020-09-01)
+
+
+### Bug Fixes
+
+* **core:** correcting xextents props ([ec80146](https://github.com/reactivemarkets/react-financial-charts/commit/ec80146bb171c21fd0daa41ac620b8081d6e6266))
+* fixing scaling when data is discontinuous ([4b20255](https://github.com/reactivemarkets/react-financial-charts/commit/4b20255d05b4590c2a5fc196bf505c95a63431f0))
+* **core:** correcting bar width with continuous scales ([a967a18](https://github.com/reactivemarkets/react-financial-charts/commit/a967a18347be6b8ad11d50da579911c9bd2f97ee))
+* removing canvas gradients ([2205163](https://github.com/reactivemarkets/react-financial-charts/commit/220516356300c6c1c8528de3ca43e7ddaf8e5e66))
+* **core:** displayXAccessor is optional ([d6a5dda](https://github.com/reactivemarkets/react-financial-charts/commit/d6a5dda949c5178a8213cabda23d1178d4ea155a))
+
+
+### Features
+
+* **core:** replaced onLoadMore with onLoadBefore & onLoadAfter ([4957c32](https://github.com/reactivemarkets/react-financial-charts/commit/4957c32314db84131d3b34a8759dcc9ab28770c1))
+
+
+
+
+
 # [1.0.0-alpha.10](https://github.com/reactivemarkets/react-financial-charts/compare/v1.0.0-alpha.9...v1.0.0-alpha.10) (2020-08-28)
@@ -8,0 +28,0 @@

lib/Chart.js

@@ -12,17 +12,19 @@ import { scaleLinear } from "d3-scale";
                 case "contextmenu": {
-                    if (onContextMenu !== undefined) {
-                        const { currentCharts } = moreProps;
-                        if (currentCharts.indexOf(id) > -1) {
-                            onContextMenu(e, moreProps);
-                        }
+                    if (onContextMenu === undefined) {
+                        return;
                     }
+                    const { currentCharts } = moreProps;
+                    if (currentCharts.indexOf(id) > -1) {
+                        onContextMenu(e, moreProps);
+                    }
                     break;
                 }
                 case "dblclick": {
-                    if (onDoubleClick !== undefined) {
-                        const { currentCharts } = moreProps;
-                        if (currentCharts.indexOf(id) > -1) {
-                            onDoubleClick(e, moreProps);
-                        }
+                    if (onDoubleClick === undefined) {
+                        return;
                     }
+                    const { currentCharts } = moreProps;
+                    if (currentCharts.indexOf(id) > -1) {
+                        onDoubleClick(e, moreProps);
+                    }
                     break;
@@ -29,0 +31,0 @@ }

lib/ChartCanvas.d.ts

@@ -5,3 +5,3 @@ import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
 import { IZoomAnchorOptions } from "./zoom/zoomBehavior";
-export interface ChartCanvasProps {
+export interface ChartCanvasProps<TXAxis extends number | Date> {
     readonly clamp?: boolean | ("left" | "right" | "both") | ((domain: [number, number], items: [number, number]) => [number, number]);
@@ -15,3 +15,3 @@ readonly className?: string;
     readonly disableZoom?: boolean;
-    readonly displayXAccessor: any;
+    readonly displayXAccessor?: (data: any) => TXAxis;
     readonly flipXScale?: boolean;
@@ -28,4 +28,17 @@ readonly height: number;
     readonly mouseMoveEvent?: boolean;
-    readonly onLoadMore?: (start: number | Date, end: number | Date) => void;
+    /**
+     * Called when panning left past the first data point.
+     */
+    readonly onLoadAfter?: (start: TXAxis, end: TXAxis) => void;
+    /**
+     * Called when panning right past the last data point.
+     */
+    readonly onLoadBefore?: (start: TXAxis, end: TXAxis) => void;
+    /**
+     * Click event handler.
+     */
     readonly onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * Double click event handler.
+     */
     readonly onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
@@ -45,18 +58,18 @@ readonly padding?: number | {
     readonly width: number;
-    readonly xAccessor: (data: any) => number | Date;
-    readonly xExtents?: any[] | any;
+    readonly xAccessor: (data: any) => TXAxis;
+    readonly xExtents: ((data: any[]) => [TXAxis, TXAxis]) | (((datum: any) => TXAxis) | TXAxis)[];
     readonly xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
     readonly zIndex?: number;
-    readonly zoomAnchor?: (options: IZoomAnchorOptions<any>) => number | Date;
+    readonly zoomAnchor?: (options: IZoomAnchorOptions<any>) => TXAxis;
     readonly zoomMultiplier?: number;
 }
-interface ChartCanvasState {
-    xAccessor?: (data: any) => number | Date;
+interface ChartCanvasState<TXAxis extends number | Date> {
+    xAccessor?: (data: any) => TXAxis;
     displayXAccessor?: any;
     filterData?: any;
     chartConfig?: any;
-    plotData?: any;
+    plotData: any[];
     xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
 }
-export declare class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasState> {
+export declare class ChartCanvas<TXAxis extends number | Date> extends React.Component<ChartCanvasProps<TXAxis>, ChartCanvasState<TXAxis>> {
     static defaultProps: {
@@ -83,3 +96,3 @@ clamp: boolean;
         useCrossHairStyleCursor: boolean;
-        xAccessor: (data: any) => number;
+        xAccessor: (data: any) => any;
         xExtents: any[];
@@ -142,11 +155,11 @@ zIndex: number;
     private hackyWayToStopPanBeyondBounds__domain?;
-    constructor(props: ChartCanvasProps);
+    constructor(props: ChartCanvasProps<TXAxis>);
     getMutableState: () => {};
     getDataInfo: () => {
         fullData: any[];
-        xAccessor?: ((data: any) => number | Date) | undefined;
+        xAccessor?: ((data: any) => TXAxis) | undefined;
         displayXAccessor?: any;
         filterData?: any;
         chartConfig?: any;
-        plotData?: any;
+        plotData: any[];
         xScale: ScaleTime<number, number> | ScaleContinuousNumeric<number, number>;
@@ -221,3 +234,3 @@ };
         fullData: any[];
-        plotData: any;
+        plotData: any[];
         width: number;
@@ -227,3 +240,3 @@ height: number;
         xScale: ScaleTime<number, number> | ScaleContinuousNumeric<number, number>;
-        xAccessor: ((data: any) => number | Date) | undefined;
+        xAccessor: ((data: any) => TXAxis) | undefined;
         displayXAccessor: any;
@@ -248,3 +261,3 @@ margin: {
     };
-    UNSAFE_componentWillReceiveProps(nextProps: ChartCanvasProps): void;
+    UNSAFE_componentWillReceiveProps(nextProps: ChartCanvasProps<TXAxis>): void;
     resetYDomain: (chartId?: string | undefined) => void;
@@ -251,0 +264,0 @@ shouldComponentUpdate(): boolean;

lib/ChartCanvas.js

@@ -94,3 +94,3 @@ var __rest = (this && this.__rest) || function (s, e) {
         xAccessor,
-        displayXAccessor: displayXAccessor || xAccessor,
+        displayXAccessor: displayXAccessor !== null && displayXAccessor !== void 0 ? displayXAccessor : xAccessor,
         xScale: xScale.copy(),
@@ -345,11 +345,19 @@ fullData,
                 const firstItem = head(fullData);
-                const start = head(xScale.domain());
-                const end = xAccessor(firstItem);
-                const { onLoadMore } = this.props;
+                const scale_start = head(xScale.domain());
+                const data_start = xAccessor(firstItem);
+                const lastItem = last(fullData);
+                const scale_end = last(xScale.domain());
+                const data_end = xAccessor(lastItem);
+                const { onLoadAfter, onLoadBefore } = this.props;
                 this.setState(state, () => {
-                    if (start < end) {
-                        if (onLoadMore !== undefined) {
-                            onLoadMore(start, end);
+                    if (scale_start < data_start) {
+                        if (onLoadBefore !== undefined) {
+                            onLoadBefore(scale_start, data_start);
                         }
                     }
+                    if (data_end < scale_end) {
+                        if (onLoadAfter !== undefined) {
+                            onLoadAfter(data_end, scale_end);
+                        }
+                    }
                 });
@@ -382,5 +390,7 @@ }
             const firstItem = head(fullData);
-            const start = head(xScale.domain());
-            const end = xAccessor(firstItem);
-            const { onLoadMore } = this.props;
+            const scale_start = head(xScale.domain());
+            const data_start = xAccessor(firstItem);
+            const lastItem = last(fullData);
+            const scale_end = last(xScale.domain());
+            const data_end = xAccessor(lastItem);
             this.mutableState = {
@@ -400,2 +410,3 @@ mouseXY,
             }, e);
+            const { onLoadAfter, onLoadBefore } = this.props;
             this.setState({
@@ -406,7 +417,12 @@ xScale,
             }, () => {
-                if (start < end) {
-                    if (onLoadMore !== undefined) {
-                        onLoadMore(start, end);
+                if (scale_start < data_start) {
+                    if (onLoadBefore !== undefined) {
+                        onLoadBefore(scale_start, data_start);
                     }
                 }
+                if (data_end < scale_end) {
+                    if (onLoadAfter !== undefined) {
+                        onLoadAfter(data_end, scale_end);
+                    }
+                }
             });
@@ -420,5 +436,8 @@ };
             const firstItem = head(fullData);
-            const start = head(xScale.domain());
-            const end = xAccessor(firstItem);
-            const { onLoadMore } = this.props;
+            const scale_start = head(xScale.domain());
+            const data_start = xAccessor(firstItem);
+            const lastItem = last(fullData);
+            const scale_end = last(xScale.domain());
+            const data_end = xAccessor(lastItem);
+            const { onLoadAfter, onLoadBefore } = this.props;
             this.setState({
@@ -429,7 +448,12 @@ xScale,
             }, () => {
-                if (start < end) {
-                    if (onLoadMore !== undefined) {
-                        onLoadMore(start, end);
+                if (scale_start < data_start) {
+                    if (onLoadBefore !== undefined) {
+                        onLoadBefore(scale_start, data_start);
                     }
                 }
+                if (data_end < scale_end) {
+                    if (onLoadAfter !== undefined) {
+                        onLoadAfter(data_end, scale_end);
+                    }
+                }
             });
@@ -475,2 +499,3 @@ };
                 currentDomain: this.hackyWayToStopPanBeyondBounds__domain,
+                ignoreThresholds: true,
             });
@@ -492,17 +517,16 @@ const updatedScale = initialXScale.copy().domain(domain);
         this.handlePan = (mousePosition, panStartXScale, dxdy, chartsToPan, e) => {
+            var _a, _b;
             if (!this.waitingForPanAnimationFrame) {
                 this.waitingForPanAnimationFrame = true;
-                this.hackyWayToStopPanBeyondBounds__plotData =
-                    this.hackyWayToStopPanBeyondBounds__plotData || this.state.plotData;
-                this.hackyWayToStopPanBeyondBounds__domain =
-                    this.hackyWayToStopPanBeyondBounds__domain || this.state.xScale.domain();
-                const state = this.panHelper(mousePosition, panStartXScale, dxdy, chartsToPan);
-                this.hackyWayToStopPanBeyondBounds__plotData = state.plotData;
-                this.hackyWayToStopPanBeyondBounds__domain = state.xScale.domain();
+                this.hackyWayToStopPanBeyondBounds__plotData = (_a = this.hackyWayToStopPanBeyondBounds__plotData) !== null && _a !== void 0 ? _a : this.state.plotData;
+                this.hackyWayToStopPanBeyondBounds__domain = (_b = this.hackyWayToStopPanBeyondBounds__domain) !== null && _b !== void 0 ? _b : this.state.xScale.domain();
+                const newState = this.panHelper(mousePosition, panStartXScale, dxdy, chartsToPan);
+                this.hackyWayToStopPanBeyondBounds__plotData = newState.plotData;
+                this.hackyWayToStopPanBeyondBounds__domain = newState.xScale.domain();
                 this.panInProgress = true;
-                this.triggerEvent("pan", state, e);
+                this.triggerEvent("pan", newState, e);
                 this.mutableState = {
-                    mouseXY: state.mouseXY,
-                    currentItem: state.currentItem,
-                    currentCharts: state.currentCharts,
+                    mouseXY: newState.mouseXY,
+                    currentItem: newState.currentItem,
+                    currentCharts: newState.currentCharts,
                 };
@@ -527,5 +551,8 @@ requestAnimationFrame(() => {
                 const firstItem = head(fullData);
-                const start = head(xScale.domain());
-                const end = xAccessor(firstItem);
-                const { onLoadMore } = this.props;
+                const scale_start = head(xScale.domain());
+                const data_start = xAccessor(firstItem);
+                const lastItem = last(fullData);
+                const scale_end = last(xScale.domain());
+                const data_end = xAccessor(lastItem);
+                const { onLoadAfter, onLoadBefore } = this.props;
                 this.clearThreeCanvas();
@@ -537,7 +564,12 @@ this.setState({
                 }, () => {
-                    if (start < end) {
-                        if (onLoadMore !== undefined) {
-                            onLoadMore(start, end);
+                    if (scale_start < data_start) {
+                        if (onLoadBefore !== undefined) {
+                            onLoadBefore(scale_start, data_start);
                         }
                     }
+                    if (data_end < scale_end) {
+                        if (onLoadAfter !== undefined) {
+                            onLoadAfter(data_end, scale_end);
+                        }
+                    }
                 });
@@ -544,0 +576,0 @@ });

lib/EventCapture.d.ts

@@ -41,16 +41,16 @@ import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
     readonly onPinchZoom?: (initialPinch: {
-        xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
-        touch1Pos: [number, number];
-        touch2Pos: [number, number];
-        range: number[];
+        readonly xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+        readonly touch1Pos: [number, number];
+        readonly touch2Pos: [number, number];
+        readonly range: number[];
     }, currentPinch: {
-        xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
-        touch1Pos: [number, number];
-        touch2Pos: [number, number];
+        readonly xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+        readonly touch1Pos: [number, number];
+        readonly touch2Pos: [number, number];
     }, e: React.TouchEvent) => void;
     readonly onPinchZoomEnd?: (initialPinch: {
-        xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
-        touch1Pos: [number, number];
-        touch2Pos: [number, number];
-        range: number[];
+        readonly xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+        readonly touch1Pos: [number, number];
+        readonly touch2Pos: [number, number];
+        readonly range: number[];
     }, e: React.TouchEvent) => void;
@@ -57,0 +57,0 @@ readonly onPan?: (mouseXY: number[], panStartXScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>, panOrigin: {

lib/EventCapture.js

@@ -50,3 +50,3 @@ var __rest = (this && this.__rest) || function (s, e) {
         this.handleWheel = (e) => {
-            const { zoom, onZoom } = this.props;
+            const { onPan, zoom, onZoom } = this.props;
             const { panInProgress } = this.state;
@@ -77,4 +77,4 @@ const yZoom = Math.abs(e.deltaY) > Math.abs(e.deltaX) && Math.abs(e.deltaY) > 0;
                     const dxdy = { dx: this.dx, dy: this.dy };
-                    if (this.props.onPan !== undefined) {
-                        this.props.onPan(mouseXY, panStartXScale, dxdy, chartsToPan, e);
+                    if (onPan !== undefined) {
+                        onPan(mouseXY, panStartXScale, dxdy, chartsToPan, e);
                     }
@@ -272,4 +272,5 @@ }
                 this.dy = dy;
-                if (this.props.onPan !== undefined) {
-                    this.props.onPan(mouseXY, panStartXScale, { dx, dy }, chartsToPan, e);
+                const { onPan } = this.props;
+                if (onPan !== undefined) {
+                    onPan(mouseXY, panStartXScale, { dx, dy }, chartsToPan, e);
                 }
@@ -376,3 +377,3 @@ }
             const { chartsToPan } = pinchZoomStart, initialPinch = __rest(pinchZoomStart, ["chartsToPan"]);
-            if (zoomEnabled && onPinchZoom) {
+            if (zoomEnabled && onPinchZoom !== undefined) {
                 onPinchZoom(initialPinch, {
@@ -379,0 +380,0 @@ touch1Pos,

lib/GenericComponent.js

@@ -16,2 +16,3 @@ /* eslint-disable @typescript-eslint/no-unused-vars */
     dragcancel: "drag",
+    zoom: "zoom",
 };
@@ -18,0 +19,0 @@ export class GenericComponent extends React.Component {

lib/utils/barWidth.d.ts

@@ -12,16 +12,5 @@ import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
 }, moreProps: {
+    xAccessor: (datum: T) => number | Date;
     xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
     plotData: T[];
 }) => number;
-/**
- * Generates a width function that calculates the bar width based on the given time interval.
- * @param interval a d3-time time interval.
- * @return {Function} the width function.
- */
-export declare const timeIntervalBarWidth: (interval: any) => <T>(props: {
-    widthRatio: number;
-}, moreProps: {
-    xScale: ScaleContinuousNumeric<number, number>;
-    xAccessor: any;
-    plotData: T[];
-}) => number;

lib/utils/barWidth.js

@@ -1,2 +0,2 @@
-import { head } from ".";
+import { first, last } from ".";
 /**
@@ -11,29 +11,18 @@ * Bar width is based on the amount of items in the plot data and the distance between the first and last of those
     const { widthRatio } = props;
-    const { xScale } = moreProps;
+    const { xAccessor, xScale, plotData } = moreProps;
     const [l, r] = xScale.range();
-    const totalWidth = Math.abs(r - l);
     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;
         }
-        return 1;
+        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;
 };
-/**
- * Generates a width function that calculates the bar width based on the given time interval.
- * @param interval a d3-time time interval.
- * @return {Function} the width function.
- */
-export const timeIntervalBarWidth = (interval) => {
-    return function (props, moreProps) {
-        const { widthRatio } = props;
-        const { xScale, xAccessor, plotData } = moreProps;
-        const first = xAccessor(head(plotData));
-        return Math.abs(xScale(interval.offset(first, 1)) - xScale(first)) * widthRatio;
-    };
-};
 //# sourceMappingURL=barWidth.js.map

lib/utils/ChartDataUtil.js

@@ -129,3 +129,2 @@ import { extent } from "d3-array";
     const allYValues = flattenDeep(yValues);
-    // @ts-ignore
     const realYDomain = yScale.invert ? extent(allYValues) : [...new Set(allYValues).values()];
@@ -132,0 +131,0 @@ return realYDomain;

lib/utils/evaluator.d.ts

 import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
 export default function ({ xScale, useWholeData, clamp, pointsPerPxThreshold, minPointsPerPxThreshold, flipXScale, }: any): {
-    filterData: <T>(data: T[], inputDomain: [number | Date, number | Date], xAccessor: (item: T) => number | Date, initialXScale: ScaleTime<number, number> | ScaleContinuousNumeric<number, number>, { currentPlotData, currentDomain, fallbackStart, fallbackEnd }?: any) => {
+    filterData: <T>(data: T[], inputDomain: [number | Date, number | Date], xAccessor: (item: T) => number | Date, initialXScale: ScaleTime<number, number> | ScaleContinuousNumeric<number, number>, { currentPlotData, currentDomain, fallbackStart, fallbackEnd, ignoreThresholds }?: any) => {
         plotData: T[];
@@ -5,0 +5,0 @@ domain: [number | Date, number | Date];

lib/utils/evaluator.js

 import { max, min } from "d3-array";
-import { getClosestItemIndexes, getLogger, head, isDefined, isNotDefined, last } from "../utils";
-const log = getLogger("evaluator");
+import { getClosestItemIndexes, head, isDefined, isNotDefined, last } from "../utils";
 function getNewEnd(fallbackEnd, xAccessor, initialXScale, start) {
@@ -13,3 +12,3 @@ const { lastItem, lastItemX } = fallbackEnd;
 function extentsWrapper(useWholeData, clamp, pointsPerPxThreshold, minPointsPerPxThreshold, flipXScale) {
-    function filterData(data, inputDomain, xAccessor, initialXScale, { currentPlotData, currentDomain, fallbackStart, fallbackEnd } = {}) {
+    function filterData(data, inputDomain, xAccessor, initialXScale, { currentPlotData, currentDomain, fallbackStart, fallbackEnd, ignoreThresholds = false } = {}) {
         if (useWholeData) {
@@ -52,12 +51,6 @@ return { plotData: data, domain: inputDomain };
         const chartWidth = last(xScale.range()) - head(xScale.range());
-        log(
-        // @ts-ignore
-        `Trying to show ${filteredData.length} points in ${width}px,` +
-            ` I can show up to ${showMaxThreshold(width, pointsPerPxThreshold) - 1} points in that width. ` +
-            `Also FYI the entire chart width is ${chartWidth}px and pointsPerPxThreshold is ${pointsPerPxThreshold}`);
-        if (canShowTheseManyPeriods(width, filteredData.length, pointsPerPxThreshold, minPointsPerPxThreshold)) {
+        if ((ignoreThresholds && filteredData.length > 1) ||
+            canShowTheseManyPeriods(width, filteredData.length, pointsPerPxThreshold, minPointsPerPxThreshold)) {
             plotData = filteredData;
             domain = realInputDomain;
-            // @ts-ignore
-            log("AND IT WORKED");
         }
@@ -69,15 +62,6 @@ else {
                 domain = [head(realInputDomain), newEnd];
-                const newXScale = xScale.copy().domain(domain);
-                const newWidth = Math.floor(newXScale(xAccessor(last(plotData))) - newXScale(xAccessor(head(plotData))));
-                // @ts-ignore
-                log(`and ouch, that is too much, so instead showing ${plotData.length} in ${newWidth}px`);
             }
             else {
-                plotData =
-                    currentPlotData || filteredData.slice(filteredData.length - showMax(width, pointsPerPxThreshold));
-                domain = currentDomain || [xAccessor(head(plotData)), xAccessor(last(plotData))];
-                const newXScale = xScale.copy().domain(domain);
-                const newWidth = Math.floor(newXScale(xAccessor(last(plotData))) - newXScale(xAccessor(head(plotData))));
-                // @ts-ignore
-                log(`and ouch, that is too much, so instead showing ${plotData.length} in ${newWidth}px`);
+                plotData = currentPlotData !== null && currentPlotData !== void 0 ? currentPlotData : filteredData.slice(filteredData.length - showMax(width, pointsPerPxThreshold));
+                domain = currentDomain !== null && currentDomain !== void 0 ? currentDomain : [xAccessor(head(plotData)), xAccessor(last(plotData))];
             }
@@ -90,3 +74,5 @@ }
 function canShowTheseManyPeriods(width, arrayLength, maxThreshold, minThreshold) {
-    return arrayLength > showMinThreshold(width, minThreshold) && arrayLength < showMaxThreshold(width, maxThreshold);
+    const widthAdjustedMinThreshold = showMinThreshold(width, minThreshold);
+    const widthAdjustedMaxTheshold = showMaxThreshold(width, maxThreshold);
+    return arrayLength >= widthAdjustedMinThreshold && arrayLength < widthAdjustedMaxTheshold;
 }
@@ -93,0 +79,0 @@ function showMinThreshold(width, threshold) {

package.json

 {
   "name": "@react-financial-charts/core",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.13",
   "description": "Core code for react-financial-charts",
@@ -53,3 +53,3 @@ "publishConfig": {
   },
-  "gitHead": "94bb3f767c7b97035804edc8dfc4f82defd8d9fc"
+  "gitHead": "58441df036295c078f244f2bcdc42266afb4c42a"
 }

src/utils/barWidth.ts

 import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
-import { head } from ".";
+import { first, last } from ".";
 
@@ -13,14 +13,18 @@ /**
     props: { widthRatio: number },
-    moreProps: { xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>; plotData: T[] },
+    moreProps: {
+        xAccessor: (datum: T) => number | Date;
+        xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+        plotData: T[];
+    },
 ): number => {
     const { widthRatio } = props;
-    const { xScale } = moreProps;
+    const { xAccessor, xScale, plotData } = moreProps;
 
     const [l, r] = xScale.range();
 
-    const totalWidth = Math.abs(r - l);
-
     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);
@@ -31,5 +35,9 @@
 
-        return 1;
+        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;
@@ -39,19 +47,1 @@
 };
-
-/**
- * Generates a width function that calculates the bar width based on the given time interval.
- * @param interval a d3-time time interval.
- * @return {Function} the width function.
- */
-export const timeIntervalBarWidth = (interval: any) => {
-    return function <T>(
-        props: { widthRatio: number },
-        moreProps: { xScale: ScaleContinuousNumeric<number, number>; xAccessor: any; plotData: T[] },
-    ) {
-        const { widthRatio } = props;
-        const { xScale, xAccessor, plotData } = moreProps;
-
-        const first = xAccessor(head(plotData));
-        return Math.abs(xScale(interval.offset(first, 1)) - xScale(first)) * widthRatio;
-    };
-};

src/utils/ChartDataUtil.ts

@@ -171,8 +171,7 @@ import { extent } from "d3-array";
 
-function yDomainFromYExtents(yExtents: any, yScale: any, plotData: any) {
+function yDomainFromYExtents(yExtents: any, yScale: any, plotData: any[]) {
     const yValues = yExtents.map((eachExtent: any) => plotData.map(values(eachExtent)));
 
-    const allYValues = flattenDeep(yValues);
+    const allYValues: number[] = flattenDeep(yValues);
 
-    // @ts-ignore
     const realYDomain = yScale.invert ? extent(allYValues) : [...new Set(allYValues).values()];
@@ -179,0 +178,0 @@

src/utils/evaluator.ts

 import { max, min } from "d3-array";
 import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
-import { getClosestItemIndexes, getLogger, head, isDefined, isNotDefined, last } from "../utils";
+import { getClosestItemIndexes, head, isDefined, isNotDefined, last } from "../utils";
 
-const log = getLogger("evaluator");
-
 function getNewEnd<T, TAccessor extends number | Date>(
@@ -43,3 +41,3 @@ fallbackEnd: { lastItem: T; lastItemX: TAccessor },
         initialXScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
-        { currentPlotData, currentDomain, fallbackStart, fallbackEnd }: any = {},
+        { currentPlotData, currentDomain, fallbackStart, fallbackEnd, ignoreThresholds = false }: any = {},
     ) {
@@ -97,15 +95,8 @@ if (useWholeData) {
 
-        log(
-            // @ts-ignore
-            `Trying to show ${filteredData.length} points in ${width}px,` +
-                ` I can show up to ${showMaxThreshold(width, pointsPerPxThreshold) - 1} points in that width. ` +
-                `Also FYI the entire chart width is ${chartWidth}px and pointsPerPxThreshold is ${pointsPerPxThreshold}`,
-        );
-
-        if (canShowTheseManyPeriods(width, filteredData.length, pointsPerPxThreshold, minPointsPerPxThreshold)) {
+        if (
+            (ignoreThresholds && filteredData.length > 1) ||
+            canShowTheseManyPeriods(width, filteredData.length, pointsPerPxThreshold, minPointsPerPxThreshold)
+        ) {
             plotData = filteredData;
             domain = realInputDomain;
-
-            // @ts-ignore
-            log("AND IT WORKED");
         } else {
@@ -116,28 +107,6 @@ if (chartWidth > showMaxThreshold(width, pointsPerPxThreshold) && isDefined(fallbackEnd)) {
                 domain = [head(realInputDomain), newEnd];
-
-                const newXScale = xScale.copy().domain(domain) as
-                    | ScaleContinuousNumeric<number, number>
-                    | ScaleTime<number, number>;
-
-                const newWidth = Math.floor(
-                    newXScale(xAccessor(last(plotData))) - newXScale(xAccessor(head(plotData))),
-                );
-
-                // @ts-ignore
-                log(`and ouch, that is too much, so instead showing ${plotData.length} in ${newWidth}px`);
             } else {
                 plotData =
-                    currentPlotData || filteredData.slice(filteredData.length - showMax(width, pointsPerPxThreshold));
-                domain = currentDomain || [xAccessor(head(plotData)), xAccessor(last(plotData))];
-
-                const newXScale = xScale.copy().domain(domain) as
-                    | ScaleContinuousNumeric<number, number>
-                    | ScaleTime<number, number>;
-
-                const newWidth = Math.floor(
-                    newXScale(xAccessor(last(plotData))) - newXScale(xAccessor(head(plotData))),
-                );
-
-                // @ts-ignore
-                log(`and ouch, that is too much, so instead showing ${plotData.length} in ${newWidth}px`);
+                    currentPlotData ?? filteredData.slice(filteredData.length - showMax(width, pointsPerPxThreshold));
+                domain = currentDomain ?? [xAccessor(head(plotData)), xAccessor(last(plotData))];
             }
@@ -151,3 +120,5 @@ }
 function canShowTheseManyPeriods(width: number, arrayLength: number, maxThreshold: number, minThreshold: number) {
-    return arrayLength > showMinThreshold(width, minThreshold) && arrayLength < showMaxThreshold(width, maxThreshold);
+    const widthAdjustedMinThreshold = showMinThreshold(width, minThreshold);
+    const widthAdjustedMaxTheshold = showMaxThreshold(width, maxThreshold);
+    return arrayLength >= widthAdjustedMinThreshold && arrayLength < widthAdjustedMaxTheshold;
 }
@@ -154,0 +125,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

424204

increased by0.83%

Lines of code

7818

increased by0.46%

No dependency changes