fix(core): only draw canvas if the draw function is defined

Adding check for the canvasDraw function.

package.json

@@ -41,6 +41,7 @@
   "devDependencies": {
     "@babel/core": "^7.10.3",
     "@storybook/addon-docs": "^5.3.19",
+    "@storybook/addon-essentials": "^5.3.19",
     "@storybook/react": "^5.3.19",
     "@storybook/theming": "^5.3.19",
     "@types/d3-array": "^2.0.0",

packages/core/src/GenericComponent.tsx

@@ -314,7 +314,7 @@ export class GenericComponent extends React.Component<GenericComponentProps, Gen
     }
 
     // @ts-ignore
-    public draw({ trigger, force } = { force: false }) {
+    public draw({ trigger, force }: { force: boolean; trigger: string } = { force: false }) {
         const type = aliases[trigger] || trigger;
         const proceed = this.props.drawOn.indexOf(type) > -1;
 
@@ -429,16 +429,22 @@ export class GenericComponent extends React.Component<GenericComponentProps, Gen
 
     public drawOnCanvas() {
         const { canvasDraw, canvasToDraw } = this.props;
+        if (canvasDraw === undefined) {
+            return;
+        }
+
         const { getCanvasContexts } = this.context;
 
         const moreProps = this.getMoreProps();
 
         const contexts = getCanvasContexts();
 
         const ctx = canvasToDraw(contexts);
-        this.preCanvasDraw(ctx, moreProps);
-        canvasDraw(ctx, moreProps);
-        this.postCanvasDraw(ctx, moreProps);
+        if (ctx !== undefined) {
+            this.preCanvasDraw(ctx, moreProps);
+            canvasDraw(ctx, moreProps);
+            this.postCanvasDraw(ctx, moreProps);
+        }
     }
 
     public render() {

packages/stories/.storybook/main.js

@@ -0,0 +1,31 @@
+module.exports = {
+    addons: [
+        "@storybook/addon-docs",
+        "@storybook/addon-essentials",
+    ],
+    stories: ["../src/**/*.stories.(js|jsx|ts|tsx|mdx)"],
+    webpackFinal: async config => {
+        config.module.rules.push({
+            test: /\.(js)$/,
+            enforce: "pre",
+            use: [
+                {
+                    loader: require.resolve("source-map-loader"),
+                }
+            ],
+        });
+        config.module.rules.push({
+            test: /\.(ts|tsx)$/,
+            use: [
+                {
+                    loader: require.resolve("ts-loader"),
+                },
+                {
+                    loader: require.resolve("react-docgen-typescript-loader"),
+                },
+            ],
+        });
+        config.resolve.extensions.push(".ts", ".tsx");
+        return config;
+    },
+};

packages/stories/.storybook/manager.js

@@ -0,0 +1,10 @@
+import { addons } from "@storybook/addons";
+import { create } from "@storybook/theming";
+
+addons.setConfig({
+    theme: create({
+        base: "light",
+        brandTitle: "React Financial Charts",
+        brandUrl: "https://github.com/reactivemarkets/react-financial-charts",
+    }),
+});

packages/stories/src/features/axis/axis.tsx

@@ -62,4 +62,4 @@ class AxisExample extends React.Component<ChartProps> {
     };
 }
 
-export default withOHLCData()(withSize()(withDeviceRatio()(AxisExample)));
+export default withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(AxisExample)));

packages/stories/src/features/coordinates/coordinates.tsx

@@ -62,4 +62,4 @@ class Coordinates extends React.Component<ChartProps> {
     };
 }
 
-export default withOHLCData()(withSize()(withDeviceRatio()(Coordinates)));
+export default withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(Coordinates)));

packages/stories/src/features/interaction/interaction.tsx

@@ -77,4 +77,4 @@ class Interaction extends React.Component<ChartProps> {
     };
 }
 
-export default withOHLCData()(withSize()(withDeviceRatio()(Interaction)));
+export default withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(Interaction)));

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

@@ -72,4 +72,4 @@ class ATRIndicator extends React.Component<ChartProps> {
     }
 }
 
-export default withOHLCData()(withSize()(withDeviceRatio()(ATRIndicator)));
+export default withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(ATRIndicator)));

packages/stories/src/indicators/bollingerBand/bollingerIndicator.tsx

@@ -69,4 +69,4 @@ class BollingerIndicator extends React.Component<ChartProps> {
     };
 }
 
