Dash

Dash es un framework para hacer aplicaciones web interactivas para Python. Es una biblioteca construida en top de Flask, Plotly.js y React.js que permite crear aplicaciones web con gráficos interactivos y dashboards en tiempo real. Dash hace fácil crear interfaces de usuario complejas con una gran cantidad de elementos interactivos, incluyendo gráficos, tablas, deslizadores, botones, entre otros.

El siguiente código crea una aplicación y la expone en el puerto 8050 de nuestro localhost

!pip install dash

Looking in indexes: https://pypi.org/simple, https://us-python.pkg.dev/colab-wheels/public/simple/
Collecting dash
  Downloading dash-2.8.1-py3-none-any.whl (9.9 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 9.9/9.9 MB 58.2 MB/s eta 0:00:00
?25hCollecting dash-table==5.0.0
  Downloading dash_table-5.0.0-py3-none-any.whl (3.9 kB)
Requirement already satisfied: Flask>=1.0.4 in /usr/local/lib/python3.8/dist-packages (from dash) (1.1.4)
Collecting dash-html-components==2.0.0
  Downloading dash_html_components-2.0.0-py3-none-any.whl (4.1 kB)
Collecting dash-core-components==2.0.0
  Downloading dash_core_components-2.0.0-py3-none-any.whl (3.8 kB)
Requirement already satisfied: plotly>=5.0.0 in /usr/local/lib/python3.8/dist-packages (from dash) (5.5.0)
Requirement already satisfied: itsdangerous<2.0,>=0.24 in /usr/local/lib/python3.8/dist-packages (from Flask>=1.0.4->dash) (1.1.0)
Requirement already satisfied: Werkzeug<2.0,>=0.15 in /usr/local/lib/python3.8/dist-packages (from Flask>=1.0.4->dash) (1.0.1)
Requirement already satisfied: Jinja2<3.0,>=2.10.1 in /usr/local/lib/python3.8/dist-packages (from Flask>=1.0.4->dash) (2.11.3)
Requirement already satisfied: click<8.0,>=5.1 in /usr/local/lib/python3.8/dist-packages (from Flask>=1.0.4->dash) (7.1.2)
Requirement already satisfied: six in /usr/local/lib/python3.8/dist-packages (from plotly>=5.0.0->dash) (1.15.0)
Requirement already satisfied: tenacity>=6.2.0 in /usr/local/lib/python3.8/dist-packages (from plotly>=5.0.0->dash) (8.1.0)
Requirement already satisfied: MarkupSafe>=0.23 in /usr/local/lib/python3.8/dist-packages (from Jinja2<3.0,>=2.10.1->Flask>=1.0.4->dash) (2.0.1)
Installing collected packages: dash-table, dash-html-components, dash-core-components, dash
Successfully installed dash-2.8.1 dash-core-components-2.0.0 dash-html-components-2.0.0 dash-table-5.0.0

import dash
from dash import html, dcc
import pandas as pd
import plotly.express as px

app = dash.Dash()

df = pd.DataFrame({
    "Fruit": ["Apples", "Bananas", "Cherries"],
    "Amount": [3, 4, 5]
})

fig = px.bar(df, x="Fruit", y="Amount")

app.layout = html.Div(children=[
    html.H1(children="My Simple Dashboard"),
    dcc.Graph(
        id="example-graph",
        figure=fig
    )
])

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

Dash is running on http://127.0.0.1:8050/

INFO:__main__:Dash is running on http://127.0.0.1:8050/

 * Serving Flask app "__main__" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on

Lo interesante de dash es que podemos modificar las propiedades del layout con las funciones callback, de modo que podemos incluir interactividad en nuestro dashboard. Por ejemplo, en esa aplicación el usuario escribe un número y Python lo multiplica por dos, mostrando el resultado también en la aplicación

from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)

app.layout = html.Div([
    html.H6("Change the value in the text box to see callbacks in action!"),
    html.Div([
        "Input: ",
        dcc.Input(id='my-input', value=10, type='number')
    ]),
    html.Br(),
    html.Div(id='my-output'),

])


@app.callback(
    Output(component_id='my-output', component_property='children'),
    Input(component_id='my-input', component_property='value')
)
def update_output_div(input_value):
    return f'Output: {input_value*2}'


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