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

Comparing version 1.1.0 to 1.2.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [1.2.0](https://github.com/reactivemarkets/react-financial-charts/compare/v1.1.0...v1.2.0) (2021-04-26)
+
+
+### Features
+
+* **series:** adding connectNulls to AreaSeries ([d800dc5](https://github.com/reactivemarkets/react-financial-charts/commit/d800dc5289387d29bc4b194a57b85c62b2ff18ed)), closes [#497](https://github.com/reactivemarkets/react-financial-charts/issues/497)
+
+
+
+
+
 # [1.1.0](https://github.com/reactivemarkets/react-financial-charts/compare/v1.0.1...v1.1.0) (2021-02-26)
@@ -8,0 +19,0 @@

lib/AlternatingFillAreaSeries.d.ts

@@ -6,4 +6,7 @@ import { strokeDashTypes } from "@react-financial-charts/core";
     readonly baseAt: number;
-    readonly className?: string;
     /**
+     * Wether to connect the area between undefined data points.
+     */
+    readonly connectNulls?: boolean;
+    /**
      * Color, gradient, or pattern to use for fill.
@@ -50,3 +53,3 @@ */
     static defaultProps: {
-        className: string;
+        connectNulls: boolean;
         fillStyle: {
@@ -53,0 +56,0 @@ top: string;

lib/AlternatingFillAreaSeries.js

@@ -43,11 +43,11 @@ import * as React from "react";
     render() {
-        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 },
+        const { connectNulls, yAccessor, curve, strokeStyle = AlternatingFillAreaSeries.defaultProps.strokeStyle, strokeWidth = AlternatingFillAreaSeries.defaultProps.strokeWidth, strokeDasharray = AlternatingFillAreaSeries.defaultProps.strokeDasharray, fillStyle = AlternatingFillAreaSeries.defaultProps.fillStyle, } = this.props;
+        return (React.createElement("g", null,
             React.createElement(SVGComponent, null, this.renderClip),
-            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 })));
+            React.createElement(AreaSeries, { canvasClip: this.topClip, connectNulls: connectNulls, 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, connectNulls: connectNulls, yAccessor: yAccessor, curve: curve, baseAt: this.baseAt, fillStyle: fillStyle.bottom, strokeStyle: strokeStyle.bottom, strokeDasharray: strokeDasharray.bottom, strokeWidth: strokeWidth.bottom })));
     }
 }
 AlternatingFillAreaSeries.defaultProps = {
-    className: "react-financial-charts-alternating-area",
+    connectNulls: false,
     fillStyle: {
@@ -54,0 +54,0 @@ top: "rgba(38, 166, 154, 0.1)",

lib/AreaOnlySeries.d.ts

@@ -11,2 +11,10 @@ import { ScaleContinuousNumeric } from "d3-scale";
     /**
+     * Wether to connect the area between undefined data points.
+     */
+    readonly connectNulls?: boolean;
+    /**
+     * A factory for a curve generator for the area.
+     */
+    readonly curve?: CurveFactory;
+    /**
      * The default accessor for defined returns not NaN, thus assumes that the input data is always a number.
@@ -20,6 +28,2 @@ */
     /**
-     * A factory for a curve generator for the area.
-     */
-    readonly curve?: CurveFactory;
-    /**
      * Selector for data to plot.
@@ -29,4 +33,8 @@ */
 }
+/**
+ * `AreaOnlySeries` component.
+ */
 export declare class AreaOnlySeries extends React.Component<AreaOnlySeriesProps> {
     static defaultProps: {
+        connectNulls: boolean;
         defined: (d: number | undefined) => boolean;
@@ -33,0 +41,0 @@ base: (yScale: ScaleContinuousNumeric<number, number>) => any;

lib/AreaOnlySeries.js

 import { first, functor, getAxisCanvas, GenericChartComponent } from "@react-financial-charts/core";
 import { area } from "d3-shape";
 import * as React from "react";
+/**
+ * `AreaOnlySeries` component.
+ */
 export class AreaOnlySeries extends React.Component {
@@ -8,3 +11,3 @@ constructor() {
         this.drawOnCanvas = (ctx, moreProps) => {
-            const { fillStyle, curve, canvasClip, yAccessor, defined = AreaOnlySeries.defaultProps.defined, base, } = this.props;
+            const { connectNulls, fillStyle, curve, canvasClip, yAccessor, defined = AreaOnlySeries.defaultProps.defined, base, } = this.props;
             const { xScale, chartConfig: { yScale }, plotData, xAccessor, } = moreProps;
@@ -18,14 +21,15 @@ if (canvasClip !== undefined) {
             }
-            ctx.beginPath();
             const newBase = functor(base);
             const areaSeries = area()
-                .defined((d) => defined(yAccessor(d)))
                 .x((d) => Math.round(xScale(xAccessor(d))))
                 .y0((d) => newBase(yScale, d, moreProps))
-                .y1((d) => Math.round(yScale(yAccessor(d))))
-                .context(ctx);
+                .y1((d) => Math.round(yScale(yAccessor(d))));
             if (curve !== undefined) {
                 areaSeries.curve(curve);
             }
-            areaSeries(plotData);
+            if (!connectNulls) {
+                areaSeries.defined((d) => defined(yAccessor(d)));
+            }
+            ctx.beginPath();
+            areaSeries.context(ctx)(plotData);
             ctx.fill();
@@ -42,2 +46,3 @@ if (canvasClip !== undefined) {
 AreaOnlySeries.defaultProps = {
+    connectNulls: false,
     defined: (d) => d !== undefined && !isNaN(d),
@@ -44,0 +49,0 @@ base: (yScale) => first(yScale.range()),

lib/AreaSeries.d.ts

@@ -11,4 +11,7 @@ import { strokeDashTypes } from "@react-financial-charts/core";
     readonly canvasClip?: (context: CanvasRenderingContext2D, moreProps: any) => void;
-    readonly className?: string;
     /**
+     * Wether to connect the area between undefined data points.
+     */
+    readonly connectNulls?: boolean;
+    /**
      * Color, gradient, or pattern to use for fill.
@@ -15,0 +18,0 @@ */

lib/AreaSeries.js

@@ -9,10 +9,9 @@ import React, { Component } from "react";
     render() {
-        const { baseAt, className, strokeStyle, strokeWidth, strokeDasharray, fillStyle, curve, canvasClip, yAccessor, } = this.props;
-        return (React.createElement("g", { className: className },
-            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 })));
+        const { baseAt, connectNulls, strokeStyle, strokeWidth, strokeDasharray, fillStyle, curve, canvasClip, yAccessor, } = this.props;
+        return (React.createElement("g", null,
+            React.createElement(AreaOnlySeries, { connectNulls: connectNulls, yAccessor: yAccessor, curve: curve, base: baseAt, fillStyle: fillStyle, canvasClip: canvasClip }),
+            React.createElement(LineSeries, { connectNulls: connectNulls, yAccessor: yAccessor, strokeStyle: strokeStyle, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, curve: curve, canvasClip: canvasClip, highlightOnHover: false })));
     }
 }
 AreaSeries.defaultProps = {
-    className: "react-financial-charts-area",
     fillStyle: "rgba(33, 150, 243, 0.1)",
@@ -19,0 +18,0 @@ strokeStyle: "#2196f3",

package.json

 {
   "name": "@react-financial-charts/series",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Series for react-financial-charts",
@@ -51,3 +51,3 @@ "publishConfig": {
   },
-  "gitHead": "a1a1b311172f8ad818040ccb99c8dc35dbf74212"
+  "gitHead": "4909fdf9f65c6ff0d6e4e3a3d892a87a78cdf0d3"
 }

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

307262

increased by0.47%

Lines of code

5836

increased by0.66%

No dependency changes