Make EUIXYChart responsive using ResizeObserver#1041
Conversation
| width: 0, | ||
| }; | ||
| this.containerRef = React.createRef(); | ||
| this.ro = new ResizeObserver(this.createResizeObserver); |
There was a problem hiding this comment.
I would rather call this onResize since it's not really a factory that you call that would create anything.
cchaos
left a comment
cchaos
left a comment
There was a problem hiding this comment.
This seems to be working a lot better, ty! Just a couple quick notes mostly about the doc example.
| **Bug Fixes** | ||
|
|
||
| - To make it more accessible, added a random id to `EuiSwitch`'s id prop if none is passed. ([#779](https://github.com/elastic/eui/pull/779)) | ||
| - Fixed `EuiXYChart` wrong responsive resize in a flexbox layout ([#1041](https://github.com/elastic/eui/pull/1041)) |
| }, | ||
| ], | ||
| demo: ( | ||
| <div style={{ margin: 60 }}> |
There was a problem hiding this comment.
Don't need the extra margin here. Let it fill the width of the example area.
| text: ( | ||
| <div> | ||
| <p> | ||
| You can omit <EuiCode>width</EuiCode> ando/or <EuiCode>height</EuiCode> |
| You can omit <EuiCode>width</EuiCode> ando/or <EuiCode>height</EuiCode> | ||
| prop and the chart takes the full width and/or height of it's parent. | ||
| </p> | ||
| <p>The parent container needs to have computed a height and or width.</p> |
There was a problem hiding this comment.
add "/" after "and" to be "and/or"
chandlerprall
left a comment
chandlerprall
left a comment
There was a problem hiding this comment.
nice solution, LGTM!
|
@markov00 I think this is safe to merge. I have been playing around with it in the prototype and it's been working much nicer. |
|
@markov00 Can you rebase and merge this when you have time. It's holding up @cjcenizal's rename PR #1050 which would be nice to get in. |
This drops the use of native react-vis makeVisFlexible in favour of ResizeObserver to support resizing of the chart container as in kibana dashboard.
5 participants
This drops the use of native
react-vismakeVisFlexibleHOC in favour of the ResizeObserver to support resizing of the chart container as in kibana dashboard.It also fix some resizing problem in flexbox discrovered on the new editor POC by @cchaos.