ComeçarComece de graça

Adicionando uma lista HTML ao Dash

Enquanto você trabalhava na sua mesa, alguém do time de Marketing viu o último mini dashboard que você produziu e pediu para você criar um para eles. Eles gostariam de um gráfico de barras das principais categorias por valor total de vendas, com uma lista abaixo destacando as primeiras categorias para consulta rápida.

Eles também têm algumas observações de estilo, mas tudo parece dentro do que você já conhece, dado seu trabalho recente com HTML e Dash.

Sua tarefa é estender o dashboard que você criou para incluir uma lista das principais categorias e seus volumes de vendas.

Este exercício faz parte do curso

Construindo Dashboards com Dash e Plotly

Ver curso

Instruções do exercício

  • Crie uma lista ordenada abaixo da linha 20 usando Dash.
  • Adicione dois elementos de lista contendo as variáveis num1_cat e num2_cat com seus volumes de vendas à lista ordenada abaixo da linha 22.
  • Adicione uma quebra de linha abaixo da linha 26 para que o aviso de direitos autorais apareça sozinho.

Exercício interativo prático

Experimente este exercício completando este código de exemplo.

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)
Editar e executar o código