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

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

CHANGELOG.md

@@ -6,2 +6,15 @@ # 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
+
+* **series:** correcting props & dealing with undefined data ([99664ba](https://github.com/reactivemarkets/react-financial-charts/commit/99664ba609692aab7b56edb81c0fec31a4922422))
+* **series:** small performance improvments in bar and candles ([98c06ea](https://github.com/reactivemarkets/react-financial-charts/commit/98c06eab5cb9809d7f1cabff131b698c4404339d))
+* removing canvas gradients ([2205163](https://github.com/reactivemarkets/react-financial-charts/commit/220516356300c6c1c8528de3ca43e7ddaf8e5e66))
+
+
+
+
+
 # [1.0.0-alpha.12](https://github.com/reactivemarkets/react-financial-charts/compare/v1.0.0-alpha.11...v1.0.0-alpha.12) (2020-08-28)
@@ -8,0 +21,0 @@

lib/AlternatingFillAreaSeries.d.ts

@@ -11,4 +11,4 @@ import { strokeDashTypes } from "@react-financial-charts/core";
     readonly fillStyle?: {
-        top: string | CanvasGradient | CanvasPattern;
-        bottom: string | CanvasGradient | CanvasPattern;
+        top: string;
+        bottom: string;
     };
@@ -18,3 +18,3 @@ /**
      */
-    readonly interpolation?: CurveFactory;
+    readonly curve?: CurveFactory;
     /**
@@ -24,4 +24,4 @@ * Color, gradient, or pattern to use for the stroke.
     readonly strokeStyle?: {
-        top: string | CanvasGradient | CanvasPattern;
-        bottom: string | CanvasGradient | CanvasPattern;
+        top: string;
+        bottom: string;
     };
@@ -28,0 +28,0 @@ /**

lib/AlternatingFillAreaSeries.js

@@ -43,7 +43,7 @@ import * as React from "react";
     render() {
-        const { className, yAccessor, interpolation, strokeStyle = AlternatingFillAreaSeries.defaultProps.strokeStyle, strokeWidth = AlternatingFillAreaSeries.defaultProps.strokeWidth, strokeDasharray = AlternatingFillAreaSeries.defaultProps.strokeDasharray, fillStyle = AlternatingFillAreaSeries.defaultProps.fillStyle, } = this.props;
+        const { className, yAccessor, curve, strokeStyle = AlternatingFillAreaSeries.defaultProps.strokeStyle, strokeWidth = AlternatingFillAreaSeries.defaultProps.strokeWidth, strokeDasharray = AlternatingFillAreaSeries.defaultProps.strokeDasharray, fillStyle = AlternatingFillAreaSeries.defaultProps.fillStyle, } = this.props;
         return (React.createElement("g", { className: className },
             React.createElement(SVGComponent, null, this.renderClip),
-            React.createElement(AreaSeries, { canvasClip: this.topClip, yAccessor: yAccessor, interpolation: interpolation, baseAt: this.baseAt, fillStyle: fillStyle.top, strokeStyle: strokeStyle.top, strokeDasharray: strokeDasharray.top, strokeWidth: strokeWidth.top }),
-            React.createElement(AreaSeries, { canvasClip: this.bottomClip, yAccessor: yAccessor, interpolation: interpolation, baseAt: this.baseAt, fillStyle: fillStyle.bottom, strokeStyle: strokeStyle.bottom, strokeDasharray: strokeDasharray.bottom, strokeWidth: strokeWidth.bottom })));
+            React.createElement(AreaSeries, { canvasClip: this.topClip, yAccessor: yAccessor, curve: curve, baseAt: this.baseAt, fillStyle: fillStyle.top, strokeStyle: strokeStyle.top, strokeDasharray: strokeDasharray.top, strokeWidth: strokeWidth.top }),
+            React.createElement(AreaSeries, { canvasClip: this.bottomClip, yAccessor: yAccessor, curve: curve, baseAt: this.baseAt, fillStyle: fillStyle.bottom, strokeStyle: strokeStyle.bottom, strokeDasharray: strokeDasharray.bottom, strokeWidth: strokeWidth.bottom })));
     }
@@ -50,0 +50,0 @@ }

lib/AreaOnlySeries.d.ts

@@ -5,2 +5,5 @@ import { ScaleContinuousNumeric } from "d3-scale";
 export interface AreaOnlySeriesProps {
+    /**
+     * The base y value to draw the area to.
+     */
     readonly base?: number | ((yScale: ScaleContinuousNumeric<number, number>, d: [number, number], moreProps: any) => number | undefined);
@@ -15,7 +18,7 @@ readonly canvasClip?: (context: CanvasRenderingContext2D, moreProps: any) => void;
      */
-    readonly fillStyle?: string | CanvasGradient | CanvasPattern;
+    readonly fillStyle?: string;
     /**
      * A factory for a curve generator for the area.
      */
-    readonly interpolation?: CurveFactory;
+    readonly curve?: CurveFactory;
     /**
@@ -22,0 +25,0 @@ * Selector for data to plot.

lib/AreaOnlySeries.js

 import { first, functor, getAxisCanvas, GenericChartComponent } from "@react-financial-charts/core";
-import { area as d3Area } from "d3-shape";
+import { area } from "d3-shape";
 import * as React from "react";
@@ -8,3 +8,3 @@ export class AreaOnlySeries extends React.Component {
         this.drawOnCanvas = (ctx, moreProps) => {
-            const { fillStyle, interpolation, canvasClip, yAccessor, defined = AreaOnlySeries.defaultProps.defined, base, } = this.props;
+            const { fillStyle, curve, canvasClip, yAccessor, defined = AreaOnlySeries.defaultProps.defined, base, } = this.props;
             const { xScale, chartConfig: { yScale }, plotData, xAccessor, } = moreProps;
@@ -20,3 +20,3 @@ if (canvasClip !== undefined) {
             const newBase = functor(base);
-            const areaSeries = d3Area()
+            const areaSeries = area()
                 .defined((d) => defined(yAccessor(d)))
@@ -27,8 +27,8 @@ .x((d) => Math.round(xScale(xAccessor(d))))
                 .context(ctx);
-            if (interpolation !== undefined) {
-                areaSeries.curve(interpolation);
+            if (curve !== undefined) {
+                areaSeries.curve(curve);
             }
             areaSeries(plotData);
             ctx.fill();
-            if (canvasClip) {
+            if (canvasClip !== undefined) {
                 ctx.restore();
@@ -35,0 +35,0 @@ }

lib/AreaSeries.d.ts

@@ -6,2 +6,5 @@ import { strokeDashTypes } from "@react-financial-charts/core";
 export interface AreaSeriesProps {
+    /**
+     * The base y value to draw the area to.
+     */
     readonly baseAt?: number | ((yScale: ScaleContinuousNumeric<number, number>, d: [number, number], moreProps: any) => number);
@@ -13,11 +16,11 @@ readonly canvasClip?: (context: CanvasRenderingContext2D, moreProps: any) => void;
      */
-    readonly fillStyle?: string | CanvasGradient | CanvasPattern;
+    readonly fillStyle?: string;
     /**
      * A factory for a curve generator for the area and line.
      */
-    readonly interpolation?: CurveFactory;
+    readonly curve?: CurveFactory;
     /**
      * Color, gradient, or pattern to use for the stroke.
      */
-    readonly strokeStyle?: string | CanvasGradient | CanvasPattern;
+    readonly strokeStyle?: string;
     /**
@@ -24,0 +27,0 @@ * Stroke dash.

lib/AreaSeries.js

@@ -9,6 +9,6 @@ import React, { Component } from "react";
     render() {
-        const { baseAt, className, strokeStyle, strokeWidth, strokeDasharray, fillStyle, interpolation, canvasClip, yAccessor, } = this.props;
+        const { baseAt, className, strokeStyle, strokeWidth, strokeDasharray, fillStyle, curve, canvasClip, yAccessor, } = this.props;
         return (React.createElement("g", { className: className },
-            React.createElement(AreaOnlySeries, { yAccessor: yAccessor, interpolation: interpolation, base: baseAt, fillStyle: fillStyle, canvasClip: canvasClip }),
-            React.createElement(LineSeries, { yAccessor: yAccessor, strokeStyle: strokeStyle, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, interpolation: interpolation, canvasClip: canvasClip, highlightOnHover: false })));
+            React.createElement(AreaOnlySeries, { yAccessor: yAccessor, curve: curve, base: baseAt, fillStyle: fillStyle, canvasClip: canvasClip }),
+            React.createElement(LineSeries, { yAccessor: yAccessor, strokeStyle: strokeStyle, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, curve: curve, canvasClip: canvasClip, highlightOnHover: false })));
     }
@@ -15,0 +15,0 @@ }

lib/BarSeries.d.ts

@@ -1,8 +0,8 @@
-import { ScaleContinuousNumeric } from "d3-scale";
+import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
 import * as React from "react";
 export interface BarSeriesProps {
-    readonly baseAt?: number | ((xScale: ScaleContinuousNumeric<number, number>, yScale: ScaleContinuousNumeric<number, number>, d: [number, number], moreProps: any) => number);
+    readonly baseAt?: number | ((xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>, yScale: ScaleContinuousNumeric<number, number>, d: [number, number], moreProps: any) => number);
     readonly clip?: boolean;
-    readonly fillStyle?: string | CanvasGradient | CanvasPattern | ((data: any) => string | CanvasGradient | CanvasPattern);
-    readonly strokeStyle?: string | CanvasGradient | CanvasPattern;
+    readonly fillStyle?: string | ((data: any) => string);
+    readonly strokeStyle?: string;
     readonly swapScales?: boolean;
@@ -27,3 +27,4 @@ readonly width?: number | ((props: {
         }, moreProps: {
-            xScale: import("d3-scale").ScaleTime<number, number> | ScaleContinuousNumeric<number, number>;
+            xAccessor: (datum: T) => number | Date;
+            xScale: ScaleTime<number, number> | ScaleContinuousNumeric<number, number>;
             plotData: T[];
@@ -30,0 +31,0 @@ }) => number;

lib/BarSeries.js

@@ -21,4 +21,4 @@ import { functor, head, getAxisCanvas, GenericChartComponent, plotDataLengthBarWidth, } from "@react-financial-charts/core";
                 nest.forEach((values, key) => {
-                    if (head(values).width > 1) {
-                        if (strokeStyle !== undefined) {
+                    if (strokeStyle !== undefined) {
+                        if (head(values).width > 1) {
                             ctx.strokeStyle = strokeStyle;
@@ -55,8 +55,10 @@ }
             return plotData
-                .filter((d) => yAccessor(d) !== undefined)
                 .map((d) => {
+                const yValue = yAccessor(d);
+                if (yValue === undefined) {
+                    return undefined;
+                }
                 const xValue = xAccessor(d);
-                const yValue = yAccessor(d);
+                const x = Math.round(xScale(xValue)) - offset;
                 let y = yScale(yValue);
-                const x = Math.round(xScale(xValue)) - offset;
                 let h = getBase(xScale, yScale, d) - yScale(yValue);
@@ -74,3 +76,4 @@ if (h < 0) {
                 };
-            });
+            })
+                .filter((d) => d !== undefined);
         };
@@ -77,0 +80,0 @@ }

lib/BollingerSeries.d.ts

@@ -5,7 +5,7 @@ import * as React from "react";
     readonly className?: string;
-    readonly fillStyle?: string | CanvasGradient | CanvasPattern;
+    readonly fillStyle?: string;
     readonly strokeStyle?: {
-        top: string | CanvasGradient | CanvasPattern;
-        middle: string | CanvasGradient | CanvasPattern;
-        bottom: string | CanvasGradient | CanvasPattern;
+        top: string;
+        middle: string;
+        bottom: string;
     };
@@ -12,0 +12,0 @@ readonly yAccessor?: (data: any) => {

lib/CandlestickSeries.d.ts

@@ -1,2 +0,2 @@
-import { ScaleContinuousNumeric } from "d3-scale";
+import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
 import * as React from "react";
@@ -7,3 +7,2 @@ export interface ICandle {
     readonly height: number;
-    readonly className?: string;
     readonly fill: string;
@@ -23,14 +22,10 @@ readonly stroke: string;
 export interface CandlestickSeriesProps {
-    readonly candleClassName?: string;
     readonly candleStrokeWidth?: number;
-    readonly className?: string;
-    readonly classNames?: string | (() => string);
     readonly clip?: boolean;
-    readonly fill?: string | CanvasGradient | CanvasPattern | ((data: any) => string | CanvasGradient | CanvasPattern);
-    readonly stroke?: string | CanvasGradient | CanvasPattern | ((data: any) => string | CanvasGradient | CanvasPattern);
-    readonly wickClassName?: string;
-    readonly wickStroke?: string | CanvasGradient | CanvasPattern | ((data: any) => string | CanvasGradient | CanvasPattern);
+    readonly fill?: string | ((data: any) => string);
+    readonly stroke?: string | ((data: any) => string);
+    readonly wickStroke?: string | ((data: any) => string);
     readonly width?: number | ((props: CandlestickSeriesProps, moreProps: any) => number);
     readonly widthRatio?: number;
-    readonly yAccessor?: (data: any) => {
+    readonly yAccessor: (data: any) => {
         open: number;
@@ -40,14 +35,10 @@ high: number;
         close: number;
-    };
+    } | undefined;
 }
 export declare class CandlestickSeries extends React.Component<CandlestickSeriesProps> {
     static defaultProps: {
-        candleClassName: string;
         candleStrokeWidth: number;
-        className: string;
-        classNames: (d: any) => "down" | "up";
         clip: boolean;
         fill: (d: any) => "#26a69a" | "#ef5350";
-        stroke: (d: any) => "#26a69a" | "#ef5350";
-        wickClassName: string;
+        stroke: string;
         wickStroke: (d: any) => "#26a69a" | "#ef5350";
@@ -57,3 +48,4 @@ width: <T>(props: {
         }, moreProps: {
-            xScale: import("d3-scale").ScaleTime<number, number> | ScaleContinuousNumeric<number, number>;
+            xAccessor: (datum: T) => number | Date;
+            xScale: ScaleTime<number, number> | ScaleContinuousNumeric<number, number>;
             plotData: T[];
@@ -60,0 +52,0 @@ }) => number;

lib/CandlestickSeries.js

@@ -13,3 +13,2 @@ import { functor, getAxisCanvas, GenericChartComponent, plotDataLengthBarWidth } from "@react-financial-charts/core";
             wickNest.forEach((values, key) => {
-                ctx.strokeStyle = key;
                 ctx.fillStyle = key;
@@ -40,6 +39,6 @@ values.forEach((each) => {
                         else if (d.height === 0) {
-                            ctx.fillRect(d.x, d.y - 0.5, d.width, 1);
+                            ctx.fillRect(d.x - 0.5, d.y, d.width, 1);
                         }
                         else {
-                            ctx.fillRect(d.x, d.y, d.width, d.height);
+                            ctx.fillRect(d.x - 0.5, d.y, d.width, d.height);
                             if (strokeKey !== "none") {
@@ -54,7 +53,6 @@ ctx.strokeRect(d.x, d.y, d.width, d.height);
         this.getCandleData = (xAccessor, xScale, yScale, plotData) => {
-            const { classNames, fill: fillProp, stroke: strokeProp, yAccessor = CandlestickSeries.defaultProps.yAccessor, wickStroke: wickStrokeProp, } = this.props;
-            const wickStroke = functor(wickStrokeProp);
-            const className = functor(classNames);
+            const { fill: fillProp, stroke: strokeProp, yAccessor, wickStroke: wickStrokeProp } = this.props;
             const fill = functor(fillProp);
             const stroke = functor(strokeProp);
+            const wickStroke = functor(wickStrokeProp);
             const widthFunctor = functor(this.props.width);
@@ -72,3 +70,7 @@ const width = widthFunctor(this.props, {
                 const ohlc = yAccessor(d);
-                const x = Math.round(xScale(xAccessor(d)));
+                if (ohlc === undefined) {
+                    return undefined;
+                }
+                const xValue = xAccessor(d);
+                const x = Math.round(xScale(xValue));
                 const y = Math.round(yScale(Math.max(ohlc.open, ohlc.close)));
@@ -89,3 +91,2 @@ const height = Math.max(1, Math.round(Math.abs(yScale(ohlc.open) - yScale(ohlc.close))));
                     width: offset * 2,
-                    className: className(ohlc),
                     fill: fill(ohlc),
@@ -95,3 +96,4 @@ stroke: stroke(ohlc),
                 };
-            });
+            })
+                .filter((d) => d !== undefined);
         };
@@ -105,10 +107,6 @@ }
 CandlestickSeries.defaultProps = {
-    candleClassName: "react-financial-charts-candlestick-candle",
     candleStrokeWidth: 0.5,
-    className: "react-financial-charts-candlestick",
-    classNames: (d) => (d.close > d.open ? "up" : "down"),
     clip: true,
     fill: (d) => (d.close > d.open ? "#26a69a" : "#ef5350"),
-    stroke: (d) => (d.close > d.open ? "#26a69a" : "#ef5350"),
-    wickClassName: "react-financial-charts-candlestick-wick",
+    stroke: "none",
     wickStroke: (d) => (d.close > d.open ? "#26a69a" : "#ef5350"),
@@ -115,0 +113,0 @@ width: plotDataLengthBarWidth,

lib/ElderRaySeries.d.ts

@@ -5,4 +5,4 @@ import { strokeDashTypes } from "@react-financial-charts/core";
     readonly fillStyle?: {
-        bearPower: string | CanvasGradient | CanvasPattern;
-        bullPower: string | CanvasGradient | CanvasPattern;
+        bearPower: string;
+        bullPower: string;
     };
@@ -12,3 +12,3 @@ readonly className?: string;
     readonly stroke?: boolean;
-    readonly straightLineStrokeStyle?: string | CanvasGradient | CanvasPattern;
+    readonly straightLineStrokeStyle?: string;
     readonly straightLineStrokeDasharray?: strokeDashTypes;
@@ -15,0 +15,0 @@ readonly widthRatio?: number;

lib/GroupedBarSeries.d.ts

@@ -6,3 +6,3 @@ import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
     readonly direction: "up" | "down";
-    readonly fillStyle?: string | CanvasGradient | CanvasPattern | ((data: any) => string | CanvasGradient | CanvasPattern);
+    readonly fillStyle?: string | ((data: any) => string);
     readonly spaceBetweenBar?: number;
@@ -24,2 +24,3 @@ readonly stroke: boolean;
         }, moreProps: {
+            xAccessor: (datum: T) => number | Date;
             xScale: ScaleTime<number, number> | ScaleContinuousNumeric<number, number>;
@@ -26,0 +27,0 @@ plotData: T[];

lib/index.d.ts

 export * from "./AreaSeries";
 export * from "./AlternatingFillAreaSeries";
 export * from "./AreaOnlySeries";
-export * from "./CircleMarker";
-export * from "./TriangleMarker";
-export * from "./SquareMarker";
+export * from "./markers";
 export * from "./LineSeries";
@@ -11,3 +9,3 @@ export * from "./CandlestickSeries";
 export * from "./BarSeries";
-export { StackedBarSeries } from "./StackedBarSeries";
+export { StackedBarSeries, StackedBarSeriesProps } from "./StackedBarSeries";
 export * from "./GroupedBarSeries";
@@ -14,0 +12,0 @@ export * from "./KagiSeries";

lib/index.js

 export * from "./AreaSeries";
 export * from "./AlternatingFillAreaSeries";
 export * from "./AreaOnlySeries";
-export * from "./CircleMarker";
-export * from "./TriangleMarker";
-export * from "./SquareMarker";
+export * from "./markers";
 export * from "./LineSeries";
@@ -8,0 +6,0 @@ export * from "./CandlestickSeries";

lib/KagiSeries.d.ts

 import * as React from "react";
 export interface KagiSeriesProps {
-    readonly currentValueStroke?: string | CanvasGradient | CanvasPattern;
-    readonly fill?: {
+    /**
+     * Current value stroke
+     */
+    readonly currentValueStroke?: string;
+    /**
+     * Fill values.
+     */
+    readonly fill: {
         yang: string;
         yin: string;
     };
-    readonly stroke?: {
+    /**
+     * Stroke values.
+     */
+    readonly stroke: {
         yang: string;
@@ -35,2 +44,3 @@ yin: string;
     private readonly drawOnCanvas;
+    private readonly helper;
 }

lib/KagiSeries.js

@@ -10,5 +10,5 @@ import * as React from "react";
         this.drawOnCanvas = (ctx, moreProps) => {
-            const { stroke = KagiSeries.defaultProps.stroke, strokeWidth, currentValueStroke } = this.props;
+            const { stroke, strokeWidth, currentValueStroke } = this.props;
             const { xAccessor, xScale, chartConfig: { yScale }, plotData, } = moreProps;
-            const paths = helper(plotData, xAccessor);
+            const paths = this.helper(plotData, xAccessor);
             let begin = true;
@@ -55,2 +55,39 @@ paths.forEach((each) => {
         };
+        this.helper = (plotData, xAccessor) => {
+            const kagiLine = [];
+            let kagi = {};
+            let d = plotData[0];
+            let idx = xAccessor(d);
+            // tslint:disable-next-line: prefer-for-of
+            for (let i = 0; i < plotData.length; i++) {
+                d = plotData[i];
+                if (isNotDefined(d.close)) {
+                    continue;
+                }
+                if (isNotDefined(kagi.type)) {
+                    kagi.type = d.startAs;
+                }
+                if (isNotDefined(kagi.plot)) {
+                    kagi.plot = [];
+                }
+                idx = xAccessor(d);
+                kagi.plot.push([idx, d.open]);
+                if (isDefined(d.changeTo)) {
+                    kagi.plot.push([idx, d.changePoint]);
+                    kagi.added = true;
+                    kagiLine.push(kagi);
+                    kagi = {
+                        type: d.changeTo,
+                        plot: [],
+                        added: false,
+                    };
+                    kagi.plot.push([idx, d.changePoint]);
+                }
+            }
+            if (!kagi.added) {
+                kagi.plot.push([idx, d.close, d.current, d.reverseAt]);
+                kagiLine.push(kagi);
+            }
+            return kagiLine;
+        };
     }
@@ -73,39 +110,2 @@ render() {
 };
-const helper = (plotData, xAccessor) => {
-    const kagiLine = [];
-    let kagi = {};
-    let d = plotData[0];
-    let idx = xAccessor(d);
-    // tslint:disable-next-line: prefer-for-of
-    for (let i = 0; i < plotData.length; i++) {
-        d = plotData[i];
-        if (isNotDefined(d.close)) {
-            continue;
-        }
-        if (isNotDefined(kagi.type)) {
-            kagi.type = d.startAs;
-        }
-        if (isNotDefined(kagi.plot)) {
-            kagi.plot = [];
-        }
-        idx = xAccessor(d);
-        kagi.plot.push([idx, d.open]);
-        if (isDefined(d.changeTo)) {
-            kagi.plot.push([idx, d.changePoint]);
-            kagi.added = true;
-            kagiLine.push(kagi);
-            kagi = {
-                type: d.changeTo,
-                plot: [],
-                added: false,
-            };
-            kagi.plot.push([idx, d.changePoint]);
-        }
-    }
-    if (!kagi.added) {
-        kagi.plot.push([idx, d.close, d.current, d.reverseAt]);
-        kagiLine.push(kagi);
-    }
-    return kagiLine;
-};
 //# sourceMappingURL=KagiSeries.js.map

lib/LineSeries.d.ts

@@ -6,15 +6,45 @@ import { strokeDashTypes } from "@react-financial-charts/core";
     readonly canvasClip?: (context: CanvasRenderingContext2D, moreProps: any) => void;
+    /**
+     * Wether to connect the line between undefined data points.
+     */
     readonly connectNulls?: boolean;
+    /**
+     * A factory for a curve generator for the line.
+     */
+    readonly curve?: CurveFactory | CurveFactoryLineOnly;
+    /**
+     * Function to decide if a data point has been defined.
+     */
     readonly defined?: (d: number | undefined) => boolean;
+    /**
+     * Whether to highlight the line when within the `hoverTolerance`.
+     */
     readonly highlightOnHover?: boolean;
+    /**
+     * Width to increase the line to on hover.
+     */
     readonly hoverStrokeWidth?: number;
+    /**
+     * The distance between the cursor and the closest point in the line.
+     */
     readonly hoverTolerance?: number;
     /**
-     * A factory for a curve generator for the line.
+     * Click handler.
      */
-    readonly interpolation?: CurveFactory | CurveFactoryLineOnly;
     readonly onClick?: (e: React.MouseEvent, moreProps: any) => void;
+    /**
+     * Double click handler.
+     */
     readonly onDoubleClick?: (e: React.MouseEvent, moreProps: any) => void;
+    /**
+     * Hover handler.
+     */
     readonly onHover?: (e: React.MouseEvent, moreProps: any) => void;
+    /**
+     * Unhover handler.
+     */
     readonly onUnHover?: (e: React.MouseEvent, moreProps: any) => void;
+    /**
+     * Context menu handler.
+     */
     readonly onContextMenu?: (e: React.MouseEvent, moreProps: any) => void;
@@ -24,3 +54,3 @@ /**
      */
-    readonly strokeStyle?: string | CanvasGradient | CanvasPattern;
+    readonly strokeStyle?: string;
     /**
@@ -27,0 +57,0 @@ * Stroke dash.

lib/LineSeries.js

 import { getClosestItemIndexes, getStrokeDasharrayCanvas, getAxisCanvas, getMouseCanvas, GenericChartComponent, } from "@react-financial-charts/core";
-import { line as d3Line } from "d3-shape";
+import { line } from "d3-shape";
 import * as React from "react";
@@ -10,4 +10,4 @@ /**
         super(...arguments);
-        this.drawOnCanvas = (ctx, moreProps) => {
-            const { connectNulls, yAccessor, strokeStyle, strokeWidth = LineSeries.defaultProps.strokeWidth, hoverStrokeWidth = LineSeries.defaultProps.hoverStrokeWidth, defined = LineSeries.defaultProps.defined, strokeDasharray, interpolation, canvasClip, } = this.props;
+        this.drawOnCanvas = (lineDash) => (ctx, moreProps) => {
+            const { connectNulls, yAccessor, hoverStrokeWidth = LineSeries.defaultProps.hoverStrokeWidth, defined = LineSeries.defaultProps.defined, curve, canvasClip, strokeStyle, strokeWidth = LineSeries.defaultProps.strokeWidth, } = this.props;
             const { xAccessor, xScale, chartConfig: { yScale }, plotData, hovering, } = moreProps;
@@ -22,9 +22,10 @@ if (canvasClip !== undefined) {
             }
-            const lineDash = getStrokeDasharrayCanvas(strokeDasharray);
-            ctx.setLineDash(lineDash);
-            const dataSeries = d3Line()
+            if (lineDash !== undefined) {
+                ctx.setLineDash(lineDash);
+            }
+            const dataSeries = line()
                 .x((d) => Math.round(xScale(xAccessor(d))))
                 .y((d) => Math.round(yScale(yAccessor(d))));
-            if (interpolation !== undefined) {
-                dataSeries.curve(interpolation);
+            if (curve !== undefined) {
+                dataSeries.curve(curve);
             }
@@ -73,3 +74,3 @@ if (!connectNulls) {
     render() {
-        const { highlightOnHover, onClick, onContextMenu, onDoubleClick, onHover, onUnHover } = this.props;
+        const { highlightOnHover, onClick, onContextMenu, onDoubleClick, onHover, onUnHover, strokeDasharray, } = this.props;
         const hoverProps = highlightOnHover || onHover || onUnHover
@@ -85,3 +86,4 @@ ? {
             };
-        return (React.createElement(GenericChartComponent, Object.assign({ canvasDraw: this.drawOnCanvas, onClickWhenHover: onClick, onDoubleClickWhenHover: onDoubleClick, onContextMenuWhenHover: onContextMenu, onHover: onHover, onUnHover: onUnHover }, hoverProps)));
+        const lineDash = getStrokeDasharrayCanvas(strokeDasharray);
+        return (React.createElement(GenericChartComponent, Object.assign({ canvasDraw: this.drawOnCanvas(lineDash), onClickWhenHover: onClick, onDoubleClickWhenHover: onDoubleClick, onContextMenuWhenHover: onContextMenu, onHover: onHover, onUnHover: onUnHover }, hoverProps)));
     }
@@ -88,0 +90,0 @@ }

lib/MACDSeries.d.ts

@@ -1,2 +0,2 @@
-import { ScaleContinuousNumeric } from "d3-scale";
+import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
 import * as React from "react";
@@ -7,8 +7,8 @@ export interface MACDSeriesProps {
     readonly fillStyle?: {
-        divergence: string | CanvasGradient | CanvasPattern;
+        divergence: string;
     };
     readonly strokeStyle?: {
-        macd: string | CanvasGradient | CanvasPattern;
-        signal: string | CanvasGradient | CanvasPattern;
-        zero: string | CanvasGradient | CanvasPattern;
+        macd: string;
+        signal: string;
+        zero: string;
     };
@@ -46,3 +46,4 @@ readonly widthRatio?: number;
         }, moreProps: {
-            xScale: import("d3-scale").ScaleTime<number, number> | ScaleContinuousNumeric<number, number>;
+            xAccessor: (datum: T) => number | Date;
+            xScale: ScaleTime<number, number> | ScaleContinuousNumeric<number, number>;
             plotData: T[];
@@ -49,0 +50,0 @@ }) => number;

lib/OverlayBarSeries.d.ts

@@ -9,3 +9,3 @@ import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
     readonly widthRatio?: number;
-    readonly fillStyle?: string | CanvasGradient | CanvasPattern | ((data: any, y: number) => string | CanvasGradient | CanvasPattern);
+    readonly fillStyle?: string | ((data: any, y: number) => string);
     readonly yAccessor: ((datum: any) => number | undefined)[];
@@ -28,2 +28,3 @@ readonly xScale?: ScaleContinuousNumeric<number, number>;
         }, moreProps: {
+            xAccessor: (datum: T) => number | Date;
             xScale: ScaleTime<number, number> | ScaleContinuousNumeric<number, number>;
@@ -30,0 +31,0 @@ plotData: T[];

lib/RenkoSeries.d.ts

@@ -5,9 +5,9 @@ import * as React from "react";
     readonly fill?: {
-        up: string | CanvasGradient | CanvasPattern;
-        down: string | CanvasGradient | CanvasPattern;
-        partial: string | CanvasGradient | CanvasPattern;
+        up: string;
+        down: string;
+        partial: string;
     };
     readonly stroke?: {
-        up: string | CanvasGradient | CanvasPattern;
-        down: string | CanvasGradient | CanvasPattern;
+        up: string;
+        down: string;
     };
@@ -14,0 +14,0 @@ readonly yAccessor?: (data: any) => any;

lib/RSISeries.d.ts

@@ -7,8 +7,8 @@ import * as React from "react";
     readonly strokeStyle?: {
-        line: string | CanvasGradient | CanvasPattern;
-        top: string | CanvasGradient | CanvasPattern;
-        middle: string | CanvasGradient | CanvasPattern;
-        bottom: string | CanvasGradient | CanvasPattern;
-        outsideThreshold: string | CanvasGradient | CanvasPattern;
-        insideThreshold: string | CanvasGradient | CanvasPattern;
+        line: string;
+        top: string;
+        middle: string;
+        bottom: string;
+        outsideThreshold: string;
+        insideThreshold: string;
     };
@@ -15,0 +15,0 @@ readonly strokeDasharray?: {

lib/SARSeries.d.ts

 import * as React from "react";
 export interface SARSeriesProps {
     readonly fillStyle?: {
-        falling: string | CanvasGradient | CanvasPattern;
-        rising: string | CanvasGradient | CanvasPattern;
+        falling: string;
+        rising: string;
     };
+    readonly strokeStyle?: {
+        falling: string;
+        rising: string;
+    };
     readonly highlightOnHover?: boolean;
@@ -11,3 +15,3 @@ readonly onClick?: (e: React.MouseEvent, moreProps: any) => void;
     readonly onContextMenu?: (e: React.MouseEvent, moreProps: any) => void;
-    readonly yAccessor: (datum: any) => number;
+    readonly yAccessor: (datum: any) => number | undefined;
 }
@@ -14,0 +18,0 @@ /**

lib/SARSeries.js

@@ -13,3 +13,3 @@ import * as React from "react";
         this.drawOnCanvas = (ctx, moreProps) => {
-            const { yAccessor, fillStyle = SARSeries.defaultProps.fillStyle } = this.props;
+            const { yAccessor, fillStyle = SARSeries.defaultProps.fillStyle, strokeStyle } = this.props;
             const { xAccessor, plotData, xScale, chartConfig: { yScale }, hovering, } = moreProps;
@@ -20,7 +20,13 @@ const width = xScale(xAccessor(last(plotData))) - xScale(xAccessor(first(plotData)));
             plotData.forEach((each) => {
+                const yValue = yAccessor(each);
+                if (yValue === undefined) {
+                    return;
+                }
                 const centerX = xScale(xAccessor(each));
-                const centerY = yScale(yAccessor(each));
-                const color = yAccessor(each) > each.close ? fillStyle.falling : fillStyle.rising;
+                const centerY = yScale(yValue);
+                const color = yValue > each.close ? fillStyle.falling : fillStyle.rising;
                 ctx.fillStyle = color;
-                ctx.strokeStyle = color;
+                if (strokeStyle !== undefined) {
+                    ctx.strokeStyle = yValue > each.close ? strokeStyle.falling : strokeStyle.rising;
+                }
                 ctx.beginPath();
@@ -30,3 +36,5 @@ ctx.ellipse(centerX, centerY, radius, radius, 0, 0, 2 * Math.PI);
                 ctx.fill();
-                ctx.stroke();
+                if (strokeStyle !== undefined) {
+                    ctx.stroke();
+                }
             });
@@ -62,4 +70,4 @@ };
     },
-    highlightOnHover: true,
+    highlightOnHover: false,
 };
 //# sourceMappingURL=SARSeries.js.map

lib/ScatterSeries.d.ts

 import * as React from "react";
 export interface ScatterSeriesProps {
+    /**
+     * A Marker to draw.
+     */
     readonly marker?: any;
-    readonly markerProvider?: any;
+    /**
+     * Given the data point return a Marker.
+     */
+    readonly markerProvider?: (datum: any) => any;
+    /**
+     * Props to pass to the marker.
+     */
     readonly markerProps?: object;
-    readonly yAccessor: (data: any) => number;
+    /**
+     * Accessor for y value.
+     */
+    readonly yAccessor: (data: any) => number | undefined;
 }
@@ -8,0 +20,0 @@ export declare class ScatterSeries extends React.Component<ScatterSeriesProps> {

lib/ScatterSeries.js

@@ -36,3 +36,9 @@ import { functor, getAxisCanvas, GenericChartComponent } from "@react-financial-charts/core";
             }
-            return plotData.map((d) => {
+            return plotData
+                .map((d) => {
+                const yValue = yAccessor(d);
+                if (yValue === undefined) {
+                    return undefined;
+                }
+                const xValue = xAccessor(d);
                 if (markerProvider) {
@@ -45,4 +51,4 @@ Marker = markerProvider(d);
                 return {
-                    x: xScale(xAccessor(d)),
-                    y: yScale(yAccessor(d)),
+                    x: xScale(xValue),
+                    y: yScale(yValue),
                     fillStyle: fill(d),
@@ -53,3 +59,4 @@ strokeStyle: stroke(d),
                 };
-            });
+            })
+                .filter((marker) => marker !== undefined);
         };
@@ -56,0 +63,0 @@ }

lib/StackedBarSeries.d.ts

@@ -7,3 +7,3 @@ import { ScaleContinuousNumeric } from "d3-scale";
     readonly direction?: "up" | "down";
-    readonly fillStyle?: string | CanvasGradient | CanvasPattern | ((data: any, y: number) => string | CanvasGradient | CanvasPattern);
+    readonly fillStyle?: string | ((data: any, y: number) => string);
     readonly spaceBetweenBar?: number;
@@ -25,2 +25,3 @@ readonly stroke?: boolean;
         }, moreProps: {
+            xAccessor: (datum: T) => number | Date;
             xScale: import("d3-scale").ScaleTime<number, number> | ScaleContinuousNumeric<number, number>;
@@ -27,0 +28,0 @@ plotData: T[];

lib/StochasticSeries.d.ts

@@ -8,7 +8,7 @@ import * as React from "react";
     readonly strokeStyle?: {
-        top: string | CanvasGradient | CanvasPattern;
-        middle: string | CanvasGradient | CanvasPattern;
-        bottom: string | CanvasGradient | CanvasPattern;
-        dLine: string | CanvasGradient | CanvasPattern;
-        kLine: string | CanvasGradient | CanvasPattern;
+        top: string;
+        middle: string;
+        bottom: string;
+        dLine: string;
+        kLine: string;
     };
@@ -15,0 +15,0 @@ readonly yAccessor: (data: any) => {

lib/StraightLine.d.ts

@@ -6,3 +6,3 @@ import * as React from "react";
     readonly lineWidth?: number;
-    readonly strokeStyle?: string | CanvasGradient | CanvasPattern;
+    readonly strokeStyle?: string;
     readonly type?: "vertical" | "horizontal";
@@ -9,0 +9,0 @@ readonly yValue?: number;

lib/VolumeProfileSeries.d.ts

 import * as React from "react";
 export interface VolumeProfileSeriesProps {
-    readonly className?: string;
-    readonly opacity?: number;
+    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 sessionBackGround?: string | CanvasGradient | CanvasPattern;
+    readonly source: (d: number, i: number, data: ArrayLike<number>) => number;
+    readonly stroke?: string;
+    readonly volume: (datum: any) => number;
 }
 export declare class VolumeProfileSeries extends React.Component<VolumeProfileSeriesProps> {
     static defaultProps: {
-        className: string;
+        absoluteChange: (d: any) => any;
         bins: number;
-        opacity: number;
+        bySession: boolean;
+        fill: ({ type }: {
+            type: "up" | "down";
+            width: number;
+        }) => "#6BA583" | "#FF0000";
         maxProfileWidthPercent: number;
-        fill: ({ type }: any) => "#6BA583" | "#FF0000";
-        stroke: string;
+        orient: string;
+        partialStartOK: boolean;
+        partialEndOK: boolean;
+        sessionBackGround: string;
+        sessionStart: ({ d, i, plotData }: any) => boolean;
         showSessionBackground: boolean;
-        sessionBackGround: string;
         source: (d: any) => any;
+        stroke: string;
         volume: (d: any) => any;
-        absoluteChange: (d: any) => any;
-        bySession: boolean;
-        sessionStart: ({ d, i, plotData }: any) => boolean;
-        orient: string;
-        partialStartOK: boolean;
-        partialEndOK: boolean;
     };
@@ -27,0 +41,0 @@ render(): JSX.Element;

lib/VolumeProfileSeries.js

 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, colorToRGBA, functor, head, identity, getAxisCanvas, GenericChartComponent, last, } from "@react-financial-charts/core";
+import { accumulatingWindow, functor, head, identity, getAxisCanvas, GenericChartComponent, last, } from "@react-financial-charts/core";
 export class VolumeProfileSeries extends React.Component {
@@ -11,6 +11,6 @@ constructor() {
             const { rects, sessionBg } = this.helper(this.props, moreProps, xAccessor, width);
-            this.drawOnCanvasContext(ctx, this.props, rects, sessionBg);
+            this.drawOnCanvasContext(ctx, rects, sessionBg);
         };
-        this.drawOnCanvasContext = (ctx, props, rects, sessionBg) => {
-            const { opacity, sessionBackGround, showSessionBackground } = props;
+        this.drawOnCanvasContext = (ctx, rects, sessionBg) => {
+            const { sessionBackGround, showSessionBackground } = this.props;
             if (showSessionBackground) {
@@ -31,3 +31,3 @@ if (sessionBackGround !== undefined) {
                 if (w1 > 0) {
-                    ctx.fillStyle = colorToRGBA(fill1, opacity);
+                    ctx.fillStyle = fill1;
                     if (stroke1 !== "none") {
@@ -45,3 +45,3 @@ ctx.strokeStyle = stroke1;
                 if (w2 > 0) {
-                    ctx.fillStyle = colorToRGBA(fill2, opacity);
+                    ctx.fillStyle = fill2;
                     if (stroke2 !== "none") {
@@ -66,3 +66,2 @@ ctx.strokeStyle = stroke2;
                 .discardTillStart(!partialStartOK)
-                // @ts-ignore
                 .discardTillEnd(!partialEndOK)
@@ -152,19 +151,17 @@ .accumulateTill((d, i) => {
 VolumeProfileSeries.defaultProps = {
-    className: "line ",
+    absoluteChange: (d) => d.absoluteChange,
     bins: 20,
-    opacity: 0.5,
+    bySession: false,
+    fill: ({ type }) => (type === "up" ? "#6BA583" : "#FF0000"),
     maxProfileWidthPercent: 50,
-    fill: ({ type }) => (type === "up" ? "#6BA583" : "#FF0000"),
-    stroke: "#FFFFFF",
+    orient: "left",
+    partialStartOK: true,
+    partialEndOK: true,
+    sessionBackGround: "rgba(70, 130, 180, 0.3)",
+    sessionStart: ({ d, i, plotData }) => i > 0 && plotData[i - 1].date.getMonth() !== d.date.getMonth(),
     showSessionBackground: false,
-    sessionBackGround: "rgba(70, 130, 180, 0.3)",
     source: (d) => d.close,
+    stroke: "#FFFFFF",
     volume: (d) => d.volume,
-    absoluteChange: (d) => d.absoluteChange,
-    bySession: false,
-    sessionStart: ({ d, i, plotData }) => i > 0 && plotData[i - 1].date.getMonth() !== d.date.getMonth(),
-    orient: "left",
-    partialStartOK: true,
-    partialEndOK: true,
 };
 //# sourceMappingURL=VolumeProfileSeries.js.map

package.json

 {
   "name": "@react-financial-charts/series",
-  "version": "1.0.0-alpha.12",
+  "version": "1.0.0-alpha.13",
   "description": "Series for react-financial-charts",
@@ -41,3 +41,3 @@ "publishConfig": {
   "dependencies": {
-    "@react-financial-charts/core": "^1.0.0-alpha.10",
+    "@react-financial-charts/core": "^1.0.0-alpha.13",
     "@types/d3-scale": "^2.2.0",
@@ -52,3 +52,3 @@ "d3-array": "^2.5.0",
   },
-  "gitHead": "a35707b94747e2e70604653492c17c7e497e9e48"
+  "gitHead": "58441df036295c078f244f2bcdc42266afb4c42a"
 }

src/index.ts

 export * from "./AreaSeries";
 export * from "./AlternatingFillAreaSeries";
 export * from "./AreaOnlySeries";
-export * from "./CircleMarker";
-export * from "./TriangleMarker";
-export * from "./SquareMarker";
+export * from "./markers";
 export * from "./LineSeries";
@@ -11,3 +9,3 @@ export * from "./CandlestickSeries";
 export * from "./BarSeries";
-export { StackedBarSeries } from "./StackedBarSeries";
+export { StackedBarSeries, StackedBarSeriesProps } from "./StackedBarSeries";
 export * from "./GroupedBarSeries";
@@ -14,0 +12,0 @@ export * from "./KagiSeries";

No alert changes

Improved metrics

Total package byte prevSize

300788

increased by0.65%

Number of package files

116

increased by3.57%

Lines of code

5742

increased by2.9%

Dependency changes

• Updated@react-financial-charts/core@^1.0.0-alpha.13