CommencezCommencez gratuitement

Appliquer le principe DRY au style des composants Dash

Votre dernier tableau de bord profitait de composants réutilisables. Allons plus loin : utilisez une fonction utilitaire pour insérer des sauts de ligne et simplifier le style dupliqué grâce à une fonction de style partagée.

Les éléments de style communs que vous avez remarqués sont : 'display':'inline-block','margin':'0 auto','padding':'20px'

La fonction make_break() a été définie pour vous à la ligne 14. Elle prend un argument qui précise combien de balises HTML de saut de ligne créer et les retourne dans une liste.

Cette activité fait partie du cours

Créer des tableaux de bord avec Dash et Plotly

Voir le cours

Instructions de l’exercice

  • Créez une fonction appelée style_c() qui retournera un dictionnaire layout_style avec tous les éléments de style communs ('display':'inline-block','margin':'0 auto','padding':'20px') sous la ligne 21.
  • Utilisez la fonction make_break() pour insérer le nombre de sauts de ligne indiqué dans les commentaires sous les lignes 28, 31 et 29.
  • Utilisez la fonction style_c() pour ajouter du style au composant html.H2() sous la ligne 35.
  • Utilisez la fonction style_c() pour ajouter au style spécifique déjà présent sur le composant DatePickerSingle() sous la ligne 47.

Exercice interactif pratique

Essayez cet exercice en complétant ce code d’exemple.

from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
from datetime import datetime, date
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_sales['InvoiceDate'] = pd.to_datetime(ecom_sales['InvoiceDate'])

app = Dash()

def make_break(num_breaks):
    br_list = [html.Br()] * num_breaks
    return br_list

def add_logo():
    corp_logo = html.Img(
        src=logo_link, 
        style={'width':'75px','margin':'20px 20px 5px 5px','border':'1px dashed lightblue','display':'inline-block'})     
    return corp_logo

# Create a function to add corporate styling
def style_c():
    layout_style = {____}
    return layout_style

app.layout = [
  add_logo(),
  # Insert two HTML breaks
  ____,
  html.H1('Sales breakdowns'),
  # Insert three HTML breaks
  ____,
  html.Div([
    add_logo(),
    # Style using the styling function
    html.H2('Controls', style=____),
    add_logo(),
    html.H3('Sale Date Select'),
    # Insert two HTML breaks
    ____,
    dcc.DatePickerSingle(
      id='sale_date',
      min_date_allowed=ecom_sales.InvoiceDate.min(),
      max_date_allowed=ecom_sales.InvoiceDate.max(),
      initial_visible_month=date(2011, 4, 1),
      date=date(2011, 4, 11),
      # Add styling using the styling function
      style={'width':'200px'}.____(____))],
    style={'width':'350px', 'height':'350px', 'vertical-align':'top', 'border':'1px solid black',
           'display':'inline-block', 'margin':'0px 40px'}),
  html.Div([
    dcc.Graph(id='sales_cat'),
    html.H2('Daily Sales by Major Category', style={'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})],
    style={'width':'700px','display':'inline-block'}),
  add_logo()
]

@callback(
    Output(component_id='sales_cat', component_property='figure'),
    Input(component_id='sale_date', component_property='date')
)
def update_plot(input_date):
    sales = ecom_sales.copy(deep=True)
    if input_date:
        sales = sales[sales['InvoiceDate'] == input_date]
    ecom_bar_major_cat = sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
    bar_fig_major_cat = px.bar(
        title=f'Sales on: {input_date}',data_frame=ecom_bar_major_cat, orientation='h', 
        x='Total Sales ($)', y='Major Category')
    return bar_fig_major_cat

if __name__ == '__main__':
    app.run(debug=True)
Modifier et exécuter le code