Cadre Dash

Dans ce chapitre, nous aborderons en détail le framework Dash.

Dash est un framework Python open source utilisé pour créer des applications Web analytiques. C'est une bibliothèque puissante qui simplifie le développement d'applications basées sur les données. C'est particulièrement utile pour les scientifiques de données Python qui ne sont pas très familiarisés avec le développement Web. Les utilisateurs peuvent créer des tableaux de bord incroyables dans leur navigateur à l'aide du tableau de bord.

Construit au-dessus de Plotly.js, React et Flask, Dash associe des éléments d'interface utilisateur modernes tels que des listes déroulantes, des curseurs et des graphiques directement à votre code Python analytique.

Les applications Dash se composent d'un serveur Flask qui communique avec les composants React frontaux à l'aide de paquets JSON via des requêtes HTTP.

Les applications Dash sont écrites uniquement en python, donc AUCUN HTML ou JavaScript n'est nécessaire.

Configuration du tableau de bord

Si Dash n'est pas déjà installé sur votre terminal, installez les bibliothèques Dash mentionnées ci-dessous. Comme ces bibliothèques sont en cours de développement actif, installez et mettez à niveau fréquemment. Python 2 et 3 sont également pris en charge.

  • pip install dash == 0.23.1 # Le backend principal du tableau de bord
  • pip install dash-renderer == 0.13.0 # Le front-end du tableau de bord
  • pip install dash-html-components == 0.11.0 # composants HTML
  • pip install dash-core-components == 0.26.0 # Composants suralimentés
  • pip install plotly == 3.1.0 # Bibliothèque graphique de tracé

Afin de nous assurer que tout fonctionne correctement, ici, nous avons créé un simple fichier dashApp.py.

Mise en page du tableau de bord ou de l'application

Les applications Dash sont composées de deux parties. La première partie est la «mise en page» de l'application qui décrit essentiellement à quoi ressemble l'application. La deuxième partie décrit l'interactivité de l'application.

Composants principaux

Nous pouvons créer la mise en page avec le dash_html_components et le dash_core_componentsbibliothèque. Dash fournit des classes python pour tous les composants visuels de l'application. Nous pouvons également personnaliser nos propres composants avec JavaScript et React.js.

importer dash_core_components en tant que dcc

importer dash_html_components au format HTML

Le dash_html_components est pour toutes les balises HTML où le dash_core_components est pour l'interactivité construite avec React.js.

En utilisant les deux bibliothèques ci-dessus, écrivons un code comme indiqué ci-dessous -

