From 3845506474d6e3766eb2294320117c59eb7a3f70 Mon Sep 17 00:00:00 2001 From: Stef Williams Date: Fri, 22 Jul 2022 14:43:50 -0700 Subject: [PATCH 1/4] chore(typescript): migrated victory-axis to TS --- .../{helper-methods.js => helper-methods.tsx} | 10 ++--- packages/victory-axis/src/index.d.ts | 37 ------------------- packages/victory-axis/src/index.js | 1 - packages/victory-axis/src/index.ts | 1 + .../victory-axis/src/victory-axis.test.tsx | 20 ++++++++++ .../src/{victory-axis.js => victory-axis.tsx} | 37 +++++++++++++++++-- .../src/victory-util/add-events.tsx | 8 +++- 7 files changed, 66 insertions(+), 48 deletions(-) rename packages/victory-axis/src/{helper-methods.js => helper-methods.tsx} (98%) delete mode 100644 packages/victory-axis/src/index.d.ts delete mode 100644 packages/victory-axis/src/index.js create mode 100644 packages/victory-axis/src/index.ts create mode 100644 packages/victory-axis/src/victory-axis.test.tsx rename packages/victory-axis/src/{victory-axis.js => victory-axis.tsx} (89%) diff --git a/packages/victory-axis/src/helper-methods.js b/packages/victory-axis/src/helper-methods.tsx similarity index 98% rename from packages/victory-axis/src/helper-methods.js rename to packages/victory-axis/src/helper-methods.tsx index 0a29c1962..1fb34265e 100644 --- a/packages/victory-axis/src/helper-methods.js +++ b/packages/victory-axis/src/helper-methods.tsx @@ -61,7 +61,7 @@ const getStyleObject = (props) => { : specificAxisStyle || generalAxisStyle; }; -export const getStyles = (props, styleObject) => { +export const getStyles = (props, styleObject?) => { const style = props.style || {}; styleObject = styleObject || {}; const parentStyleProps = { height: "100%", width: "100%" }; @@ -552,7 +552,6 @@ export const getBaseProps = (props, fallbackProps) => { anchors, domain, stringTicks, - name, } = calculatedValues; const otherAxis = axis === "x" ? "y" : "x"; const { width, height, standalone, theme, polar, padding, horizontal } = @@ -585,7 +584,6 @@ export const getBaseProps = (props, fallbackProps) => { height, padding, domain, - name, }, sharedProps, ), @@ -608,7 +606,7 @@ export const getBaseProps = (props, fallbackProps) => { const tickLayout = { position: getTickPosition(styles, orientation, isVertical), transform: getTickTransform( - scale[axis](tickValue), + scale[axis]?.(tickValue), globalTransform, isVertical, ), @@ -619,9 +617,9 @@ export const getBaseProps = (props, fallbackProps) => { transform: { x: isVertical ? -gridOffset.x + globalTransform.x - : scale[axis](tickValue) + globalTransform.x, + : scale[axis]?.(tickValue) + globalTransform.x, y: isVertical - ? scale[axis](tickValue) + globalTransform.y + ? scale[axis]?.(tickValue) + globalTransform.y : gridOffset.y + globalTransform.y, }, }; diff --git a/packages/victory-axis/src/index.d.ts b/packages/victory-axis/src/index.d.ts deleted file mode 100644 index d6cf101f6..000000000 --- a/packages/victory-axis/src/index.d.ts +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from "react"; -import { - DomainPropType, - EventPropTypeInterface, - OrientationTypes, - VictoryAxisCommonProps, - VictoryCommonProps, - VictorySingleLabelableProps, -} from "victory-core"; - -export type VictoryAxisTTargetType = - | "axis" - | "axisLabel" - | "grid" - | "ticks" - | "tickLabels" - | "parent"; - -export interface VictoryAxisProps - extends VictoryAxisCommonProps, - VictoryCommonProps, - VictorySingleLabelableProps { - crossAxis?: boolean; - domain?: DomainPropType; - events?: EventPropTypeInterface[]; - fixLabelOverlap?: boolean; - offsetX?: number; - offsetY?: number; - orientation?: OrientationTypes; -} - -/** - * VictoryAxis draws an SVG chart axis with React. - * Styles and data can be customized by passing in your own values as properties to the component. - * Data changes are animated with VictoryAnimation. - */ -export class VictoryAxis extends React.Component {} diff --git a/packages/victory-axis/src/index.js b/packages/victory-axis/src/index.js deleted file mode 100644 index c22d26b21..000000000 --- a/packages/victory-axis/src/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as VictoryAxis } from "./victory-axis"; diff --git a/packages/victory-axis/src/index.ts b/packages/victory-axis/src/index.ts new file mode 100644 index 000000000..c45e84563 --- /dev/null +++ b/packages/victory-axis/src/index.ts @@ -0,0 +1 @@ +export * from './victory-axis'; diff --git a/packages/victory-axis/src/victory-axis.test.tsx b/packages/victory-axis/src/victory-axis.test.tsx new file mode 100644 index 000000000..71f391797 --- /dev/null +++ b/packages/victory-axis/src/victory-axis.test.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import { VictoryAxis } from "victory-axis"; +import { VictoryChart } from "victory-chart"; +import { render, screen } from "@testing-library/react"; + +describe("components/victory-axis", () => { + it("should render two axes by default", () => { + const chartProps = { + defaultAxes: { + independent: , + dependent: + }, + }; + render(); + + const axes = screen.getAllByTestId("axis"); + + expect(axes).toHaveLength(2); + }) +}) diff --git a/packages/victory-axis/src/victory-axis.js b/packages/victory-axis/src/victory-axis.tsx similarity index 89% rename from packages/victory-axis/src/victory-axis.js rename to packages/victory-axis/src/victory-axis.tsx index 6005792c4..f445f40a2 100644 --- a/packages/victory-axis/src/victory-axis.js +++ b/packages/victory-axis/src/victory-axis.tsx @@ -12,6 +12,13 @@ import { addEvents, Axis, UserProps, + DomainPropType, + EventPropTypeInterface, + OrientationTypes, + VictoryAxisCommonProps, + VictoryCommonProps, + VictorySingleLabelableProps, + EventsMixinClass, } from "victory-core"; import { getBaseProps, getStyles } from "./helper-methods"; @@ -32,7 +39,31 @@ const options = { ], }; -class VictoryAxis extends React.Component { +export type VictoryAxisTTargetType = + | "axis" + | "axisLabel" + | "grid" + | "ticks" + | "tickLabels" + | "parent"; + +export interface VictoryAxisProps + extends VictoryAxisCommonProps, + VictoryCommonProps, + VictorySingleLabelableProps { + crossAxis?: boolean; + domain?: DomainPropType; + events?: EventPropTypeInterface[]; + fixLabelOverlap?: boolean; + offsetX?: number; + offsetY?: number; + orientation?: OrientationTypes; +} + +// eslint-disable-next-line @typescript-eslint/no-empty-interface +interface VictoryAxisBase extends EventsMixinClass {} + +class VictoryAxisBase extends React.Component { static animationWhitelist = [ "style", "domain", @@ -143,7 +174,7 @@ class VictoryAxis extends React.Component { static getDomain = Axis.getDomain; static getAxis = Axis.getAxis; - static getStyles = (props) => getStyles(props, fallbackProps.style); + static getStyles = (props) => getStyles(props); static getBaseProps = (props) => getBaseProps(props, fallbackProps); static expectedComponents = [ "axisComponent", @@ -291,4 +322,4 @@ class VictoryAxis extends React.Component { } } -export default addEvents(VictoryAxis, options); +export const VictoryAxis = addEvents(VictoryAxisBase, options); diff --git a/packages/victory-core/src/victory-util/add-events.tsx b/packages/victory-core/src/victory-util/add-events.tsx index 7c64faee7..4e896b114 100644 --- a/packages/victory-core/src/victory-util/add-events.tsx +++ b/packages/victory-core/src/victory-util/add-events.tsx @@ -37,7 +37,7 @@ const defaultComponents: NonNullable = [ export type MixinOptions = { components?: Array<{ name: string; - index?: string; + index?: string | number; }>; }; @@ -64,6 +64,12 @@ export interface EventsMixinClass { getEventState: typeof Events.getEventState; renderContinuousData(props: TProps); animateComponent(props: TProps, defaultAnimationWhitelist); + getComponentProps( + component: React.ReactElement, + type: string, + index: number, + ): TProps; + dataKeys: string[]; } /** From 42e6c1a99edd215d74d003363e0fe4f2384963ef Mon Sep 17 00:00:00 2001 From: Stef Williams Date: Fri, 22 Jul 2022 16:40:59 -0700 Subject: [PATCH 2/4] chore(typescript): fix Prettier --- packages/victory-axis/src/index.ts | 2 +- packages/victory-axis/src/victory-axis.test.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/victory-axis/src/index.ts b/packages/victory-axis/src/index.ts index c45e84563..1f1f39881 100644 --- a/packages/victory-axis/src/index.ts +++ b/packages/victory-axis/src/index.ts @@ -1 +1 @@ -export * from './victory-axis'; +export * from "./victory-axis"; diff --git a/packages/victory-axis/src/victory-axis.test.tsx b/packages/victory-axis/src/victory-axis.test.tsx index 71f391797..f13dcc8e3 100644 --- a/packages/victory-axis/src/victory-axis.test.tsx +++ b/packages/victory-axis/src/victory-axis.test.tsx @@ -8,7 +8,7 @@ describe("components/victory-axis", () => { const chartProps = { defaultAxes: { independent: , - dependent: + dependent: , }, }; render(); @@ -16,5 +16,5 @@ describe("components/victory-axis", () => { const axes = screen.getAllByTestId("axis"); expect(axes).toHaveLength(2); - }) -}) + }); +}); From 2b9c8cf8df5f9d30d8ed595294c57d70ebab2d5e Mon Sep 17 00:00:00 2001 From: scottrippey Date: Mon, 25 Jul 2022 12:37:18 -0600 Subject: [PATCH 3/4] chore(build): added devDeps on victory- packages --- packages/victory-axis/package.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/victory-axis/package.json b/packages/victory-axis/package.json index fbb5244cf..a585ac99e 100644 --- a/packages/victory-axis/package.json +++ b/packages/victory-axis/package.json @@ -27,6 +27,10 @@ "peerDependencies": { "react": ">=16.6.0" }, + "devDependencies": { + "victory-axis": "*", + "victory-chart": "*" + }, "scripts": { "### THESE SCRIPTS ARE GENERATED ###": "true", "### DO NOT MODIFY THESE MANUALLY ###": "true", From b819b455bcc8080e5b88a7b06a9ddafd0e9d704f Mon Sep 17 00:00:00 2001 From: scottrippey Date: Mon, 25 Jul 2022 12:37:39 -0600 Subject: [PATCH 4/4] chore(build): ran `pnpm run sync:pkgs` --- packages/victory-axis/package.json | 4 ++++ pnpm-lock.yaml | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/packages/victory-axis/package.json b/packages/victory-axis/package.json index a585ac99e..43eaa4a6c 100644 --- a/packages/victory-axis/package.json +++ b/packages/victory-axis/package.json @@ -155,6 +155,7 @@ "dependencies": [ "types:create", "../victory-core:types:create", + "../victory-chart:types:create", "../victory-vendor:types:create", "../victory-voronoi:types:create" ], @@ -207,6 +208,7 @@ "output": [], "dependencies": [ "../victory-core:types:create", + "../victory-chart:types:create", "../victory-vendor:types:create", "../victory-voronoi:types:create" ], @@ -237,6 +239,7 @@ "output": [], "dependencies": [ "../victory-core:types:create", + "../victory-chart:types:create", "../victory-vendor:types:create", "../victory-voronoi:types:create" ], @@ -255,6 +258,7 @@ "output": [], "dependencies": [ "build:lib:cjs", + "../victory-chart:build:lib:cjs", "../victory-vendor:build:lib:cjs", "../victory-voronoi:build:lib:cjs" ], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 507f39db7..a7d6cb1c4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -259,11 +259,16 @@ importers: specifiers: lodash: ^4.17.19 prop-types: ^15.8.1 + victory-axis: '*' + victory-chart: '*' victory-core: ^36.5.3 dependencies: lodash: 4.17.21 prop-types: 15.8.1 victory-core: link:../victory-core + devDependencies: + victory-axis: 'link:' + victory-chart: link:../victory-chart packages/victory-bar: specifiers: