Ajouter une liste HTML à Dash

Alors que vous travaillez à votre bureau, quelqu’un du service Marketing a vu le petit tableau de bord que vous avez réalisé et vous a demandé d’en créer un pour eux. Ils souhaitent un diagramme en barres des catégories les plus performantes par montant total des ventes, avec, en dessous, une liste indiquant les principales catégories pour un coup d’œil rapide.

Ils ont aussi quelques indications de style, mais tout semble dans vos cordes, vu votre travail récent sur HTML et Dash.

Votre tâche est d’étendre le tableau de bord que vous avez créé pour y inclure une liste des principales catégories et de leur volume de ventes.

Cet exercice fait partie du cours

<cours>Créer des tableaux de bord avec Dash et Plotly</cours>

Voir le cours

Instructions de l’exercice

Créez une liste ordonnée sous la ligne 20 avec Dash.
Ajoutez deux éléments de liste contenant les variables num1_cat et num2_cat avec leurs volumes de ventes à la liste ordonnée sous la ligne 22.
Ajoutez un saut de ligne sous la ligne 26 afin que la mention de copyright apparaisse seule.

Exercice interactif pratique

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

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/2bac9433b0e904735feefa26ca913fba187c0d55/e_com_logo.png'
ecom_category = ecom_sales.groupby(['Major Category','Minor Category']).size().reset_index(name='Total Orders').sort_values(by='Total Orders', ascending=False).reset_index(drop=True)
num1_cat, num1_salesvol = ecom_category.loc[0].tolist()[1:3]
num2_cat, num2_salesvol = ecom_category.loc[1].tolist()[1:3]
ecom_bar = px.bar(ecom_category, x='Total Orders', y='Minor Category', color='Major Category')
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}})             

app = Dash()

app.layout = [
    html.Img(src=logo_link),
    html.H1('Top Sales Categories'),
    dcc.Graph(figure=ecom_bar),
    html.Span(children=[
    'The top 2 sales categories were:',
    # Set up an ordered list
    html.____(children=[
      	# Add two list elements with the top category variables
        html.____(children=[____, ' with ', num1_salesvol, ' sales volume']),
        html.____(children=[____, ' with ', num2_salesvol, ' sales volume'])
    ], style={'width':'350px', 'margin':'auto'}),
    # Add a line break before the copyright notice
    html.____(),
    html.I('Copyright E-Com INC')])
    ]

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

Modifier et exécuter le code