EmpezarEmpieza gratis

Añadir una lista HTML a Dash

Mientras trabajabas en tu mesa, alguien del departamento de Marketing vio el último mini panel que creaste y te pidió que hicieras uno para ellos. Quieren un gráfico de barras con las categorías principales por importe total de ventas, con una lista debajo que muestre las primeras categorías de un vistazo.

También tienen algunas indicaciones de estilo, pero todo parece estar dentro de lo que dominas, dado tu trabajo reciente con HTML y Dash.

Tu tarea es ampliar el panel que creaste para incluir una lista de las categorías principales y su volumen de ventas.

Este ejercicio forma parte del curso

Creación de paneles con Dash y Plotly

Ver curso

Instrucciones del ejercicio

  • Crea una lista ordenada debajo de la línea 20 usando Dash.
  • Añade dos elementos de lista que contengan las variables num1_cat y num2_cat con sus volúmenes de ventas a la lista ordenada debajo de la línea 22.
  • Añade un salto de línea debajo de la línea 26 para que el aviso de copyright aparezca en su propia línea.

ejercicio interactivo práctico

Prueba este ejercicio completando este código de ejemplo.

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 y ejecutar código