victory-bar 37.3.1 → 37.3.3

package/lib/victory-bar.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { Data, Domain, EventPropTypeInterface, NumberOrCallback, StringOrNumberOrCallback, VictoryCommonProps, VictoryDatableProps, VictoryMultiLabelableProps, VictoryStyleInterface, EventsMixinClass } from "victory-core";
-export declare type VictoryBarCornerRadiusKey = "top" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
-export declare type VictoryBarCornerRadiusObject = Partial<Record<VictoryBarCornerRadiusKey, NumberOrCallback>>;
-export declare type VictoryBarTTargetType = "data" | "labels" | "parent";
-export declare type VictoryBarAlignmentType = "start" | "middle" | "end";
+export type VictoryBarCornerRadiusKey = "top" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+export type VictoryBarCornerRadiusObject = Partial<Record<VictoryBarCornerRadiusKey, NumberOrCallback>>;
+export type VictoryBarTTargetType = "data" | "labels" | "parent";
+export type VictoryBarAlignmentType = "start" | "middle" | "end";
 export interface VictoryBarProps extends VictoryCommonProps, VictoryDatableProps, VictoryMultiLabelableProps {
     alignment?: VictoryBarAlignmentType;
     barRatio?: number;
@@ -64,6 +64,7 @@ declare class VictoryBarBase extends React.Component<VictoryBarProps> {
     static getData: typeof Data.getData;
     static getBaseProps(props: VictoryBarProps): any;
     static expectedComponents: (keyof VictoryBarProps)[];
+    static shouldRenderDatum: () => boolean;
     shouldAnimate(): boolean;
     render(): React.ReactElement;
 }
@@ -93,9 +94,9 @@ export declare const VictoryBar: {
         getAllEvents(props: any): any;
         getComponentProps(component: React.ReactNode, type: string, index: string | number): any;
         renderContainer(component: any, children: any): React.DetailedReactHTMLElement<any, HTMLElement>;
-        animateComponent(props: import("victory-core").EventMixinCommonProps, defaultAnimationWhitelist: string[]): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+        animateComponent(props: import("victory-core").EventMixinCommonProps, defaultAnimationWhitelist: string[]): React.ReactElement;
         renderContinuousData(props: import("victory-core").EventMixinCommonProps): React.DetailedReactHTMLElement<any, HTMLElement>;
-        renderData(props: any, shouldRenderDatum?: ((datum: any) => boolean) | undefined): React.DetailedReactHTMLElement<any, HTMLElement>;
+        renderData(props: any, shouldRenderDatum?: (datum: any) => boolean): React.DetailedReactHTMLElement<any, HTMLElement>;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("victory-core").EventMixinCommonProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -112,17 +113,17 @@ export declare const VictoryBar: {
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("victory-core").EventMixinCommonProps>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<import("victory-core").EventMixinCommonProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<import("victory-core").EventMixinCommonProps>, nextState: Readonly<{}>, nextContext: any): void;
-        componentEvents: import("victory-core/lib/victory-util/events").ComponentEvent[];
+        componentEvents: Array<import("@/victory-core/lib/victory-util/events").ComponentEvent>;
         getSharedEventState: (key: string, value: string) => unknown;
         baseProps: Record<string, object>;
         dataKeys: string[];
         hasEvents: unknown;
         events: unknown;
     };
-    getBaseProps?(props: import("victory-core").EventMixinCommonProps): Record<string, object>;
-    role?: string | undefined;
+    getBaseProps?(props: import("victory-core").EventMixinCommonProps): import("victory-core").EventMixinCalculatedValues["baseProps"];
+    role?: import("victory-core").VictoryComponentRole;
     expectedComponents?: string[] | undefined;
-    getChildren?: ((props: import("victory-core").EventMixinCommonProps, childComponents?: React.ReactNode[] | undefined, calculatedProps?: import("victory-core").EventMixinCommonProps | undefined) => void) | undefined;
+    getChildren?: ((props: import("victory-core").EventMixinCommonProps, childComponents?: Array<React.ReactNode>, calculatedProps?: import("victory-core").EventMixinCommonProps | undefined) => void) | undefined;
     animationWhitelist?: string[] | undefined;
 } & typeof VictoryBarBase;
 export {};

