fix/bars-disappear-on-zoom

.changeset/soft-moons-exist.md

@@ -0,0 +1,6 @@
+---
+"victory-bar": patch
+"victory-core": patch
+---
+
+Zoomed bar graph items will no longer be culled from the view when more than 50% of width or height is outside of the clipping parent. Instead they will be clipped once 100% outside"

demo/ts/components/victory-zoom-container-demo.tsx

@@ -550,6 +550,21 @@ export default class VictoryZoomContainerDemo extends React.Component<
           <VictoryAxis />
           <VictoryAxis dependentAxis />
         </VictoryChart>
+
+        <VictoryChart
+          containerComponent={<VictoryZoomContainer />}
+          style={{ parent: parentStyle }}
+        >
+          <VictoryBar />
+        </VictoryChart>
+
+        <VictoryChart
+          containerComponent={<VictoryZoomContainer />}
+          style={{ parent: parentStyle }}
+          horizontal
+        >
+          <VictoryBar />
+        </VictoryChart>
       </div>
     );
   }

packages/victory-bar/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 };
 };
 

packages/victory-bar/src/victory-bar.tsx

@@ -13,6 +13,7 @@ import {
   EventPropTypeInterface,
   NumberOrCallback,
   StringOrNumberOrCallback,
+  VictoryClipContainer,
   VictoryCommonProps,
   VictoryDatableProps,
   VictoryMultiLabelableProps,
@@ -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)

packages/victory-core/src/victory-util/add-events.tsx

@@ -57,7 +57,7 @@ export interface EventsMixinClass<TProps> {
   ): React.ReactElement;
   cacheValues<TThis>(this: TThis, obj: Partial<TThis>): void;
   getEventState: typeof Events.getEventState;
-  renderData(props: TProps);
+  renderData(props: TProps, shouldRenderDatum?: () => boolean);
   renderContinuousData(props: TProps);
   animateComponent(
     props: TProps,