02 Dash - Mise en page

Introduction

Dash est une bibliothèque Python flexible et puissante qui permet de créer des applications web interactives. Dans ce cours, nous nous concentrerons sur la compréhension de la structure de l'application et l'exploration des composants HTML et Core de Dash. Vous apprendrez également à personnaliser vos applications avec CSS et à lier des fichiers CSS à votre projet Dash. Ce cours est conçu pour vous fournir les compétences nécessaires pour créer des interfaces utilisateur attrayantes et fonctionnelles pour vos applications de visualisation de données.

Objectifs

✅ Structurer des applications Dash ✅ Utiliser les composants HTML de Dash ✅ Explorer les composants Core de Dash ✅ Personnaliser avec CSS ✅ Lier des fichiers CSS à Dash ✅ Intégrer CSS directement dans le code Python

Sommaire

Mise en page Dash

La mise en page d'une application Dash spécifie la structure de l'application, y compris l'emplacement des composants. Dash fournit une variété de composants intégrés qui peuvent être utilisés pour créer différentes mises en page.

Code de base pour démarrer une application Dash :

from dash import Dash, html

app = Dash(__name__)

# Layout de base
app.layout = html.Div([])

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

Exploration des composants HTML Dash

1. Composants HTML de base

• Texte et Titres : html.H1 à html.H6, html.P
• Liens : html.A
• Listes : html.Ul, html.Ol, html.Li
• Images : html.Img
• Paragraphes et Divisions : html.P, html.Div

2. Exemples de code détaillés

Titres et textes :

app.layout = html.Div([
    html.H1("Titre Principal"),
    html.P("Ceci est un paragraphe décrivant le contenu de la page."),
    html.A("Lien vers la Wild Code School", href="https://www.wildcodeschool.com/")
])

Listes et images :

app.layout = html.Div([
    html.Ul([
        html.Li("Premier élément"),
        html.Li("Deuxième élément"),
        html.Li("Troisième élément")
    ]),
    html.Img(src="https://www.wildcodeschool.com/hs-fs/hubfs/booster-carriere.png?width=575&height=620&name=booster-carriere.png")
])

Utilisation des Composants Core de Dash

1. Composants Interactifs Core

• Graphiques : dcc.Graph
• Contrôles d'entrée : dcc.Input, dcc.Slider, dcc.RadioItems, dcc.Checklist
• Sélection de données : dcc.Dropdown, dcc.DatePickerRange, dcc.DatePickerSingle

2. Exemples de code détaillés

Graphique interactif avec liste de choix :

app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown-exemple',
        options=[{'label': i, 'value': i} for i in ['Option 1', 'Option 2']],
        value='Option 1'
    ),
    dcc.Graph(id='graph-exemple')
])

Contrôles d'entrée, slider et choix :

app.layout = html.Div([
    dcc.Input(id='input-exemple', type='text', value='Texte initial'),
    dcc.Slider(min=0, max=10, step=0.5, value=5),
    dcc.RadioItems(options=[{'label': i, 'value': i} for i in ['Option A', 'Option B']], value='Option A')
])

Personnalisation avec CSS dans Dash

A. Introduction au CSS

• CSS (Cascading Style Sheets) est un langage utilisé pour décrire la présentation d'un document écrit en HTML.
• Il permet de contrôler la couleur, la police, la disposition, et plus encore.

B. Structure de Base du CSS

• Sélecteurs : Spécifient à quel élément HTML le style s'applique.
• Propriétés et Valeurs : Définissent l'aspect des éléments (couleur, taille, marge, etc.).

Exemple de base :

h1 {
    color: blue;
    font-size: 24px;
}
.my-class {
    margin: 10px;
    padding: 5px;
}
#my-id {
    background-color: lightgray;
    border: 1px solid black;
}

Lier un Fichier CSS à Dash

• Les fichiers CSS peuvent être placés dans un dossier nommé assets à la racine de votre application Dash.
• Dash chargera automatiquement tout fichier CSS ou JavaScript contenu dans ce dossier.

Structure du projet :

- app.py
- assets/
    - style.css

Exemple de code CSS dans Dash

1. Création d'un Fichier CSS : assets/style.css

.header-title {
    color: navy;
    text-align: center;
}
.graph-style {
    border: 2px solid black;
    padding: 10px;
}

2. Utilisation dans Dash :

app.layout = html.Div([
    html.H1("Titre avec Style", className='header-title'),
    dcc.Graph(id='graph1', className='graph-style')
])

Ce code appliquera les styles définis dans style.css aux composants correspondants.

Exemple d'intégration de CSS directement dans le code python

app.layout = html.Div([
    html.H1(
        "Titre Principal",
        style={'textAlign': 'center', 'color': 'blue'}
    ),
    html.Div(
        "Ce texte est dans un Div.",
        style={'border': '2px solid black', 'padding': '10px'}
    ),
    html.Button(
        "Cliquez-moi",
        style={'backgroundColor': 'green', 'color': 'white', 'fontSize': 20}
    )
])

Dans cet exemple :

• Le titre (H1) est centré et coloré en bleu.
• Le Div contient un texte avec une bordure noire et un padding.
• Le Button a un fond vert, un texte blanc et une taille de police augmentée.

Ressources

Challenge

Maintenant, pratiquons ce que nous avons appris.

Récupérez les données depuis ce lien.

Création d'un graphique simple avec Plotly Express :

Utilisez Plotly Express pour créer un graphique en barres des 10 premiers livres, en affichant le nombre de pages par titre.

Construction du layout Dash :

Créez un layout Dash qui inclut :

• Un titre principal pour l'application.
• Le graphique Plotly Express que vous avez créé.
• Des composants Dash pour la sélection d'un auteur et la saisie d'un nombre maximal de pages (sans implémenter de callbacks, qui seront présentés lors de la prochaine quête).

Solution proposée

Dans ce fichier vous allez trouver une solution possible au challenge.