added some comments, returned a new data obect instead of mutating, a…

…nd added a horizontal demo
FormidableLabs · Nov 18, 2024 · 894a507 · 894a507
1 parent bcf00de
commit 894a507
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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 {