diff --git a/.changeset/soft-moons-exist.md b/.changeset/soft-moons-exist.md new file mode 100644 index 000000000..30c54a491 --- /dev/null +++ b/.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" diff --git a/demo/ts/components/victory-zoom-container-demo.tsx b/demo/ts/components/victory-zoom-container-demo.tsx index 71328bd0c..d6172a62f 100644 --- a/demo/ts/components/victory-zoom-container-demo.tsx +++ b/demo/ts/components/victory-zoom-container-demo.tsx @@ -550,6 +550,21 @@ export default class VictoryZoomContainerDemo extends React.Component< + + } + style={{ parent: parentStyle }} + > + + + + } + style={{ parent: parentStyle }} + horizontal + > + + ); } diff --git a/packages/victory-bar/src/helper-methods.ts b/packages/victory-bar/src/helper-methods.ts index 4604383ee..0a5fe93bb 100644 --- a/packages/victory-bar/src/helper-methods.ts +++ b/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 }; }; diff --git a/packages/victory-bar/src/victory-bar.tsx b/packages/victory-bar/src/victory-bar.tsx index 11723bce3..5841568ed 100644 --- a/packages/victory-bar/src/victory-bar.tsx +++ b/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 { "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 { 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) diff --git a/packages/victory-core/src/victory-util/add-events.tsx b/packages/victory-core/src/victory-util/add-events.tsx index e1a5c1e3d..13033a027 100644 --- a/packages/victory-core/src/victory-util/add-events.tsx +++ b/packages/victory-core/src/victory-util/add-events.tsx @@ -57,7 +57,7 @@ export interface EventsMixinClass { ): React.ReactElement; cacheValues(this: TThis, obj: Partial): void; getEventState: typeof Events.getEventState; - renderData(props: TProps); + renderData(props: TProps, shouldRenderDatum?: () => boolean); renderContinuousData(props: TProps); animateComponent( props: TProps,