Migrate polar axis to typescript

FormidableLabs · Jan 12, 2024 · 7d1a9e5 · 7d1a9e5
1 parent cb630fa
commit 7d1a9e5
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 60 deletions.
diff --git a/.changeset/spotty-apples-carry.md b/.changeset/spotty-apples-carry.md
@@ -0,0 +1,5 @@
+---
+"victory-polar-axis": patch
+---
+
+Migrate polar axis to typescript
diff --git a/.../victory-polar-axis/src/helper-methods.js → .../victory-polar-axis/src/helper-methods.ts b/.../victory-polar-axis/src/helper-methods.js → .../victory-polar-axis/src/helper-methods.ts
@@ -1,11 +1,12 @@
 import { assign, uniqBy, defaults } from "lodash";
 import { Helpers, LabelHelpers, Scale, Axis } from "victory-core";
+import { VictoryPolarAxisProps } from "./types";
 
-const getPosition = (r, angle, axis) => {
+const getPosition = (r: number, angle: number, axis?: string) => {
   return axis === "x" ? r * Math.cos(angle) : -r * Math.sin(angle);
 };
 
-const getAxisType = (props) => {
+const getAxisType = (props: VictoryPolarAxisProps) => {
   const typicalType = props.dependentAxis ? "radial" : "angular";
   const invertedType = typicalType === "angular" ? "radial" : "angular";
   return props.horizontal ? invertedType : typicalType;
@@ -24,7 +25,7 @@ const getEvaluatedStyles = (style, props) => {
   };
 };
 
-const getStyleObject = (props) => {
+const getStyleObject = (props: VictoryPolarAxisProps) => {
   const { theme = {}, dependentAxis } = props;
   const generalAxisStyle =
     (theme.polarAxis && theme.polarAxis.style) ||
@@ -34,8 +35,7 @@ const getStyleObject = (props) => {
     : "polarIndependentAxis";
   const standardAxisType = dependentAxis ? "dependentAxis" : "independentAxis";
   const specificAxisStyle =
-    (theme[polarAxisType] && theme[polarAxisType].style) ||
-    (theme[standardAxisType] && theme[standardAxisType].style);
+    theme?.[polarAxisType]?.style || theme?.[standardAxisType]?.style;
 
   const mergeStyles = () => {
     const styleNamespaces = [
@@ -49,8 +49,8 @@ const getStyleObject = (props) => {
     return styleNamespaces.reduce((memo, curr) => {
       memo[curr] = defaults(
         {},
-        specificAxisStyle[curr],
-        generalAxisStyle[curr],
+        specificAxisStyle?.[curr],
+        generalAxisStyle?.[curr],
       );
       return memo;
     }, {});
@@ -61,13 +61,20 @@ const getStyleObject = (props) => {
     : specificAxisStyle || generalAxisStyle;
 };
 
-const getRadius = (props) => {
+const getRadius = (props: VictoryPolarAxisProps) => {
   const { left, right, top, bottom } = Helpers.getPadding(props);
   const { width, height } = props;
+
+  if (width === undefined || height === undefined) {
+    throw new Error(
+      "VictoryPolarAxis: width and height properties are required for standalone axes.",
+    );
+  }
+
   return Math.min(width - left - right, height - top - bottom) / 2;
 };
 
-const getRange = (props, axis) => {
+const getRange = (props: VictoryPolarAxisProps, axis) => {
   // Return the range from props if one is given.
   if (props.range && props.range[axis]) {
     return props.range[axis];
@@ -84,8 +91,7 @@ const getRange = (props, axis) => {
   return [props.innerRadius || 0, radius];
 };
 
-// exposed for use by VictoryChart (necessary?)
-export const getScale = (props) => {
+export const getScale = (props: VictoryPolarAxisProps) => {
   const axis = Axis.getAxis(props);
   const scale = Scale.getBaseScale(props, axis);
   const domain = Axis.getDomain(props, axis) || scale.domain();
@@ -95,7 +101,7 @@ export const getScale = (props) => {
   return scale;
 };
 
-export const getStyles = (props, styleObject) => {
+export const getStyles = (props: VictoryPolarAxisProps, styleObject) => {
   if (props.disableInlineStyles) {
     return {};
   }
@@ -112,7 +118,11 @@ export const getStyles = (props, styleObject) => {
   };
 };
 
-const getAxisAngle = (props) => {
+const getAxisAngle = (props: {
+  axisAngle?: number;
+  dependentAxis?: boolean;
+  startAngle?: number;
+}) => {
   const { axisAngle, startAngle, dependentAxis } = props;
   const axis = Axis.getAxis(props);
   const axisValue = Axis.getAxisValue(props, axis);
@@ -122,8 +132,22 @@ const getAxisAngle = (props) => {
   return Helpers.radiansToDegrees(axisValue);
 };
 
-// eslint-disable-next-line max-params
-const getTickProps = (props, calculatedValues, tickValue, index) => {
+const getTickProps = (
+  props: VictoryPolarAxisProps,
+  calculatedValues: {
+    axisType: string;
+    radius: number;
+    scale: any;
+    style: any;
+    stringTicks: any;
+    ticks: any;
+    tickFormat: any;
+    origin: { x: number; y: number };
+  },
+  tickValue,
+  index,
+  // eslint-disable-next-line max-params
+) => {
   const {
     axisType,
     radius,
@@ -147,8 +171,7 @@ const getTickProps = (props, calculatedValues, tickValue, index) => {
     axisType,
     text,
   });
-  const axisAngle =
-    axisType === "radial" ? getAxisAngle(props, scale) : undefined;
+  const axisAngle = axisType === "radial" ? getAxisAngle(props) : undefined;
   const tickPadding = tickStyle.padding || tickStyle.size || 0;
   const padAngle = Helpers.degreesToRadians(90 - axisAngle);
   const tickAngle =
@@ -190,8 +213,22 @@ const getTickProps = (props, calculatedValues, tickValue, index) => {
       };
 };
 
-// eslint-disable-next-line max-params
-const getTickLabelProps = (props, calculatedValues, tickValue, index) => {
+const getTickLabelProps = (
+  props: VictoryPolarAxisProps,
+  calculatedValues: {
+    axisType: string;
+    radius: number;
+    tickFormat: any;
+    style: any;
+    scale: any;
+    ticks: any;
+    stringTicks: any;
+    origin: { x: number; y: number };
+  },
+  tickValue,
+  index,
+  // eslint-disable-next-line max-params
+) => {
   const {
     axisType,
     radius,
@@ -216,14 +253,12 @@ const getTickLabelProps = (props, calculatedValues, tickValue, index) => {
     axisType,
   });
   const { tickLabelComponent } = props;
-  const labelPlacement =
-    tickLabelComponent.props && tickLabelComponent.props.labelPlacement
-      ? tickLabelComponent.props.labelPlacement
-      : props.labelPlacement;
+  const labelPlacement = tickLabelComponent?.props.labelPlacement
+    ? tickLabelComponent.props.labelPlacement
+    : props.labelPlacement;
   const tickPadding = labelStyle.padding || 0;
   const angularPadding = 0; // TODO: do some geometry
-  const axisAngle =
-    axisType === "radial" ? getAxisAngle(props, scale) : undefined;
+  const axisAngle = axisType === "radial" ? getAxisAngle(props) : undefined;
   const labelAngle =
     axisType === "angular"
       ? Helpers.radiansToDegrees(scale(tickValue))
@@ -255,8 +290,22 @@ const getTickLabelProps = (props, calculatedValues, tickValue, index) => {
   };
 };
 
-// eslint-disable-next-line max-params
-const getGridProps = (props, calculatedValues, tickValue, index) => {
+const getGridProps = (
+  props: VictoryPolarAxisProps,
+  calculatedValues: {
+    axisType: string;
+    radius: number;
+    style: any;
+    scale: any;
+    stringTicks: any;
+    ticks: any;
+    tickFormat: any;
+    origin: { x: number; y: number };
+  },
+  tickValue,
+  index,
+  // eslint-disable-next-line max-params
+) => {
   const {
     axisType,
     radius,
@@ -304,19 +353,25 @@ const getGridProps = (props, calculatedValues, tickValue, index) => {
       };
 };
 
-const getAxisLabelProps = (props, calculatedValues) => {
-  const { axisType, radius, style, scale, origin } = calculatedValues;
+const getAxisLabelProps = (
+  props: VictoryPolarAxisProps,
+  calculatedValues: {
+    axisType: string;
+    radius: number;
+    style: any;
+    origin: { x: number; y: number };
+  },
+) => {
+  const { axisType, radius, style, origin } = calculatedValues;
   const { axisLabelComponent } = props;
   if (axisType !== "radial") {
     return {};
   }
-  const labelPlacement =
-    axisLabelComponent.props && axisLabelComponent.props.labelPlacement
-      ? axisLabelComponent.props.labelPlacement
-      : props.labelPlacement;
+  const labelPlacement = axisLabelComponent?.props.labelPlacement
+    ? axisLabelComponent.props.labelPlacement
+    : props.labelPlacement;
   const labelStyle = (style && style.axisLabel) || {};
-  const axisAngle =
-    axisType === "radial" ? getAxisAngle(props, scale) : undefined;
+  const axisAngle = axisType === "radial" ? getAxisAngle(props) : undefined;
   const textAngle =
     labelStyle.angle === undefined
       ? LabelHelpers.getPolarAngle(
@@ -353,11 +408,11 @@ const getAxisLabelProps = (props, calculatedValues) => {
 };
 
 const getAxisProps = (modifiedProps, calculatedValues) => {
-  const { style, axisType, radius, scale, origin } = calculatedValues;
+  const { style, axisType, radius, origin } = calculatedValues;
   const { startAngle, endAngle, innerRadius = 0 } = modifiedProps;
   const axisAngle =
     axisType === "radial"
-      ? Helpers.degreesToRadians(getAxisAngle(modifiedProps, scale))
+      ? Helpers.degreesToRadians(getAxisAngle(modifiedProps))
       : undefined;
   return axisType === "radial"
     ? {
@@ -377,7 +432,7 @@ const getAxisProps = (modifiedProps, calculatedValues) => {
       };
 };
 
-const getCalculatedValues = (props) => {
+const getCalculatedValues = (props: VictoryPolarAxisProps) => {
   props = assign({ polar: true }, props);
   const defaultStyles = getStyleObject(props);
   const style = getStyles(props, defaultStyles);
@@ -410,7 +465,7 @@ const getCalculatedValues = (props) => {
   };
 };
 
-export const getBaseProps = (props, fallbackProps) => {
+export const getBaseProps = (props: VictoryPolarAxisProps, fallbackProps) => {
   props = Axis.modifyProps(props, fallbackProps);
   const calculatedValues = getCalculatedValues(props);
   const { style, scale, ticks, domain } = calculatedValues;

diff --git a/packages/victory-polar-axis/src/index.js b/packages/victory-polar-axis/src/index.js
diff --git a/packages/victory-polar-axis/src/index.ts b/packages/victory-polar-axis/src/index.ts
@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./victory-polar-axis";
diff --git a/packages/victory-polar-axis/src/index.d.ts → packages/victory-polar-axis/src/types.ts b/packages/victory-polar-axis/src/index.d.ts → packages/victory-polar-axis/src/types.ts
@@ -1,15 +1,3 @@
-// Definitions by: Alexey Svetliakov <https://github.com/asvetliakov>
-//                 snerks <https://github.com/snerks>
-//                 Krzysztof Cebula <https://github.com/Havret>
-//                 Vitaliy Polyanskiy <https://github.com/alreadyExisted>
-//                 James Lismore <https://github.com/jlismore>
-//                 Stack Builders <https://github.com/stackbuilders>
-//                 Esteban Ibarra <https://github.com/ibarrae>
-//                 Dominic Lee <https://github.com/dominictwlee>
-//                 Dave Vedder <https://github.com/veddermatic>
-//                 Alec Flett <https://github.com/alecf>
-
-import * as React from "react";
 import {
   DomainPropType,
   EventPropTypeInterface,
@@ -46,8 +34,3 @@ export interface VictoryPolarAxisProps
   labelPlacement?: LabelOrientationType;
   startAngle?: number;
 }
-
-export class VictoryPolarAxis extends React.Component<
-  VictoryPolarAxisProps,
-  any
-> {}
diff --git a/...tory-polar-axis/src/victory-polar-axis.js → ...ory-polar-axis/src/victory-polar-axis.tsx b/...tory-polar-axis/src/victory-polar-axis.js → ...ory-polar-axis/src/victory-polar-axis.tsx
@@ -11,10 +11,12 @@ import {
   addEvents,
   Arc,
   Axis,
+  EventsMixinClass,
 } from "victory-core";
 import { getScale, getStyles, getBaseProps } from "./helper-methods";
+import { VictoryPolarAxisProps } from './types';
 
-const fallbackProps = {
+const fallbackProps: Partial<VictoryPolarAxisProps> = {
   width: 450,
   height: 300,
   padding: 50,
@@ -31,7 +33,10 @@ const options = {
   ],
 };
 
-class VictoryPolarAxis extends React.Component {
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface VictoryPolarAxisBase extends EventsMixinClass<VictoryPolarAxisProps> {}
+
+class VictoryPolarAxisBase extends React.Component<VictoryPolarAxisProps> {
   static animationWhitelist = [
     "style",
     "domain",
@@ -258,4 +263,4 @@ class VictoryPolarAxis extends React.Component {
   }
 }
 
-export default addEvents(VictoryPolarAxis, options);
+export const VictoryPolarAxis = addEvents(VictoryPolarAxisBase, options);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from "./types";
		export * from "./victory-polar-axis";