fix: correcting and adding types to props

Expanded stories adding indicators.
Fixed macd calculator.
Fixed bollinger band calculator.

packages/charts/src/CanvasContainer.tsx

@@ -20,7 +20,7 @@ class CanvasContainer extends React.Component<CanvasContainerProps> {
         this.drawCanvas = {};
     }
 
-    public setDrawCanvas(node) {
+    public setDrawCanvas(node: HTMLCanvasElement) {
         if (isDefined(node)) {
             this.drawCanvas[node.id] = node.getContext("2d");
         } else {

packages/charts/src/calculator/bollingerband.ts

@@ -66,7 +66,7 @@ export default function () {
             });
 
         const zip = zipper()
-            .combine((datum, meanValue) => ({ datum, meanValue }));
+            .combine((datum, meanValue) => ({ datum, mean: meanValue }));
 
         // @ts-ignore
         const tuples = zip(data, meanAlgorithm(data));

packages/charts/src/calculator/macd.ts

@@ -58,8 +58,8 @@ export default function () {
 
         const zip = zipper()
             .combine((macdValue, signalValue) => ({
-                macdValue,
-                signalValue,
+                macd: macdValue,
+                signal: signalValue,
                 divergence: (isDefined(macdValue) && isDefined(signalValue)) ? macdValue - signalValue : undefined,
             }));
 

packages/charts/src/interactive/DrawingObjectSelector.tsx

@@ -46,7 +46,6 @@ export class DrawingObjectSelector extends React.Component<DrawingObjectSelector
                 && Array.isArray(valueArray)
                 && valueArray.length > 0;
             if (valuePresent) {
-                // console.log("Value present for ", each.type, each.chartId);
                 const morePropsForChart = getMorePropsForChart(
                     moreProps, each.chartId,
                 );

packages/charts/src/series/AlternatingFillAreaSeries.tsx

@@ -150,7 +150,7 @@ export class AlternatingFillAreaSeries extends React.Component<AlternatingFillAr
         );
     }
 
-    private readonly bottomClip = (ctx, moreProps) => {
+    private readonly bottomClip = (ctx: CanvasRenderingContext2D, moreProps) => {
         const { chartConfig } = moreProps;
         const { baseAt } = this.props;
         const { yScale, width, height } = chartConfig;
@@ -165,7 +165,7 @@ export class AlternatingFillAreaSeries extends React.Component<AlternatingFillAr
         ctx.clip();
     }
 
-    private readonly topClip = (ctx, moreProps) => {
+    private readonly topClip = (ctx: CanvasRenderingContext2D, moreProps) => {
         const { chartConfig } = moreProps;
         const { baseAt } = this.props;
         const { yScale, width } = chartConfig;

packages/charts/src/series/AreaOnlySeries.tsx

@@ -79,11 +79,12 @@ export class AreaOnlySeries extends React.Component<AreaOnlySeriesProps> {
         );
     }
 
-    private readonly drawOnCanvas = (ctx, moreProps) => {
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps) => {
         const { yAccessor, defined, base, canvasGradient } = this.props;
         const {
             fill = AreaOnlySeries.defaultProps.fill,
-            stroke, opacity, interpolation, canvasClip } = this.props;
+            stroke,
+            opacity, interpolation, canvasClip } = this.props;
 
         const { xScale, chartConfig: { yScale }, plotData, xAccessor } = moreProps;
 
@@ -97,7 +98,10 @@ export class AreaOnlySeries extends React.Component<AreaOnlySeriesProps> {
         } else {
             ctx.fillStyle = colorToRGBA(fill, opacity);
         }
-        ctx.strokeStyle = stroke;
+
+        if (stroke !== undefined) {
+            ctx.strokeStyle = stroke;
+        }
 
         ctx.beginPath();
         const newBase = functor(base);

packages/charts/src/series/BarSeries.tsx

@@ -15,15 +15,15 @@ import {
 import { functor, isDefined } from "../utils";
 
 interface BarSeriesProps {
-    baseAt?: number | any; // func
-    stroke?: boolean;
-    width?: number | any; // func
-    yAccessor: any; // func
-    opacity?: number;
-    fill?: number | any; // func
-    className?: number | any; // func
-    clip?: boolean;
-    swapScales?: boolean;
+    readonly baseAt?: number | any; // func
+    readonly stroke?: boolean;
+    readonly width?: number | any; // func
+    readonly yAccessor: any; // func
+    readonly opacity?: number;
+    readonly fill?: number | any; // func
+    readonly className?: number | any; // func
+    readonly clip?: boolean;
+    readonly swapScales?: boolean;
 }
 
 export class BarSeries extends React.Component<BarSeriesProps> {
@@ -44,7 +44,7 @@ export class BarSeries extends React.Component<BarSeriesProps> {
         );
     }
 
-    private readonly drawOnCanvas = (ctx, moreProps) => {
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps) => {
         if (this.props.swapScales) {
             const { xAccessor } = moreProps;
             drawOnCanvasHelper(ctx, this.props, moreProps, xAccessor, identityStack);

packages/charts/src/series/BollingerSeries.tsx

@@ -4,17 +4,17 @@ import { AreaOnlySeries } from "./AreaOnlySeries";
 import { LineSeries } from "./LineSeries";
 
 interface BollingerSeriesProps {
-    yAccessor: any; // func
-    className?: string;
-    areaClassName?: string;
-    opacity?: number;
-    type?: string;
-    stroke: {
+    readonly yAccessor: any; // func
+    readonly className?: string;
+    readonly areaClassName?: string;
+    readonly opacity?: number;
+    readonly type?: string;
+    readonly stroke: {
         top: string,
         middle: string,
         bottom: string,
     };
-    fill: string;
+    readonly fill: string;
 }
 
 export class BollingerSeries extends React.Component<BollingerSeriesProps> {

packages/charts/src/series/CandlestickSeries.tsx

@@ -12,7 +12,7 @@ interface CandlestickSeriesProps {
     readonly className?: string;
     readonly wickClassName?: string;
     readonly candleClassName?: string;
-    readonly candleStrokeWidth?: number | string;
+    readonly candleStrokeWidth?: number;
     readonly widthRatio?: number;
     readonly width?: number | any; // func
     readonly classNames?: string | any; // func
@@ -56,7 +56,7 @@ export class CandlestickSeries extends React.Component<CandlestickSeriesProps> {
         );
     }
 
-    private readonly drawOnCanvas = (ctx, moreProps) => {
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps) => {
         drawOnCanvas(ctx, this.props, moreProps);
     }
 
@@ -119,8 +119,11 @@ function getCandlesSVG(props: CandlestickSeriesProps, candleData) {
     return candles;
 }
 
-function drawOnCanvas(ctx, props: CandlestickSeriesProps, moreProps) {
-    const { opacity, candleStrokeWidth } = props;
+function drawOnCanvas(ctx: CanvasRenderingContext2D, props: CandlestickSeriesProps, moreProps) {
+    const {
+        opacity,
+        candleStrokeWidth = CandlestickSeries.defaultProps.candleStrokeWidth,
+    } = props;
     const { xScale, chartConfig: { yScale }, plotData, xAccessor } = moreProps;
 
     const candleData = getCandleData(props, xAccessor, xScale, yScale, plotData);

packages/charts/src/series/CircleMarker.tsx

@@ -3,17 +3,17 @@ import * as React from "react";
 import { colorToRGBA, functor } from "../utils";
 
 interface CircleProps {
-    stroke?: string;
-    fill?: string;
-    opacity?: number;
-    point: {
+    readonly stroke?: string;
+    readonly fill?: string;
+    readonly opacity?: number;
+    readonly point: {
         x: number,
         y: number,
         datum: any,
     };
-    className?: string;
-    strokeWidth?: number;
-    r: number | any; // func
+    readonly className?: string;
+    readonly strokeWidth?: number;
+    readonly r: number | ((datum: any) => number);
 }
 
 export class Circle extends React.Component<CircleProps> {
@@ -26,9 +26,14 @@ export class Circle extends React.Component<CircleProps> {
         className: "react-financial-charts-marker-circle",
     };
 
-    public static drawOnCanvas = (props, point, ctx) => {
+    public static drawOnCanvas = (props: CircleProps, point, ctx: CanvasRenderingContext2D) => {
 
-        const { stroke, fill, opacity, strokeWidth } = props;
+        const {
+            stroke = Circle.defaultProps.stroke,
+            fill = Circle.defaultProps.fill,
+            opacity,
+            strokeWidth = Circle.defaultProps.strokeWidth,
+        } = props;
 
         ctx.strokeStyle = stroke;
         ctx.lineWidth = strokeWidth;
@@ -40,7 +45,7 @@ export class Circle extends React.Component<CircleProps> {
         Circle.drawOnCanvasWithNoStateChange(props, point, ctx);
     }
 
-    public static drawOnCanvasWithNoStateChange = (props, point, ctx) => {
+    public static drawOnCanvasWithNoStateChange = (props: CircleProps, point, ctx: CanvasRenderingContext2D) => {
 
         const { r } = props;
         const radius = functor(r)(point.datum);
@@ -55,6 +60,7 @@ export class Circle extends React.Component<CircleProps> {
     public render() {
         const { className, stroke, strokeWidth, opacity, fill, point, r } = this.props;
         const radius = functor(r)(point.datum);
+
         return (
             <circle
                 className={className}

packages/charts/src/series/ElderRaySeries.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import OverlayBarSeries from "./OverlayBarSeries";
+import { OverlayBarSeries } from "./OverlayBarSeries";
 import { StraightLine } from "./StraightLine";
 
 interface ElderRaySeriesProps {

packages/charts/src/series/GroupedBarSeries.tsx

@@ -8,11 +8,12 @@ interface GroupedBarSeriesProps {
     readonly baseAt: number | any; // func
     readonly direction: "up" | "down";
     readonly stroke: boolean;
-    readonly widthRatio: number;
+    readonly widthRatio?: number;
     readonly opacity: number;
     readonly fill: string | any; // func
     readonly className: string | any; // func
     readonly yAccessor: any[]; // func
+    readonly spaceBetweenBar?: number;
 }
 
 export class GroupedBarSeries extends React.Component<GroupedBarSeriesProps> {
@@ -34,7 +35,7 @@ export class GroupedBarSeries extends React.Component<GroupedBarSeriesProps> {
         );
     }
 
-    private readonly drawOnCanvas = (ctx, moreProps) => {
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps) => {
         const { xAccessor } = moreProps;
 
         drawOnCanvasHelper(ctx, this.props, moreProps, xAccessor, identityStack, this.postProcessor);

packages/charts/src/series/KagiSeries.tsx

@@ -15,7 +15,7 @@ interface KagiSeriesProps {
         yang: string;
         yin: string;
     };
-    readonly strokeWidth: number;
+    readonly strokeWidth?: number;
 }
 
 export class KagiSeries extends React.Component<KagiSeriesProps> {

packages/charts/src/series/LineSeries.tsx

@@ -39,7 +39,7 @@ export class LineSeries extends React.Component<LineSeriesProps> {
 
     public static defaultProps = {
         className: "line",
-        strokeWidth: 3,
+        strokeWidth: 1,
         strokeOpacity: 1,
         hoverStrokeWidth: 4,
         fill: "none",
@@ -119,13 +119,13 @@ export class LineSeries extends React.Component<LineSeriesProps> {
         );
     }
 
-    private readonly drawOnCanvas = (ctx, moreProps) => {
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps) => {
         const {
             yAccessor,
             stroke = LineSeries.defaultProps.stroke,
             strokeOpacity,
-            strokeWidth,
-            hoverStrokeWidth,
+            strokeWidth = LineSeries.defaultProps.strokeWidth,
+            hoverStrokeWidth = LineSeries.defaultProps.hoverStrokeWidth,
             defined,
             strokeDasharray,
             interpolation,
@@ -145,7 +145,10 @@ export class LineSeries extends React.Component<LineSeriesProps> {
         ctx.lineWidth = hovering ? hoverStrokeWidth : strokeWidth;
 
         ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
-        ctx.setLineDash(getStrokeDasharray(strokeDasharray).split(","));
+
+        const lineDash = getStrokeDasharray(strokeDasharray).split(",").map((dash) => Number(dash));
+
+        ctx.setLineDash(lineDash);
 
         const dataSeries = d3Line()
             .x((d) => Math.round(xScale(xAccessor(d))))

packages/charts/src/series/MACDSeries.tsx

@@ -5,22 +5,22 @@ import { LineSeries } from "./LineSeries";
 import { StraightLine } from "./StraightLine";
 
 interface MACDSeriesProps {
-    className?: string;
-    yAccessor?: any; // func
-    opacity?: number;
-    divergenceStroke?: boolean;
-    zeroLineStroke?: string;
-    zeroLineOpacity?: number;
-    clip: boolean;
-    stroke: {
+    readonly className?: string;
+    readonly yAccessor?: any; // func
+    readonly opacity?: number;
+    readonly divergenceStroke?: boolean;
+    readonly zeroLineStroke?: string;
+    readonly zeroLineOpacity?: number;
+    readonly clip?: boolean;
+    readonly stroke: {
         macd: string;
         signal: string;
     };
-    fill: {
+    readonly fill: {
         divergence: string | any; // func
     };
-    widthRatio?: number;
-    width?: number | any; // func
+    readonly widthRatio?: number;
+    readonly width?: number | any; // func
 }
 
 export class MACDSeries extends React.Component<MACDSeriesProps> {
@@ -57,12 +57,10 @@ export class MACDSeries extends React.Component<MACDSeriesProps> {
                     yAccessor={this.yAccessorForDivergence} />
                 <LineSeries
                     yAccessor={this.yAccessorForMACD}
-                    stroke={stroke.macd}
-                    fill="none" />
+                    stroke={stroke.macd} />
                 <LineSeries
                     yAccessor={this.yAccessorForSignal}
-                    stroke={stroke.signal}
-                    fill="none" />
+                    stroke={stroke.signal} />
                 <StraightLine
                     stroke={zeroLineStroke}
                     opacity={zeroLineOpacity}