Začněte nyníZačněte zdarma

Přidání HTML seznamu do Dashe

Při práci u stolu si někdo z marketingového oddělení všiml posledního dashboardu, který jsi vytvořil/a, a požádal tě o nový. Chtějí sloupcový graf s nejprodávanějšími kategoriemi podle celkového objemu prodeje a pod ním seznam několika nejlepších kategorií pro rychlý přehled.

Mají také pár poznámek ke stylu, ale všechno by mělo být v rámci tvých znalostí z nedávné práce s HTML a Dashem.

Tvým úkolem je rozšířit stávající dashboard o seznam nejlepších kategorií a jejich objem prodeje.

Toto cvičení je součástí kurzu

Tvorba dashboardů s Dash a Plotly

Zobrazit kurz

Pokyny k cvičení

  • Pod řádkem 20 vytvoř pomocí Dashe seřazený seznam.
  • Pod řádkem 22 přidej do seřazeného seznamu dvě položky obsahující proměnné num1_cat a num2_cat s jejich objemy prodeje.
  • Pod řádkem 26 přidej zalomení řádku, aby se upozornění o autorských právech zobrazilo na samostatném řádku.

Interaktivní cvičení na vyzkoušení si v praxi

Vyzkoušejte si toto cvičení dokončením tohoto ukázkového kódu.

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)
Upravit a spustit kód