Dash Extensions Question

Dash Python
1

Hi @Emil ,

I’m enjoing some of your interesting work. :grinning:

Lottie is very interesting and have a lot of nice options to use in the page.

Burger seams to be a nice way to add Menues, Is it possible to have a short example in Dash? :thinking:
Just to understand how to use it.

Another question: when you described the time consumption using dcc.Store you mentioned that it spends time converting the data to and from json, in your server side caching solutions it is also a requirement to do that or exist a way that do not need that conversion?

Thanks again for your time.

Eduardo

2

Thanks! Here is a small example using the Burger menu,

However, I agree that it would be good with a few more. Also, there are some options in the underlying React component that haven’t been exposed. So this component still needs some work.

When you use the server side caching solution, you don’t need to do the conversion to JSON. Hence you can return e.g. a data frame directly as in this example,

3

Hey @Emil

Thank you very much for your help. :grinning:

4

Hey @Emil

I run this code to check the use of the ServersideOutput without json data:

import pandas as pd
from datetime import datetime as dt
from datetime import timedelta

from pandas_datareader import data as web

import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go
from dash_extensions.enrich import Dash, Output, Input, Trigger, ServersideOutput

app = Dash()
app.layout = html.Div([
    dcc.Input(id="last_ticker", value="AAPL"),
    dcc.Loading(dcc.Store(id='historic_prices'), fullscreen=True, type="dot"),
    dcc.Graph(id='my_graph')
])


@app.callback(ServersideOutput('historic_prices', 'data'),
              [Input('last_ticker', 'value')])
def update_store(ticker):
    start_date = (dt.now() - timedelta(days = 650)).strftime("%Y/%m/%d")
    pricesdf = web.DataReader(ticker.strip(), data_source='yahoo', start=start_date, end=dt.now())
   
    
    return pricesdf

@app.callback(Output('my_graph', 'figure'),
              [Input('historic_prices', 'data')])
def update_graph(historic_prices):

    figura = {"data": [go.Scatter(x=historic_prices.index, y=historic_prices.Close, line={"color": "#97151c"})],
           "layout": go.Layout(autosize=True, height=305, font={"family": "Raleway", "size": 12},
                     margin={"r": 60, "t": 25, "b": 0, "l": 40}, titlefont={"family": "Raleway", "size": 10})}             

    
    return figura



if __name__ == '__main__':
    app.run_server(debug=True)

And it works as expected:

image
image791×214 4.16 KB

But when I use the same info in my app, I receive the following error:

image1

I am using:

from dash_extensions.enrich import Dash, Output, Input, Trigger, ServersideOutput, State

I can’t figure out why it has this error if it works ok in the test? :thinking:

And if I convert the DataFrame into json file it works without any Error.

Thanks again :woozy_face:

5

Not sure why the example doesn’t have it but when you define the app, you should include ServersideOutputTransform() in it.

This is from the readme of their Github page.

from enrich import DashProxy, MultiplexerTransform, ServersideOutputTransform, NoOutputTransform

app = DashProxy(transforms=[
    MultiplexerTransform(),  # makes it possible to target an output multiple times in callbacks
    ServersideOutputTransform(),  # enable use of ServersideOutput objects
    NoOutputTransform(),  # enable callbacks without output
])