Plotly chart in reactpy app

[fsmosca]

I have this approach to create a plotly chart based from csv file input. Creates figure based from dataframe. Convert figure to html using plotly and finally generates vdom using reactpy.

Is this a fine approach? What are the other methods?

This is for bar chart.

"""Renders plotly chart in ReactPy"""


from io import StringIO
from reactpy import component, html, utils
from reactpy.backend.fastapi import configure, Options
from fastapi import FastAPI
import plotly.express as px
import pandas as pd


DATA_FILENAME = 'expenses.csv'

PAGE_TITLE = 'ReactPy-PlotlyChart'

PLOTLY_JS = {
    'src': 'https://cdn.plot.ly/plotly-latest.min.js',
    'charset': 'utf-8'
}


@component
def BarChart():
    """Creates a plotly bar chart."""
    # Read csv file and convert to dataframe.
    df = pd.read_csv(DATA_FILENAME)

    # Group similar category and sum it.
    df_grp = df.groupby(['Category'])['Amount'].sum().reset_index()

    # Create a figure using the grouped dataframe.
    fig = px.bar(
        df_grp, x='Amount', y='Category', orientation='h',
        width=600, height=400, text_auto=True, title='Bar Chart'
    )

    # Create an html object in memory from fig.
    buffer = StringIO()
    fig.write_html(buffer, include_plotlyjs='cdn')
    fig_html = buffer.getvalue()

    return html.div(
        html.h2('Plotly Chart in ReactPy'),
        utils.html_to_vdom(fig_html)
    )


app = FastAPI()
configure(
    app,
    BarChart,
    Options(
        head=html.head(
            html.script(PLOTLY_JS),
            html.title(PAGE_TITLE)
        )
    )
)

You may download the expenses.csv file from my google drive.

Output

I have created plotly charts article about this.

[pharouhk]

Hi @fsmosca thanks for this. I wanted to know if plotly_js must be added to the head

[fsmosca]

Yeah it is in the head.

app = FastAPI()
configure(
    app,
    BarChart,
    Options(
        head=html.head(
            html.script(PLOTLY_JS),  # <======
            html.title(PAGE_TITLE)
        )
    )
)