fix(props): correcting more props

Some more props corrected.
Added ATR, Force Index and Elder Ray stories.

packages/charts/src/indicator/change.ts

@@ -1,6 +1,5 @@
-import { merge, rebind } from "../utils";
-
 import { change } from "../calculator";
+import { merge, rebind } from "../utils";
 
 import baseIndicator from "./baseIndicator";
 

packages/charts/src/indicator/elderRay.ts

@@ -20,7 +20,9 @@ export default function () {
 
     const indicator = function (data, options = { merge: true }) {
         if (options.merge) {
-            if (!base.accessor()) { throw new Error(`Set an accessor to ${ALGORITHM_TYPE} before calculating`); }
+            if (!base.accessor()) {
+                throw new Error(`Set an accessor to ${ALGORITHM_TYPE} before calculating`);
+            }
             return mergedAlgorithm(data);
         }
         return underlyingAlgorithm(data);

packages/charts/src/series/GroupedBarSeries.tsx

@@ -6,14 +6,14 @@ import { drawOnCanvasHelper, identityStack, StackedBarSeries, svgHelper } from "
 
 interface GroupedBarSeriesProps {
     readonly baseAt: number | any; // func
+    readonly className: string | any; // func
     readonly direction: "up" | "down";
+    readonly fill: string | any; // func
+    readonly opacity: number;
+    readonly spaceBetweenBar?: number;
     readonly stroke: boolean;
     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> {

packages/charts/src/series/KagiSeries.tsx

@@ -7,11 +7,11 @@ import { isDefined, isNotDefined } from "../utils";
 
 interface KagiSeriesProps {
     readonly className?: string;
-    readonly stroke?: {
+    readonly fill?: {
         yang: string;
         yin: string;
     };
-    readonly fill?: {
+    readonly stroke?: {
         yang: string;
         yin: string;
     };

packages/charts/src/series/LineSeries.tsx

@@ -13,26 +13,26 @@ import {
 } from "../utils";
 
 interface LineSeriesProps {
+    readonly canvasClip?: any; // func
     readonly className?: string;
-    readonly strokeWidth?: number;
-    readonly strokeOpacity?: number;
-    readonly stroke?: string;
-    readonly hoverStrokeWidth?: number;
-    readonly fill?: string;
+    readonly connectNulls?: boolean;
     readonly defined?: any; // func
-    readonly hoverTolerance?: number;
-    readonly strokeDasharray?: strokeDashTypes;
+    readonly fill?: string;
     readonly highlightOnHover?: boolean;
+    readonly hoverStrokeWidth?: number;
+    readonly hoverTolerance?: number;
+    readonly interpolation?: any; // func
     readonly onClick?: any; // func
     readonly onDoubleClick?: any; // func
     readonly onHover?: any; // func
     readonly onUnHover?: any; // func
     readonly onContextMenu?: any; // func
-    readonly yAccessor: (data: any) => number;
-    readonly connectNulls?: boolean;
-    readonly interpolation?: any; // func
-    readonly canvasClip?: any; // func
+    readonly stroke?: string;
+    readonly strokeDasharray?: strokeDashTypes;
+    readonly strokeOpacity?: number;
+    readonly strokeWidth?: number;
     readonly style?: React.CSSProperties;
+    readonly yAccessor: (data: any) => number;
 }
 
 export class LineSeries extends React.Component<LineSeriesProps> {

packages/charts/src/series/MACDSeries.tsx

@@ -6,49 +6,56 @@ import { StraightLine } from "./StraightLine";
 
 interface MACDSeriesProps {
     readonly className?: string;
-    readonly yAccessor?: any; // func
-    readonly opacity?: number;
-    readonly divergenceStroke?: boolean;
-    readonly zeroLineStroke?: string;
-    readonly zeroLineOpacity?: number;
     readonly clip?: boolean;
-    readonly stroke: {
+    readonly divergenceStroke?: boolean;
+    readonly fill?: {
+        divergence: string | any; // func
+    };
+    readonly opacity?: number;
+    readonly stroke?: {
         macd: string;
         signal: string;
     };
-    readonly fill: {
-        divergence: string | any; // func
-    };
     readonly widthRatio?: number;
     readonly width?: number | any; // func
+    readonly yAccessor?: any; // func
+    readonly zeroLineStroke?: string;
+    readonly zeroLineOpacity?: number;
 }
 
 export class MACDSeries extends React.Component<MACDSeriesProps> {
 
     public static defaultProps = {
         className: "react-financial-charts-macd-series",
+        clip: true,
+        divergenceStroke: false,
         fill: {
             divergence: "#4682B4",
         },
-        zeroLineStroke: "#000000",
-        zeroLineOpacity: 0.3,
         opacity: 0.6,
-        divergenceStroke: false,
-        clip: true,
         stroke: {
             macd: "#0093FF",
             signal: "#D84315",
         },
         widthRatio: 0.5,
         width: BarSeries.defaultProps.width,
+        zeroLineStroke: "#000000",
+        zeroLineOpacity: 0.3,
     };
 
     public render() {
-        const { className, opacity, divergenceStroke, widthRatio, width } = this.props;
-        const { stroke, fill } = this.props;
-
-        const { clip } = this.props;
-        const { zeroLineStroke, zeroLineOpacity } = this.props;
+        const {
+            className,
+            clip,
+            fill = MACDSeries.defaultProps.fill,
+            opacity,
+            divergenceStroke,
+            stroke = MACDSeries.defaultProps.stroke,
+            widthRatio,
+            width,
+            zeroLineStroke,
+            zeroLineOpacity,
+        } = this.props;
 
         return (
             <g className={className}>

packages/stories/src/indicators/atr/atrIndicator.tsx

@@ -0,0 +1,87 @@
+import { format } from "d3-format";
+import * as React from "react";
+import { Chart, ChartCanvas } from "react-financial-charts";
+import { XAxis, YAxis } from "react-financial-charts/lib/axes";
+import { atr } from "react-financial-charts/lib/indicator";
+import { discontinuousTimeScaleProviderBuilder } from "react-financial-charts/lib/scale";
+import { LineSeries } from "react-financial-charts/lib/series";
+import { SingleValueTooltip } from "react-financial-charts/lib/tooltip";
+import { withDeviceRatio } from "react-financial-charts/lib/utils";
+import { IOHLCData, withOHLCData, withSize } from "../../data";
+
+interface ChartProps {
+    readonly data: IOHLCData[];
+    readonly height: number;
+    readonly width: number;
+    readonly ratio: number;
+}
+
+class ATRIndicator extends React.Component<ChartProps> {
+
+    private readonly margin = { left: 0, right: 40, top: 0, bottom: 24 };
+    private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder()
+        .inputDateAccessor((d: IOHLCData) => d.date);
+
+    public render() {
+
+        const {
+            data: initialData,
+            height,
+            ratio,
+            width,
+        } = this.props;
+
+        const atr14 = atr()
+            // @ts-ignore
+            .options({ windowSize: 14 })
+            .merge((d: any, c: any) => { d.atr14 = c; })
+            .accessor((d: any) => d.atr14);
+
+        const calculatedData = atr14(initialData);
+
+        const { margin, xScaleProvider } = this;
+
+        const {
+            data,
+            xScale,
+            xAccessor,
+            displayXAccessor,
+        } = xScaleProvider(calculatedData);
+
+        const start = xAccessor(data[data.length - 1]);
+        const end = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [start, end];
+
+        return (
+            <ChartCanvas
+                height={height}
+                ratio={ratio}
+                width={width}
+                margin={margin}
+                data={data}
+                displayXAccessor={displayXAccessor}
+                seriesName="Data"
+                xScale={xScale}
+                xAccessor={xAccessor}
+                xExtents={xExtents}>
+                <Chart
+                    id={1}
+                    yExtents={atr14.accessor()}>
+                    <XAxis ticks={6} />
+                    <YAxis ticks={2} />
+
+                    <LineSeries yAccessor={atr14.accessor()} stroke={atr14.stroke()} />
+
+                    <SingleValueTooltip
+                        yAccessor={atr14.accessor()}
+                        yLabel={`ATR (${atr14.options().windowSize})`}
+                        yDisplayFormat={format(".2f")}
+                        labelFill={atr14.stroke()}
+                        origin={[8, 16]} />
+                </Chart>
+            </ChartCanvas>
+        );
+    }
+}
+
+export default withOHLCData()(withSize()(withDeviceRatio()(ATRIndicator)));

packages/stories/src/indicators/atr/index.stories.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { atr } from "react-financial-charts/lib/indicator";
+import ATRIndicator from "./atrIndicator";
+
+export default {
+    title: "Visualization|Indicator/ATR",
+    component: atr,
+    parameters: {
+        componentSubtitle: "Average True Range (ATR) is an indicator that measures volatility.",
+    },
+};
+
+export const basic = () => <ATRIndicator />;

packages/stories/src/indicators/elderRay/elderRayIndicator.tsx

@@ -0,0 +1,87 @@
+import { format } from "d3-format";
+import * as React from "react";
+import { Chart, ChartCanvas } from "react-financial-charts";
+import { XAxis, YAxis } from "react-financial-charts/lib/axes";
+import { change, elderRay } from "react-financial-charts/lib/indicator";
+import { discontinuousTimeScaleProviderBuilder } from "react-financial-charts/lib/scale";
+import {
+    ElderRaySeries,
+} from "react-financial-charts/lib/series";
+import {
+    SingleValueTooltip,
+} from "react-financial-charts/lib/tooltip";
+import { withDeviceRatio } from "react-financial-charts/lib/utils";
+import { IOHLCData, withOHLCData, withSize } from "../../data";
+
+interface ChartProps {
+    readonly data: IOHLCData[];
+    readonly height: number;
+    readonly width: number;
+    readonly ratio: number;
+}
+
+class ElderRayIndicator extends React.Component<ChartProps> {
+
+    private readonly margin = { left: 0, right: 48, top: 8, bottom: 24 };
+    private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder()
+        .inputDateAccessor((d: IOHLCData) => d.date);
+
+    public render() {
+
+        const {
+            data: initialData,
+            height,
+            ratio,
+            width,
+        } = this.props;
+
+        const elder: any = elderRay();
+        const changeCalculator = change();
+
+        const calculatedData = changeCalculator(elder(initialData));
+
+        const { margin, xScaleProvider } = this;
+
+        const {
+            data,
+            xScale,
+            xAccessor,
+            displayXAccessor,
+        } = xScaleProvider(calculatedData);
+
+        const start = xAccessor(data[data.length - 1]);
+        const end = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [start, end];
+
+        return (
+            <ChartCanvas
+                height={height}
+                ratio={ratio}
+                width={width}
+                margin={margin}
+                data={data}
+                displayXAccessor={displayXAccessor}
+                seriesName="Data"
+                xScale={xScale}
+                xAccessor={xAccessor}
+                xExtents={xExtents}>
+                <Chart
+                    id={1}
+                    yExtents={[0, elder.accessor()]}>
+                    <XAxis ticks={6} />
+                    <YAxis ticks={4} tickFormat={format(".2f")} />
+
+                    <ElderRaySeries yAccessor={elder.accessor()} />
+
+                    <SingleValueTooltip
+                        yAccessor={elder.accessor()}
+                        yLabel="Elder Ray"
+                        yDisplayFormat={(d) => `${format(".2f")(d.bullPower)}, ${format(".2f")(d.bearPower)}`}
+                        origin={[8, 8]} />
+                </Chart>
+            </ChartCanvas>
+        );
+    }
+}
+
+export default withOHLCData()(withSize()(withDeviceRatio()(ElderRayIndicator)));

packages/stories/src/indicators/elderRay/index.stories.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { forceIndex } from "react-financial-charts/lib/indicator";
+import ElderRayIndicator from "./elderRayIndicator";
+
+export default {
+    title: "Visualization|Indicator/Elder Ray",
+    component: forceIndex,
+    parameters: {
+        componentSubtitle: `This indicator consists of three separate indicators
+        known as "bull power" and "bear power", which are derived from a 13-period
+        exponential moving average (EMA). The three indicator help traders determine
+        the trend direction and isolate spots to enter and exit trades.`,
+    },
+};
+
+export const basic = () => <ElderRayIndicator />;