-export default withOHLCData()(withSize()(withDeviceRatio()(BollingerIndicator)));
+export default withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BollingerIndicator)));

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

@@ -68,4 +68,4 @@ class ElderRayIndicator extends React.Component<ChartProps> {
     }
 }
 
-export default withOHLCData()(withSize()(withDeviceRatio()(ElderRayIndicator)));
+export default withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(ElderRayIndicator)));

packages/stories/src/indicators/ema/emaIndicator.tsx

@@ -91,4 +91,4 @@ class EMAIndicator extends React.Component<ChartProps> {
     }
 }
 
-export default withOHLCData()(withSize()(withDeviceRatio()(EMAIndicator)));
+export default withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(EMAIndicator)));

packages/stories/src/indicators/forceIndex/forceIndicator.tsx

@@ -80,4 +80,4 @@ class ForceIndicator extends React.Component<ChartProps> {
     }
 }
 
-export default withOHLCData()(withSize()(withDeviceRatio()(ForceIndicator)));
+export default withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(ForceIndicator)));

packages/stories/src/indicators/macd/macdIndicator.tsx

@@ -86,4 +86,4 @@ class MACDIndicator extends React.Component<ChartProps> {
     }
 }
 
-export default withOHLCData()(withSize()(withDeviceRatio()(MACDIndicator)));
+export default withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(MACDIndicator)));

packages/stories/src/indicators/rsi/rsiIndicator.tsx

@@ -67,4 +67,4 @@ class RSIIndicator extends React.Component<ChartProps> {
     }
 }
 
-export default withOHLCData()(withSize()(withDeviceRatio()(RSIIndicator)));
+export default withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(RSIIndicator)));

packages/stories/src/indicators/sar/sarIndicator.tsx

@@ -77,4 +77,4 @@ class SARIndicator extends React.Component<ChartProps> {
     }
 }
 
-export default withOHLCData()(withSize()(withDeviceRatio()(SARIndicator)));
+export default withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(SARIndicator)));

packages/stories/src/series/area/basicAreaSeries.tsx

@@ -3,8 +3,8 @@ import { Chart, ChartCanvas } from "@react-financial-charts/core";
 import { XAxis, YAxis } from "@react-financial-charts/axes";
 import { discontinuousTimeScaleProviderBuilder } from "@react-financial-charts/scales";
 import { AreaSeries } from "@react-financial-charts/series";
-import { IOHLCData, withOHLCData } from "../../data";
 import { withDeviceRatio, withSize } from "@react-financial-charts/utils";
+import { IOHLCData, withOHLCData } from "../../data";
 
 interface ChartProps {
     readonly data: IOHLCData[];
@@ -59,6 +59,8 @@ class BasicAreaSeries extends React.Component<ChartProps> {
     };
 }
 
-export const Daily = withOHLCData()(withSize()(withDeviceRatio()(BasicAreaSeries)));
+export const Daily = withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicAreaSeries)));
 
-export const Intraday = withOHLCData("MSFT_INTRA_DAY")(withSize()(withDeviceRatio()(BasicAreaSeries)));
+export const Intraday = withOHLCData("MSFT_INTRA_DAY")(
+    withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicAreaSeries)),
+);

packages/stories/src/series/bar/basicBarSeries.tsx

@@ -59,6 +59,8 @@ class BasicBarSeries extends React.Component<ChartProps> {
     };
 }
 
-export const Daily = withOHLCData()(withSize()(withDeviceRatio()(BasicBarSeries)));
+export const Daily = withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicBarSeries)));
 
-export const Intraday = withOHLCData("MSFT_INTRA_DAY")(withSize()(withDeviceRatio()(BasicBarSeries)));
+export const Intraday = withOHLCData("MSFT_INTRA_DAY")(
+    withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicBarSeries)),
+);

packages/stories/src/series/baseline/basicBaselineSeries.tsx

@@ -60,6 +60,8 @@ class BasicBaselineSeries extends React.Component<ChartProps> {
     };
 }
 
-export const Daily = withOHLCData()(withSize()(withDeviceRatio()(BasicBaselineSeries)));
+export const Daily = withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicBaselineSeries)));
 
-export const Intraday = withOHLCData("MSFT_INTRA_DAY")(withSize()(withDeviceRatio()(BasicBaselineSeries)));
+export const Intraday = withOHLCData("MSFT_INTRA_DAY")(
+    withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicBaselineSeries)),
+);

packages/stories/src/series/candlestick/basicCandlestick.tsx

