Fix plotly resize after loading.

nicegui/elements/plotly.py

@@ -41,7 +41,9 @@ class Plotly(Element):
         self.update()
 
     def update(self) -> None:
-        self._props['options'] = self._get_figure_json()
+        options = self._get_figure_json()
+        options['config'] = {**options['config'], **{'responsive': True}} if 'config' in options else {'responsive': True}
+        self._props['options'] = options
         self.run_method('update', self._props['options'])
 
     def _get_figure_json(self) -> Dict:

nicegui/elements/plotly.vue

@@ -3,57 +3,18 @@
 </template>
 
 <script>
-import Plotly from 'plotly';
-
 export default {
-  mounted() {
-    // initial rendering of chart
+  async mounted() {
+    await this.$nextTick()
     Plotly.newPlot(this.$el.id, this.options.data, this.options.layout, this.options.config);
-
-    // register resize observer on parent div to auto-resize Plotly chart
-    const doResize = () => {
-      // only call resize if actually visible, otherwise error in Plotly.js internals
-      if (this.isHidden(this.$el)) return;
-      Plotly.Plots.resize(this.$el);
-    };
-
-    // throttle Plotly resize calls for better performance
-    // using HTML5 ResizeObserver on parent div
-    this.resizeObserver = new ResizeObserver((entries) => {
-      if (this.timeoutHandle) {
-        clearTimeout(this.timeoutHandle);
-      }
-      this.timeoutHandle = setTimeout(doResize, this.throttleResizeMs);
-    });
-    this.resizeObserver.observe(this.$el);
-  },
-  unmounted() {
-    this.resizeObserver.disconnect();
-    clearTimeout(this.timeoutHandle);
   },
 
   methods: {
-    isHidden(gd) {
-      // matches plotly's implementation, as it needs to in order
-      // to only resize the plot when plotly is rendering it.
-      // https://github.com/plotly/plotly.js/blob/e1d94b7afad94152db004b3bd5e6060010fbcc28/src/lib/index.js#L1278
-      var display = window.getComputedStyle(gd).display;
-      return !display || display === "none";
-    },
-
     update(options) {
       Plotly.newPlot(this.$el.id, options.data, options.layout, options.config);
     },
   },
 
-  data: function () {
-    return {
-      resizeObserver: undefined,
-      timeoutHandle: undefined,
-      throttleResizeMs: 100, // resize at most every 100 ms
-    };
-  },
-
   props: {
     options: Object,
   },