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