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";