Zacznij terazZacznij za darmo

Dodawanie listy HTML do Dash

Podczas pracy przy biurku ktoś z działu marketingu zobaczył twój ostatni dashboard i poprosił cię o stworzenie podobnego dla jego zespołu. Chcą wykresu słupkowego przedstawiającego najlepsze kategorie według łącznej wartości sprzedaży oraz listy poniżej, która pozwoli na szybki rzut oka na czołowe kategorie.

Mają też kilka uwag dotyczących stylu, ale wszystkie mieszczą się w zakresie twoich umiejętności zdobytych podczas pracy z HTML i Dash.

Twoim zadaniem jest rozbudowanie istniejącego dashboardu o listę najlepszych kategorii wraz z ich wolumenem sprzedaży.

To ćwiczenie jest częścią kursu

Tworzenie dashboardów z Dash i Plotly

Zobacz kurs

Instrukcje do ćwiczenia

  • Utwórz uporządkowaną listę poniżej wiersza 20 przy użyciu Dash.
  • Dodaj dwa elementy listy zawierające zmienne num1_cat i num2_cat wraz z ich wolumenem sprzedaży do uporządkowanej listy poniżej wiersza 22.
  • Dodaj podział wiersza poniżej wiersza 26, aby informacja o prawach autorskich pojawiła się w osobnym wierszu.

Interaktywne ćwiczenie praktyczne

Spróbuj tego ćwiczenia, uzupełniając ten przykładowy kod.

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)
Edytuj i uruchom kod