HTML dans Dash

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

Rappel sur HTML

 

  • HTML = langage pour structurer le contenu Web
    • Utilise des « tags » comme Div, H1>H6
  • Dash utilise des composants dash.html
    • La balise H1 est .H1()
    • La balise Div est .Div()
<div>
  <div style=
       "background-color: red; 
        width:250; height:250;">
  </div>
  <div style=
       "background-color: lightblue; 
        width:250; height:250;">
    <h1>This box</h1>
  </div>
</div>
Créer des tableaux de bord avec Dash et Plotly

Balises de structuration

 

  • Liste des balises HTML disponibles – documentation
  • Balises de structuration clés :
    • .Br() = Saut de ligne
    • .Img() = Insérer une image
Créer des tableaux de bord avec Dash et Plotly

Listes dans HTML Dash

 

  • .Ul() \ .Ol() et .Li() = Créer des listes
    • .Ul() pour liste non ordonnée (puces, comme ici)
    • .Ol() pour liste ordonnée (numérotée)
    • .Li() pour chaque élément de liste
Créer des tableaux de bord avec Dash et Plotly

Insérer un logo d'entreprise

 

app.layout = [

  html.Img(src='www.website.com/logo.png'),
  html.H1("Our Sales Dashboard")

]

 

Capture de l'angle supérieur gauche d'un navigateur Chrome où l'URL affiche l'adresse du serveur. Le navigateur montre le logo d'une entreprise, un losange rose « E-com global ». En dessous, un titre indique « Our Sales Dashboard ».

Créer des tableaux de bord avec Dash et Plotly

Balises de texte

 

Définir et formater le texte

  • .P() ou .Span() = Insérer du texte brut
    • Acceptent un argument children (liste de texte, .P() ou .Span())
  • .B() = texte en gras
  • .I() = texte en italique
Créer des tableaux de bord avec Dash et Plotly

Balises de texte HTML dans Dash

 

Mise en forme plus complexe :

app.layout = [
   html.H1("Our Sales Dashboard"),

   html.Span(children=[

   f"Prepared: {datetime.now().date()}",

   " by ", html.B("Jessie Parker, "),

   html.I("Data Scientist")

   ])

]

 

Capture du même coin supérieur gauche d'une fenêtre Chrome avec l'adresse du serveur dans la barre d'URL. Grand titre « our sales dashboard »; en dessous : « Prepared: 2021-06-27 by Jessie Parker, data scientist ». « Jessie Parker » est en gras et « data scientist » en italique.

Créer des tableaux de bord avec Dash et Plotly

Fractionner le texte

$$

app.layout = [
   html.H1("Our Sales Dashboard"),
   html.Span(children=[
   f"Prepared: {datetime.now().date()}", 
   html.Br(),
   " by ", html.B("Jessie Parker, "),
   html.Br(),
   html.I("Data Scientist")])
    ]

 

Capture du même tableau de bord que la diapo précédente. Grand titre « our sales dashboard »; en dessous : « Prepared: 2021-06-27 by Jessie Parker, data scientist ». « Jessie Parker » est en gras et « data scientist » en italique. Des sauts de ligne ont été ajoutés après la date et le nom.

Créer des tableaux de bord avec Dash et Plotly

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly

Preparing Video For Download...