Migrate victory-candlestick to TypeScript (#2716)

.changeset/nine-cups-complain.md

@@ -0,0 +1,5 @@
+---
+"victory-candlestick": patch
+---
+
+Migrate victory-candlestick to TypeScript

packages/victory-candlestick/package.json

@@ -28,7 +28,9 @@
     "react": ">=16.6.0"
   },
   "devDependencies": {
-    "victory-chart": "^36.8.1"
+    "victory-vendor": "^36.8.1",
+    "victory-chart": "^36.8.1",
+    "victory-candlestick": "*"
   },
   "publishConfig": {
     "provenance": true
@@ -174,8 +176,8 @@
       "dependencies": [
         "types:create",
         "../victory-core:types:create",
-        "../victory-chart:types:create",
         "../victory-vendor:types:create",
+        "../victory-chart:types:create",
         "../victory-voronoi:types:create"
       ],
       "output": [],
@@ -240,8 +242,8 @@
       "output": [],
       "dependencies": [
         "../victory-core:types:create",
-        "../victory-chart:types:create",
         "../victory-vendor:types:create",
+        "../victory-chart:types:create",
         "../victory-voronoi:types:create"
       ],
       "packageLocks": [
@@ -258,8 +260,8 @@
       "output": [],
       "dependencies": [
         "../victory-core:types:create",
-        "../victory-chart:types:create",
         "../victory-vendor:types:create",
+        "../victory-chart:types:create",
         "../victory-voronoi:types:create"
       ],
       "packageLocks": [
@@ -277,8 +279,8 @@
       "output": [],
       "dependencies": [
         "build:lib:cjs",
-        "../victory-chart:build:lib:cjs",
         "../victory-vendor:build:lib:cjs",
+        "../victory-chart:build:lib:cjs",
         "../victory-voronoi:build:lib:cjs"
       ],
       "packageLocks": [

packages/victory-candlestick/src/candle.test.js → packages/victory-candlestick/src/candle.test.tsx

@@ -50,7 +50,7 @@ describe("victory-primitives/candle", () => {
 
     wicks.forEach((wick, i) => {
       const [x1, x2, y1, y2] = ["x1", "x2", "y1", "y2"].map((prop) =>
-        parseInt(wick.getAttribute(prop)),
+        parseInt(wick.getAttribute(prop) || ""),
       );
       expect(values[i]).toMatchObject({ x1, x2, y1, y2 });
     });
@@ -60,7 +60,7 @@ describe("victory-primitives/candle", () => {
     const { container } = renderCandle();
     const rect = container.querySelector("rect");
     const [width, height, x, y] = ["width", "height", "x", "y"].map((prop) =>
-      rect.getAttribute(prop),
+      rect?.getAttribute(prop),
     );
 
     // width = style.width || 0.5 * (width - 2 * padding) / data.length;

packages/victory-candlestick/src/candle.js → packages/victory-candlestick/src/candle.tsx

@@ -1,10 +1,34 @@
-/* eslint no-magic-numbers: ["error", { "ignore": [0, 0.5, 1, 2] }]*/
 import React from "react";
-import PropTypes from "prop-types";
-import { Helpers, CommonProps, Line, Rect } from "victory-core";
+import {
+  Helpers,
+  Line,
+  NumberOrCallback,
+  Rect,
+  VictoryCommonPrimitiveProps,
+  VictoryStyleObject,
+} from "victory-core";
 import { assign, defaults, isFunction } from "lodash";
 
-const getCandleWidth = (candleWidth, props) => {
+export interface CandleProps extends VictoryCommonPrimitiveProps {
+  candleRatio?: number;
+  candleWidth?: NumberOrCallback;
+  close?: number;
+  datum?: any;
+  groupComponent?: React.ReactElement;
+  high?: number;
+  lineComponent?: React.ReactElement;
+  low?: number;
+  open?: number;
+  rectComponent?: React.ReactElement;
+  wickStrokeWidth?: number;
+  width?: number;
+  x?: number;
+}
+
+const getCandleWidth = (
+  candleWidth: CandleProps["candleWidth"],
+  props: CandleProps,
+) => {
   const { style } = props;
   if (candleWidth) {
     return isFunction(candleWidth)
@@ -16,7 +40,7 @@ const getCandleWidth = (candleWidth, props) => {
   return candleWidth;
 };
 
-const getCandleProps = (props, style) => {
+const getCandleProps = (props, style: VictoryStyleObject) => {
   const { id, x, close, open, horizontal, candleWidth } = props;
   const candleLength = Math.abs(close - open);
   return {
@@ -29,7 +53,7 @@ const getCandleProps = (props, style) => {
   };
 };
 
-const getHighWickProps = (props, style) => {
+const getHighWickProps = (props, style: VictoryStyleObject) => {
   const { horizontal, high, open, close, x, id } = props;
   return {
     key: `${id}-highWick`,
@@ -41,7 +65,7 @@ const getHighWickProps = (props, style) => {
   };
 };
 
-const getLowWickProps = (props, style) => {
+const getLowWickProps = (props, style: VictoryStyleObject) => {
   const { horizontal, low, open, close, x, id } = props;
   return {
     key: `${id}-lowWick`,
@@ -89,16 +113,16 @@ const evaluateProps = (props) => {
   });
 };
 
-const defaultProps = {
+const defaultProps: Partial<CandleProps> = {
   groupComponent: <g />,
   lineComponent: <Line />,
   rectComponent: <Rect />,
   role: "presentation",
   shapeRendering: "auto",
 };
 
-const Candle = (props) => {
-  props = evaluateProps({ ...defaultProps, ...props });
+export const Candle = (props: CandleProps) => {
+  const modifiedProps = evaluateProps({ ...defaultProps, ...props });
   const {
     ariaLabel,
     events,
@@ -114,7 +138,7 @@ const Candle = (props) => {
     style,
     desc,
     tabIndex,
-  } = props;
+  } = modifiedProps;
   const wickStyle = defaults({ strokeWidth: wickStrokeWidth }, style);
   const sharedProps = {
     ...events,
@@ -127,32 +151,19 @@ const Candle = (props) => {
     desc,
     tabIndex,
   };
-  const candleProps = assign(getCandleProps(props, style), sharedProps);
-  const highWickProps = assign(getHighWickProps(props, wickStyle), sharedProps);
-  const lowWickProps = assign(getLowWickProps(props, wickStyle), sharedProps);
+  const candleProps = assign(getCandleProps(modifiedProps, style), sharedProps);
+  const highWickProps = assign(
+    getHighWickProps(modifiedProps, wickStyle),
+    sharedProps,
+  );
+  const lowWickProps = assign(
+    getLowWickProps(modifiedProps, wickStyle),
+    sharedProps,
+  );
 
   return React.cloneElement(groupComponent, {}, [
     React.cloneElement(rectComponent, candleProps),
     React.cloneElement(lineComponent, highWickProps),
     React.cloneElement(lineComponent, lowWickProps),
   ]);
 };
-
-Candle.propTypes = {
-  ...CommonProps.primitiveProps,
-  candleRatio: PropTypes.number,
-  candleWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-  close: PropTypes.number,
-  datum: PropTypes.object,
-  groupComponent: PropTypes.element,
-  high: PropTypes.number,
-  lineComponent: PropTypes.element,
-  low: PropTypes.number,
-  open: PropTypes.number,
-  rectComponent: PropTypes.element,
-  wickStrokeWidth: PropTypes.number,
-  width: PropTypes.number,
-  x: PropTypes.number,
-};
-
-export default Candle;

packages/victory-candlestick/src/helper-methods.js → packages/victory-candlestick/src/helper-methods.ts

@@ -6,10 +6,13 @@ import {
   Data,
   LabelHelpers,
   Collection,
+  VictoryStyleObject,
 } from "victory-core";
 
 const TYPES = ["close", "open", "high", "low"];
 
+const DEFAULT_CANDLE_WIDTH = 8;
+
 export const getData = (props) => {
   const accessorTypes = ["x", "high", "low", "close", "open"];
   return Data.formatData(props.data, props, accessorTypes);
@@ -58,7 +61,15 @@ const getLabelStyle = (props, styleObject, namespace) => {
   return defaults({}, tooltipTheme.style, baseStyle);
 };
 
-const getStyles = (props, style, defaultStyles = {}) => {
+const getStyles = (
+  props,
+  style,
+  defaultStyles: {
+    parent?: any;
+    labels?: any;
+    data?: any;
+  } = {},
+) => {
   if (props.disableInlineStyles) {
     return {};
   }
@@ -207,8 +218,8 @@ const getText = (props, type) => {
   return Array.isArray(labelProp) ? labelProp[index] : labelProp;
 };
 
-const getCandleWidth = (props, style) => {
-  const { data, candleWidth, scale, defaultCandleWidth } = props;
+const getCandleWidth = (props, style?: VictoryStyleObject) => {
+  const { data, candleWidth, scale } = props;
   if (candleWidth) {
     return isFunction(candleWidth)
       ? Helpers.evaluateProp(candleWidth, props)
@@ -221,7 +232,7 @@ const getCandleWidth = (props, style) => {
   const candles = data.length + 2;
   const candleRatio = props.candleRatio || 0.5;
   const defaultWidth =
-    candleRatio * (data.length < 2 ? defaultCandleWidth : extent / candles);
+    candleRatio * (data.length < 2 ? DEFAULT_CANDLE_WIDTH : extent / candles);
   return Math.max(1, defaultWidth);
 };
 
@@ -281,7 +292,7 @@ const calculatePlotValues = (props) => {
 /* eslint-enable complexity*/
 
 /* eslint-disable max-params*/
-const getLabelProps = (props, text, style, type) => {
+const getLabelProps = (props, text, style, type?: string) => {
   const {
     x,
     high,

packages/victory-candlestick/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./victory-candlestick";
+export * from "./candle";