fix:Responsive support for echart #273
Conversation
There was a problem hiding this comment.
Hi,
thanks a lot for opening this PR!
I think it's okay that it does not have an explicit example.
I wonder if responsive should be the default, and why someone would want to disable it (@mariobuikhuizen what do you think).
There are a lot of unrelated changes to this PR, which I would like you to revert. I don't agree with the other changes and those may drag this PR on for a long time. I suggest you revert them and open new issues, or a PR for the other plans you have with this component. This way we can get this PR merged soon, and not get distracted by the other changes.
What do you think?
Regards,
Maarten
| @@ -10,7 +10,8 @@ class EchartsWidget(ipyvuetify.VuetifyTemplate): | |||
| template_file = (__file__, "echarts.vue") | |||
|
|
|||
| attributes = traitlets.Dict(default_value=None, allow_none=True).tag(sync=True) | |||
|
|
|||
| parent_attributes = traitlets.Dict(default_value=None, allow_none=True).tag(sync=True) | |||
There was a problem hiding this comment.
| parent_attributes = traitlets.Dict(default_value=None, allow_none=True).tag(sync=True) |
| attributes={"style": "width:100%;height:100%;min-height:400px"}, | ||
| parent_attributes={"style": "width: 100%; height: 100%; overflow: hidden;"}, |
There was a problem hiding this comment.
| attributes={"style": "width:100%;height:100%;min-height:400px"}, | |
| parent_attributes={"style": "width: 100%; height: 100%; overflow: hidden;"}, | |
| attributes={"style": "height: 400px"}, |
| @@ -60,6 +63,8 @@ def FigureEcharts( | |||
| * on_mouseout: Callable, a function that will be called when the user moves the mouse out of a certain component. | |||
| * maps: dict, a dictionary of maps to be used in the figure. | |||
| * attributes: dict, a dictionary of attributes to be passed to the container (like style, class). | |||
| * parent_attributes: dict, a dictionary of attributes to be passed to the parent container (like style, class). | |||
There was a problem hiding this comment.
| * parent_attributes: dict, a dictionary of attributes to be passed to the parent container (like style, class). |
| @@ -60,6 +63,8 @@ def FigureEcharts( | |||
| * on_mouseout: Callable, a function that will be called when the user moves the mouse out of a certain component. | |||
| * maps: dict, a dictionary of maps to be used in the figure. | |||
| * attributes: dict, a dictionary of attributes to be passed to the container (like style, class). | |||
| * parent_attributes: dict, a dictionary of attributes to be passed to the parent container (like style, class). | |||
| * responsive: bool, whether the figure should be responsive or not. | |||
There was a problem hiding this comment.
| * responsive: bool, whether the figure should be responsive or not. | |
| * responsive: bool, whether the chart should resize when the container changes size. |
| @@ -72,4 +77,6 @@ def FigureEcharts( | |||
| on_mouseout=on_mouseout, | |||
| on_mouseout_enabled=on_mouseout is not None, | |||
| attributes=attributes, | |||
| parent_attributes=parent_attributes, | |||
There was a problem hiding this comment.
| parent_attributes=parent_attributes, |
| @@ -1,5 +1,5 @@ | |||
| <template> | |||
| <div> | |||
| <div class="solara-box" v-bind="parent_attributes"> | |||
There was a problem hiding this comment.
| <div class="solara-box" v-bind="parent_attributes"> | |
| <div> |
| console.log("responsive:"+str(this.responsive)); | ||
| if(this.responsive){ | ||
| this.resizeObserver = new ResizeObserver(entries => { | ||
| for (let entry of entries) { | ||
| if (entry.target === this.$refs.echarts) { | ||
| this.handleResize(); | ||
| } | ||
| } | ||
| }); | ||
| this.resizeObserver.observe(this.$refs.echarts); | ||
| }; | ||
| }, | ||
| beforeDestroy() { | ||
| if (this.resizeObserver) { | ||
| this.resizeObserver.unobserve(this.$refs.echarts); | ||
| this.resizeObserver.disconnect(); | ||
| } | ||
| }, |
There was a problem hiding this comment.
Please remove the log and format/indent the code similar to the rest of the document style.
| handleResize() { | ||
| if (this.chart) { | ||
| this.chart.resize(); | ||
| } | ||
| }, |
There was a problem hiding this comment.
| handleResize() { | |
| if (this.chart) { | |
| this.chart.resize(); | |
| } | |
| }, | |
| handleResize() { | |
| if (this.chart) { | |
| this.chart.resize(); | |
| } | |
| }, |
I think handleContainerResize is a better name, what do you think? Could you please indent the code?
|
|
||
| } | ||
| .solara-box { | ||
|
|
There was a problem hiding this comment.
| } | |
| .solara-box { |
maartenbreddels
force-pushed
the
master
branch
4 times, most recently
from
2446983
to
0d6161d
Compare
iisakkirotko
force-pushed
the
master
branch
2 times, most recently
from
c2951b9
to
8816e36
Compare
maartenbreddels
force-pushed
the
master
branch
2 times, most recently
from
240a079
to
b098da1
Compare
Responsive support in solara/component/echarts.py and solara/component/echarts.vue
GIF of the actual resiseable grid layout in action can be found in following issue.
#268