fix: Responsive support for echart (#273)

Author: Sanuki-073

solara/components/echarts.py

@@ -10,7 +10,7 @@ class EchartsWidget(ipyvuetify.VuetifyTemplate):
     template_file = (__file__, "echarts.vue")
 
     attributes = traitlets.Dict(default_value=None, allow_none=True).tag(sync=True)
-
+    responsive = traitlets.Bool(False).tag(sync=True)
     maps = traitlets.Any({}).tag(sync=True)
     option = traitlets.Any({}).tag(sync=True)
     on_click = traitlets.Callable(None, allow_none=True)
@@ -49,7 +49,8 @@ def FigureEcharts(
     on_mouseover: Callable[[Any], Any] = None,
     on_mouseout: Callable[[Any], Any] = None,
     maps: dict = {},
-    attributes={"style": "height: 400px"},
+    attributes={"style": "height: 400px;"},
+    responsive: bool = False,
 ):
     """Create a Echarts figure.
 
@@ -68,6 +69,7 @@ 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).
+    * responsive: bool, whether the chart should resize when the container changes size.
 
 
     """
@@ -80,4 +82,5 @@ def FigureEcharts(
         on_mouseout=on_mouseout,
         on_mouseout_enabled=on_mouseout is not None,
         attributes=attributes,
+        responsive=responsive,
     )

solara/components/echarts.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <div ref="echarts" class="solara-echarts" v-bind="attributes"></div>
-  </div>
+  <div ref="echarts" class="solara-echarts" v-bind="attributes"></div>
 </template>
 <script>
 module.exports = {
@@ -14,6 +12,22 @@ module.exports = {
       this.echarts = echarts;
       this.create();
     })();
+    if(this.responsive){
+      this.resizeObserver = new ResizeObserver(entries => {
+        for (let entry of entries) {
+          if (entry.target === this.$refs.echarts) {
+            this.handleContainerResize();
+          }
+        }
+      });
+      this.resizeObserver.observe(this.$refs.echarts);
+    };
+  },
+  beforeDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.unobserve(this.$refs.echarts);
+      this.resizeObserver.disconnect();
+    }
   },
   watch: {
     option() {
@@ -66,6 +80,11 @@ module.exports = {
         if (this.on_mouseout_enabled) this.on_mouseout(eventData);
       });
     },
+    handleContainerResize() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    },
     import(deps) {
       return this.loadRequire().then(() => {
         if (window.jupyterVue) {

solara/website/pages/documentation/components/viz/echarts.py

@@ -63,7 +63,9 @@ def Page():
             with solara.ToggleButtonsSingle("bars", on_value=set_option):
                 solara.Button("bars")
                 solara.Button("pie")
-            solara.FigureEcharts(option=options[option], on_click=set_click_data, on_mouseover=set_mouseover_data, on_mouseout=set_mouseout_data)
+            solara.FigureEcharts(
+                option=options[option], on_click=set_click_data, on_mouseover=set_mouseover_data, on_mouseout=set_mouseout_data, responsive=True
+            )
         with solara.Card("Event data"):
             solara.Markdown(f"**Click data**: {click_data}")
             solara.Markdown(f"**Mouseover data**: {mouseover_data}")