feat: adding more prop types across all components

Removing unused code.
Added types.
Fixed event handlers.

.eslintrc.yaml

@@ -5,32 +5,34 @@ parserOptions:
   ecmaFeatures:
     jsx: true
 plugins:
-    - "@typescript-eslint"
+  - "@typescript-eslint"
 extends:
-    - "eslint:recommended"
-    - "plugin:react/recommended"
-    - "plugin:@typescript-eslint/eslint-recommended"
-    - "plugin:@typescript-eslint/recommended"
-    - "prettier/@typescript-eslint"
-    - "plugin:prettier/recommended"
-    - "plugin:jest/recommended"
+  - "eslint:recommended"
+  - "plugin:react/recommended"
+  - "plugin:@typescript-eslint/eslint-recommended"
+  - "plugin:@typescript-eslint/recommended"
+  - "prettier/@typescript-eslint"
+  - "plugin:prettier/recommended"
+  - "plugin:jest/recommended"
 rules:
-    "@typescript-eslint/explicit-module-boundary-types": off
-    "@typescript-eslint/interface-name-prefix": off
-    "@typescript-eslint/no-non-null-assertion": off
-    "@typescript-eslint/ban-ts-comment": off
-    "@typescript-eslint/ban-types": off
-    "@typescript-eslint/no-unused-vars":
+  "@typescript-eslint/explicit-member-accessibility": error
+  "@typescript-eslint/explicit-module-boundary-types": off
+  "@typescript-eslint/interface-name-prefix": off
+  "@typescript-eslint/no-non-null-assertion": off
+  "@typescript-eslint/ban-ts-comment": off
+  "@typescript-eslint/ban-types": off
+  "@typescript-eslint/no-explicit-any": off
+  "@typescript-eslint/no-unused-vars":
     - error
     - ignoreRestSiblings: true
-    "react/display-name": off
-    "react/prop-types": off
-    "arrow-spacing": error
-    "curly": error
-    "no-duplicate-imports": error
-    "no-multiple-empty-lines": error
-    "no-var": error
-    "prefer-rest-params": 0
+  "react/display-name": off
+  "react/prop-types": off
+  "arrow-spacing": error
+  "curly": error
+  "no-duplicate-imports": error
+  "no-multiple-empty-lines": error
+  "no-var": error
+  "prefer-rest-params": 0
 settings:
   react:
     version: detect

README.md

@@ -15,7 +15,7 @@ The aim with this project is create financial charts that work out of the box.
 ## Features
 
 - integrates multiple chart types
-- over 60 technical indicators and overlays
+- technical indicators and overlays
 - drawing objects
 
 ### Chart types

package.json

@@ -58,6 +58,7 @@
     "@types/d3-shape": "^1.3.2",
     "@types/d3-time-format": "^2.1.1",
     "@types/jest": "^26.0.10",
+    "@types/lodash.flattendeep": "^4.4.6",
     "@types/react": "^16.9.46",
     "@types/react-dom": "^16.9.8",
     "@types/react-virtualized-auto-sizer": "^1.0.0",

