fix(props): correcting more props

Adding readonly to props.
Making props optional if they have a default prop.

packages/charts/src/CanvasContainer.tsx

@@ -3,11 +3,11 @@ import * as React from "react";
 import { isDefined } from "./utils";
 
 interface CanvasContainerProps {
-    readonly width: number;
     readonly height: number;
+    readonly ratio: number;
     readonly type: string;
+    readonly width: number;
     readonly zIndex?: number;
-    readonly ratio: number;
 }
 
 class CanvasContainer extends React.Component<CanvasContainerProps> {

packages/charts/src/GenericChartComponent.tsx

@@ -52,7 +52,7 @@ class GenericChartComponent extends GenericComponent {
         this.preEvaluate = this.preEvaluate.bind(this);
     }
 
-    public preCanvasDraw(ctx, moreProps) {
+    public preCanvasDraw(ctx: CanvasRenderingContext2D, moreProps) {
 
         super.preCanvasDraw(ctx, moreProps);
 
@@ -83,7 +83,7 @@ class GenericChartComponent extends GenericComponent {
         }
     }
 
-    public postCanvasDraw(ctx, moreProps) {
+    public postCanvasDraw(ctx: CanvasRenderingContext2D, moreProps) {
         super.postCanvasDraw(ctx, moreProps);
         ctx.restore();
     }

packages/charts/src/GenericComponent.tsx

@@ -453,11 +453,11 @@ class GenericComponent extends React.Component<GenericComponentProps, GenericCom
         return (morePropsDecorator || identity)(moreProps);
     }
 
-    public preCanvasDraw(ctx, moreProps) {
+    public preCanvasDraw(ctx: CanvasRenderingContext2D, moreProps) {
         // do nothing
     }
 
-    public postCanvasDraw(ctx, moreProps) {
+    public postCanvasDraw(ctx: CanvasRenderingContext2D, moreProps) {
         // empty
     }
 

packages/charts/src/annotation/BackgroundText.tsx

@@ -66,7 +66,7 @@ class BackgroundText extends PureComponent<BackgroundTextProps> {
         );
     }
 
-    private readonly drawOnCanvas = (ctx, props, { interval }, getText) => {
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, props, { interval }, getText) => {
         ctx.clearRect(-1, -1, ctx.canvas.width + 2, ctx.canvas.height + 2);
         ctx.save();
 

packages/charts/src/annotation/Label.tsx

@@ -54,7 +54,7 @@ export class Label extends React.Component<LabelProps> {
         );
     }
 
-    private readonly drawOnCanvas = (ctx, moreProps) => {
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps) => {
         drawOnCanvas2(ctx, this.props, this.context, moreProps);
     }
 
@@ -77,7 +77,7 @@ function getYScale(chartConfig) {
     return Array.isArray(chartConfig) ? undefined : chartConfig.yScale;
 }
 
-function drawOnCanvas2(ctx, props, context, moreProps) {
+function drawOnCanvas2(ctx: CanvasRenderingContext2D, props, context, moreProps) {
     ctx.save();
 
     const { canvasOriginX, canvasOriginY, margin, ratio } = context;
@@ -96,7 +96,7 @@ function drawOnCanvas2(ctx, props, context, moreProps) {
 
 }
 
-function drawOnCanvas(ctx, props, moreProps) {
+function drawOnCanvas(ctx: CanvasRenderingContext2D, props, moreProps) {
     const { textAnchor, fontFamily, fontSize, opacity, rotate } = props;
     const { xScale, chartConfig, xAccessor } = moreProps;
 

packages/charts/src/axes/AxisLine.tsx

@@ -2,16 +2,16 @@ import * as React from "react";
 import { colorToRGBA, first, last } from "../utils";
 
 interface AxisLineProps {
-    className?: string;
-    shapeRendering?: string;
-    orient: string;
-    scale: any; // func
-    outerTickSize?: number;
-    fill?: string;
-    stroke?: string;
-    strokeWidth?: number;
-    opacity?: number;
-    range: number[];
+    readonly className?: string;
+    readonly shapeRendering?: string;
+    readonly orient: string;
+    readonly scale: any; // func
+    readonly outerTickSize?: number;
+    readonly fill?: string;
+    readonly stroke?: string;
+    readonly strokeWidth?: number;
+    readonly opacity?: number;
+    readonly range: number[];
 }
 
 export class AxisLine extends React.Component<AxisLineProps> {

packages/charts/src/axes/AxisTicks.tsx

@@ -26,7 +26,7 @@ interface TickProps {
 
 class Tick extends React.Component<TickProps> {
 
-    public static drawOnCanvasStatic = (tick, ctx, result) => {
+    public static drawOnCanvasStatic = (tick, ctx: CanvasRenderingContext2D, result) => {
         const { scale, tickTransform, canvas_dy, x, y, x2, y2, format } = result;
 
         const origin = tickTransform(scale, tick);
@@ -82,7 +82,7 @@ export class AxisTicks extends React.Component<AxisTicksProps> {
         tickStrokeOpacity: 1,
     };
 
-    public static drawOnCanvasStatic = (props, ctx, xScale, yScale) => {
+    public static drawOnCanvasStatic = (props, ctx: CanvasRenderingContext2D, xScale, yScale) => {
         props = { ...AxisTicks.defaultProps, ...props };
 
         const { orient } = props;

packages/charts/src/axes/AxisZoomCapture.tsx

@@ -19,30 +19,30 @@ import {
 } from "../utils";
 
 interface AxisZoomCaptureProps {
-    innerTickSize?: number;
-    outerTickSize?: number;
-    tickFormat?: any; // func
-    tickPadding?: number;
-    tickSize?: number;
-    ticks?: number;
-    tickValues?: number[];
-    showDomain?: boolean;
-    showTicks?: boolean;
-    className?: string;
-    axisZoomCallback?: any; // func
-    inverted?: boolean;
-    bg: {
+    readonly innerTickSize?: number;
+    readonly outerTickSize?: number;
+    readonly tickFormat?: any; // func
+    readonly tickPadding?: number;
+    readonly tickSize?: number;
+    readonly ticks?: number;
+    readonly tickValues?: number[];
+    readonly showDomain?: boolean;
+    readonly showTicks?: boolean;
+    readonly className?: string;
+    readonly axisZoomCallback?: any; // func
+    readonly inverted?: boolean;
+    readonly bg: {
         h: number;
         x: number;
         w: number;
         y: number;
     };
-    zoomCursorClassName?: string;
-    getMoreProps: any; // func
-    getScale: any; // func
-    getMouseDelta: any; // func
-    onDoubleClick: any; // func
-    onContextMenu: any; // func
+    readonly zoomCursorClassName?: string;
+    readonly getMoreProps: any; // func
+    readonly getScale: any; // func
+    readonly getMouseDelta: any; // func
+    readonly onDoubleClick: any; // func
+    readonly onContextMenu: any; // func
 }
 
 interface AxisZoomCaptureState {

packages/charts/src/coordinates/CrossHairCursor.tsx

@@ -66,7 +66,7 @@ export class CrossHairCursor extends React.Component<CrossHairCursorProps> {
         );
     }
 
-    private readonly drawOnCanvas = (ctx, moreProps) => {
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps) => {
         const lines = this.helper(this.props, moreProps);
 
         if (lines !== undefined && isDefined(lines)) {

packages/charts/src/coordinates/CurrentCoordinate.tsx

@@ -29,7 +29,7 @@ export class CurrentCoordinate extends React.Component<CurrentCoordinateProps> {
         );
     }
 
-    private readonly drawOnCanvas = (ctx, moreProps) => {
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps) => {
         const circle = this.helper(this.props, moreProps);
         if (!circle) { return null; }
 

packages/charts/src/coordinates/Cursor.tsx

@@ -12,17 +12,17 @@ import {
 } from "../utils";
 
 interface CursorProps {
-    className?: string;
-    stroke?: string;
-    strokeDasharray?: strokeDashTypes;
-    snapX?: boolean;
-    opacity?: number;
-    disableYCursor?: boolean;
-    useXCursorShape?: boolean;
-    xCursorShapeFill?: string | any; // func
-    xCursorShapeStroke: string | any; // func
-    xCursorShapeStrokeDasharray?: strokeDashTypes;
-    xCursorShapeOpacity?: number;
+    readonly className?: string;
+    readonly disableYCursor?: boolean;
+    readonly opacity?: number;
+    readonly snapX?: boolean;
+    readonly stroke?: string;
+    readonly strokeDasharray?: strokeDashTypes;
+    readonly useXCursorShape?: boolean;
+    readonly xCursorShapeFill?: string | any; // func
+    readonly xCursorShapeStroke: string | any; // func
+    readonly xCursorShapeStrokeDasharray?: strokeDashTypes;
+    readonly xCursorShapeOpacity?: number;
 }
 
 const defaultCustomSnapX = (props: CursorProps, moreProps) => {
@@ -136,7 +136,7 @@ class Cursor extends React.Component<CursorProps> {
         return disableYCursor ? [xCursor] : [yCursor, xCursor];
     }
 
-    private readonly drawOnCanvas = (ctx, moreProps) => {
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps) => {
         const cursors = this.getXYCursor(this.props, moreProps);
 
         if (cursors !== undefined) {

packages/charts/src/coordinates/EdgeCoordinate.tsx

@@ -50,20 +50,20 @@ const helper = (props) => {
 };
 
 interface EdgeCoordinateProps {
-    className?: string;
-    type: "vertical" | "horizontal";
-    coordinate: any;
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-    orient?: "bottom" | "top" | "left" | "right";
-    rectWidth?: number;
-    hideLine?: boolean;
-    fill?: string;
-    opacity?: number;
-    fontFamily: string;
-    fontSize: number;
+    readonly className?: string;
+    readonly type: "vertical" | "horizontal";
+    readonly coordinate: any;
+    readonly x1: number;
+    readonly y1: number;
+    readonly x2: number;
+    readonly y2: number;
+    readonly orient?: "bottom" | "top" | "left" | "right";
+    readonly rectWidth?: number;
+    readonly hideLine?: boolean;
+    readonly fill?: string;
+    readonly opacity?: number;
+    readonly fontFamily: string;
+    readonly fontSize: number;
 }
 
 export class EdgeCoordinate extends React.Component<EdgeCoordinateProps> {
@@ -82,7 +82,7 @@ export class EdgeCoordinate extends React.Component<EdgeCoordinateProps> {
         arrowWidth: 10,
     };
 
-    public static drawOnCanvasStatic = (ctx, props) => {
+    public static drawOnCanvasStatic = (ctx: CanvasRenderingContext2D, props) => {
         props = { ...EdgeCoordinate.defaultProps, ...props };
 
         const edge = helper(props);

packages/charts/src/coordinates/EdgeCoordinateV2.tsx

@@ -101,7 +101,7 @@ function helper(props) {
     };
 }
 
-export function drawOnCanvas(ctx, props) {
+export function drawOnCanvas(ctx: CanvasRenderingContext2D, props) {
     const edge = helper(props);
 
     if (edge === null) { return; }

packages/charts/src/coordinates/EdgeCoordinateV3.tsx

@@ -197,7 +197,7 @@ function helper(props) {
     };
 }
 
-export function drawOnCanvas(ctx, props) {
+export function drawOnCanvas(ctx: CanvasRenderingContext2D, props) {
     const { fontSize, fontFamily } = props;
 
     ctx.font = `${fontSize}px ${fontFamily}`;

packages/charts/src/coordinates/EdgeIndicator.tsx

@@ -8,20 +8,20 @@ import { drawOnCanvas, renderSVG } from "./EdgeCoordinateV3";
 import { first, functor, isDefined, last, noop, strokeDashTypes } from "../utils";
 
 interface EdgeIndicatorProps {
-    yAccessor?: any; // func
-    type?: "horizontal";
-    className?: string;
-    fill?: string | any; // func
-    lineStroke?: string | any; // func
-    textFill?: string | any; // func
-    itemType: "first" | "last";
-    orient?: "left" | "right";
-    edgeAt?: "left" | "right";
-    displayFormat?: any; // func
-    rectHeight?: number;
-    rectWidth?: number;
-    arrowWidth?: number;
-    lineStrokeDasharray?: strokeDashTypes;
+    readonly yAccessor?: any; // func
+    readonly type?: "horizontal";
+    readonly className?: string;
+    readonly fill?: string | any; // func
+    readonly lineStroke?: string | any; // func
+    readonly textFill?: string | any; // func
+    readonly itemType: "first" | "last";
+    readonly orient?: "left" | "right";
+    readonly edgeAt?: "left" | "right";
+    readonly displayFormat?: any; // func
+    readonly rectHeight?: number;
+    readonly rectWidth?: number;
+    readonly arrowWidth?: number;
+    readonly lineStrokeDasharray?: strokeDashTypes;
 }
 
 export class EdgeIndicator extends React.Component<EdgeIndicatorProps> {
@@ -64,7 +64,7 @@ export class EdgeIndicator extends React.Component<EdgeIndicatorProps> {
         );
     }
 
-    private readonly drawOnCanvas = (ctx, moreProps) => {
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps) => {
         const edge = this.helper(this.props, moreProps);
         const props = {
             ...this.props,

packages/charts/src/coordinates/MouseCoordinateX.tsx

@@ -67,7 +67,7 @@ export class MouseCoordinateX extends React.Component<MouseCoordinateXProps> {
         );
     }
 
-    private readonly drawOnCanvas = (ctx, moreProps) => {
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps) => {
         const props = this.helper(this.props, moreProps);
         if (isNotDefined(props)) { return null; }