Chart animation

[namnguyen20999]

What type of PR is this? (check all applicable)

• Refactor
• Feature (see Handle Plotly animation #1773).
• Bug Fix
• Optimization
• Documentation Update

Description

from taipy.gui import Gui

# Original data
data = {
    "x": [
        "2024-01-01 00:00:00", "2024-01-01 01:00:00", "2024-01-01 02:00:00",
        "2024-01-01 03:00:00", "2024-01-01 04:00:00", "2024-01-01 05:00:00",
        "2024-01-01 06:00:00", "2024-01-01 07:00:00", "2024-01-01 08:00:00",
        "2024-01-01 09:00:00"
    ],
    "y1": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
}

layout = {
    "title": "Animation of Weather Data",
    "xaxis": {"title": "Altitude (m)"},
    "yaxis": {"title": "Value"},
    "updatemenus": [
        {
            "type": "buttons",
            "showactive": False,
            "buttons": [
                {
                    "method": "animate",
                    "args": [
                        ["to"],
                        {
                            "fromcurrent": True,
                            "mode": "immediate",
                            "frame": {"duration": 500, "redraw": True},
                            "transition": {"duration": 2000, "easing": "linear"}
                        }
                    ],
                    "label": "Play"
                }
            ]
        }
    ],
}

animation_data = {
    "y1": [v + 1 for v in data["y1"]],
}


def change_data_inc(state):
    state.animation_data["y1"] = [value + 1 for value in state.animation_data["y1"]]

def change_data_dec(state):
    state.animation_data["y1"] = [value - 1 for value in state.animation_data["y1"]]


# Define the page layout
page = """
<|{data}|chart|mode=lines+markers|x=x|y=y1|layout={layout}|animation_data={animation_data}|>
<|Increase|button|on_action=change_data_inc|>
<|Decrease|button|on_action=change_data_dec|>
"""

if __name__ == "__main__":
    Gui(page).run(title="Animation on", port=8081, use_reloader=True)

Related Tickets & Documents

• Related Issue #
• Closes #

How to reproduce the issue

Please replace this line with instructions on how to reproduce the issue or test the feature.

Other branches or releases that this needs to be backported

Describe which projects this change will impact and that needs to be backported.

Checklist

We encourage you to keep the code coverage percentage at 80% and above.

• This solution meets the acceptance criteria of the related issue.
• The related issue checklist is completed.
• This PR adds unit tests for the developed code. If not, why?
• End-to-End tests have been added or updated. If not, why?
• The documentation has been updated, or a dedicated issue created. (If applicable)
• The release notes have been updated? (If applicable)