From 894a507eb5852ec784e685ee604a58ed226e71bc Mon Sep 17 00:00:00 2001
From: Nils Stolpe <nils.stolpe@nearform.com>
Date: Mon, 18 Nov 2024 15:32:26 -0500
Subject: [PATCH] added some comments, returned a new data obect instead of
 mutating, and added a horizontal demo

---
 demo/ts/components/victory-zoom-container-demo.tsx | 8 ++++++++
 packages/victory-bar/src/helper-methods.ts         | 8 +++-----
 packages/victory-bar/src/victory-bar.tsx           | 7 +++++--
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/demo/ts/components/victory-zoom-container-demo.tsx b/demo/ts/components/victory-zoom-container-demo.tsx
index 7ef2652bf..d6172a62f 100644
--- a/demo/ts/components/victory-zoom-container-demo.tsx
+++ b/demo/ts/components/victory-zoom-container-demo.tsx
@@ -557,6 +557,14 @@ export default class VictoryZoomContainerDemo extends React.Component<
         >
           <VictoryBar />
         </VictoryChart>
+
+        <VictoryChart
+          containerComponent={<VictoryZoomContainer />}
+          style={{ parent: parentStyle }}
+          horizontal
+        >
+          <VictoryBar />
+        </VictoryChart>
       </div>
     );
   }
diff --git a/packages/victory-bar/src/helper-methods.ts b/packages/victory-bar/src/helper-methods.ts
index f3bf6d53e..0a5fe93bb 100644
--- a/packages/victory-bar/src/helper-methods.ts
+++ b/packages/victory-bar/src/helper-methods.ts
@@ -62,12 +62,10 @@ 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;
-      datum._y = datum.y;
-      return datum;
-    });
+    data = data.map((datum) => ({ ...datum, _x: datum.x, _y: datum.y }));
   }
 
   return { style, data, scale, domain, origin };
diff --git a/packages/victory-bar/src/victory-bar.tsx b/packages/victory-bar/src/victory-bar.tsx
index 8a53b0579..565b1c8df 100644
--- a/packages/victory-bar/src/victory-bar.tsx
+++ b/packages/victory-bar/src/victory-bar.tsx
@@ -39,8 +39,8 @@ export type VictoryBarAlignmentType = "start" | "middle" | "end";
 
 export interface VictoryBarProps
   extends VictoryCommonProps,
-    VictoryDatableProps,
-    VictoryMultiLabelableProps {
+  VictoryDatableProps,
+  VictoryMultiLabelableProps {
   alignment?: VictoryBarAlignmentType;
   barRatio?: number;
   barWidth?: NumberOrCallback;
@@ -145,6 +145,9 @@ class VictoryBarBase extends React.Component<VictoryBarProps> {
     }
 
     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 {