app = dash.Dash()
app.layout = html.Div(children=[
   html.H1(children='Hello Dash'),
   html.Div(children='''Dash Framework: A web application framework for Python.''')

Et le code HTML équivalent ressemblerait à ceci -

<div>
   <h1> Hello Dash </h1>
   <div> Dash Framework: A web application framework for Python. </div>
</div>

Ecrire l'application Simple Dash

Nous allons apprendre à écrire un exemple simple sur le tableau de bord en utilisant la bibliothèque mentionnée ci-dessus dans un fichier dashApp.py.

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div(children=[
   html.H1(children='Hello Dash'),
   html.Div(children='''Dash Framework: A web application framework for Python.'''),
	
   dcc.Graph(
      id='example-graph',
      figure={
         'data': [
            {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'Delhi'},
            {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Mumbai'},
         ],
         'layout': {
            'title': 'Dash Data Visualization'
         }
      }
   )
])

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

Lancer l'application Dash

Notez les points suivants lors de l'exécution de l'application Dash.

(MyDjangoEnv) C: \ Users \ rajesh \ Desktop \ MyDjango \ dash> python dashApp1.py

  • Application Flask "dashApp1" (chargement différé)

  • Environnement: production

    AVERTISSEMENT: n'utilisez pas le serveur de développement dans un environnement de production.

    Utilisez plutôt un serveur WSGI de production.

  • Mode de débogage: activé

  • Redémarrer avec stat

  • Le débogueur est actif!

  • Code PIN du débogueur: 130-303-947

  • Courir sur http://127.0.0.1:8050/ (Appuyez sur CTRL + C pour quitter)

127.0.0.1 - - [12/Aug/2018 09:32:39] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2018 09:32:42] "GET /_dash-layout HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2018 09:32:42] "GET /_dash-dependencies HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2018 09:32:42] "GET /favicon.ico HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2018 09:39:52] "GET /favicon.ico HTTP/1.1" 200 -

Visite http:127.0.0.1:8050/dans votre navigateur Web. Vous devriez voir une application qui ressemble à ceci.

Dans le programme ci-dessus, quelques points importants à noter sont les suivants -

  • La mise en page de l'application est composée d'un arbre de «composants» comme html.Div et dcc.Graph.

  • La bibliothèque dash_html_components a un composant pour chaque balise HTML. Le composant html.H1 (children = 'Hello Dash') génère un élément HTML <h1> Hello Dash </h1> dans votre application.

  • Tous les composants ne sont pas du HTML pur. Les dash_core_components décrivent des composants de niveau supérieur qui sont interactifs et générés avec JavaScript, HTML et CSS via la bibliothèque React.js.

  • Chaque composant est entièrement décrit par des attributs de mots-clés. Dash est déclaratif: vous décrirez principalement votre application à travers ces attributs.

  • La propriété des enfants est spéciale. Par convention, c'est toujours le premier attribut, ce qui signifie que vous pouvez l'omettre.

  • Html.H1 (children = 'Hello Dash') est identique à html.H1 ('Hello Dash').

  • Les polices de votre application seront un peu différentes de celles affichées ici. Cette application utilise une feuille de style CSS personnalisée pour modifier les styles par défaut des éléments. Le style de police personnalisé est autorisé, mais à partir de maintenant, nous pouvons ajouter l'URL ci-dessous ou n'importe quelle URL de votre choix -

    app.css.append_css ({"external_url":https://codepen.io/chriddyp/pen/bwLwgP.css}) pour que votre fichier ait la même apparence que ces exemples.

En savoir plus sur HTML

La bibliothèque dash_html_components contient une classe de composant pour chaque balise HTML ainsi que des arguments de mot-clé pour tous les arguments HTML.

Ajoutons le style en ligne des composants dans notre texte d'application précédent -

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
colors = {
   'background': '#87D653',
   'text': '#ff0033'
}

app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
   html.H1(
      children='Hello Dash',
      style={
         'textAlign': 'center',
         'color': colors['text']
      }
   ),
	
   html.Div(children='Dash: A web application framework for Python.', style={
      'textAlign': 'center',
      'color': colors['text']
   }),
	
   dcc.Graph(
      id='example-graph-2',

      figure={
         'data': [
            {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'Delhi'},
            {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Mumbai'},
         ],
         'layout': {
            'plot_bgcolor': colors['background'],
            'paper_bgcolor': colors['background'],
            'font': {
               'color': colors['text']
            }
         }
      }
   )
])

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

Dans l'exemple ci-dessus, nous avons modifié les styles en ligne des composants html.Div et html.H1 avec la propriété style.

Il est rendu dans l'application Dash comme suit -

Il existe quelques distinctions clés entre dash_html_components et les attributs HTML -

  • Pour la propriété de style dans Dash, vous pouvez simplement fournir un dictionnaire, alors qu'en HTML, il s'agit d'une chaîne séparée par des points-virgules.

  • Les clés du dictionnaire de style sont camelCased, donc l'alignement du texte devient textalign.

  • ClassName dans Dash est similaire à l'attribut de classe HTML.

  • Le premier argument est les enfants de la balise HTML qui est spécifiée via l'argument mot-clé children.

Composants réutilisables

En écrivant notre balisage en Python, nous pouvons créer des composants réutilisables complexes comme des tables sans changer de contexte ou de langage -

Vous trouverez ci-dessous un exemple rapide qui génère une «table» à partir du dataframe pandas.

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

df = pd.read_csv(
   'https://gist.githubusercontent.com/chriddyp/'
   'c78bf172206ce24f77d6363a2d754b59/raw/'
   'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
   'usa-agricultural-exports-2011.csv')
	
def generate_table(dataframe, max_rows=10):
   return html.Table(
      # Header
      [html.Tr([html.Th(col) for col in dataframe.columns])] +
      # Body
      [html.Tr([
         html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
      ]) for i in range(min(len(dataframe), max_rows))]
   )
	
app = dash.Dash()
app.layout = html.Div(children=[
   html.H4(children='US Agriculture Exports (2011)'),
   generate_table(df)
])

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

Notre sortie sera quelque chose comme -

En savoir plus sur la visualisation

La bibliothèque dash_core_components comprend un composant appelé Graph.

Graph rend des visualisations de données interactives à l'aide de la bibliothèque graphique JavaScript open source plotly.js. Plotly.js prend en charge environ 35 types de graphiques et rend les graphiques à la fois en SVG de qualité vectorielle et en WebGL haute performance.

Voici un exemple qui crée un nuage de points à partir d'une trame de données Pandas -

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go

app = dash.Dash()

df = pd.read_csv(
   'https://gist.githubusercontent.com/chriddyp/' +
   '5d1ea79569ed194d432e56108a04d188/raw/' +
   'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+
   'gdp-life-exp-2007.csv')
	
app.layout = html.Div([
   dcc.Graph(
      id='life-exp-vs-gdp',
      figure={
         'data': [
            go.Scatter(
               x=df[df['continent'] == i]['gdp per capita'],
               y=df[df['continent'] == i]['life expectancy'],
               text=df[df['continent'] == i]['country'],
               mode='markers',
               opacity=0.7,
               marker={
                  'size': 15,
                  'line': {'width': 0.5, 'color': 'white'}
               },
               name=i
            ) for i in df.continent.unique()
         ],
         'layout': go.Layout(
            xaxis={'type': 'log', 'title': 'GDP Per Capita'},
            yaxis={'title': 'Life Expectancy'},
            margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
            legend={'x': 0, 'y': 1},
            hovermode='closest'
         )
      }
   )
])

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

La sortie du code ci-dessus est la suivante -

Ces graphiques sont interactifs et réactifs. Vous pouvez survoler les points pour voir leurs valeurs, cliquer sur les éléments de légende pour faire basculer les traces, cliquer et faire glisser pour zoomer, maintenir la touche Maj enfoncée et cliquer et faire glisser pour faire un panoramique.

Réduction

Alors que dash expose les saveurs HTML via la bibliothèque dash_html_components, il peut être fastidieux d'écrire votre copie en HTML. Pour écrire des blocs de textes, vous pouvez utiliser le composant Markdown dans la bibliothèque dash_core_components.

Composants principaux

Le dash_core_components comprend un ensemble de composants de plus haut niveau tels que des listes déroulantes, des graphiques, des démarques, des blocs et bien d'autres.

Comme tous les autres composants Dash, ils sont décrits de manière entièrement déclarative. Chaque option configurable est disponible en tant qu'argument mot-clé du composant.

Voici l'exemple, en utilisant certains des composants disponibles -

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
   html.Label('Dropdown'),
   dcc.Dropdown(
      options=[
         {'label': 'New York City', 'value': 'NYC'},
         {'label': u'Montréal', 'value': 'MTL'},
         {'label': 'San Francisco', 'value': 'SF'}
      ],
      value='MTL'
   ),
	
   html.Label('Multi-Select Dropdown'),
   dcc.Dropdown(
      options=[
         {'label': 'New York City', 'value': 'NYC'},
         {'label': u'Montréal', 'value': 'MTL'},
         {'label': 'San Francisco', 'value': 'SF'}
      ],
      value=['MTL', 'SF'],
      multi=True
   ),
	
   html.Label('Radio Items'),
   dcc.RadioItems(
      options=[
         {'label': 'New York City', 'value': 'NYC'},
         {'label': u'Montréal', 'value': 'MTL'},
         {'label': 'San Francisco', 'value': 'SF'}
      ],
      value='MTL'
   ),
	
   html.Label('Checkboxes'),
   dcc.Checklist(
      options=[
         {'label': 'New York City', 'value': 'NYC'},
         {'label': u'Montréal', 'value': 'MTL'},
         {'label': 'San Francisco', 'value': 'SF'}
      ],
      values=['MTL', 'SF']
   ),

   html.Label('Text Input'),
   dcc.Input(value='MTL', type='text'),
	
   html.Label('Slider'),
   dcc.Slider(
      min=0,
      max=9,
      marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
      value=5,
   ),
], style={'columnCount': 2})

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