@@ -55,6 +55,8 @@ class BasicCandlestick extends React.Component<ChartProps> {
     };
 }
 
-export const Daily = withOHLCData()(withSize()(withDeviceRatio()(BasicCandlestick)));
+export const Daily = withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicCandlestick)));
 
-export const Intraday = withOHLCData("MSFT_INTRA_DAY")(withSize()(withDeviceRatio()(BasicCandlestick)));
+export const Intraday = withOHLCData("MSFT_INTRA_DAY")(
+    withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicCandlestick)),
+);

packages/stories/src/series/heikinAshi/basicHeikinAshiSeries.tsx

@@ -60,6 +60,8 @@ class BasicHeikinAshiSeries extends React.Component<ChartProps> {
     };
 }
 
-export const Daily = withOHLCData()(withSize()(withDeviceRatio()(BasicHeikinAshiSeries)));
+export const Daily = withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicHeikinAshiSeries)));
 
-export const Intraday = withOHLCData("MSFT_INTRA_DAY")(withSize()(withDeviceRatio()(BasicHeikinAshiSeries)));
+export const Intraday = withOHLCData("MSFT_INTRA_DAY")(
+    withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicHeikinAshiSeries)),
+);

packages/stories/src/series/kagi/basicKagiSeries.tsx

@@ -59,6 +59,8 @@ class BasicKagiSeries extends React.Component<ChartProps> {
     };
 }
 
-export const Daily = withOHLCData()(withSize()(withDeviceRatio()(BasicKagiSeries)));
+export const Daily = withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicKagiSeries)));
 
-export const Intraday = withOHLCData("MSFT_INTRA_DAY")(withSize()(withDeviceRatio()(BasicKagiSeries)));
+export const Intraday = withOHLCData("MSFT_INTRA_DAY")(
+    withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicKagiSeries)),
+);

packages/stories/src/series/line/basicLineSeries.tsx

@@ -59,6 +59,8 @@ class BasicLineSeries extends React.Component<ChartProps> {
     };
 }
 
-export const Daily = withOHLCData()(withSize()(withDeviceRatio()(BasicLineSeries)));
+export const Daily = withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicLineSeries)));
 
-export const Intraday = withOHLCData("MSFT_INTRA_DAY")(withSize()(withDeviceRatio()(BasicLineSeries)));
+export const Intraday = withOHLCData("MSFT_INTRA_DAY")(
+    withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicLineSeries)),
+);

packages/stories/src/series/ohlc/basicOHLCSeries.tsx

@@ -60,6 +60,8 @@ class BasicOHLCSeries extends React.Component<ChartProps> {
     };
 }
 
-export const Daily = withOHLCData()(withSize()(withDeviceRatio()(BasicOHLCSeries)));
+export const Daily = withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicOHLCSeries)));
 
-export const Intraday = withOHLCData("MSFT_INTRA_DAY")(withSize()(withDeviceRatio()(BasicOHLCSeries)));
+export const Intraday = withOHLCData("MSFT_INTRA_DAY")(
+    withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicOHLCSeries)),
+);

packages/stories/src/series/pointAndFigure/basicPointAndFigureSeries.tsx

@@ -60,6 +60,10 @@ class BasicPointAndFigureSeries extends React.Component<ChartProps> {
     };
 }
 
-export const Daily = withOHLCData()(withSize()(withDeviceRatio()(BasicPointAndFigureSeries)));
+export const Daily = withOHLCData()(
+    withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicPointAndFigureSeries)),
+);
 
-export const Intraday = withOHLCData("MSFT_INTRA_DAY")(withSize()(withDeviceRatio()(BasicPointAndFigureSeries)));
+export const Intraday = withOHLCData("MSFT_INTRA_DAY")(
+    withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicPointAndFigureSeries)),
+);

packages/stories/src/series/renko/basicRenkoSeries.tsx

@@ -60,6 +60,8 @@ class BasicRenkoSeries extends React.Component<ChartProps> {
     };
 }
 
-export const Daily = withOHLCData()(withSize()(withDeviceRatio()(BasicRenkoSeries)));
+export const Daily = withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicRenkoSeries)));
 
-export const Intraday = withOHLCData("MSFT_INTRA_DAY")(withSize()(withDeviceRatio()(BasicRenkoSeries)));
+export const Intraday = withOHLCData("MSFT_INTRA_DAY")(
+    withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicRenkoSeries)),
+);