fix: adding more prop types

Adding types throughout the codebase.

packages/axes/src/Axis.tsx

@@ -1,5 +1,4 @@
 import {
-    colorToRGBA,
     first,
     getAxisCanvas,
     GenericChartComponent,
@@ -15,7 +14,7 @@ import * as React from "react";
 import { AxisZoomCapture } from "./AxisZoomCapture";
 
 interface AxisProps {
-    readonly axisZoomCallback?: (domain: any) => void;
+    readonly axisZoomCallback?: (domain: number[]) => void;
     readonly bg: {
         h: number;
         x: number;
@@ -47,13 +46,12 @@ interface AxisProps {
     readonly tickSize?: number;
     readonly ticks?: number;
     readonly tickLabelFill?: string;
-    readonly tickStroke?: string;
-    readonly tickStrokeOpacity?: number;
+    readonly tickStrokeStyle?: string | CanvasGradient | CanvasPattern;
     readonly tickStrokeWidth?: number;
     readonly tickStrokeDasharray?: strokeDashTypes;
-    readonly tickValues?: number[] | any; // func
+    readonly tickValues?: number[] | ((domain: number[]) => number[]);
     readonly tickInterval?: number;
-    readonly tickIntervalFunction?: any; // func
+    readonly tickIntervalFunction?: (min: number, max: number, tickInterval: number) => number[];
     readonly transform: number[];
     readonly zoomEnabled?: boolean;
     readonly zoomCursorClassName?: string;
@@ -118,7 +116,7 @@ export class Axis extends React.Component<AxisProps> {
         return this.chartRef.current!.getMoreProps();
     };
 
-    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps) => {
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
         const { showDomain, showTicks, transform, range, getScale } = this.props;
 
         ctx.save();
@@ -154,14 +152,13 @@ const tickHelper = (props: AxisProps, scale: ScaleContinuousNumeric<number, numb
         showTickLabel,
         ticks: tickArguments,
         tickValues: tickValuesProp,
-        tickStroke,
-        tickStrokeOpacity,
+        tickStrokeStyle,
         tickInterval,
         tickIntervalFunction,
         ...rest
     } = props;
 
-    let tickValues;
+    let tickValues: number[];
     if (tickValuesProp !== undefined) {
         if (typeof tickValuesProp === "function") {
             tickValues = tickValuesProp(scale.domain());
@@ -264,9 +261,8 @@ const tickHelper = (props: AxisProps, scale: ScaleContinuousNumeric<number, numb
         orient,
         ticks,
         scale,
-        tickStroke,
-        tickLabelFill: tickLabelFill || tickStroke,
-        tickStrokeOpacity,
+        tickStrokeStyle,
+        tickLabelFill: tickLabelFill || tickStrokeStyle,
         tickStrokeWidth,
         tickStrokeDasharray,
         dy,
@@ -311,11 +307,13 @@ const drawAxisLine = (ctx: CanvasRenderingContext2D, props: AxisProps, range) =>
 };
 
 const drawTicks = (ctx: CanvasRenderingContext2D, result, moreProps) => {
-    const { showGridLines, tickStroke, tickStrokeOpacity, tickLabelFill } = result;
+    const { showGridLines, tickStrokeStyle, tickLabelFill } = result;
     const { textAnchor, fontSize, fontFamily, fontWeight, ticks, showTickLabel } = result;
 
-    ctx.strokeStyle = colorToRGBA(tickStroke, tickStrokeOpacity);
-    ctx.fillStyle = tickStroke;
+    if (tickStrokeStyle !== undefined) {
+        ctx.strokeStyle = tickStrokeStyle;
+        ctx.fillStyle = tickStrokeStyle;
+    }
 
     ticks.forEach((tick) => {
         drawEachTick(ctx, tick, result);
@@ -339,13 +337,15 @@ const drawTicks = (ctx: CanvasRenderingContext2D, result, moreProps) => {
 };
 
 const drawGridLine = (ctx: CanvasRenderingContext2D, tick, result, moreProps) => {
-    const { orient, gridLinesStrokeWidth, gridLinesStroke, gridLinesStrokeDasharray } = result;
+    const { orient, gridLinesStrokeWidth, gridLinesStrokeStyle, gridLinesStrokeDasharray } = result;
 
     const { chartConfig } = moreProps;
 
     const { height, width } = chartConfig;
 
-    ctx.strokeStyle = colorToRGBA(gridLinesStroke);
+    if (gridLinesStrokeStyle !== undefined) {
+        ctx.strokeStyle = gridLinesStrokeStyle;
+    }
     ctx.beginPath();
 
     const sign = orient === "top" || orient === "left" ? 1 : -1;

packages/axes/src/AxisZoomCapture.tsx

@@ -16,8 +16,8 @@ import { ScaleContinuousNumeric } from "d3-scale";
 import { event as d3Event, mouse, select, touches } from "d3-selection";
 import * as React from "react";
 
-interface AxisZoomCaptureProps {
-    readonly axisZoomCallback?: (domain: any) => void;
+export interface AxisZoomCaptureProps {
+    readonly axisZoomCallback?: (domain: number[]) => void;
     readonly bg: {
         h: number;
         x: number;
@@ -35,7 +35,7 @@ interface AxisZoomCaptureProps {
     readonly outerTickSize?: number;
     readonly showDomain?: boolean;
     readonly showTicks?: boolean;
-    readonly tickFormat?: any; // func
+    readonly tickFormat?: (datum: number) => string;
     readonly tickPadding?: number;
     readonly tickSize?: number;
     readonly ticks?: number;

packages/axes/src/XAxis.tsx

@@ -11,7 +11,7 @@ export interface XAxisProps {
     readonly fontSize?: number;
     readonly fontWeight?: number;
     readonly getMouseDelta?: (startXY: [number, number], mouseXY: [number, number]) => number;
-    readonly gridLinesStroke?: string;
+    readonly gridLinesStrokeStyle?: string;
     readonly gridLinesStrokeWidth?: number;
     readonly gridLinesStrokeDasharray?: strokeDashTypes;
     readonly innerTickSize?: number;
@@ -30,8 +30,7 @@ export interface XAxisProps {
     readonly tickSize?: number;
     readonly tickLabelFill?: string;
     readonly ticks?: number;
-    readonly tickStroke?: string;
-    readonly tickStrokeOpacity?: number;
+    readonly tickStrokeStyle?: string;
     readonly tickStrokeWidth?: number;
     readonly tickStrokeDasharray?: strokeDashTypes;
     readonly tickValues?: number[];
@@ -49,7 +48,7 @@ export class XAxis extends React.Component<XAxisProps> {
         fontSize: 12,
         fontWeight: 400,
         getMouseDelta: (startXY: [number, number], mouseXY: [number, number]) => startXY[0] - mouseXY[0],
-        gridLinesStroke: "#E2E4EC",
+        gridLinesStrokeStyle: "#E2E4EC",
         gridLinesStrokeWidth: 1,
         orient: "bottom",
         outerTickSize: 0,
@@ -62,8 +61,7 @@ export class XAxis extends React.Component<XAxisProps> {
         strokeWidth: 1,
         tickPadding: 4,
         tickLabelFill: "#000000",
-        tickStroke: "#000000",
-        tickStrokeOpacity: 1,
+        tickStrokeStyle: "#000000",
         xZoomHeight: 25,
         zoomEnabled: true,
         zoomCursorClassName: "react-financial-charts-ew-resize-cursor",
@@ -102,7 +100,7 @@ export class XAxis extends React.Component<XAxisProps> {
         );
     }
 
-    private readonly axisZoomCallback = (newXDomain) => {
+    private readonly axisZoomCallback = (newXDomain: number[]) => {
         const { xAxisZoom } = this.context;
 
         xAxisZoom(newXDomain);

packages/axes/src/YAxis.tsx

@@ -11,7 +11,7 @@ export interface YAxisProps {
     readonly fontSize?: number;
     readonly fontWeight?: number;
     readonly getMouseDelta?: (startXY: [number, number], mouseXY: [number, number]) => number;
-    readonly gridLinesStroke?: string;
+    readonly gridLinesStrokeStyle?: string;
     readonly gridLinesStrokeWidth?: number;
     readonly gridLinesStrokeDasharray?: strokeDashTypes;
     readonly innerTickSize?: number;
@@ -30,8 +30,7 @@ export interface YAxisProps {
     readonly tickSize?: number;
     readonly tickLabelFill?: string;
     readonly ticks?: number;
-    readonly tickStroke?: string;
-    readonly tickStrokeOpacity?: number;
+    readonly tickStrokeStyle?: string;
     readonly tickStrokeWidth?: number;
     readonly tickStrokeDasharray?: strokeDashTypes;
     readonly tickValues?: number[];
@@ -49,7 +48,7 @@ export class YAxis extends React.Component<YAxisProps> {
         fontSize: 12,
         fontWeight: 400,
         getMouseDelta: (startXY, mouseXY) => startXY[1] - mouseXY[1],
-        gridLinesStroke: "#E2E4EC",
+        gridLinesStrokeStyle: "#E2E4EC",
         gridLinesStrokeWidth: 1,
         innerTickSize: 4,
         outerTickSize: 0,
@@ -62,8 +61,7 @@ export class YAxis extends React.Component<YAxisProps> {
         strokeWidth: 1,
         tickPadding: 4,
         tickLabelFill: "#000000",
-        tickStroke: "#000000",
-        tickStrokeOpacity: 1,
+        tickStrokeStyle: "#000000",
         yZoomWidth: 40,
         zoomEnabled: true,
         zoomCursorClassName: "react-financial-charts-ns-resize-cursor",
@@ -101,8 +99,9 @@ export class YAxis extends React.Component<YAxisProps> {
         );
     }
 
-    private readonly axisZoomCallback = (newYDomain) => {
+    private readonly axisZoomCallback = (newYDomain: number[]) => {
         const { chartId, yAxisZoom } = this.context;
+
         yAxisZoom(chartId, newYDomain);
     };
 

packages/coordinates/src/CrossHairCursor.tsx

@@ -54,6 +54,7 @@ export class CrossHairCursor extends React.Component<CrossHairCursorProps> {
         }
 
         const { margin, ratio } = this.context;
+
         const originX = 0.5 * ratio + margin.left;
         const originY = 0.5 * ratio + margin.top;
 

packages/coordinates/src/CurrentCoordinate.tsx

@@ -2,17 +2,38 @@ import { getMouseCanvas, GenericChartComponent } from "@react-financial-charts/c
 import * as React from "react";
 
 export interface CurrentCoordinateProps {
+    /**
+     * Fill style for the circle.
+     */
     readonly fillStyle?:
         | string
         | CanvasGradient
         | CanvasPattern
         | ((datum: any) => string | CanvasGradient | CanvasPattern);
+    /**
+     * The radius to draw the circle
+     */
     readonly r: number;
+    /**
+     * Stroke of the circle
+     */
+    readonly strokeStyle?:
+        | string
+        | CanvasGradient
+        | CanvasPattern
+        | ((datum: any) => string | CanvasGradient | CanvasPattern);
+    /**
+     * Y accessor to use for the circle.
+     */
     readonly yAccessor: (item: any) => number;
 }
 
+/**
+ * Draws a circle at the current x location of radius `r`.
+ */
 export class CurrentCoordinate extends React.Component<CurrentCoordinateProps> {
     public static defaultProps = {
+        fillStyle: "#2196f3",
         r: 3,
     };
 
@@ -32,15 +53,24 @@ export class CurrentCoordinate extends React.Component<CurrentCoordinateProps> {
             return;
         }
 
-        const { fillStyle, r } = this.props;
+        const { fillStyle, r, strokeStyle } = this.props;
 
         const fillColor = fillStyle instanceof Function ? fillStyle(moreProps.currentItem) : fillStyle;
         if (fillColor !== undefined) {
             ctx.fillStyle = fillColor;
         }
+
+        const strokeColor = strokeStyle instanceof Function ? strokeStyle(moreProps.currentItem) : strokeStyle;
+        if (strokeColor !== undefined) {
+            ctx.strokeStyle = strokeColor;
+        }
+
         ctx.beginPath();
         ctx.arc(circle.x, circle.y, r, 0, 2 * Math.PI, false);
         ctx.fill();
+        if (strokeColor !== undefined) {
+            ctx.stroke();
+        }
     };
 
     private readonly getCircle = (moreProps) => {