From 7d1a9e561df99f00a4013fada34fcb21ef96e992 Mon Sep 17 00:00:00 2001 From: Charlie Brown Date: Fri, 12 Jan 2024 11:59:48 -0600 Subject: [PATCH] Migrate polar axis to typescript --- .changeset/spotty-apples-carry.md | 5 + .../{helper-methods.js => helper-methods.ts} | 133 +++++++++++++----- packages/victory-polar-axis/src/index.js | 1 - packages/victory-polar-axis/src/index.ts | 2 + .../src/{index.d.ts => types.ts} | 17 --- ...y-polar-axis.js => victory-polar-axis.tsx} | 11 +- 6 files changed, 109 insertions(+), 60 deletions(-) create mode 100644 .changeset/spotty-apples-carry.md rename packages/victory-polar-axis/src/{helper-methods.js => helper-methods.ts} (79%) delete mode 100644 packages/victory-polar-axis/src/index.js create mode 100644 packages/victory-polar-axis/src/index.ts rename packages/victory-polar-axis/src/{index.d.ts => types.ts} (53%) rename packages/victory-polar-axis/src/{victory-polar-axis.js => victory-polar-axis.tsx} (94%) diff --git a/.changeset/spotty-apples-carry.md b/.changeset/spotty-apples-carry.md new file mode 100644 index 000000000..fb9454f2a --- /dev/null +++ b/.changeset/spotty-apples-carry.md @@ -0,0 +1,5 @@ +--- +"victory-polar-axis": patch +--- + +Migrate polar axis to typescript diff --git a/packages/victory-polar-axis/src/helper-methods.js b/packages/victory-polar-axis/src/helper-methods.ts similarity index 79% rename from packages/victory-polar-axis/src/helper-methods.js rename to packages/victory-polar-axis/src/helper-methods.ts index b64e4cf67..43f298bc3 100644 --- a/packages/victory-polar-axis/src/helper-methods.js +++ b/packages/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 deleted file mode 100644 index 54c2ed257..000000000 --- a/packages/victory-polar-axis/src/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as VictoryPolarAxis } from "./victory-polar-axis"; diff --git a/packages/victory-polar-axis/src/index.ts b/packages/victory-polar-axis/src/index.ts new file mode 100644 index 000000000..515d42481 --- /dev/null +++ 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 b/packages/victory-polar-axis/src/types.ts similarity index 53% rename from packages/victory-polar-axis/src/index.d.ts rename to packages/victory-polar-axis/src/types.ts index a712f25cd..d5c794b80 100644 --- a/packages/victory-polar-axis/src/index.d.ts +++ b/packages/victory-polar-axis/src/types.ts @@ -1,15 +1,3 @@ -// Definitions by: Alexey Svetliakov -// snerks -// Krzysztof Cebula -// Vitaliy Polyanskiy -// James Lismore -// Stack Builders -// Esteban Ibarra -// Dominic Lee -// Dave Vedder -// Alec Flett - -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/packages/victory-polar-axis/src/victory-polar-axis.js b/packages/victory-polar-axis/src/victory-polar-axis.tsx similarity index 94% rename from packages/victory-polar-axis/src/victory-polar-axis.js rename to packages/victory-polar-axis/src/victory-polar-axis.tsx index 83b9a1ecc..8150fe71b 100644 --- a/packages/victory-polar-axis/src/victory-polar-axis.js +++ b/packages/victory-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 = { 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 {} + +class VictoryPolarAxisBase extends React.Component { static animationWhitelist = [ "style", "domain", @@ -258,4 +263,4 @@ class VictoryPolarAxis extends React.Component { } } -export default addEvents(VictoryPolarAxis, options); +export const VictoryPolarAxis = addEvents(VictoryPolarAxisBase, options);