diff --git a/packages/victory-axis/package.json b/packages/victory-axis/package.json index fbb5244cf..43eaa4a6c 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", @@ -151,6 +155,7 @@ "dependencies": [ "types:create", "../victory-core:types:create", + "../victory-chart:types:create", "../victory-vendor:types:create", "../victory-voronoi:types:create" ], @@ -203,6 +208,7 @@ "output": [], "dependencies": [ "../victory-core:types:create", + "../victory-chart:types:create", "../victory-vendor:types:create", "../victory-voronoi:types:create" ], @@ -233,6 +239,7 @@ "output": [], "dependencies": [ "../victory-core:types:create", + "../victory-chart:types:create", "../victory-vendor:types:create", "../victory-voronoi:types:create" ], @@ -251,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/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..1f1f39881 --- /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..f13dcc8e3 --- /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[]; } /** 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: