Introducción a Dash en Python

Dash es un marco de Python para crear aplicaciones web analíticas. Dash ayuda a crear paneles web receptivos que son agradables a la vista y son muy rápidos sin la necesidad de comprender marcos o lenguajes front-end complejos como HTML, CSS, JavaScript. Construyamos nuestro primer tablero web usando Dash.

Instalación e Importaciones

Instala la última versión de Dash

pip install dash

Tablero básico

En esta sección, crearemos una aplicación que muestre un gráfico estático (pero receptivo) en la página web usando el guión.

Paso 1: Importación de todas las bibliotecas requeridas
Ahora importemos Dash, Dash Core Components (que tiene componentes como gráficos, entradas, etc.) y Dash HTML Components (que tiene componentes HTML como metaetiquetas, etiquetas de cuerpo, etiquetas de párrafo, etc.)

# importing required libraries
import dash
import dash_core_components as dcc    
import dash_html_components as html

Paso 2: diseñar un diseño
Los componentes HTML son como HTML. Aquí html.H1 se refiere a la etiqueta h1 en HTML.
Luego, hacemos un gráfico que tiene varios parámetros como id (una identificación única para un gráfico en particular), figura (el gráfico en sí), diseño (el diseño básico, título del gráfico, eje X, datos del eje Y, etc.) .

• El parámetro figura es esencialmente un diccionario que tiene elementos como x, y, tipo, nombre .
• x se refiere al valor del eje X (puede ser una lista o un solo elemento), y es lo mismo excepto que está asociado con el eje Y.
• El parámetro de tipo se refiere al tipo de gráfico, puede ser línea , barra .
• El parámetro de nombre se refiere al nombre asociado con el eje de un gráfico.

app = dash.Dash()
  
app.layout = html.Div(children =[
    html.H1("Dash Tutorial"),
    dcc.Graph(
        id ="example",
        figure ={
            'data':[
                       {'x':[1, 2, 3, 4, 5],
                        'y':[5, 4, 7, 4, 8],
                        'type':'line', 
                        'name':'Trucks'},
                       {'x':[1, 2, 3, 4, 5], 
                        'y':[6, 3, 5, 3, 7], 
                        'type':'bar',
                        'name':'Ships'}
                   ],
            'layout':{
                'title':'Basic Dashboard'
            }
        }
    )
])

Paso 3: Ejecutar el servidor
El tablero ahora está listo, pero necesita un servidor para ejecutarse. Por lo tanto, configuramos el servidor usando el siguiente código.

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

Abra la aplicación en el navegador web en localhost y el puerto predeterminado 8050.

http://127.0.0.1:8050/

Producción:

Captura de pantalla de la aplicación Basic Dash.

Uso de devoluciones de llamada

Lo anterior nos enseña una aplicación estática básica. Pero, ¿qué pasa si quieres dejar que el usuario tome el control? Es por eso que vamos a utilizar las devoluciones de llamada de la aplicación proporcionadas en Dash. En esta sección, vamos a crear una aplicación web que tome el número del usuario y devuelva el cuadrado del número.

Paso 1: Importación de todas las bibliotecas requeridas
Al igual que arriba, vamos a importar todas las bibliotecas requeridas. Aquí necesitamos dash.dependencies.Input y dash.dependencies.Output adicionales para proporcionarnos la funcionalidad de devolución de llamada de entrada y salida.

# importing required libraries
import dash
import dash_core_components as dcc    
import dash_html_components as html
from dash.dependencies import Input, Output 

Paso 2: diseñar un diseño

Vamos a diseñar un cuadro de texto simple que ayudará a tomar entradas y una etiqueta de texto que generará el cuadrado del número que se ingresa o devolverá un error si la entrada no es un número.

app = dash.Dash()
  
app.layout = html.Div(children =[
    dcc.Input(id ='input', 
              value ='Enter a number', 
              type ='text'),
      
    html.Div(id ='output')
])

Paso 3: Devoluciones de llamadas

Una devolución de llamada es como un disparador que realiza una determinada función en el cambio del estado de la entrada. En este caso, ejecuta el método update_value y toma input_data como parámetro y devuelve el cuadrado de ese número. Si la entrada no es un número, devuelve una declaración de error.

@app.callback(
    Output(component_id ='output', component_property ='children'),
    [Input(component_id ='input', component_property ='value')]
)
  
def update_value(input_data):
    try:
        return str(float(input_data)**2)
    except:
        return "Error, the input is not a number"

Paso 3: Ejecutar el servidor
Nuevamente, al igual que arriba, vamos a ejecutar el servidor.

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

Abra la aplicación en el navegador web en el host local y el puerto predeterminado 8050.

http://127.0.0.1:8050/

Producción:

Cuadrado de cinco usando devoluciones de llamada de Python Dash.

notas al pie

Los dos ejemplos anteriores deben ser útiles para comprender el funcionamiento del marco Dash. Aunque los dos ejemplos escritos anteriormente pueden no ser útiles en sí mismos, ayudan a comprender los conceptos de creación de aplicaciones web con el marco Dash y eso lo ayudará a crear una aplicación web útil en el futuro utilizando datos reales.