packages/annotations/src/BarAnnotation.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 
 export interface BarAnnotationProps {
     readonly className?: string;
-    readonly path?: any; // func
+    readonly path?: ({ x, y }: { x: number; y: number }) => string;
     readonly onClick?: (
         e: React.MouseEvent,
         data: {
@@ -13,13 +13,14 @@ export interface BarAnnotationProps {
             datum: any;
         },
     ) => void;
-    readonly xAccessor?: any; // func
+    readonly xAccessor?: (datum: any) => any;
     readonly xScale?: ScaleContinuousNumeric<number, number>;
     readonly yScale?: ScaleContinuousNumeric<number, number>;
     readonly datum?: object;
     readonly stroke?: string;
-    readonly fill?: string;
+    readonly fill?: string | ((datum: any) => string);
     readonly opacity?: number;
+    readonly plotData: any[];
     readonly text?: string;
     readonly textAnchor?: string;
     readonly fontFamily?: string;
@@ -37,27 +38,65 @@ export interface BarAnnotationProps {
     readonly textIconXOffset?: number;
     readonly textIconYOffset?: number;
     readonly textIconAnchor?: string;
+    readonly tooltip?: string | ((datum: any) => string);
+    readonly x?:
+        | number
+        | (({
+              xScale,
+              xAccessor,
+              datum,
+              plotData,
+          }: {
+              xScale: ScaleContinuousNumeric<number, number>;
+              xAccessor: (datum: any) => any;
+              datum: any;
+              plotData: any[];
+          }) => number);
+    readonly y?:
+        | number
+        | (({
+              yScale,
+              datum,
+              plotData,
+          }: {
+              yScale: ScaleContinuousNumeric<number, number>;
+              datum: any;
+              plotData: any[];
+          }) => number);
 }
 
 export class BarAnnotation extends React.Component<BarAnnotationProps> {
     public static defaultProps = {
         className: "react-financial-charts-bar-annotation",
         opacity: 1,
         fill: "#000000",
-        textAnchor: "middle",
         fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
         fontSize: 10,
+        textAnchor: "middle",
         textFill: "#000000",
         textOpacity: 1,
         textIconFill: "#000000",
         textIconFontSize: 10,
-        x: ({ xScale, xAccessor, datum }) => xScale(xAccessor(datum)),
+        x: ({
+            xScale,
+            xAccessor,
+            datum,
+        }: {
+            xScale: ScaleContinuousNumeric<number, number>;
+            xAccessor: any;
+            datum: any;
+        }) => xScale(xAccessor(datum)),
     };
 
     public render() {
-        const { className, stroke, opacity } = this.props;
-        const { xAccessor, xScale, yScale, path } = this.props;
         const {
+            className,
+            stroke,
+            opacity,
+            xAccessor,
+            xScale,
+            yScale,
+            path,
             text,
             textXOffset,
             textYOffset,
@@ -67,11 +106,6 @@ export class BarAnnotation extends React.Component<BarAnnotationProps> {
             textFill,
             textOpacity,
             textRotate,
-        } = this.props;
-
-        const { x, y, fill, tooltip } = this.helper(this.props, xAccessor, xScale, yScale);
-
-        const {
             textIcon,
             textIconFontSize,
             textIconFill,
@@ -81,10 +115,12 @@ export class BarAnnotation extends React.Component<BarAnnotationProps> {
             textIconYOffset,
         } = this.props;
 
+        const { x, y, fill, tooltip } = this.helper(this.props, xAccessor, xScale, yScale);
+
         return (
             <g className={className} onClick={this.onClick}>
-                {tooltip != null ? <title>{tooltip}</title> : null}
-                {text != null ? (
+                {tooltip !== undefined ? <title>{tooltip}</title> : null}
+                {text !== undefined ? (
                     <text
                         x={x}
                         y={y}
@@ -94,13 +130,13 @@ export class BarAnnotation extends React.Component<BarAnnotationProps> {
                         fontSize={fontSize}
                         fill={textFill}
                         opacity={textOpacity}
-                        transform={textRotate != null ? `rotate(${textRotate}, ${x}, ${y})` : undefined}
+                        transform={textRotate != undefined ? `rotate(${textRotate}, ${x}, ${y})` : undefined}
                         textAnchor={textAnchor}
                     >
                         {text}
                     </text>
                 ) : null}
-                {textIcon != null ? (
+                {textIcon !== undefined ? (
                     <text
                         x={x}
                         y={y}
@@ -109,13 +145,13 @@ export class BarAnnotation extends React.Component<BarAnnotationProps> {
                         fontSize={textIconFontSize}
                         fill={textIconFill}
                         opacity={textIconOpacity}
-                        transform={textIconRotate != null ? `rotate(${textIconRotate}, ${x}, ${y})` : undefined}
+                        transform={textIconRotate != undefined ? `rotate(${textIconRotate}, ${x}, ${y})` : undefined}
                         textAnchor={textAnchor}
                     >
                         {textIcon}
                     </text>
                 ) : null}
-                {path != null ? <path d={path({ x, y })} stroke={stroke} fill={fill} opacity={opacity} /> : null}
+                {path !== undefined ? <path d={path({ x, y })} stroke={stroke} fill={fill} opacity={opacity} /> : null}
             </g>
         );
     }
@@ -127,7 +163,7 @@ export class BarAnnotation extends React.Component<BarAnnotationProps> {
         }
     };
 
-    private readonly helper = (props, xAccessor, xScale, yScale) => {
+    private readonly helper = (props: BarAnnotationProps, xAccessor: any, xScale: any, yScale: any) => {
         const { x, y, datum, fill, tooltip, plotData } = props;
 
         const xFunc = functor(x);

packages/annotations/src/Label.tsx

@@ -33,8 +33,8 @@ export class Label extends React.Component<LabelProps> {
         fontWeight: "bold",
         fillStyle: "#dcdcdc",
         rotate: 0,
-        x: ({ xScale, xAccessor, datum }) => xScale(xAccessor(datum)),
-        selectCanvas: (canvases) => canvases.bg,
+        x: ({ xScale, xAccessor, datum }: any) => xScale(xAccessor(datum)),
+        selectCanvas: (canvases: any) => canvases.bg,
     };
 
     public static contextTypes = {
@@ -50,7 +50,7 @@ export class Label extends React.Component<LabelProps> {
         return <GenericComponent canvasToDraw={selectCanvas} canvasDraw={this.drawOnCanvas} drawOn={[]} />;
     }
 
-    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps) => {
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
         ctx.save();
 
         const { textAlign = "center", fontFamily, fontSize, fontWeight, rotate } = this.props;
@@ -96,8 +96,8 @@ export class Label extends React.Component<LabelProps> {
     };
 
     private readonly helper = (
-        moreProps,
-        xAccessor,
+        moreProps: any,
+        xAccessor: any,
         xScale: ScaleContinuousNumeric<number, number>,
         yScale: ScaleContinuousNumeric<number, number>,
     ) => {

packages/annotations/src/LabelAnnotation.tsx

@@ -22,11 +22,33 @@ export interface LabelAnnotationProps {
     readonly text?: string | ((datum: any) => string);
     readonly textAnchor?: string;
     readonly tooltip?: string | ((datum: any) => string);
-    readonly xAccessor?: any; // func
+    readonly xAccessor?: (datum: any) => any;
     readonly xScale?: ScaleContinuousNumeric<number, number>;
-    readonly x?: number | any; // func
+    readonly x?:
+        | number
+        | (({
+              xScale,
+              xAccessor,
+              datum,
+              plotData,
+          }: {
+              xScale: ScaleContinuousNumeric<number, number>;
+              xAccessor: (datum: any) => any;
+              datum: any;
+              plotData: any[];
+          }) => number);
     readonly yScale?: ScaleContinuousNumeric<number, number>;
-    readonly y?: number | any; // func
+    readonly y?:
+        | number
+        | (({
+              yScale,
+              datum,
+              plotData,
+          }: {
+              yScale: ScaleContinuousNumeric<number, number>;
+              datum: any;
+              plotData: any[];
+          }) => number);
 }
 
 export class LabelAnnotation extends React.Component<LabelAnnotationProps> {
@@ -38,7 +60,15 @@ export class LabelAnnotation extends React.Component<LabelAnnotationProps> {
         fill: "#000000",
         opacity: 1,
         rotate: 0,
-        x: ({ xScale, xAccessor, datum }) => xScale(xAccessor(datum)),
+        x: ({
+            xScale,
+            xAccessor,
+            datum,
+        }: {
+            xScale: ScaleContinuousNumeric<number, number>;
+            xAccessor: any;
+            datum: any;
+        }) => xScale(xAccessor(datum)),
     };
 
     public render() {