victory-chart 36.5.0 → 36.5.1

package/src/{helper-methods.js → helper-methods.tsx}

@@ -7,7 +7,7 @@ import { defaults, assign } from "lodash";
 const fallbackProps = {
   width: 450,
   height: 300,
-  padding: 50
+  padding: 50,
 };
 
 function getAxisProps(child, props, calculatedProps) {
@@ -20,7 +20,7 @@ function getAxisProps(child, props, calculatedProps) {
     endAngle: props.endAngle,
     innerRadius: props.innerRadius,
     domain,
-    scale
+    scale,
   };
 }
 
@@ -51,12 +51,12 @@ export function getBackgroundWithProps(props, calculatedProps) {
     x: xCoordinate,
     y: yCoordinate,
     key: `${parentName}-background`,
-    width
+    width,
   };
 
   return React.cloneElement(
     backgroundElement,
-    defaults({}, backgroundElement.props, backgroundProps)
+    defaults({}, backgroundElement.props, backgroundProps),
   );
 }
 
@@ -77,8 +77,8 @@ function getStyles(props) {
     parent: defaults({}, styleProps, {
       height: "100%",
       width: "100%",
-      userSelect: "none"
-    })
+      userSelect: "none",
+    }),
   };
 }
 
@@ -91,20 +91,20 @@ export function getCalculatedProps(props, childComponents) {
   const stringMap = createStringMap(props, childComponents, allStrings);
   const domain = {
     x: getDomain(assign({}, props, { categories }), "x", childComponents),
-    y: getDomain(assign({}, props, { categories }), "y", childComponents)
+    y: getDomain(assign({}, props, { categories }), "y", childComponents),
   };
 
   const range = {
     x: Helpers.getRange(props, "x"),
-    y: Helpers.getRange(props, "y")
+    y: Helpers.getRange(props, "y"),
   };
   const baseScale = {
     x: Scale.getScaleFromProps(props, "x") || Wrapper.getScale(props, "x"),
-    y: Scale.getScaleFromProps(props, "y") || Wrapper.getScale(props, "y")
+    y: Scale.getScaleFromProps(props, "y") || Wrapper.getScale(props, "y"),
   };
   const scale = {
     x: baseScale.x.domain(domain.x).range(horizontal ? range.y : range.x),
-    y: baseScale.y.domain(domain.y).range(horizontal ? range.x : range.y)
+    y: baseScale.y.domain(domain.y).range(horizontal ? range.x : range.y),
   };
 
   const origin = polar ? Helpers.getPolarOrigin(props) : Axis.getOrigin(domain);
@@ -120,7 +120,7 @@ export function getCalculatedProps(props, childComponents) {
     stringMap,
     style,
     origin,
-    padding
+    padding,
   };
 }
 
@@ -152,15 +152,15 @@ export function getChildren(props, childComponents, calculatedProps) {
         origin: polar ? origin : undefined,
         padding: calculatedProps.padding,
         key: `${name}-key-${index}`,
-        standalone: false
+        standalone: false,
       },
-      childProps
+      childProps,
     );
     return React.cloneElement(child, newProps);
   });
 }
 
