dash docs and example

doc/_toc.yml

@@ -28,8 +28,9 @@ parts:
       - file: apps/panel
       - file: apps/chainlit
       - file: apps/gradio
-      - file: apps/docker
       - file: apps/shiny-express
+      - file: apps/dash
+      - file: apps/docker
       - file: apps/chalk-it      
 
   - caption: App examples

doc/apps/dash.md

@@ -0,0 +1,43 @@
+# Dash
+
+To deploy a [Dash](https://dash.plotly.com/) application to Ploomber Cloud you need:
+
+- A `Dockerfile`
+- A Dash project
+
+## `Dockerfile`
+
+Use this [template](https://github.com/ploomber/doc/blob/main/examples/dash/simple-app/Dockerfile) `Dockerfile`:
+
+```Dockerfile
+FROM python:3.11
+
+COPY app.py app.py
+COPY requirements.txt requirements.txt
+RUN pip install -r requirements.txt
+
+ENTRYPOINT ["gunicorn", "app:server", "run", "--bind", "0.0.0.0:80"]
+```
+
+## Testing locally
+
+To test your app, you can use `docker` locally:
+
+```sh
+# build the docker image
+docker build . -t dash-app
+
+# run it
+docker run -p 5000:80 dash-app
+```
+
+Now, open [http://0.0.0.0:5000/](http://0.0.0.0:5000/) to see your app.
+
+
+## Deploy
+
+Once you have all your files, create a zip file.
+
+To deploy a Dash app from the deployment menu, select the Docker option and follow the instructions:
+
+![](../static/docker.png)

examples/dash/simple-app/Dockerfile

@@ -0,0 +1,7 @@
+FROM python:3.11
+
+COPY app.py app.py
+COPY requirements.txt requirements.txt
+RUN pip install -r requirements.txt
+
+ENTRYPOINT ["gunicorn", "app:server", "run", "--bind", "0.0.0.0:80"]

examples/dash/simple-app/app.py

@@ -0,0 +1,27 @@
+"""
+Taken from Dash's documentation: https://dash.plotly.com/minimal-app
+"""
+from dash import Dash, html, dcc, callback, Output, Input
+import plotly.express as px
+import pandas as pd
+
+df = pd.read_csv(
+    "https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv"
+)
+
+app = Dash(__name__)
+server = app.server
+
+app.layout = html.Div(
+    [
+        html.H1(children="Population by country", style={"textAlign": "center"}),
+        dcc.Dropdown(df.country.unique(), "Canada", id="dropdown-selection"),
+        dcc.Graph(id="graph-content"),
+    ]
+)
+
+
+@callback(Output("graph-content", "figure"), Input("dropdown-selection", "value"))
+def update_graph(value):
+    dff = df[df.country == value]
+    return px.line(dff, x="year", y="pop")

examples/dash/simple-app/requirements.txt

@@ -0,0 +1,4 @@
+dash
+plotly
+pandas
+gunicorn