nicegui/website/more_documentation/plotly_documentation.py

import numpy as np

from nicegui import ui

from ..documentation_tools import text_demo


def main_demo() -> None:
    import plotly.graph_objects as go

    fig = go.Figure(go.Scatter(x=[1, 2, 3, 4], y=[1, 2, 3, 2.5]))
    fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))
    ui.plotly(fig).classes('w-full h-40')


def more() -> None:
    @text_demo('Dictionary interface', '''
        This demo shows how to use the declarative dictionary interface to create a plot.
        For plots with many traces and data points, this is more efficient than the object-oriented interface.
        The definition corresponds to the JavaScript Plotly API, see [https://plotly.com/javascript/](https://plotly.com/javascript/).
        Due to different defaults, the resulting plot may look slightly different from the same plot created with the object-oriented interface,
        but the functionality is the same.
    ''')
    def plot_dict_interface():
        fig = {
            "data": [
                {
                    "type": "scatter",
                    "name": "Trace 1",
                    "x": [1, 2, 3, 4],
                    "y": [1, 2, 3, 2.5]
                },
                {
                    "type": "scatter",
                    "name": "Trace 2",
                    "x": [1, 2, 3, 4],
                    "y": np.array([1.4, 1.8, 3.8, 3.2]),
                    "line": {
                        "dash": 'dot',
                        "width": 3
                    }
                }
            ],
            "layout": {
                "margin": {"l": 20, "r": 0, "t": 0, "b": 15},
                "plot_bgcolor": "#E5ECF6",
                "xaxis": {
                    "gridcolor": "white",
                },
                "yaxis": {
                    "gridcolor": "white",
                }
            }
        }
        ui.plotly(fig).classes('w-full h-40')

    @text_demo('Plot updates', '''
        This demo shows how to update the plot in real time.
        Click the button to add a new trace to the plot.
        To send the new plot to the browser, make sure to explicitly call `plot.update()` or `ui.update(plot)`.
    ''')
    def plot_updates():
        import numpy as np
        import plotly.graph_objects as go

        fig = go.Figure()
        fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))
        plot = ui.plotly(fig).classes('w-full h-40')

        def add_trace():
            fig.add_trace(go.Scatter(x=np.arange(10), y=np.random.randn(10)))
            plot.update()

        ui.button('Add trace', on_click=add_trace)