Skip to content

feat(charts): Added resize observer and examples - #6528

Merged
dlabrecq merged 1 commit into
patternfly:mainfrom
dlabrecq:5995-resize-observer
Nov 1, 2021
Merged

dlabrecq merged 1 commit into
patternfly:mainfrom
dlabrecq:5995-resize-observer

Conversation

@dlabrecq

@dlabrecq dlabrecq commented Oct 29, 2021 •

Copy link
Copy Markdown
Member

In order to resize charts, PatternFly examples currently use the window resize event. However, this doesn't work with PatternFly's vertical navigation. For example, onNavToggle doesn't generate a window resize event when the nav pane is collapsed. This typically results in a chart that does not resize as expected.

To resolve the issue, Cost Management has been using a ResizeObserver. This resizes the chart whenever its parent container is resized. Not only for the window resize event, but it's also triggered by PatternFly's vertical navigation onNavToggle.

We would like to contribute this code back to PatternFly and update the existing chart examples. Our getResizeObserver code provides a workaround for Chrome and uses the window resize event as a fallback. The developer's existing handleResize function remains unchanged.

Fixes #5995

Area chart example
chrome-capture

@dlabrecq
dlabrecq requested a review from ddonahue007 October 29, 2021 16:34
@patternfly-build

patternfly-build commented Oct 29, 2021 •

Copy link
Copy Markdown
Collaborator

@ddonahue007 ddonahue007 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@dlabrecq
dlabrecq force-pushed the 5995-resize-observer branch from 55030b0 to 1a60dcc Compare October 29, 2021 18:03

@nicolethoen nicolethoen left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very handy, thanks!

@dlabrecq
dlabrecq merged commit 8e3c8d0 into patternfly:main Nov 1, 2021
@dlabrecq
dlabrecq deleted the 5995-resize-observer branch February 7, 2022 16:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Chart resize observer example

4 participants