Initialization animation failure in ECharts (#3056)

* fix:add finished event * fix tailwind classes problem * code review * fix pytest --------- Co-authored-by: Falko Schindler <[email protected]>
zauberzeug · May 12, 2024 · 614ea49 · 614ea49
1 parent ac68650
commit 614ea49
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/nicegui/elements/echart.js b/nicegui/elements/echart.js
@@ -2,7 +2,9 @@ import { convertDynamicProperties } from "../../static/utils/dynamic_properties.
 
 export default {
   template: "<div></div>",
-  mounted() {
+  async mounted() {
+    await this.$nextTick(); // wait for Tailwind classes to be applied
+
     this.chart = echarts.init(this.$el);
     this.chart.on("click", (e) => this.$emit("pointClick", e));
     for (const event of [
@@ -47,8 +49,16 @@ export default {
     ]) {
       this.chart.on(event, (e) => this.$emit(`chart:${event}`, e));
     }
+
+    // Prevent interruption of chart animations due to resize operations.
+    // It is recommended to register the callbacks for such an event before setOption.
+    const createResizeObserver = () => {
+      new ResizeObserver(this.chart.resize).observe(this.$el);
+      this.chart.off("finished", createResizeObserver);
+    };
+    this.chart.on("finished", createResizeObserver);
+
     this.update_chart();
-    new ResizeObserver(this.chart.resize).observe(this.$el);
   },
   beforeDestroy() {
     this.chart.dispose();

diff --git a/tests/test_echart.py b/tests/test_echart.py
@@ -56,11 +56,13 @@ def test_nested_expansion(screen: Screen):
                 'xAxis': {'type': 'value'},
                 'yAxis': {'type': 'category', 'data': ['A', 'B', 'C']},
                 'series': [{'type': 'line', 'data': [0.1, 0.2, 0.3]}],
+                'animationDuration': 100,
             })
     ui.button('Open', on_click=expansion.open)
 
     screen.open('/')
     screen.click('Open')
+    screen.wait(0.5)
     canvas = screen.find_by_tag('canvas')
     assert canvas.rect['height'] == 168
     assert canvas.rect['width'] == 568