From 890f746966432e335fe9db610f391e5c78d5d2cc Mon Sep 17 00:00:00 2001 From: Nils Stolpe Date: Thu, 14 Nov 2024 17:40:59 -0500 Subject: [PATCH 1/8] added solution for disappearing bars inside zoom container --- packages/victory-bar/src/helper-methods.ts | 8 ++++++++ packages/victory-bar/src/victory-bar.tsx | 11 ++++++++--- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/victory-bar/src/helper-methods.ts b/packages/victory-bar/src/helper-methods.ts index 4604383ee..cecaee66c 100644 --- a/packages/victory-bar/src/helper-methods.ts +++ b/packages/victory-bar/src/helper-methods.ts @@ -61,6 +61,14 @@ const getCalculatedValues = (props) => { let data = Data.getData(props); data = Data.formatDataFromDomain(data, domain, 0); + if (props.groupComponent.type.displayName === 'VictoryClipContainer') { + data = data.map((datum) => { + datum._x = datum.x; + datum._y = datum.y; + return datum; + }); + } + 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..04f5bff57 100644 --- a/packages/victory-bar/src/victory-bar.tsx +++ b/packages/victory-bar/src/victory-bar.tsx @@ -38,8 +38,8 @@ export type VictoryBarAlignmentType = "start" | "middle" | "end"; export interface VictoryBarProps extends VictoryCommonProps, - VictoryDatableProps, - VictoryMultiLabelableProps { + VictoryDatableProps, + VictoryMultiLabelableProps { alignment?: VictoryBarAlignmentType; barRatio?: number; barWidth?: NumberOrCallback; @@ -141,7 +141,12 @@ class VictoryBarBase extends React.Component { return this.animateComponent(props, animationWhitelist); } - const children = this.renderData(props); + let children; + if (props.groupComponent.type.displayName === 'VictoryClipContainer') { + children = this.renderData(props, () => true); + } else { + children = this.renderData(props); + } const component = props.standalone ? this.renderContainer(props.containerComponent, children) From d84155d1f7dcc042c6a3721d0f0080133db8a886 Mon Sep 17 00:00:00 2001 From: Nils Stolpe Date: Fri, 15 Nov 2024 11:21:15 -0500 Subject: [PATCH 2/8] compare class directly instead of displayName --- packages/victory-bar/src/helper-methods.ts | 3 ++- packages/victory-bar/src/victory-bar.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/victory-bar/src/helper-methods.ts b/packages/victory-bar/src/helper-methods.ts index cecaee66c..1d3223dda 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,7 +62,7 @@ const getCalculatedValues = (props) => { let data = Data.getData(props); data = Data.formatDataFromDomain(data, domain, 0); - if (props.groupComponent.type.displayName === 'VictoryClipContainer') { + if (props.groupComponent.type === VictoryClipContainer) { data = data.map((datum) => { datum._x = datum.x; datum._y = datum.y; diff --git a/packages/victory-bar/src/victory-bar.tsx b/packages/victory-bar/src/victory-bar.tsx index 04f5bff57..688299f33 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, @@ -142,7 +143,7 @@ class VictoryBarBase extends React.Component { } let children; - if (props.groupComponent.type.displayName === 'VictoryClipContainer') { + if (props.groupComponent.type === VictoryClipContainer) { children = this.renderData(props, () => true); } else { children = this.renderData(props); From 7839bdb38aa444694433698b6ca9ab8e0aecdb75 Mon Sep 17 00:00:00 2001 From: Nils Stolpe Date: Fri, 15 Nov 2024 11:30:28 -0500 Subject: [PATCH 3/8] fixed typing for addEvents.renderData, moved bar shouldRenderDatum argument to static property --- packages/victory-bar/src/victory-bar.tsx | 6 ++++-- packages/victory-core/src/victory-util/add-events.tsx | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/victory-bar/src/victory-bar.tsx b/packages/victory-bar/src/victory-bar.tsx index 688299f33..52a305c05 100644 --- a/packages/victory-bar/src/victory-bar.tsx +++ b/packages/victory-bar/src/victory-bar.tsx @@ -128,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; @@ -144,7 +146,7 @@ class VictoryBarBase extends React.Component { let children; if (props.groupComponent.type === VictoryClipContainer) { - children = this.renderData(props, () => true); + children = this.renderData(props, VictoryBarBase.shouldRenderDatum); } else { children = this.renderData(props); } 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, From 3170ef73e4ff66bcedb910b5b193e67c5836bc43 Mon Sep 17 00:00:00 2001 From: Nils Stolpe Date: Fri, 15 Nov 2024 11:47:16 -0500 Subject: [PATCH 4/8] linting fix --- packages/victory-bar/src/helper-methods.ts | 2 +- packages/victory-bar/src/victory-bar.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/victory-bar/src/helper-methods.ts b/packages/victory-bar/src/helper-methods.ts index 1d3223dda..f3bf6d53e 100644 --- a/packages/victory-bar/src/helper-methods.ts +++ b/packages/victory-bar/src/helper-methods.ts @@ -5,7 +5,7 @@ import { Helpers, LabelHelpers, Scale, - VictoryClipContainer + VictoryClipContainer, } from "victory-core"; export const getBarPosition = (props, datum) => { diff --git a/packages/victory-bar/src/victory-bar.tsx b/packages/victory-bar/src/victory-bar.tsx index 52a305c05..8a53b0579 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; From 503154383bf3443a7343bc369204ec73c70d5b27 Mon Sep 17 00:00:00 2001 From: Nils Stolpe Date: Fri, 15 Nov 2024 11:59:26 -0500 Subject: [PATCH 5/8] added bar chart from issue report to demo --- demo/ts/components/victory-zoom-container-demo.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/demo/ts/components/victory-zoom-container-demo.tsx b/demo/ts/components/victory-zoom-container-demo.tsx index 71328bd0c..7ef2652bf 100644 --- a/demo/ts/components/victory-zoom-container-demo.tsx +++ b/demo/ts/components/victory-zoom-container-demo.tsx @@ -550,6 +550,13 @@ export default class VictoryZoomContainerDemo extends React.Component< + + } + style={{ parent: parentStyle }} + > + + ); } From bcf00dee88b406910dd77885e41c77097113a987 Mon Sep 17 00:00:00 2001 From: Nils Stolpe Date: Fri, 15 Nov 2024 12:32:39 -0500 Subject: [PATCH 6/8] added changeset --- .changeset/soft-moons-exist.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/soft-moons-exist.md 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" From 894a507eb5852ec784e685ee604a58ed226e71bc Mon Sep 17 00:00:00 2001 From: Nils Stolpe Date: Mon, 18 Nov 2024 15:32:26 -0500 Subject: [PATCH 7/8] 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< > + + } + style={{ parent: parentStyle }} + horizontal + > + + ); } 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 { } 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 { From 210b9b00a4cf20555b0e1c1b32c24fa665e3fd9b Mon Sep 17 00:00:00 2001 From: Nils Stolpe Date: Mon, 18 Nov 2024 16:13:42 -0500 Subject: [PATCH 8/8] lint fix --- packages/victory-bar/src/victory-bar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/victory-bar/src/victory-bar.tsx b/packages/victory-bar/src/victory-bar.tsx index 565b1c8df..5841568ed 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;