package/lib/victory-bar.js

@@ -28,7 +28,7 @@ const defaultData = [{
   y: 4
 }];
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 
 /**
  * Draw SVG bar charts with React. VictoryBar is a composable component, so it doesn"t include axes
@@ -92,7 +92,9 @@ class VictoryBarBase extends _react.default.Component {
     return (0, _helperMethods.getBaseProps)(props, fallbackProps);
   }
   static expectedComponents = ["dataComponent", "labelComponent", "groupComponent", "containerComponent"];
-
+  // passed to addEvents.renderData to prevent data props with undefined _x or _y from excluding data from render.
+  // used when inside of VictoryZoomContainer
+  static shouldRenderDatum = () => true;
   // Overridden in native versions
   shouldAnimate() {
     return !!this.props.animate;
@@ -106,7 +108,15 @@ class VictoryBarBase extends _react.default.Component {
     if (this.shouldAnimate()) {
       return this.animateComponent(props, animationWhitelist);
     }
-    const children = this.renderData(props);
+    let children;
+    // when inside a zoom container (the only place VictoryClipContainer is used), all data
+    // should be renderable so bars won't dissappear before they've fully exited the container's bounds
+    // see https://github.com/FormidableLabs/victory/pull/2970
+    if (props.groupComponent.type === _victoryCore.VictoryClipContainer) {
+      children = this.renderData(props, VictoryBarBase.shouldRenderDatum);
+    } else {
+      children = this.renderData(props);
+    }
     const component = props.standalone ? this.renderContainer(props.containerComponent, children) : children;
     return _victoryCore.UserProps.withSafeUserProps(component, props);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-bar",
-  "version": "37.3.1",
+  "version": "37.3.3",
   "description": "Bar Component for Victory",
   "keywords": [
     "data visualization",
@@ -21,8 +21,8 @@
   "license": "MIT",
   "dependencies": {
     "lodash": "^4.17.19",
-    "victory-core": "37.3.1",
-    "victory-vendor": "37.3.1"
+    "victory-core": "37.3.3",
+    "victory-vendor": "37.3.3"
   },
   "peerDependencies": {
     "react": ">=16.6.0"
@@ -190,38 +190,10 @@
         "pnpm-lock.yaml"
       ]
     },
-    "format": {
-      "command": "nps format:pkg",
-      "files": [
-        "src/**",
-        "*.json",
-        "../../.prettierignore",
-        "../../.prettierrc.json"
-      ],
-      "output": [],
-      "packageLocks": [
-        "pnpm-lock.yaml"
-      ]
-    },
-    "format:fix": {
-      "command": "pnpm run format || nps format:pkg:fix",
-      "files": [
-        "src/**",
-        "*.json",
-        "../../.prettierignore",
-        "../../.prettierrc.json"
-      ],
-      "output": [],
-      "packageLocks": [
-        "pnpm-lock.yaml"
-      ]
-    },
     "lint": {
-      "command": "nps lint:pkg",
+      "command": "eslint src",
       "files": [
-        "src/**",
-        "../../.eslintignore",
-        "../../.eslintrc.js"
+        "src/**"
       ],
       "output": [],
       "dependencies": [
@@ -236,11 +208,9 @@
       ]
     },
     "lint:fix": {
-      "command": "pnpm run lint || nps lint:pkg:fix",
+      "command": "eslint --fix src",
       "files": [
-        "src/**",
-        "../../.eslintignore",
-        "../../.eslintrc.js"
+        "src/**"
       ],
       "output": [],
       "dependencies": [
@@ -287,8 +257,6 @@
     "check": "wireit",
     "types:check": "wireit",
     "types:create": "wireit",
-    "format": "wireit",
-    "format:fix": "wireit",
     "lint": "wireit",
     "lint:fix": "wireit",
     "jest": "wireit"

package/src/bar-helper-methods.ts

@@ -1,4 +1,4 @@
-import { isPlainObject } from "lodash";
+import isPlainObject from "lodash/isPlainObject";
 import { Helpers, VictoryStyleObject } from "victory-core";
 import { BarProps } from "./bar";
 import {

package/src/bar.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { defaults } from "lodash";
+import defaults from "lodash/defaults";
 import {
   Helpers,
   NumberOrCallback,
@@ -74,37 +74,36 @@ const defaultProps: Partial<BarProps> = {
   shapeRendering: "auto",
 };
 
-// eslint-disable-next-line prefer-arrow-callback
-export const Bar = forwardRef<SVGPathElement, BarProps>(function Bar(
-  initialProps,
-  ref,
-) {
-  const props = evaluateProps(defaults({}, initialProps, defaultProps));
-  const { polar, origin, style, barWidth, cornerRadius } = props;
+export const Bar = forwardRef<SVGPathElement, BarProps>(
+  // eslint-disable-next-line prefer-arrow-callback
+  function Bar(initialProps, ref) {
+    const props = evaluateProps(defaults({}, initialProps, defaultProps));
+    const { polar, origin, style, barWidth, cornerRadius } = props;
 
-  const path = polar
-    ? getPolarBarPath(props, cornerRadius)
-    : getBarPath(props, barWidth, cornerRadius);
-  const defaultTransform =
-    polar && origin ? `translate(${origin.x}, ${origin.y})` : undefined;
+    const path = polar
+      ? getPolarBarPath(props, cornerRadius)
+      : getBarPath(props, barWidth, cornerRadius);
+    const defaultTransform =
+      polar && origin ? `translate(${origin.x}, ${origin.y})` : undefined;
 
-  if (!props.pathComponent) {
-    return null;
-  }
+    if (!props.pathComponent) {
+      return null;
+    }
 
-  return React.cloneElement(props.pathComponent, {
-    ...props.events,
-    "aria-label": props.ariaLabel,
-    style,
-    d: path,
-    className: props.className,
-    clipPath: props.clipPath,
-    desc: props.desc,
-    index: props.index,
-    role: props.role,
-    shapeRendering: props.shapeRendering,
-    transform: props.transform || defaultTransform,
-    tabIndex: props.tabIndex,
-    ref,
-  });
-});
+    return React.cloneElement(props.pathComponent, {
+      ...props.events,
+      "aria-label": props.ariaLabel,
+      style,
+      d: path,
+      className: props.className,
+      clipPath: props.clipPath,
+      desc: props.desc,
+      index: props.index,
+      role: props.role,
+      shapeRendering: props.shapeRendering,
+      transform: props.transform || defaultTransform,
+      tabIndex: props.tabIndex,
+      ref,
+    });
+  },
+);

package/src/geometry-helper-methods.ts

@@ -66,7 +66,6 @@ export const circle = (center: Center, radius: number) => ({
   // Left-most point is returned as 0th element of array
   // Right-most point is returned as 1st elemennt of array
   intersection(circle1: { center: Center; radius: number }) {
-    // eslint-disable-line max-statements
     const P0 = this.center;
     const P1 = circle1.center;
     const r0 = this.radius;

package/src/helper-methods.ts

@@ -5,6 +5,7 @@ import {
   Helpers,
   LabelHelpers,
   Scale,
+  VictoryClipContainer,
 } from "victory-core";
 
 export const getBarPosition = (props, datum) => {
@@ -61,6 +62,12 @@ const getCalculatedValues = (props) => {
   let data = Data.getData(props);
   data = Data.formatDataFromDomain(data, domain, 0);
 
+  // when inside a zoom container, reset the _x and _y properties of each datum to the original
+  // x and y property values so they will not be clipped. See https://github.com/FormidableLabs/victory/pull/2970
+  if (props.groupComponent.type === VictoryClipContainer) {
+    data = data.map((datum) => ({ ...datum, _x: datum.x, _y: datum.y }));
+  }
+
   return { style, data, scale, domain, origin };
 };
 

package/src/path-helper-methods.ts

@@ -119,7 +119,6 @@ const mapPointsToPath = (coords, cornerRadius, direction) => {
 const getVerticalBarPoints = (position, sign, cr) => {
   const { x0, x1, y0, y1 } = position;
 
-  // eslint-disable-next-line max-statements, max-len
   const getHalfPoints = (side) => {
     const isLeft = side === "Left";
     const signL = isLeft ? 1 : -1;
@@ -177,7 +176,6 @@ const getHorizontalBarPoints = (position, sign, cr) => {
   const x0 = position.x0 < position.x1 ? position.x0 : position.x1;
   const x1 = position.x0 < position.x1 ? position.x1 : position.x0;
 
-  // eslint-disable-next-line max-statements, max-len
   const getHalfPoints = (side) => {
     const isTop = side === "top";
     const signL = isTop ? -1 : 1;
@@ -234,7 +232,6 @@ const getHorizontalBarPoints = (position, sign, cr) => {
   ];
 };
 
-// eslint-disable-next-line max-params
 export const getVerticalBarPath = (props, width, cornerRadius) => {
   const position = getPosition(props, width);
 
@@ -244,7 +241,6 @@ export const getVerticalBarPath = (props, width, cornerRadius) => {
   return mapPointsToPath(points, cornerRadius, direction);
 };
 
-// eslint-disable-next-line max-params
 export const getHorizontalBarPath = (props, width, cornerRadius) => {
   const position = getPosition(props, width);
 
@@ -310,7 +306,6 @@ export const getVerticalPolarBarPath = (props: BarProps, cornerRadius) => {
     };
   };
 
-  // eslint-disable-next-line max-statements
   const getTopPath = () => {
     const { topRight, topLeft } = cornerRadius;
     const arcLength = r2 * Math.abs(end - start);
@@ -360,7 +355,6 @@ export const getVerticalPolarBarPath = (props: BarProps, cornerRadius) => {
     }));
   };
 
-  // eslint-disable-next-line max-statements
   const getBottomPath = () => {
     const { bottomRight, bottomLeft } = cornerRadius;
     const arcLength = r1 * Math.abs(end - start);

package/src/victory-bar.tsx

@@ -13,6 +13,7 @@ import {
   EventPropTypeInterface,
   NumberOrCallback,
   StringOrNumberOrCallback,
+  VictoryClipContainer,
   VictoryCommonProps,
   VictoryDatableProps,
   VictoryMultiLabelableProps,
@@ -66,7 +67,7 @@ const defaultData = [
   { x: 4, y: 4 },
 ];
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 interface VictoryBarBase extends EventsMixinClass<VictoryBarProps> {}
 
 /**
@@ -127,7 +128,9 @@ class VictoryBarBase extends React.Component<VictoryBarProps> {
     "groupComponent",
     "containerComponent",
   ];
-
+  // passed to addEvents.renderData to prevent data props with undefined _x or _y from excluding data from render.
+  // used when inside of VictoryZoomContainer
+  static shouldRenderDatum = () => true;
   // Overridden in native versions
   shouldAnimate() {
     return !!this.props.animate;
@@ -141,7 +144,15 @@ class VictoryBarBase extends React.Component<VictoryBarProps> {
       return this.animateComponent(props, animationWhitelist);
     }
 
-    const children = this.renderData(props);
+    let children;
+    // when inside a zoom container (the only place VictoryClipContainer is used), all data
+    // should be renderable so bars won't dissappear before they've fully exited the container's bounds
+    // see https://github.com/FormidableLabs/victory/pull/2970
+    if (props.groupComponent.type === VictoryClipContainer) {
+      children = this.renderData(props, VictoryBarBase.shouldRenderDatum);
+    } else {
+      children = this.renderData(props);
+    }
 
     const component = props.standalone
       ? this.renderContainer(props.containerComponent, children)