La sortie du programme ci-dessus est la suivante -

Appeler l'aide

Les composants Dash sont déclaratifs. Chaque aspect configurable de ces composants est défini lors de l'installation en tant qu'argument de mot-clé. Vous pouvez appeler l'aide de votre console Python sur l'un des composants pour en savoir plus sur un composant et ses arguments disponibles. Certains d'entre eux sont donnés ci-dessous -

>>> help(dcc.Dropdown)
Help on class Dropdown in module builtins:
class Dropdown(dash.development.base_component.Component)
| A Dropdown component.
| Dropdown is an interactive dropdown element for selecting one or more

| items.
| The values and labels of the dropdown items are specified in the `options`
| property and the selected item(s) are specified with the `value` property.
|
| Use a dropdown when you have many options (more than 5) or when you are
| constrained for space. Otherwise, you can use RadioItems or a Checklist,
| which have the benefit of showing the users all of the items at once.
|
| Keyword arguments:
| - id (string; optional)
| - options (list; optional): An array of options
| - value (string | list; optional): The value of the input. If `multi` is false (the default)
-- More --

Pour résumer, la disposition d'une application Dash décrit à quoi ressemble l'application. La mise en page est une arborescence hiérarchique de composants. La bibliothèque dash_html_components fournit des classes pour toutes les balises HTML et les arguments de mot-clé, et décrit les attributs HTML tels que style, className et id. La bibliothèque dash_core_components génère des composants de plus haut niveau tels que des contrôles et des graphiques.