Aan de slagBegin gratis

Een HTML-lijst toevoegen aan Dash

Terwijl je aan je bureau werkte, zag iemand van de Marketingafdeling het laatste dashboardje dat je hebt gemaakt en vroeg of je er ook een voor hen kunt maken. Ze willen een staafdiagram van de topcategorieën op basis van het totale verkoopbedrag, met daaronder een lijst die de belangrijkste categorieën in één oogopslag laat zien.

Ze hebben ook een paar stijlwensen, maar die vallen allemaal binnen jouw kennis, gezien je recente werk met HTML en Dash.

Jouw taak is om het dashboard dat je hebt gemaakt uit te breiden met een lijst van de topcategorieën en hun verkoopvolume.

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met Dash en Plotly

Bekijk cursus

Oefeninstructies

  • Maak onder regel 20 een genummerde lijst in Dash.
  • Voeg onder regel 22 twee lijstitems toe met de variabelen num1_cat en num2_cat en hun verkoopvolumes aan de genummerde lijst.
  • Voeg onder regel 26 een regeleinde toe zodat de copyrightvermelding op zichzelf staat.

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan te vullen.

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)
Code bewerken en uitvoeren