Dash - Deploy app in Naas

Give Feedback | Bug report

Tags: #dashboard #plotly #dash #naas #asset #automation #analytics

Author: Jeremy Ravenel

Last update: 2023-04-12 (Created: 2022-08-01)

Description: This notebook provides a step-by-step guide to deploying an app with Dash on Naas.

Input

Import libraries

In [ ]:

import os
try:
    import dash
except:
    !pip install dash --user
    import dash
try:
    import dash_bootstrap_components as dbc
except:
    !pip install dash_bootstrap_components --user
    import dash_bootstrap_components as dbc
from dash import html, dcc
import plotly.express as px
import plotly.graph_objects as go

Setup Variables

In [ ]:

DASH_PORT = 8050

Model

Initialize Dash app

The os.environ.get("JUPYTERHUB_USER") is used to access the environment variable JUPYTERHUB_USER already stored into your Naas Lab.

In [ ]:

app = dash.Dash(
    requests_pathname_prefix=f'/user/{os.environ.get("JUPYTERHUB_USER")}/proxy/{DASH_PORT}/',
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    meta_tags=[
        {"name": "viewport", "content": "width=device-width, initial-scale=1.0"}
    ],
)

# app = dash.Dash() if you are not in Naas

Get stock prices

In [ ]:

df = px.data.stocks()  # reading stock price dataset
print("Data fetched:", len(df))
df.head(1)

Create chart

In [ ]:

def stock_prices(ticker, label):
    # Function for creating line chart showing Google stock prices over time
    fig = go.Figure(
        [
            go.Scatter(
                x=df["date"],
                y=df[ticker],
                line=dict(color="firebrick", width=4),
                name=label,
            )
        ]
    )
    fig.update_layout(
        title="Prices over time", xaxis_title="Dates", yaxis_title="Prices"
    )
    return fig


fig = stock_prices(ticker="GOOG", label="Google")
fig

Create app layout

In [ ]:

app.layout = html.Div(
    id="parent",
    children=[
        html.H1(
            id="H1",
            children="Deploy a Dash app in Naas",
            style={"textAlign": "center", "marginTop": 40, "marginBottom": 40},
        ),
        dcc.Graph(id="line_plot", figure=fig),
    ],
)

Output

Generate URL and show logs

In [7]:

if __name__ == "__main__":
    app.run_server(proxy=f"http://127.0.0.1:{DASH_PORT}::https://app.naas.ai")

In [ ]: