Initialization animation failure in ECharts

[CrystalWindSnake]

This PR is aimed at solving the issue where ECharts charts' animations are interrupted by resize operations.

Below is a code snippet to reproduce the issue:

option = {
    "xAxis": {
        "type": "category",
        "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    "yAxis": {"type": "value"},
    "series": [{"data": [150, 230, 224, 218, 135, 147, 260], "type": "line"}],
    "animationDuration": 5000,
}

ui.echart(option)

The expected behavior is that when the chart is initially displayed, the line chart should have a fade-in animation from left to right, lasting for 5 seconds.

[falkoschindler]

Thank you for this neat pull request, @CrystalWindSnake!
I never thought about ECharts' animations. It makes sense to wait for them to finish before canceling them with resizing the chart. I just hope nobody is confused because the chart now only starts resizing after a short animation duration. But I guess you usually don't start resizing the window right after loading the page.
Let's merge! 🙂

[falkoschindler]

@CrystalWindSnake Sorry, I merged too early. The PR broke two of our pytests (test_nested_expansion and test_run_method). While trying to fix them, I noticed the following strange behavior:

# Ok, fills horizontal space.
ui.echart({
    "xAxis": {"type": "value"},
    "yAxis": {"type": "value"},
    "series": [{"data": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], "type": "line"}],
})

# Ok, 500px width.
ui.echart({
    "xAxis": {"type": "value"},
    "yAxis": {"type": "value"},
    "series": [{"data": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], "type": "line"}],
}).style('width: 500px')

# Weird, fills horizontal space during animation, then shrinks to 500px.
ui.echart({
    "xAxis": {"type": "value"},
    "yAxis": {"type": "value"},
    "series": [{"data": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], "type": "line"}],
}).classes('w-[500px]')

Somehow Tailwind classes cause a resize after the animation finished, while a normal CSS width is applied immediately. Do you have an idea what is going on and how to fix it?

Meanwhile I reverted the squashed merge commit to keep the main branch clean.

[CrystalWindSnake]

@falkoschindler Apologies for the delayed response; I've been quite busy lately.

I found that Tailwind classes in the mounted hook of a Vue component will not take effect immediately. However, it seems that we can wait for the dom to update by calling await this.$nextTick(); in the mounted hook, and then the classes will take effect.

I will try to modify it and see if it can pass all the tests.

[CrystalWindSnake]

@falkoschindler pr has been merged, should I submit a new pr?

[rodja]

Yes, please create a new PR @CrystalWindSnake. It's often the easiest way to validate and discuss a concept/idea.