CommencezCommencez gratuitement

Ajouter une liste HTML à Dash

Alors que vous travaillez à votre poste, quelqu'un du service Marketing a vu le dernier petit tableau de bord que vous avez produit et vous a demandé d'en créer un pour eux. Ils souhaiteraient un diagramme à barres des catégories les plus performantes selon le montant total des ventes, avec en dessous une liste qui présente rapidement les meilleures catégories d'un seul coup d'œil.

Ils ont aussi quelques indications de style, mais tout semble à votre portée compte tenu de votre travail récent avec HTML et Dash.

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

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 liste ordonnée sous la ligne 20 en utilisant 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 l'avis de droit d'auteur apparaisse sur sa propre ligne.

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