-export const getChildComponents = (props, defaultAxes) => {
+export const getChildComponents = (props, defaultAxes?) => {
   const childComponents = React.Children.toArray(props.children);
   let newChildComponents = [...childComponents];
 
@@ -171,8 +171,8 @@ export const getChildComponents = (props, defaultAxes) => {
       dependent: Axis.getAxisComponentsWithParent(childComponents, "dependent"),
       independent: Axis.getAxisComponentsWithParent(
         childComponents,
-        "independent"
-      )
+        "independent",
+      ),
     };
 
     if (
@@ -181,11 +181,11 @@ export const getChildComponents = (props, defaultAxes) => {
     ) {
       newChildComponents = props.prependDefaultAxes
         ? [defaultAxes.independent, defaultAxes.dependent].concat(
-            newChildComponents
+            newChildComponents,
           )
         : newChildComponents.concat([
             defaultAxes.independent,
-            defaultAxes.dependent
+            defaultAxes.dependent,
           ]);
     }
   }

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./victory-chart";

package/src/v37/victory-chart.tsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+import {
+  CategoryPropType,
+  DomainPropType,
+  EventPropTypeInterface,
+  StringOrNumberOrCallback,
+  VictoryCommonProps,
+  VictoryStyleInterface,
+  VictoryStyleObject,
+  withContainer,
+  useDomain,
+  useScale,
+  useData,
+} from "victory-core";
+import { AxesType } from "..";
+import { VictoryAxis, VictoryAxisProps } from "victory-axis";
+
+interface VictoryChartProps extends VictoryCommonProps {
+  backgroundComponent?: React.ReactElement;
+  categories?: CategoryPropType;
+  children?: React.ReactNode | React.ReactNode[];
+  desc?: string;
+  defaultAxes?: AxesType;
+  defaultPolarAxes?: AxesType;
+  domain?: DomainPropType;
+  endAngle?: number;
+  eventKey?: StringOrNumberOrCallback;
+  events?: EventPropTypeInterface<
+    string,
+    string[] | number[] | string | number
+  >[];
+  innerRadius?: number;
+  prependDefaultAxes?: boolean;
+  startAngle?: number;
+  style?: Pick<VictoryStyleInterface, "parent"> & {
+    background?: VictoryStyleObject;
+  };
+  title?: string;
+}
+
+const DEFAULT_AXES = {
+  independent: <VictoryAxis />,
+  dependent: <VictoryAxis dependentAxis />,
+};
+
+// TODO: This does not accept data
+const VictoryChart = ({
+  defaultAxes = DEFAULT_AXES,
+  groupComponent = <g />,
+  children,
+}: VictoryChartProps) => {
+  const scale = useScale();
+  const data = useData();
+  const domain = useDomain();
+
+  const axes = React.useMemo(() => {
+    const { dependent, independent } = {
+      ...defaultAxes,
+      ...DEFAULT_AXES,
+    };
+    const axisProps: VictoryAxisProps = {
+      data,
+      domain,
+      // @ts-expect-error we need to fix this scale type
+      scale,
+      standalone: false,
+    };
+    return [
+      React.cloneElement(dependent, { ...axisProps, key: "dependent-axis" }),
+      React.cloneElement(independent, {
+        ...axisProps,
+        key: "independent-axis",
+      }),
+    ];
+  }, [defaultAxes, domain, scale, data]);
+
+  const childComponents = React.Children.map(children, (child, index) => {
+    // @ts-expect-error Why is this throwing a type error?
+    return React.cloneElement(child, {
+      key: `child-${index}`,
+      index,
+      standalone: false,
+    });
+  });
+
+  return React.cloneElement(groupComponent, {}, axes, childComponents);
+};
+
+export default withContainer(VictoryChart);

package/src/{victory-chart.js → victory-chart.tsx}

@@ -10,7 +10,14 @@ import {
   UserProps,
   VictoryContainer,
   VictoryTheme,
-  Wrapper
+  Wrapper,
+  CategoryPropType,
+  DomainPropType,
+  EventPropTypeInterface,
+  StringOrNumberOrCallback,
+  VictoryCommonProps,
+  VictoryStyleInterface,
+  VictoryStyleObject,
 } from "victory-core";
 import { VictorySharedEvents } from "victory-shared-events";
 import { VictoryAxis } from "victory-axis";
@@ -19,17 +26,17 @@ import {
   getBackgroundWithProps,
   getChildComponents,
   getCalculatedProps,
-  getChildren
+  getChildren,
 } from "./helper-methods";
 import isEqual from "react-fast-compare";
 
 const fallbackProps = {
   width: 450,
   height: 300,
-  padding: 50
+  padding: 50,
 };
 
-const VictoryChart = (initialProps) => {
+const VictoryChartImpl: React.FC<VictoryChartProps> = (initialProps) => {
   const role = "chart";
   const { getAnimationProps, setAnimationState, getProps } =
     Hooks.useAnimationState();
@@ -48,7 +55,7 @@ const VictoryChart = (initialProps) => {
     theme,
     polar,
     name,
-    title
+    title,
   } = modifiedProps;
 
   const axes = props.polar
@@ -57,14 +64,14 @@ const VictoryChart = (initialProps) => {
 
   const childComponents = React.useMemo(
     () => getChildComponents(modifiedProps, axes),
-    [modifiedProps, axes]
+    [modifiedProps, axes],
   );
 
   const calculatedProps = React.useMemo(
     () => getCalculatedProps(modifiedProps, childComponents),
-    [modifiedProps, childComponents]
+    [modifiedProps, childComponents],
   );
-  const { domain, scale, style, origin, radius, horizontal } = calculatedProps;
+  const { domain, scale, style, origin, horizontal } = calculatedProps;
 
   const newChildren = React.useMemo(() => {
     const children = getChildren(props, childComponents, calculatedProps);
@@ -72,7 +79,7 @@ const VictoryChart = (initialProps) => {
     const mappedChildren = children.map((child, index) => {
       const childProps = assign(
         { animate: getAnimationProps(props, child, index, "victory chart") },
-        child.props
+        child.props,
       );
       return React.cloneElement(child, childProps);
     });
@@ -80,7 +87,7 @@ const VictoryChart = (initialProps) => {
     if (props.style && props.style.background) {
       const backgroundComponent = getBackgroundWithProps(
         props,
-        calculatedProps
+        calculatedProps,
       );
 
       mappedChildren.unshift(backgroundComponent);
@@ -100,12 +107,11 @@ const VictoryChart = (initialProps) => {
         name,
         origin: polar ? origin : undefined,
         polar,
-        radius,
         theme,
         title,
         scale,
         standalone,
-        style: style.parent
+        style: style.parent,
       };
     }
     return {};
@@ -117,13 +123,12 @@ const VictoryChart = (initialProps) => {
     name,
     origin,
     polar,
-    radius,
     scale,
     standalone,
     style,
     title,
     theme,
-    width
+    width,
   ]);
 
   const container = React.useMemo(() => {
@@ -132,7 +137,7 @@ const VictoryChart = (initialProps) => {
         {},
         containerComponent.props,
         containerProps,
-        UserProps.getSafeUserProps(initialProps)
+        UserProps.getSafeUserProps(initialProps),
       );
       return React.cloneElement(containerComponent, defaultContainerProps);
     }
@@ -142,7 +147,7 @@ const VictoryChart = (initialProps) => {
     standalone,
     containerComponent,
     containerProps,
-    initialProps
+    initialProps,
   ]);
 
   const events = React.useMemo(() => {
@@ -175,46 +180,73 @@ const VictoryChart = (initialProps) => {
   return React.cloneElement(container, container.props, newChildren);
 };
 
-VictoryChart.propTypes = {
+VictoryChartImpl.propTypes = {
   ...CommonProps.baseProps,
   backgroundComponent: PropTypes.element,
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
+    PropTypes.node,
   ]),
   defaultAxes: PropTypes.shape({
     independent: PropTypes.element,
-    dependent: PropTypes.element
+    dependent: PropTypes.element,
   }),
   defaultPolarAxes: PropTypes.shape({
     independent: PropTypes.element,
-    dependent: PropTypes.element
+    dependent: PropTypes.element,
   }),
   endAngle: PropTypes.number,
   innerRadius: CustomPropTypes.nonNegative,
   prependDefaultAxes: PropTypes.bool,
-  startAngle: PropTypes.number
+  startAngle: PropTypes.number,
 };
 
-VictoryChart.defaultProps = {
+VictoryChartImpl.defaultProps = {
   backgroundComponent: <Background />,
   containerComponent: <VictoryContainer />,
   defaultAxes: {
     independent: <VictoryAxis />,
-    dependent: <VictoryAxis dependentAxis />
+    dependent: <VictoryAxis dependentAxis />,
   },
   defaultPolarAxes: {
     independent: <VictoryPolarAxis />,
-    dependent: <VictoryPolarAxis dependentAxis />
+    dependent: <VictoryPolarAxis dependentAxis />,
   },
   groupComponent: <g />,
   standalone: true,
-  theme: VictoryTheme.grayscale
+  theme: VictoryTheme.grayscale,
 };
 
-const VictoryChartMemo = React.memo(VictoryChart, isEqual);
+export const VictoryChart = React.memo(VictoryChartImpl, isEqual);
 
-VictoryChartMemo.displayName = "VictoryChart";
-VictoryChartMemo.expectedComponents = ["groupComponent", "containerComponent"];
+VictoryChart.displayName = "VictoryChart";
+// @ts-expect-error FIXME: Does this "expectedComponents" do anything?
+VictoryChart.expectedComponents = ["groupComponent", "containerComponent"];
+
+export type AxesType = {
+  dependent?: React.ReactElement | null;
+  independent?: React.ReactElement | null;
+};
 
-export default VictoryChartMemo;
+export interface VictoryChartProps extends VictoryCommonProps {
+  backgroundComponent?: React.ReactElement;
+  categories?: CategoryPropType;
+  children?: React.ReactNode | React.ReactNode[];
+  desc?: string;
+  defaultAxes?: AxesType;
+  defaultPolarAxes?: AxesType;
+  domain?: DomainPropType;
+  endAngle?: number;
+  eventKey?: StringOrNumberOrCallback;
+  events?: EventPropTypeInterface<
+    string,
+    string[] | number[] | string | number
+  >[];
+  innerRadius?: number;
+  prependDefaultAxes?: boolean;
+  startAngle?: number;
+  style?: Pick<VictoryStyleInterface, "parent"> & {
+    background?: VictoryStyleObject;
+  };
+  title?: string;
+}

package/src/index.d.ts

@@ -1,40 +0,0 @@
-import * as React from "react";
-import {
-  CategoryPropType,
-  DomainPropType,
-  EventPropTypeInterface,
-  StringOrNumberOrCallback,
-  VictoryCommonProps,
-  VictoryStyleInterface,
-  VictoryStyleObject
-} from "victory-core";
-
-export type AxesType = {
-  dependent?: React.ReactElement;
-  independent?: React.ReactElement;
-};
-
-export interface VictoryChartProps extends VictoryCommonProps {
-  backgroundComponent?: React.ReactElement;
-  categories?: CategoryPropType;
-  children?: React.ReactNode | React.ReactNode[];
-  desc?: string;
-  defaultAxes?: AxesType;
-  defaultPolarAxes?: AxesType;
-  domain?: DomainPropType;
-  endAngle?: number;
-  eventKey?: StringOrNumberOrCallback;
-  events?: EventPropTypeInterface<
-    string,
-    string[] | number[] | string | number
-  >[];
-  innerRadius?: number;
-  prependDefaultAxes?: boolean;
-  startAngle?: number;
-  style?: Pick<VictoryStyleInterface, "parent"> & {
-    background?: VictoryStyleObject;
-  };
-  title?: string;
-}
-
-export class VictoryChart extends React.Component<VictoryChartProps, any> {}

package/src/index.js

@@ -1 +0,0 @@
-export { default as VictoryChart } from "./victory-chart";